/* START: Default CSS */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&display=swap"); :root { /** @Font-Family Declaration */ --tj-ff-body: 'IBM Plex Sans', sans-serif; --tj-ff-heading: 'IBM Plex Sans', sans-serif; --tj-ff-fontawesome: "Font Awesome 6 Pro"; /** @Font-weight Declaration */ --tj-fw-normal: normal; --tj-fw-thin: 100; --tj-fw-elight: 200; --tj-fw-light: 300; --tj-fw-regular: 400; --tj-fw-medium: 500; --tj-fw-sbold: 600; --tj-fw-bold: 700; --tj-fw-ebold: 800; --tj-fw-black: 900; /** @Font-Size Declaration */ --tj-fs-body: 16px; --tj-fs-p: 16px; --tj-fs-h1: 72px; --tj-fs-h2: 48px; --tj-fs-h3: 32px; --tj-fs-h4: 24px; --tj-fs-h5: 20px; --tj-fs-h6: 18px; /** @Color Declaration */ --tj-color-common-white: #f7f7f7; --tj-color-common-white-2: #a9b0b8; --tj-color-common-black: #000000; --tj-color-common-black-2: #676e7a; --tj-color-common-black-3: #969ca5; --tj-color-heading-primary: #01001c; --tj-color-text-body: #364052; --tj-color-text-body-2: #7e8590; --tj-color-theme-primary: #1568f5; --tj-color-theme-dark: #06204d; --tj-color-theme-bg: #e1e8f0; --tj-color-theme-bg-2: #dfecfd; --tj-color-border-1: #27354d; --tj-color-border-2: #ced7e0; --tj-color-border-3: #d7d8db; --tj-color-red-1: #ff0000; } * { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; } body, html { position: relative; } body { font-family: var(--tj-ff-body); font-size: var(--tj-fs-body); font-weight: normal; color: var(--tj-color-text-body); background-color: var(--tj-color-common-white); line-height: 1.6; } body main { position: relative; z-index: 2; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { -ms-scroll-chaining: none; overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } .lenis.lenis-scrolling iframe { pointer-events: none; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--tj-ff-heading); color: var(--tj-color-heading-primary); margin-top: 0px; font-weight: var(--tj-fw-sbold); line-height: 1.2; letter-spacing: -0.025em; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } h1 { font-size: var(--tj-fs-h1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { h1 { font-size: 65px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { h1 { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { h1 { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h1 { font-size: 40px; } } @media (max-width: 575px) { h1 { font-size: 35px; } } h2 { font-size: var(--tj-fs-h2); } @media only screen and (min-width: 768px) and (max-width: 991px) { h2 { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h2 { font-size: 35px; } } @media (max-width: 575px) { h2 { font-size: 30px; } } h3 { font-size: var(--tj-fs-h3); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { h3 { font-size: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h3 { font-size: 24px; } } @media (max-width: 575px) { h3 { font-size: 22px; } } h4 { font-size: var(--tj-fs-h4); } @media only screen and (min-width: 992px) and (max-width: 1199px) { h4 { font-size: 22px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h4 { font-size: 20px; } } h5 { font-size: var(--tj-fs-h5); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h5 { font-size: 17px; } } h6 { font-size: var(--tj-fs-h6); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h6 { font-size: 16px; } } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; display: block; } h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a { font-size: inherit; color: inherit; font-weight: inherit; } ul { margin: 0px; padding: 0px; } a, .btn, button, span, p, input, select, textarea, li, img, svg path, *::after, *::before, h1, h2, h3, h4, h5, h6 { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus, button:focus:not(:focus-visible) { outline: 0; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } select, .nice-select, input:not([type=radio]):not([type=checkbox]), textarea { outline: none; background-color: var(--tj-color-common-white); height: auto; width: 100%; font-size: var(--tj-fs-body); border: 1px solid var(--tj-color-common-white); color: var(--tj-color-common-black); padding: 10px 15px; } input[type=color] { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } * { scrollbar-width: thin; scrollbar-color: var(--tj-color-theme-primary) var(--tj-color-theme-bg); } ::-webkit-scrollbar { height: 4px; width: 6px; } ::-webkit-scrollbar-thumb { background: var(--tj-color-theme-primary); -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: transparent; } *::-moz-selection { background: var(--tj-color-common-black); color: var(--tj-color-common-white); text-shadow: none; } ::-moz-selection { background: var(--tj-color-common-black); color: var(--tj-color-common-white); text-shadow: none; } ::selection { background: var(--tj-color-common-black); color: var(--tj-color-common-white); text-shadow: none; } *::-webkit-input-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *::-moz-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *:-ms-input-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *::-ms-input-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *::placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } /** Common Classes CSS */ .dark-bg { background-color: var(--tj-color-theme-dark); } .section-space { padding: 120px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-space { padding: 100px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-space { padding: 40px 0; } } .section-bottom-space { padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-bottom-space { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-bottom-space { padding-bottom: 80px; } } img { /* width: 100%; */ max-width: 100%; } .blog-images img { width: 100%; } .tj-post-thumb img{ width: 100%; height: auto } .w-img img { width: 100%; } .m-img img { max-width: 100%; } .fix { overflow: hidden; } .rg-30 { row-gap: 30px; } .rg-40 { row-gap: 40px; } .rg-50 { row-gap: 50px; } .rg-60 { row-gap: 60px; } .rg-70 { row-gap: 70px; } .rg-80 { row-gap: 80px; } .mt-30 { margin-top: 30px; } .mb-30 { margin-bottom: 30px; } .mt-40 { margin-top: 40px; } .mb-40 { margin-bottom: 40px; } .mt-50 { margin-top: 50px; } .mb-50 { margin-bottom: 50px; } .mt-60 { margin-top: 60px; } .mb-60 { margin-bottom: 60px; } .hover\:shine { overflow: hidden; position: relative; z-index: 1; } .hover\:shine::before { position: absolute; content: ""; top: 0; inset-inline-start: -140%; bottom: 0; width: 100%; background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, transparent), to(rgba(255, 255, 255, 0.3))); background-image: linear-gradient(to right, transparent 50%, rgba(255, 255, 255, 0.3) 100%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); -webkit-transition: 0.5s ease; transition: 0.5s ease; z-index: 1; } .hover\:shine:is(:hover, :focus-within)::before { -webkit-animation: shine 1s ease forwards; animation: shine 1s ease forwards; } .move-anim { -webkit-animation: move 5s linear infinite; animation: move 5s linear infinite; } .move-anim-2 { -webkit-animation: move-two 5s linear infinite; animation: move-two 5s linear infinite; } .zoominout { -webkit-animation: zoom-effect 3s linear infinite; animation: zoom-effect 3s linear infinite; } .wow { opacity: 0; } .svg-animate svg path { -webkit-animation-play-state: paused; animation-play-state: paused; opacity: 1; } /* START: Button CSS */ .tj-primary-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 15px; line-height: 1; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white); background-color: var(--tj-color-theme-dark); padding: 5.5px; border-radius: 50px; position: relative; z-index: 1; } .tj-primary-btn .btn_inner { position: relative; z-index: 1; padding: 15px 20px 15px 55px; width: 100%; text-align: center; } .tj-primary-btn .btn_inner::before { content: ""; position: absolute; z-index: 0; top: 0; inset-inline-start: 0; width: 45px; height: 100%; background-color: var(--tj-color-theme-primary); border-radius: 50px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-primary-btn .btn_inner .btn_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; position: absolute; inset-inline-start: 0; top: 0; min-width: 45px; height: 100%; z-index: 2; font-size: 1.6em; line-height: 1; color: var(--tj-color-common-white); } .tj-primary-btn .btn_inner .btn_icon > span { overflow: hidden; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .tj-primary-btn .btn_inner .btn_icon > span i:first-child, .tj-primary-btn .btn_inner .btn_icon > span i:last-child { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; transition: -webkit-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s; } .tj-primary-btn .btn_inner .btn_icon > span i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-primary-btn .btn_inner .btn_text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; color: var(--tj-color-common-white); text-shadow: 0 23px 0 currentColor; white-space: nowrap; } .tj-primary-btn .btn_inner .btn_text > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.5s; transition: 0.5s; } .tj-primary-btn.white-btn { background-color: var(--tj-color-common-white); } .tj-primary-btn.white-btn .btn_inner .btn_text { color: var(--tj-color-heading-primary); } .tj-primary-btn.white-btn:hover .btn_inner .btn_text { color: var(--tj-color-common-white); } .tj-primary-btn.header_btn { background-color: var(--tj-color-common-white); padding: 4.5px; } .tj-primary-btn.header_btn .btn_inner { padding: 12px 18px 12px 50px; } .tj-primary-btn.header_btn .btn_inner::before { width: 40px; } .tj-primary-btn.header_btn .btn_inner .btn_icon { min-width: 40px; font-size: 1.4em; } .tj-primary-btn.header_btn .btn_inner .btn_text { color: var(--tj-color-heading-primary); } .tj-primary-btn:hover .btn_inner::before { width: 100%; } .tj-primary-btn:hover .btn_inner .btn_icon i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-primary-btn:hover .btn_inner .btn_icon i:last-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .tj-primary-btn:hover .btn_inner .btn_text { color: var(--tj-color-common-white); } .tj-primary-btn:hover .btn_inner .btn_text > span { -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } @media (max-width: 575px) { .tj-primary-btn { padding: 4.5px; } .tj-primary-btn .btn_inner { padding: 12px 18px 12px 50px; } .tj-primary-btn .btn_inner::before { width: 40px; } .tj-primary-btn .btn_inner .btn_icon { min-width: 40px; font-size: 1.4em; } } .text-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; font-size: 15px; line-height: 1; font-weight: var(--tj-fw-bold); color: var(--tj-color-heading-primary); position: relative; z-index: 1; } .text-btn::before { position: absolute; content: ""; width: 100%; height: 1px; bottom: 0px; inset-inline-start: 0; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background-color: var(--tj-color-heading-primary); -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; } .text-btn i { position: relative; font-size: 1.3em; top: 1px; } .text-btn:hover::before { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .icon-btn { margin-top: 0; 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: 50px; height: 50px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--tj-color-common-white); background-color: var(--tj-color-heading-primary); overflow: hidden; } .icon-btn i, .icon-btn svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; color: var(--tj-color-common-white); } .icon-btn i { -webkit-transform: rotate(-45deg) translateX(0); -ms-transform: rotate(-45deg) translateX(0); transform: rotate(-45deg) translateX(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; text-shadow: -40px 0 0; } .icon-btn:hover i { -webkit-transform: rotate(-45deg) translateX(40px); -ms-transform: rotate(-45deg) translateX(40px); transform: rotate(-45deg) translateX(40px); } .icon-btn-2 { font-weight: var(--tj-fw-bold); color: var(--tj-color-theme-dark); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; gap: 8px; overflow: hidden; position: relative; } .icon-btn-2 .btn-icon { width: 50px; height: 50px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 22px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-dark); -webkit-transition: background-color 0.3s ease-in-out 0s; transition: background-color 0.3s ease-in-out 0s; } .icon-btn-2 .btn-text { -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); opacity: 0; visibility: hidden; white-space: nowrap; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .icon-btn-2:hover .btn-icon { background-color: var(--tj-color-theme-primary); } .icon-btn-2:hover .btn-text { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } .text-btn-2 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; font-size: 15px; line-height: 1; font-weight: var(--tj-fw-bold); color: var(--tj-color-heading-primary); position: relative; z-index: 1; } .text-btn-2 .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: 22px; height: 22px; border-radius: 50%; background-color: var(--tj-color-theme-dark); color: var(--tj-color-common-white); font-size: 18px; -webkit-transition: all 0.3s; transition: all 0.3s; } .text-btn-2 .icon i, .text-btn-2 .icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .text-btn-2 > *:nth-child(1) { -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); -webkit-margin-end: -28px; margin-inline-end: -28px; background-color: var(--tj-color-theme-primary); opacity: 0; } .text-btn-2 > *:nth-child(3) { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-margin-start: 0; margin-inline-start: 0; opacity: 1; } .text-btn-2:hover > *:nth-child(1) { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); -webkit-margin-end: 0; margin-inline-end: 0; opacity: 1; } .text-btn-2:hover > *:nth-child(3) { -webkit-transform: scale3d(0.5, 0.5, 1); transform: scale3d(0.5, 0.5, 1); -webkit-margin-start: -28px; margin-inline-start: -28px; opacity: 0; } /* !END: Button CSS */ /* START: Mouse CSS */ .cursor-outer { -webkit-margin-start: -15px; margin-inline-start: -15px; margin-top: -15px; width: 30px; height: 30px; border: 2px solid var(--tj-color-theme-primary); -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10000000; opacity: 0.5; -webkit-transition: all 0.08s ease-out; transition: all 0.08s ease-out; } .mouseCursor { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; pointer-events: none; border-radius: 50%; -webkit-transform: translateZ(0); transform: translateZ(0); visibility: hidden; text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mouseCursor { display: none; } } .cursor-inner { -webkit-margin-start: -3px; margin-inline-start: -3px; margin-top: -3px; width: 6px; height: 6px; z-index: 10000001; background-color: var(--tj-color-theme-primary); -webkit-transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: width 0.3s ease-in-out, height 0.3s ease-in-out, margin 0.3s ease-in-out, opacity 0.3s ease-in-out; } .cursor-inner span { color: var(--tj-color-common-white); line-height: 120px; opacity: 0; font-size: 15px; 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; gap: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cursor-inner span { line-height: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cursor-inner span { line-height: 50px; } } .cursor-inner.cursor-big span { opacity: 1; } .mouseCursor.cursor-big { width: 120px; height: 120px; -webkit-margin-start: -40px; margin-inline-start: -40px; margin-top: -40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .mouseCursor.cursor-big { width: 80px; height: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mouseCursor.cursor-big { width: 50px; height: 50px; } } .mouseCursor.cursor-big.cursor-outer { display: none; } .mouseCursor.cursor-big.d-none { display: none; } .project-slider-one, .slider-drag .swiper-slide { cursor: none; } .tj-cursor { position: fixed; z-index: 1000; top: 0; inset-inline-start: 0; width: 120px; height: 120px; 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: 8px; border-radius: 50%; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); pointer-events: none; opacity: 0; visibility: hidden; -webkit-transition: opacity 0.2s ease, visibility 0.2s ease; transition: opacity 0.2s ease, visibility 0.2s ease; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-cursor { width: 80px; height: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cursor { width: 50px; height: 50px; } } /* !END: Mouse CSS */ /* START: Preloader CSS */ .preloader { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; z-index: 1000; background-color: var(--tj-color-common-white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .loading-container, .loading { height: 100px; position: relative; width: 100px; border-radius: 100%; } .loading-container { margin: 40px auto; } .loading { border: 1px solid transparent; border-color: transparent var(--tj-color-theme-primary) transparent var(--tj-color-theme-primary); -webkit-animation: rotate-loading 1.5s linear 0s infinite normal; animation: rotate-loading 1.5s linear 0s infinite normal; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; } .loading-container:hover .loading, .loading-container .loading { -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #loading-icon { position: absolute; top: 50%; inset-inline-start: 50%; max-width: 100%; width: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @-webkit-keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate-loading { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /* END: Preloader CSS */ /* START: Header CSS */ .tj-header-area { position: relative; background-color: var(--tj-color-theme-dark); width: 100%; inset-inline-start: 0; top: 0; z-index: 97; } .tj-header-area.header-absolute { background-color: transparent; /* border-bottom: 1px solid var(--tj-color-border-1); */ position: absolute; z-index: 98; } .tj-header-area.header-duplicate { background-color: var(--tj-color-theme-dark); -webkit-box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.06); box-shadow: 0 0 15px 0 rgba(255, 255, 255, 0.06); position: fixed; z-index: 99; visibility: hidden; -webkit-transform: translateY(-120%); -ms-transform: translateY(-120%); transform: translateY(-120%); -webkit-transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: visibility 500ms ease, -webkit-transform 500ms ease; transition: transform 500ms ease, visibility 500ms ease; transition: transform 500ms ease, visibility 500ms ease, -webkit-transform 500ms ease; } .tj-header-area.sticky { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); visibility: visible; z-index: 100; } .tj-header-area.header-1 .menu_btn { color: var(--tj-color-common-white); -webkit-margin-start: 10px; margin-inline-start: 10px; } .tj-header-area.header-2 { border: none; } .tj-header-area.header-2 .header-bottom { padding: 23px 45px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-2 .header-bottom { padding: 20px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-2 .header-bottom { padding: 15px 0; } } .tj-header-area.header-2.header-absolute .header-wrapper { background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 0px 24px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-2.header-absolute .header-wrapper { padding: 10px 15px; } } .tj-header-area.header-2.header-duplicate .header-bottom { padding: 0px 15px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-2.header-duplicate .header-bottom { padding: 17px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-2.header-duplicate .header-bottom { padding: 15px 0; } } .tj-header-area.header-2 .header_right_info { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .tj-header-area.header-2 .header_right_info > * { position: relative; z-index: 1; } .tj-header-area.header-2 .header_right_info > *:not(:last-child) { -webkit-padding-end: 13px; padding-inline-end: 13px; -webkit-margin-end: 12px; margin-inline-end: 12px; } .tj-header-area.header-2 .header_right_info > *:not(:last-child)::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 12px; width: 1px; background-color: var(--tj-color-common-white); opacity: 0.2; } .tj-header-area.header-2 .header_search { color: var(--tj-color-common-white); } .tj-header-area.header-2 .header_search i { color: var(--tj-color-common-white); } .tj-header-area.header-2 .menu_btn { color: var(--tj-color-common-white); } .tj-header-area.header-3 { border: none; } .tj-header-area.header-3 .header-bottom { padding: 23px 45px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-3 .header-bottom { padding: 20px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-3 .header-bottom { padding: 15px 0; } } .tj-header-area.header-3.header-absolute .header-wrapper { background: var(--tj-color-common-white); padding: 0px 24px; border-radius: 80px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-3.header-absolute .header-wrapper { padding: 0 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-3.header-absolute .header-wrapper { padding: 10px 15px; } } .tj-header-area.header-3.header-duplicate .header-bottom { padding: 0px 45px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-3.header-duplicate .header-bottom { padding: 0px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-3.header-duplicate .header-bottom { padding: 15px 0; } } .tj-header-area.header-3.header-duplicate .header_right_info .header_search { color: var(--tj-color-common-white); } .tj-header-area.header-3.header-duplicate .header_right_info .header_search i { color: var(--tj-color-common-white); } .tj-header-area.header-3.header-duplicate .header_right_info .menu_btn { color: var(--tj-color-common-white); } .tj-header-area.header-3.header-duplicate .menu_btn { color: var(--tj-color-common-white); } .tj-header-area.header-3 .header_right_info { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .tj-header-area.header-3 .header_right_info > * { position: relative; z-index: 1; } .tj-header-area.header-3 .header_right_info > *:not(:last-child) { -webkit-padding-end: 13px; padding-inline-end: 13px; -webkit-margin-end: 12px; margin-inline-end: 12px; } .tj-header-area.header-3 .header_right_info > *:first-child::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 16px; width: 1px; background-color: var(--tj-color-border-2); } .tj-header-area.header-3 .header_right_info .header_search { color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); } .tj-header-area.header-3 .header_right_info .header_search i { color: var(--tj-color-heading-primary); } .tj-header-area.header-3 .mainmenu ul > li:hover > .mega-menu { top: calc(100% - 23px); } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-3 .mainmenu ul > li:hover > .mega-menu { top: calc(100% - 20px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-3 .mainmenu ul > li:hover > .mega-menu { top: calc(100% - 15px); } } .tj-header-area.header-6.header-duplicate .mainmenu ul:not(.sub-menu) > li > a { color: var(--tj-color-common-white); } .tj-header-area.header-6.header-duplicate .mainmenu ul:not(.sub-menu) > li.current-menu-ancestor > a, .tj-header-area.header-6.header-duplicate .mainmenu ul:not(.sub-menu) > li.current-menu-item > a, .tj-header-area.header-6.header-duplicate .mainmenu ul:not(.sub-menu) > li:hover > a { color: var(--tj-color-theme-primary); } .tj-header-area.header-6.header-duplicate .menu_btn { color: var(--tj-color-common-white); } .tj-header-area.header-6.header-duplicate .menu_btn .cubes span { border-color: var(--tj-color-common-white); } .header-topbar { position: relative; padding: 9px 45px; background-image: -webkit-linear-gradient(to right, #8bc2f8, #2a4ef0, #020955); background-image: linear-gradient(to right, #6db6ff, #0c34e9, #030a5b); z-index: 2; } .header-topbar_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 6px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .header-topbar { padding: 9px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-topbar { padding: 12px 0; } .header-topbar .header-topbar_wrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; row-gap: 10px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-topbar { display: none; } } .topbar_note { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; color: var(--tj-color-common-white); } .topbar_note > i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; font-size: 1.4em; } .topbar_note a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; font-weight: var(--tj-fw-bold); line-height: 1; } .topbar_note a > span { position: relative; } .topbar_note a > span::after { content: ""; position: absolute; bottom: -2px; inset-inline-end: 0; width: 100%; height: 1px; background-color: var(--tj-color-common-white); } .topbar_note a i { font-size: 1.1em; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; margin-top: 1px; } .topbar_note a:hover span::after { -webkit-animation: linehover 0.8s linear; animation: linehover 0.8s linear; } @media (max-width: 575px) { .topbar_note { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .topbar_infos { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .topbar_infos .info_item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; line-height: 1; color: var(--tj-color-common-white); } .topbar_infos .info_item:not(:last-child) { -webkit-border-end: 1px solid var(--tj-color-common-white); border-inline-end: 1px solid var(--tj-color-common-white); -webkit-padding-end: 13px; padding-inline-end: 13px; -webkit-margin-end: 12px; margin-inline-end: 12px; } .topbar_infos .info_item i, .topbar_infos .info_item span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .topbar_infos .info_item a { color: inherit; font-size: inherit; } .topbar_infos .info_item select, .topbar_infos .info_item .nice-select { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 6px; -moz-column-gap: 6px; column-gap: 6px; height: auto; background-color: transparent; padding: 0; font-size: 14px; line-height: 1; border-radius: 0; border: none; color: var(--tj-color-common-white); -webkit-padding-end: 17px; padding-inline-end: 17px; } .topbar_infos .info_item select::before, .topbar_infos .info_item .nice-select::before { content: "\e927"; font-family: "solvior-icons"; } .topbar_infos .info_item select::after, .topbar_infos .info_item .nice-select::after { inset-inline-end: 0; height: auto; width: auto; border: none; content: "\e91a"; font-family: "solvior-icons"; -webkit-transform: translateY(-50%) rotate(0); -ms-transform: translateY(-50%) rotate(0); transform: translateY(-50%) rotate(0); margin-top: 0; -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } .topbar_infos .info_item select.open::after, .topbar_infos .info_item .nice-select.open::after { -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .topbar_infos .info_item select .list, .topbar_infos .info_item .nice-select .list { color: var(--tj-color-heading-primary); width: 100%; border-radius: 0; } .topbar_infos .info_item select .list .option, .topbar_infos .info_item .nice-select .list .option { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; min-height: 30px; padding: 10px; background-color: transparent; } .topbar_infos .info_item select .list .option.selected, .topbar_infos .info_item .nice-select .list .option.selected { background-color: transparent; } @media (max-width: 575px) { .topbar_infos { text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; } .topbar_infos .info_item:not(:last-child) { -webkit-border-end: none; border-inline-end: none; -webkit-padding-end: 0; padding-inline-end: 0; -webkit-margin-end: 0; margin-inline-end: 0; } } .site-logo .logo { margin-top: 10px; margin-bottom: 10px; display: inline-block; max-width: 200px; width: 100%; } .header-bottom { padding: 0px 45px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-bottom { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-bottom { padding: 17px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header-bottom { padding: 15px 0; } } .header-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 15px; } .mainmenu ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 30px; } .mainmenu ul > li { position: relative; z-index: 1; } .mainmenu ul > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; font-size: 16px; color: var(--tj-color-common-white-2); padding: 32px 0; font-weight: var(--tj-fw-bold); line-height: 1; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } .mainmenu ul > li.menu-item-has-children > a::after, .mainmenu ul > li.has-dropdown > a::after { content: "\e91a"; font-family: "solvior-icons"; -webkit-transition: -webkit-transform 0.4s; transition: -webkit-transform 0.4s; transition: transform 0.4s; transition: transform 0.4s, -webkit-transform 0.4s; } .mainmenu ul > li.current-menu-ancestor > a, .mainmenu ul > li.current-menu-item > a, .mainmenu ul > li:hover > a { color: var(--tj-color-theme-primary); } .mainmenu ul > li:hover > a::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .mainmenu ul > li:hover > .sub-menu { visibility: visible; opacity: 1; top: 100%; pointer-events: inherit; } .mainmenu ul > li:hover > .sub-menu::before { width: 100%; } .mainmenu ul > li > .sub-menu { width: 230px; background: var(--tj-color-common-white); -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: start; text-align: start; gap: 0; position: absolute; padding: 10px 0; z-index: 9; top: 85%; -webkit-transition: 0.4s; transition: 0.4s; -webkit-box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); pointer-events: none; opacity: 0; visibility: hidden; } .mainmenu ul > li > .sub-menu::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 0; height: 3px; background: var(--tj-color-theme-primary); -webkit-transition: 0.6s; transition: 0.6s; } .mainmenu ul > li > .sub-menu > li { width: 100%; } .mainmenu ul > li > .sub-menu > li > a { width: 100%; padding: 12px 15px; color: var(--tj-color-text-body); line-height: 1.3; } .mainmenu ul > li > .sub-menu > li > a::before { position: absolute; content: ""; width: 0; height: 2px; background: var(--tj-color-theme-primary); top: 21px; inset-inline-start: 15px; -webkit-transition: 0.4s; transition: 0.4s; } .mainmenu ul > li > .sub-menu > li > a::after { position: absolute; inset-inline-end: 12px; } .mainmenu ul > li > .sub-menu > li.menu-item-has-children > a, .mainmenu ul > li > .sub-menu > li.has-dropdown > a { padding: 12px 28px 12px 15px; } .mainmenu ul > li > .sub-menu > li.menu-item-has-children > a::after, .mainmenu ul > li > .sub-menu > li.has-dropdown > a::after { content: "\e91c"; -webkit-transition: none; transition: none; } .mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a, .mainmenu ul > li > .sub-menu > li.current-menu-item > a, .mainmenu ul > li > .sub-menu > li:hover > a { color: var(--tj-color-theme-primary); -webkit-padding-start: 36px; padding-inline-start: 36px; -webkit-padding-end: 5px; padding-inline-end: 5px; } .mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a::before, .mainmenu ul > li > .sub-menu > li.current-menu-item > a::before, .mainmenu ul > li > .sub-menu > li:hover > a::before { width: 12px; } .mainmenu ul > li > .sub-menu > li.current-menu-ancestor > a::after, .mainmenu ul > li > .sub-menu > li.current-menu-item > a::after, .mainmenu ul > li > .sub-menu > li:hover > a::after { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .mainmenu ul > li > .sub-menu > li > .sub-menu { top: -15%; inset-inline-start: 100%; } .mainmenu ul > li > .sub-menu > li:hover > .sub-menu { top: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mainmenu ul { gap: 18px; } .mainmenu ul > li > a { -webkit-column-gap: 3px; -moz-column-gap: 3px; column-gap: 3px; } } .mainmenu.menu-3 ul > li > a { color: #676e7a; } .mainmenu.menu-3 ul > li.current-menu-ancestor > a, .mainmenu.menu-3 ul > li.current-menu-item > a, .mainmenu.menu-3 ul > li:hover > a { color: var(--tj-color-theme-primary); } .header_right_info { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header_right_info { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header_right_info { -webkit-margin-start: auto; margin-inline-start: auto; } } .header_contact { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .header_contact .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: 44px; height: 44px; border-radius: 50%; background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); font-size: 16px; line-height: 1; color: var(--tj-color-common-white); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .header_contact .text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; color: var(--tj-color-common-white); } .header_contact:hover .icon { background-color: var(--tj-color-theme-primary); } .header_search { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; color: var(--tj-color-common-white); font-size: 16px; font-weight: var(--tj-fw-bold); line-height: 1; background-color: transparent; border: none; outline: none; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; } .header_search i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-common-white); line-height: 1; font-size: 18px; } .header_search:hover { color: var(--tj-color-theme-primary); } .header_search:hover i { color: var(--tj-color-theme-primary); } .menu_btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: 16px; font-weight: var(--tj-fw-bold); line-height: 1; color: var(--tj-color-heading-primary); } .menu_btn i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; font-size: 22px; } .sidebar-menu { 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; } .sidebar-menu .menu-btn { font-size: 16px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-bold); } .sidebar-menu .menu-btn span { font-size: 20px; } .tj-header-area.header-5 { border-color: var(--tj-color-border-2); } .tj-header-area.header-5 .mainmenu { -webkit-margin-end: 185px; margin-inline-end: 185px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tj-header-area.header-5 .mainmenu { -webkit-margin-end: 100px; margin-inline-end: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-5 .mainmenu { -webkit-margin-end: 60px; margin-inline-end: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-5 .mainmenu { -webkit-margin-end: 0; margin-inline-end: 0; } } .tj-header-area.header-5 .mainmenu ul > li > a { color: var(--tj-color-heading-primary); } .tj-header-area.header-5 .mainmenu ul > li > a:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-5 .mainmenu ul > li.current-menu-ancestor > a, .tj-header-area.header-5 .mainmenu ul > li.current-menu-item > a, .tj-header-area.header-5 .mainmenu ul > li:hover > a { color: var(--tj-color-theme-primary); } .tj-header-area.header-5 .header_search { color: var(--tj-color-heading-primary); } .tj-header-area.header-5 .header_search i { color: var(--tj-color-heading-primary); } .tj-header-area.header-5 .header_search:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-5 .header_search:hover i { color: var(--tj-color-theme-primary); } .tj-header-area.header-5 .tj-primary-btn { padding: 5px; } .tj-header-area.header-5 .tj-primary-btn .btn_inner { padding: 12px 18px 12px 50px; } .tj-header-area.header-5 .tj-primary-btn .btn_inner::before { width: 40px; } .tj-header-area.header-5 .tj-primary-btn .btn_inner .btn_icon { min-width: 40px; font-size: 1.4em; } .tj-header-area.header-5 .tj-primary-btn:hover .btn_inner::before { width: 100%; } .tj-header-area.header-5 .menu_btn { -webkit-margin-start: 10px; margin-inline-start: 10px; } .cubes { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; width: 21px; gap: 2px; } .cubes span { width: 9px; height: 9px; border-radius: 3px; border: 2px solid var(--tj-color-theme-dark); } .cubes span:nth-child(2) { -webkit-box-shadow: inset 0 0 0 2px var(--tj-color-theme-dark); box-shadow: inset 0 0 0 2px var(--tj-color-theme-dark); border: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .tj-header-area.header-1 .menu_btn .cubes span, .tj-header-area.header-2 .menu_btn .cubes span, .tj-header-area.header-duplicate .menu_btn .cubes span { border-color: var(--tj-color-common-white); } .tj-header-area.header-1 .menu_btn .cubes span:nth-child(2), .tj-header-area.header-2 .menu_btn .cubes span:nth-child(2), .tj-header-area.header-duplicate .menu_btn .cubes span:nth-child(2) { -webkit-box-shadow: inset 0 0 0 2px var(--tj-color-common-white); box-shadow: inset 0 0 0 2px var(--tj-color-common-white); } .menu_btn:hover .cubes span:nth-child(2) { -webkit-animation: bounceTwice 0.6s linear forwards; animation: bounceTwice 0.6s linear forwards; } @-webkit-keyframes bounceTwice { 0% { -webkit-transform: rotate(45deg) translateY(0); transform: rotate(45deg) translateY(0); } 25% { -webkit-transform: rotate(0deg) translateY(-3px); transform: rotate(0deg) translateY(-3px); } 50% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } 75% { -webkit-transform: rotate(0deg) translateY(-3px); transform: rotate(0deg) translateY(-3px); } 100% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } } @keyframes bounceTwice { 0% { -webkit-transform: rotate(45deg) translateY(0); transform: rotate(45deg) translateY(0); } 25% { -webkit-transform: rotate(0deg) translateY(-3px); transform: rotate(0deg) translateY(-3px); } 50% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } 75% { -webkit-transform: rotate(0deg) translateY(-3px); transform: rotate(0deg) translateY(-3px); } 100% { -webkit-transform: rotate(0deg) translateY(0); transform: rotate(0deg) translateY(0); } } /* !END: Header CSS */ /* START: Mega Menu CSS */ .gap-60-25 { --bs-gutter-x: 60px; } .gap-60-25 .row { --bs-gutter-x: 25px; --bs-gutter-y: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .gap-60-25 .row { --bs-gutter-y: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .gap-60-25 { --bs-gutter-x: 0; } .gap-60-25 .row { --bs-gutter-x: 0; --bs-gutter-y: 20px; } } .gap-30-30 { --bs-gutter-x: 30; } .gap-30-30 .row { --bs-gutter-x: 30px; --bs-gutter-y: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .gap-30-30 { --bs-gutter-x: 20px; } .gap-30-30 .row { --bs-gutter-y: 20px; } } .mainmenu ul > li:has(.mega-menu), .mobile_menu ul > li:has(.mega-menu) { position: static; } .mainmenu ul > li > .mega-menu, .mobile_menu ul > li > .mega-menu { max-width: 1920px; width: 100%; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); padding: 30px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu, .mobile_menu ul > li > .mega-menu { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .mainmenu ul > li > .mega-menu li, .mobile_menu ul > li > .mega-menu li { -webkit-padding-start: 0 !important; padding-inline-start: 0 !important; } } .mainmenu ul > li > .mega-menu::before, .mobile_menu ul > li > .mega-menu::before { display: none; } .mainmenu ul > li > .mega-menu .container-fluid, .mobile_menu ul > li > .mega-menu .container-fluid { max-width: 1920px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; width: 100%; } .mainmenu ul > li > .mega-menu .col-xl-3, .mobile_menu ul > li > .mega-menu .col-xl-3 { width: 20%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mainmenu ul > li > .mega-menu .col-xl-3, .mobile_menu ul > li > .mega-menu .col-xl-3 { width: 25%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu .col-xl-3, .mobile_menu ul > li > .mega-menu .col-xl-3 { width: 100%; } } .mainmenu ul > li > .mega-menu-pages, .mobile_menu ul > li > .mega-menu-pages { width: calc(100% - 30px); max-width: 1320px; padding: 0; margin: 0 auto; } .mainmenu ul > li > .mega-menu-pages .mega-menu-wrapper, .mobile_menu ul > li > .mega-menu-pages .mega-menu-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-pages .mega-menu-wrapper, .mobile_menu ul > li > .mega-menu-pages .mega-menu-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single { width: 315px; -webkit-border-start: 1px solid var(--tj-color-border-2); border-inline-start: 1px solid var(--tj-color-border-2); padding: 30px 30px 20px; } .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:first-child, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:first-child { -webkit-border-start: 0; border-inline-start: 0; } .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child { width: 377px; padding: 15px 15px; -webkit-padding-start: 0; padding-inline-start: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child { width: 350px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child { width: 100%; padding: 0; } } .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .tj-sidebar-cta, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .tj-sidebar-cta { height: 460px; } @media (max-width: 575px) { .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single .tj-sidebar-cta, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single .tj-sidebar-cta { height: 400px; padding: 30px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single { width: 100%; padding: 20px 0; -webkit-border-start: 0; border-inline-start: 0; } } .mainmenu ul > li > .mega-menu-pages .mega-menu-title, .mobile_menu ul > li > .mega-menu-pages .mega-menu-title { font-size: 16px; font-family: var(--tj-ff-body); padding-bottom: 10px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-pages .mega-menu-title, .mobile_menu ul > li > .mega-menu-pages .mega-menu-title { color: var(--tj-color-common-white); } } .mainmenu ul > li > .mega-menu-pages .mega-menu-title::before, .mobile_menu ul > li > .mega-menu-pages .mega-menu-title::before { position: absolute; content: ""; width: 32px; height: 3px; background: var(--tj-color-border-2); bottom: 0px; inset-inline-start: 0; } .mainmenu ul > li > .mega-menu-pages .mega-menu-title::after, .mobile_menu ul > li > .mega-menu-pages .mega-menu-title::after { position: absolute; content: ""; width: 4px; height: 3px; background: var(--tj-color-common-white); bottom: 0px; inset-inline-start: 20px; } .mainmenu ul > li > .mega-menu-pages .mega-menu-list, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .mainmenu ul > li > .mega-menu-pages .mega-menu-list a, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a { font-weight: var(--tj-fw-bold); color: var(--tj-color-common-black-2); padding: 12px 0; line-height: 1; position: relative; } .mainmenu ul > li > .mega-menu-pages .mega-menu-list a:has(.mega-menu-badge), .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a:has(.mega-menu-badge) { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mainmenu ul > li > .mega-menu-pages .mega-menu-list a::before, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a::before { position: absolute; content: ""; width: 0; height: 2px; background: var(--tj-color-theme-primary); top: 21px; inset-inline-start: 0; -webkit-transition: 0.4s; transition: 0.4s; } .mainmenu ul > li > .mega-menu-pages .mega-menu-list a:hover, .mainmenu ul > li > .mega-menu-pages .mega-menu-list a.active, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a:hover, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a.active { color: var(--tj-color-theme-primary); -webkit-padding-start: 20px; padding-inline-start: 20px; } .mainmenu ul > li > .mega-menu-pages .mega-menu-list a:hover::before, .mainmenu ul > li > .mega-menu-pages .mega-menu-list a.active::before, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a:hover::before, .mobile_menu ul > li > .mega-menu-pages .mega-menu-list a.active::before { width: 12px; } .mainmenu ul > li > .mega-menu .mega-menu-badge, .mobile_menu ul > li > .mega-menu .mega-menu-badge { font-size: 10px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); padding: 3px 7px; border-radius: 40px; } .mainmenu ul > li > .mega-menu .mega-menu-badge-hot, .mobile_menu ul > li > .mega-menu .mega-menu-badge-hot { background-color: var(--tj-color-red-1); } .mainmenu ul > li > .mega-menu-service, .mobile_menu ul > li > .mega-menu-service { width: 346px; -webkit-margin-start: -25px; margin-inline-start: -25px; padding: 15px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-service, .mobile_menu ul > li > .mega-menu-service { width: 100%; -webkit-margin-start: 0; margin-inline-start: 0; } } .mainmenu ul > li > .mega-menu-service::before, .mobile_menu ul > li > .mega-menu-service::before { display: none; } .mainmenu ul > li > .mega-menu-service li a, .mobile_menu ul > li > .mega-menu-service li a { padding: 15px 25px; border-bottom: 1px solid var(--tj-color-border-2); } .mainmenu ul > li > .mega-menu-service li:last-child a, .mobile_menu ul > li > .mega-menu-service li:last-child a { border-bottom: 0; } .mainmenu ul > li > .mega-menu-service li:hover a, .mobile_menu ul > li > .mega-menu-service li:hover a { -webkit-padding-start: 25px; padding-inline-start: 25px; } .mainmenu ul > li > .mega-menu-service li:hover a::before, .mobile_menu ul > li > .mega-menu-service li:hover a::before { display: none; } .mainmenu ul > li > .mega-menu-service-single, .mobile_menu ul > li > .mega-menu-service-single { gap: 12px; } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-icon, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-icon { width: 54px; height: 54px; 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: 50%; position: relative; z-index: 2; text-align: center; background-color: var(--tj-color-theme-bg); color: var(--tj-color-theme-primary); font-size: 40px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: 0.4s ease-in-out 0s; transition: 0.4s ease-in-out 0s; } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-title, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-title { line-height: 1.375; max-width: 152px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-title, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-title { max-width: 156px; } } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; overflow: hidden; position: relative; min-width: 45px; height: 100%; z-index: 2; font-size: 1.6em; line-height: 1; color: var(--tj-color-theme-dark); -webkit-transform: rotate(-45deg) translate(23px, 25px); -ms-transform: rotate(-45deg) translate(23px, 25px); transform: rotate(-45deg) translate(23px, 25px); opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav { color: var(--tj-color-common-white); -webkit-transform: rotate(-45deg) translate(56px, 73px); -ms-transform: rotate(-45deg) translate(56px, 73px); transform: rotate(-45deg) translate(56px, 73px); } } @media (max-width: 575px) { .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav { color: var(--tj-color-common-white); -webkit-transform: rotate(-45deg) translate(-1px, 19px); -ms-transform: rotate(-45deg) translate(-1px, 19px); transform: rotate(-45deg) translate(-1px, 19px); } } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav i, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav i { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; transition: -webkit-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s; } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav i:last-child, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:first-child, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .mainmenu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:last-child, .mobile_menu ul > li > .mega-menu-service-single .mega-menu-service-nav:hover i:last-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .mainmenu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon, .mobile_menu ul > li > .mega-menu-service-single:hover .mega-menu-service-icon { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .mainmenu ul > li > .mega-menu-service-single:hover .mega-menu-service-nav, .mobile_menu ul > li > .mega-menu-service-single:hover .mega-menu-service-nav { opacity: 1; } .tj-demo-wrapper { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-demo-wrapper { margin-bottom: 0px; } } .tj-demo-top-content { 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; row-gap: 20px; margin-bottom: 50px; } .tj-demo-top-title { font-size: 32px; margin-bottom: 0; } .tj-demo-top-title span { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-demo-top-title { font-size: 28px; } } @media (max-width: 575px) { .tj-demo-top-title { font-size: 24px; } } .tj-demo-thumb { padding: 9px 9px 20px; position: relative; z-index: 1; border: 1px solid var(--tj-color-border-2); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-demo-thumb { border-color: var(--tj-color-border-1); } } .tj-demo-thumb .image { max-width: 596px; width: 100%; margin-bottom: 20px; position: relative; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 12px; } .tj-demo-thumb .image::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: var(--tj-color-theme-dark); opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; } .tj-demo-thumb .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-demo-thumb .image { max-width: 100%; } } .tj-demo-thumb .tj-demo-title { color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-sbold); font-size: 16px; text-align: center; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-demo-thumb .tj-demo-title { font-size: 14px; } } .tj-demo-thumb .tj-demo-title a { color: var(--tj-color-heading-primary); } .tj-demo-thumb .tj-demo-title a:hover { color: var(--tj-color-theme-primary); } .tj-demo-thumb:not(.coming):hover .image::before { opacity: 0.6; visibility: visible; } .tj-demo-thumb:not(.coming):hover .tj-demo-button { top: 50%; opacity: 1; visibility: visible; } @media (max-width: 575px) { .tj-demo-thumb { padding: 15px 15px 25px; } } .tj-demo-thumb.coming .image::before { display: none; } .tj-demo-thumb .tj-demo-badge { font-size: 14px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-common-white); background-color: var(--tj-color-red-1); padding: 3px 7px; border-radius: 40px; position: absolute; inset-inline-start: 11px; top: 11px; } .tj-demo-button { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; visibility: hidden; -webkit-transition: ease-out 0.4s; transition: ease-out 0.4s; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu li a, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; float: none; border-bottom: 0; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu li a:has(.mega-menu-badge), .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a:has(.mega-menu-badge) { gap: 5px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu li a.tj-primary-btn, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a.tj-primary-btn { padding: 4.5px; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu li a .mega-menu-badge, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a .mega-menu-badge { font-size: 10px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); padding: 3px 7px; border-radius: 40px; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu li a .mega-menu-badge-hot, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service a .mega-menu-badge-hot { background-color: var(--tj-color-red-1); } .hamburger_menu .mean-container .mean-nav ul li .mega-menu li .tj-demo-title a, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service .tj-demo-title a { padding: 0; text-align: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service li, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li { -webkit-padding-start: 0 !important; padding-inline-start: 0 !important; } } .hamburger_menu .mean-container .mean-nav ul li .mega-menu-service li a, .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a { border-bottom: 1px solid var(--tj-color-border-1); } .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li .mega-menu-title::after { background-color: var(--tj-color-theme-dark); } .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a:not(.tj-primary-btn) { width: 100%; padding: 18px 0; text-transform: capitalize; color: var(--tj-color-common-white); border-bottom: 1px solid var(--tj-color-border-1); } .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a:not(.tj-primary-btn)::before { display: none; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li a:not(.tj-primary-btn):hover { color: var(--tj-color-text-body); padding: 18px 0; } .hamburger_menu .mean-container .mean-nav ul li .mega-menu-pages li .cta-btn .tj-primary-btn { width: auto; } /* !END: Mega Menu CSS */ /* START: Search CSS */ .search_popup { position: fixed; top: 0; inset-inline-start: 0; width: 100%; background-color: var(--tj-color-theme-dark); z-index: 100; padding-top: 60px; padding-bottom: 90px; opacity: 0; -webkit-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; z-index: 9999; } .search_popup .search_close { position: absolute; top: 36px; inset-inline-end: 36px; } .search_popup .search_close .search_close_btn { font-size: 24px; line-height: 1; color: var(--tj-color-common-white); } .search_popup .search_close .search_close_btn svg { width: 24px; height: 24px; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .search_popup .search_close .search_close_btn svg path { fill: var(--tj-color-common-white); } .search_popup .search_close .search_close_btn svg:hover { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); } .search_popup .search_close .search_close_btn svg:hover path { fill: var(--tj-color-theme-primary); } .search_popup.search-opened { opacity: 1; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); -webkit-transition-delay: 0s; transition-delay: 0s; } .search_popup.search-opened .search_form .search_input { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .search_popup.search-opened .search_form .search_input::after { width: 100%; -webkit-transition-delay: 0.5s; transition-delay: 0.5s; } .tj_search_wrapper .search_form form .search_input { position: relative; z-index: 1; } .tj_search_wrapper .search_form form .search_input .title { color: var(--tj-color-common-white); margin-bottom: 30px; } .tj_search_wrapper .search_form form .search_input .search-box { position: relative; z-index: 1; } .tj_search_wrapper .search_form form .search_input .search-box input[type=search] { width: 100%; font-family: var(--tj-ff-body); color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); background: transparent; padding: 20px 75px 20px 24px; } .tj_search_wrapper .search_form form .search_input .search-box input[type=search]::-webkit-input-placeholder { color: var(--tj-color-common-white-2); } .tj_search_wrapper .search_form form .search_input .search-box input[type=search]::-moz-placeholder { color: var(--tj-color-common-white-2); } .tj_search_wrapper .search_form form .search_input .search-box input[type=search]:-ms-input-placeholder { color: var(--tj-color-common-white-2); } .tj_search_wrapper .search_form form .search_input .search-box input[type=search]::-ms-input-placeholder { color: var(--tj-color-common-white-2); } .tj_search_wrapper .search_form form .search_input .search-box input[type=search]::placeholder { color: var(--tj-color-common-white-2); } .tj_search_wrapper .search_form form .search_input .search-box button { 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; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-width: 62px; font-size: 22px; line-height: 1; color: var(--tj-color-common-white); -webkit-border-start: 1px solid var(--tj-color-border-1); border-inline-start: 1px solid var(--tj-color-border-1); width: 100%; height: 100%; } .tj_search_wrapper .search_form form .search_input .search-box button i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .search-popup-overlay { position: fixed; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: 99; -webkit-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .search-popup-overlay.opened { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } /* !END: Search CSS */ /* START: Hamburger CSS */ .hamburger-area { position: fixed; inset-inline-end: -490px; top: 0; width: 450px; height: 100%; -webkit-box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5); box-shadow: -5px 0 20px -5px rgba(0, 0, 0, 0.5); -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); -webkit-transition-duration: 1s; transition-duration: 1s; z-index: 9999; -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; } .hamburger-area::-webkit-scrollbar { display: none; } .hamburger-area.opened { inset-inline-end: 0px; } @media (max-width: 575px) { .hamburger-area { width: 320px; } } .hamburger_bg { height: 100%; width: 100%; position: absolute; top: 0; inset-inline-start: 0; background-color: var(--tj-color-theme-dark); z-index: -1; -webkit-backdrop-filter: blur(37px); backdrop-filter: blur(37px); } .hamburger_wrapper { position: relative; padding: 45px 45px 90px 45px; overflow: auto; height: 100%; } @media (max-width: 575px) { .hamburger_wrapper { padding: 40px 20px 60px 20px; } } .hamburger_top { margin-bottom: 40px; } .hamburger_close_btn { display: inline-block; font-size: 35px; line-height: 1; color: var(--tj-color-common-white); } @media (max-width: 575px) { .hamburger_close_btn { font-size: 30px; } } .hamburger_close_btn:hover { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); color: var(--tj-color-theme-primary); } .hamburger_search { position: relative; margin-bottom: 30px; } .hamburger_search select, .hamburger_search .nice-select, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]), .hamburger_search input { width: 100%; height: 60px; line-height: 60px; padding: 0 25px; background: rgba(247, 247, 247, 0.1); border: none; outline: none; font-size: 18px; color: var(--tj-color-common-white); } .hamburger_search select::-ms-input-placeholder, .hamburger_search .nice-select::-ms-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .hamburger_search input::-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } .hamburger_search select::-webkit-input-placeholder, .hamburger_search .nice-select::-webkit-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .hamburger_search input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.6); } .hamburger_search select::-moz-placeholder, .hamburger_search .nice-select::-moz-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .hamburger_search input::-moz-placeholder { color: rgba(255, 255, 255, 0.6); } .hamburger_search select:-ms-input-placeholder, .hamburger_search .nice-select:-ms-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .hamburger_search input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } .hamburger_search select::-ms-input-placeholder, .hamburger_search .nice-select::-ms-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .hamburger_search input::-ms-input-placeholder { color: rgba(255, 255, 255, 0.6); } .hamburger_search select::placeholder, .hamburger_search .nice-select::placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .hamburger_search input::placeholder { color: rgba(255, 255, 255, 0.6); } .hamburger_search button { position: absolute; top: 50%; inset-inline-end: 25px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tj-color-common-white); } .hamburger_menu { display: block; width: 100%; } .hamburger_menu .mean-container .mean-bar { background: transparent; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom: 30px; } .hamburger_menu .mean-container .mean-bar * { -webkit-box-sizing: border-box; box-sizing: border-box; } .hamburger_menu .mean-nav { background: transparent; margin-top: 0; overflow: hidden; } .hamburger_menu .mean-nav > ul { display: block !important; } .hamburger_menu .mean-nav > ul > li:first-child > a { border-top: none; } .hamburger_menu .mean-nav ul li { position: relative; } .hamburger_menu .mean-nav ul li a { color: var(--tj-color-common-white); width: 100%; padding: 18px 0; border-top: none; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-weight: var(--tj-fw-bold); font-size: 16px; line-height: 1; text-transform: capitalize; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .hamburger_menu .mean-nav ul li a:hover { color: var(--tj-color-text-body); } .hamburger_menu .mean-nav ul li a.mean-expand { padding: 0; width: 30px; height: 30px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 1em; position: absolute; inset-inline-end: 0; top: 10px; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .hamburger_menu .mean-nav ul li a.mean-expand:hover { color: var(--tj-color-common-white); } .hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked { color: var(--tj-color-theme-primary); -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .hamburger_menu .mean-nav ul li .sub-menu li { -webkit-padding-start: 25px; padding-inline-start: 25px; position: relative; } .hamburger_menu .mean-nav ul li .sub-menu li a { width: 100%; padding: 18px 0; text-transform: capitalize; } .hamburger_menu .mean-nav ul li .sub-menu li a.mean-expand { padding: 0; width: 30px; } .hamburger_menu .mean-nav ul li.dropdown-opened > a { color: var(--tj-color-theme-primary); } .hamburger-title { color: var(--tj-color-common-white); font-size: 25px; margin-bottom: 20px; position: relative; z-index: 1; } .contact-info { margin-bottom: 50px; } .contact-info .contact_item { padding-top: 20px; } .contact-info .contact_item:first-child { border-top: 1px solid rgba(255, 255, 255, 0.1); } .contact-info .contact_item .subtitle { display: block; color: var(--tj-color-common-black-3); font-size: 15px; line-height: 1; margin-bottom: 8px; } .contact-info .contact_item .text { color: var(--tj-color-common-white); font-size: 18px; line-height: 1; } .contact-info .contact_item .text a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: inherit; } .contact-info .contact_item .text a:hover { color: var(--tj-color-theme-primary); } .hamburger-socials ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .hamburger-socials ul li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; color: var(--tj-color-heading-primary); background: rgba(247, 247, 247, 0.3); font-size: 16px; line-height: 1; } .hamburger-socials ul li a i { color: var(--tj-color-heading-primary); } .hamburger-socials ul li a:hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .hamburger-socials ul li a:hover i { color: var(--tj-color-common-white); } .hamburger_logo .mobile_logo { display: inline-block; max-width: 120px; width: 100%; } .menu-bar button { height: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; -webkit-transform-origin: center center; -ms-transform-origin: center center; transform-origin: center center; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); cursor: pointer; -webkit-transition: -webkit-transform 300ms ease; transition: -webkit-transform 300ms ease; transition: transform 300ms ease; transition: transform 300ms ease, -webkit-transform 300ms ease; } .menu-bar button span { height: 3px; width: 35px; display: block; background: var(--tj-color-common-white); cursor: pointer; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; -webkit-margin-start: auto; margin-inline-start: auto; } .menu-bar button span:nth-child(2) { width: 40px; -webkit-transition-delay: 200ms; transition-delay: 200ms; } .menu-bar button span:nth-child(3) { width: 30px; } .menu-bar button span:nth-child(4) { position: absolute; top: -8px; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 3px; height: 0; -webkit-transition: height 400ms; transition: height 400ms; } .menu-bar.style-2 button span { background: var(--tj-color-heading-primary); } .menu-bar.menu-bar-toggeled button { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition-delay: 400ms; transition-delay: 400ms; } .menu-bar.menu-bar-toggeled button span:nth-child(1) { width: 0; } .menu-bar.menu-bar-toggeled button span:nth-child(3) { width: 0; } .menu-bar.menu-bar-toggeled button span:nth-child(4) { height: 40px; -webkit-transition: height 200ms ease; transition: height 200ms ease; -webkit-transition-delay: 200ms; transition-delay: 200ms; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .menu-bar { -webkit-margin-start: 0; margin-inline-start: 0; } } .body-overlay { height: 100%; width: 100%; position: fixed; top: 0; z-index: 9999; inset-inline-start: 0; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .body-overlay.opened { opacity: 1; visibility: visible; } /* !END: Hamburger CSS */ /* START: Footer CSS */ .tj-footer-area { position: relative; background: var(--tj-color-theme-dark); border-top: 1px solid var(--tj-color-border-1); z-index: 1; } .tj-footer-area.footer-2 { border-top: 0; } .tj-footer-area.footer-2 .footer-top-area .line::before { inset-inline-end: unset; inset-inline-start: 30%; } .footerStack { border: none; position: sticky; left: 0; bottom: 0; width: 100%; z-index: 0; } .footerStack .tj-footer-area { border-top: none; } .footerStack .tj-footer-area .footer-top-area { border-top: 1px solid var(--tj-color-border-1); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .footerStack { position: inherit; } } .footer-top-area { position: relative; padding-top: 80px; padding-bottom: 100px; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-top-area { padding: 80px 0; } } .footer-top-area .line { position: relative; z-index: 1; } .footer-top-area .line::before { position: absolute; content: ""; width: 1px; height: 200%; top: -100px; inset-inline-end: 32%; background: var(--tj-color-border-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-top-area::before { inset-inline-start: 68%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-top-area .line::before { display: none; } } .footer-widget.footer1-col-4 { -webkit-padding-start: 80px; padding-inline-start: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-widget.footer1-col-4 { -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget.footer1-col-4 { -webkit-padding-start: 0px; padding-inline-start: 0px; } } .footer-widget.footer1-col-2 { -webkit-padding-start: 60px; padding-inline-start: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-widget.footer1-col-2 { -webkit-padding-start: 20px; padding-inline-start: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget.footer1-col-2 { -webkit-padding-start: 0px; padding-inline-start: 0px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-widget.footer1-col-3 { -webkit-padding-start: 20px; padding-inline-start: 20px; } } .footer-widget.footer2-col-1 { -webkit-padding-end: 80px; padding-inline-end: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget.footer2-col-1 { -webkit-padding-end: 0; padding-inline-end: 0; } } .footer-widget.footer2-col-2 { -webkit-padding-start: 38px; padding-inline-start: 38px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget.footer2-col-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } .footer-widget.footer2-col-4 { -webkit-padding-start: 35px; padding-inline-start: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget.footer2-col-4 { -webkit-padding-start: 0; padding-inline-start: 0; } } .footer-widget .footer-title .title { color: var(--tj-color-common-white); margin-bottom: 40px; font-size: 20px; letter-spacing: -0.025em; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget .footer-title .title { margin-bottom: 25px; } } .footer-widget.footer-contact-infos { max-width: 230px; width: 100%; } .footer-widget.footer-contact-infos .infos-item { margin-bottom: 40px; } .footer-widget.footer-contact-infos .infos-item:last-child { margin-bottom: 0; } .footer-widget.footer-contact-infos .infos-item span { display: inline-block; font-size: 14px; color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); margin-bottom: 6px; } .footer-widget.footer-contact-infos .infos-item p { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white-2); margin-bottom: 6px; } .footer-widget.footer-contact-infos .infos-item a { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white); position: relative; z-index: 1; } .footer-widget.footer-contact-infos .infos-item a::before { position: absolute; content: ""; width: 100%; height: 1px; bottom: -2px; inset-inline-start: 0; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background: var(--tj-color-common-white); -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; } .footer-widget.footer-contact-infos .infos-item a:hover::before { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } @media (max-width: 575px) { .footer-widget.footer-contact-infos .infos-item { margin-bottom: 25px; } } .footer-widget.widget_nav_menu .widget-menu ul { margin: 0; padding: 0; list-style: none; } .footer-widget.widget_nav_menu .widget-menu ul li { margin-bottom: 15px; } .footer-widget.widget_nav_menu .widget-menu ul li:last-child { margin-bottom: 0; } .footer-widget.widget_nav_menu .widget-menu ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white-2); } .footer-widget.widget_nav_menu .widget-menu ul li a span { display: inline-block; font-size: 10px; text-transform: uppercase; color: var(--tj-color-common-white); font-weight: var(--tj-fw-bold); background-color: var(--tj-color-theme-primary); padding: 4px 6px; border-radius: 40px; line-height: 1; } .footer-widget.widget_nav_menu .widget-menu ul li a:hover { color: var(--tj-color-theme-primary); -webkit-padding-start: 2px; padding-inline-start: 2px; } .footer-widget .newsletter-title { /* max-width: 240px; */ width: 100%; margin-bottom: 30px; } .footer-widget .newsletter-title .title { font-size: 32px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-common-white); letter-spacing: -0.025em; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget .newsletter-title .title { margin-bottom: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-widget .newsletter-title .title { font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget .newsletter-title .title { font-size: 20px; } } .footer-widget .newsletter-form { position: relative; z-index: 2; } .footer-widget .newsletter-form .form-input { position: relative; z-index: 2; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]), .footer-widget .newsletter-form .form-input input[type=email] { color: var(--tj-color-common-white); font-weight: var(--tj-fw-regular); font-size: 16px; padding: 20px 80px 20px 25px; background: rgba(247, 247, 247, 0.1); border: 1px solid var(--tj-color-theme-dark); } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .footer-widget .newsletter-form .form-input input[type=email]::-ms-input-placeholder { color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .footer-widget .newsletter-form .form-input input[type=email]::-webkit-input-placeholder { color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .footer-widget .newsletter-form .form-input input[type=email]::-moz-placeholder { color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .footer-widget .newsletter-form .form-input input[type=email]:-ms-input-placeholder { color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .footer-widget .newsletter-form .form-input input[type=email]::-ms-input-placeholder { color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .footer-widget .newsletter-form .form-input input[type=email]::placeholder { color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):focus, .footer-widget .newsletter-form .form-input input[type=email]:focus { border-color: var(--tj-color-theme-primary); } .footer-widget .newsletter-form .form-input button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-end: 15px; font-size: 24px; color: var(--tj-color-theme-primary); } .footer-widget .newsletter-form .form-input button::before { content: ""; position: absolute; width: 1px; height: 55%; top: 50%; inset-inline-start: -16px; background: var(--tj-color-border-1); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .footer-widget .newsletter-form .form-input button i { -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; } .footer-widget .newsletter-form .form-input button:hover i { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } .footer-widget .footer-logo { max-width: 150px; } .footer-widget .desc { max-width: 310px; margin-top: 40px; margin-bottom: 0; color: var(--tj-color-common-white-2); } .footer-widget .footer-social { margin-top: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget .footer-social { margin-top: 60px; } } .footer-widget .footer-social .title { font-size: 20px; font-weight: 600; color: var(--tj-color-common-white); margin-bottom: 24px; } .footer-widget .footer-social ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .footer-widget .footer-social ul li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 28px; height: 28px; line-height: 1; color: var(--tj-color-heading-primary); background: rgba(247, 247, 247, 0.3); border-radius: 50%; } .footer-widget .footer-social ul li a i { color: var(--tj-color-heading-primary); } .footer-widget .footer-social ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .footer-widget .footer-social ul li a:hover i { color: var(--tj-color-common-white); } @media (max-width: 575px) { .footer-newsletter-form { padding-top: 50px; border-top: 1px solid var(--tj-color-border-1); } } .footer-copyright-area { background-color: rgba(247, 247, 247, 0.1); padding: 28px 0; } .copyright-content-area { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; row-gap: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .copyright-content-area .copyright-text p { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white-2); margin-bottom: 0; } .copyright-content-area .copyright-text p a { color: var(--tj-color-common-white); } .copyright-content-area .copyright-text p a:hover { color: var(--tj-color-theme-primary); } .copyright-content-area .copyright-text p i { color: var(--tj-color-common-white); -webkit-margin-end: 5px; margin-inline-end: 5px; } .copyright-content-area .copyright-socails ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .copyright-content-area .copyright-socails ul li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 28px; height: 28px; line-height: 1; color: var(--tj-color-heading-primary); background: rgba(247, 247, 247, 0.3); border-radius: 50%; } .copyright-content-area .copyright-socails ul li a i { color: var(--tj-color-heading-primary); } .copyright-content-area .copyright-socails ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .copyright-content-area .copyright-socails ul li a:hover i { color: var(--tj-color-common-white); } .copyright-content-area .copyright-menu ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .copyright-content-area .copyright-menu ul li { position: relative; -webkit-margin-end: 8px; margin-inline-end: 8px; -webkit-padding-end: 12px; padding-inline-end: 12px; z-index: 1; } .copyright-content-area .copyright-menu ul li::before { position: absolute; content: ""; width: 4px; height: 4px; top: 50%; inset-inline-end: 0; background: var(--tj-color-common-white-2); border-radius: 50%; } .copyright-content-area .copyright-menu ul li:hover a { color: var(--tj-color-common-white); } .copyright-content-area .copyright-menu ul li:hover::before { background: var(--tj-color-common-white); } .copyright-content-area .copyright-menu ul li a { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white-2); } .copyright-content-area .copyright-menu ul li:last-child { -webkit-padding-end: 0; padding-inline-end: 0; -webkit-margin-end: 0; margin-inline-end: 0; } .copyright-content-area .copyright-menu ul li:last-child::before { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .copyright-content-area { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .copyright-2 { -webkit-padding-start: 38px; padding-inline-start: 38px; padding-top: 28px; padding-bottom: 28px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .copyright-2 .copyright-content-area { margin: 0 auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .copyright-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } .footer-copyright-area-2 .line { position: relative; z-index: 1; } .footer-copyright-area-2 .line::before { content: ""; position: absolute; top: 0; inset-inline-start: 30%; width: 4000px; height: 1px; background: var(--tj-color-border-1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-copyright-area-2 .line::before { inset-inline-start: -200px; } } .tj-footer-area.footer-2.style-2 .footer-top-area .line::before { inset-inline-start: 42%; } .footer4-col-2 { -webkit-padding-start: 60px; padding-inline-start: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer4-col-2 { -webkit-padding-start: 20px; padding-inline-start: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer4-col-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } /* !END: Footer CSS */ /* START: Swiper Nav & Dots CSS */ .swiper_navigations { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .swiper_navigations .navigation { 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: 50px; height: 50px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--tj-color-heading-primary); border: 1px solid var(--tj-color-border-2); background: transparent; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; cursor: pointer; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .swiper_navigations .navigation { width: 40px; height: 40px; font-size: 18px; } } .swiper_navigations .navigation i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; color: var(--tj-color-heading-primary); } .swiper_navigations .navigation:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .swiper_navigations .navigation:hover i { color: var(--tj-color-common-white); } .swiper_pagination { text-align: center; margin-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .swiper_pagination { margin-top: 40px; } } .swiper_pagination .swiper-pagination-bullet { position: relative; z-index: 1; width: 21px; height: 22px; background-color: transparent; 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; opacity: 1; margin: 0 2px !important; } .swiper_pagination .swiper-pagination-bullet::before { content: ""; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 21px; height: 22px; background-color: var(--tj-color-theme-primary); aspect-ratio: 1; -webkit-clip-path: polygon(93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%, 50% 0%, 93.3% 25%, 93.3% 75%, 88.97% 27.5%, 50% 5%, 11.03% 27.5%, 11.03% 72.5%, 50% 95%, 88.97% 72.5%, 88.97% 27.5%); clip-path: polygon(93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%, 50% 0%, 93.3% 25%, 93.3% 75%, 88.97% 27.5%, 50% 5%, 11.03% 27.5%, 11.03% 72.5%, 50% 95%, 88.97% 72.5%, 88.97% 27.5%); opacity: 0; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } .swiper_pagination .swiper-pagination-bullet::after { content: ""; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 9px; height: 10px; background-color: var(--tj-color-theme-primary); -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 70%, 0 30%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 70%, 0 30%); position: absolute; top: 6px; } .swiper_pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* !END: Swiper Nav & Dots CSS */ /* START: Back to Top CSS */ .back-to-top-wrapper { position: absolute; inset-inline-end: 20px; bottom: 0; width: 40px; height: 140px; cursor: pointer; display: block; border-radius: 25px; z-index: 99; opacity: 0; visibility: hidden; -webkit-transition: 0.6s; transition: 0.6s; } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .back-to-top-wrapper { inset-inline-end: 15px; } .back-to-top-wrapper.back-to-top-btn-show { bottom: 50px; } } .back-to-top-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 40px; height: 130px; text-align: center; background: transparent; color: var(--tj-color-heading-primary); border: 1px solid var(--tj-color-border-2); border-radius: 25px; -webkit-transition: all, 0.3s; transition: all, 0.3s; line-height: 1; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .back-to-top-btn:hover { color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .back-to-top-btn i { margin-bottom: 10px; -webkit-animation: bounce2 2s infinite; animation: bounce2 2s infinite; } .back-to-top-btn span { display: inline-block; font-weight: var(--tj-fw-bold); text-transform: uppercase; -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; letter-spacing: -0.03em; } .back-to-top-btn:hover { -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } .back-to-top-btn.style-2 { color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); } .back-to-top-btn.style-2:hover { color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .back-to-top-btn.style-3 { color: var(--tj-color-common-white); background: rgba(247, 247, 247, 0.1); border: 1px solid var(--tj-color-border-1); } .back-to-top-btn.style-3:hover { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .back-to-top-btn.style-5 { color: var(--tj-color-heading-primary); background: var(--tj-color-common-white); border: 1px solid var(--tj-color-common-white); } .back-to-top-btn.style-5:hover { color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .back-to-top-btn.style-6 { color: var(--tj-color-common-white); background-color: transparent; border: 1px solid var(--tj-color-border-1); } .back-to-top-btn.style-6:hover { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .backtop { position: absolute; bottom: 40px; inset-inline-end: 60px; 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: 56px; height: 56px; font-size: 20px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); border-radius: 50%; z-index: 5; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .backtop { inset-inline-end: 20px; } } .backtop:hover { color: var(--tj-color-common-white); -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } .backtop:focus { color: var(--tj-color-common-white); } /* !END: back to top CSS */ /* !START: Socials CSS */ .tj-socials ul { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 7px; -ms-flex-line-pack: center; align-content: center; list-style: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-socials ul { gap: 5px; } } .tj-socials ul li a { font-size: 16px; width: 32px; height: 32px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; color: var(--tj-color-common-white); background: #aeb2b9; border-radius: 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) { .tj-socials ul li a { font-size: 14px; } } .tj-socials ul li a:hover { background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .tj-socials ul li a:hover i { color: var(--tj-color-common-white); } /* !END: Socials CSS */ /* START: Progress Bar CSS */ .tj-progress { width: 100%; padding: 0; margin: 0; height: 8px; background: var(--tj-color-theme-bg-2); position: relative; border-radius: 0; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress { height: 6px; } } .tj-progress__list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; margin-top: 24px; list-style: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__list { margin-top: 20px; gap: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__list { margin-top: 20px; gap: 16px; } } .tj-progress__list.style-2 .tj-progress__title { color: var(--tj-color-common-white); } .tj-progress__list.style-2 .tj-progress { background: rgba(247, 247, 247, 0.2); } .tj-progress__title { font-size: 16px; margin-bottom: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__title { font-size: 15px; } } .tj-progress__bar { width: 0; height: 100%; background: var(--tj-color-theme-primary); position: relative; z-index: 1; border-radius: 0; } .tj-progress__bar::after { content: ""; width: 18px; height: 18px; border: 4px solid var(--tj-color-theme-primary); border-radius: 100%; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translate(3px, -50%); -ms-transform: translate(3px, -50%); transform: translate(3px, -50%); background: var(--tj-color-common-white); z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__bar::after { width: 16px; height: 16px; border-width: 4px; } } .tj-progress__perchant { font-size: 12px; padding: 5px 7px 4px; line-height: 1; height: auto; position: absolute; inset-inline-end: 0; bottom: 100%; -webkit-transform: translate(11px, -13px); -ms-transform: translate(11px, -13px); transform: translate(11px, -13px); color: var(--tj-color-common-white) !important; background: var(--tj-color-theme-primary); z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__perchant { font-size: 10px; padding: 4px 3px 4px 5px; -webkit-transform: translate(9px, -11px); -ms-transform: translate(9px, -11px); transform: translate(9px, -11px); } } .tj-progress__perchant::after { content: ""; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--tj-color-theme-primary); position: absolute; top: 100%; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__perchant::after { border-width: 4px; } } /* !END: Progress Bar CSS */ /*----------------------------------------*/ /* 2.178 Range Slider css start /*----------------------------------------*/ .ui-button-icon-only, .ui-controlgroup-vertical .ui-controlgroup-item { -webkit-box-sizing: border-box; box-sizing: border-box; } .ui-checkboxradio-disabled, .ui-state-disabled { pointer-events: none; } .ui-datepicker .ui-icon, .ui-icon { text-indent: -99999px; background-repeat: no-repeat; } .ui-helper-reset, .ui-menu { outline: 0; list-style: none; } .ui-helper-hidden, .ui-resizable-autohide .ui-resizable-handle, .ui-resizable-disabled .ui-resizable-handle { display: none; } .ui-helper-hidden-accessible { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .ui-helper-reset { margin: 0; padding: 0; border: 0; line-height: 1.3; text-decoration: none; font-size: 100%; } .ui-helper-clearfix:after, .ui-helper-clearfix:before { content: ""; display: table; border-collapse: collapse; } .ui-helper-clearfix:after { clear: both; } .ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter: Alpha(Opacity=0); } .ui-front { z-index: 100; } .ui-state-disabled { cursor: default !important; } .ui-icon { display: inline-block; vertical-align: middle; margin-top: -0.25em; position: relative; overflow: hidden; } .ui-widget-icon-block { left: 50%; margin-left: -8px; display: block; } .ui-widget-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .ui-accordion .ui-accordion-header { display: block; cursor: pointer; position: relative; margin: 2px 0 0; padding: 0.5em 0.5em 0.5em 0.7em; font-size: 100%; } .ui-autocomplete, .ui-menu .ui-menu { position: absolute; } .ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; overflow: auto; } .ui-autocomplete { top: 0; left: 0; cursor: default; } .ui-menu { padding: 0; margin: 0; display: block; } .ui-button, .ui-controlgroup { display: inline-block; vertical-align: middle; } .ui-button, .ui-menu-icons, .ui-resizable { position: relative; } .ui-menu .ui-menu-item { margin: 0; cursor: pointer; list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); } .ui-menu .ui-menu-item-wrapper { position: relative; padding: 3px 1em 3px 0.4em; } .ui-menu .ui-menu-divider { margin: 5px 0; height: 0; font-size: 0; line-height: 0; border-width: 1px 0 0; } .ui-menu .ui-state-active, .ui-menu .ui-state-focus { margin: -1px; } .ui-menu-icons .ui-menu-item-wrapper { padding-left: 2em; } .ui-button, .ui-controlgroup .ui-controlgroup-label { padding: 0.4em 1em; } .ui-menu .ui-icon { position: absolute; top: 0; bottom: 0; left: 0.2em; margin: auto 0; } .ui-menu .ui-menu-icon { left: auto; right: 0; } .ui-button { line-height: normal; margin-right: 0.1em; cursor: pointer; text-align: center; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible; } .ui-button, .ui-button:active, .ui-button:hover, .ui-button:link, .ui-button:visited { text-decoration: none; } .ui-button-icon-only { width: 2em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-button-icon-only { text-indent: 0; } .ui-button-icon-only .ui-icon { position: absolute; top: 50%; left: 50%; margin-top: -8px; margin-left: -8px; } .ui-button.ui-icon-notext .ui-icon { padding: 0; width: 2.1em; height: 2.1em; text-indent: -9999px; white-space: nowrap; } input.ui-button.ui-icon-notext .ui-icon { width: auto; height: auto; text-indent: 0; white-space: normal; padding: 0.4em 1em; } button.ui-button::-moz-focus-inner, input.ui-button::-moz-focus-inner { border: 0; padding: 0; } .ui-controlgroup > .ui-controlgroup-item { float: left; margin-left: 0; margin-right: 0; } .ui-controlgroup > .ui-controlgroup-item.ui-visual-focus, .ui-controlgroup > .ui-controlgroup-item:focus { z-index: 9999; } .ui-controlgroup-vertical > .ui-controlgroup-item { display: block; float: none; width: 100%; margin-top: 0; margin-bottom: 0; text-align: left; } .ui-controlgroup .ui-controlgroup-label span { font-size: 80%; } .ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item { border-left: none; } .ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item { border-top: none; } .ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content { border-right: none; } .ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content { border-bottom: none; } .ui-controlgroup-vertical .ui-spinner-input { width: 75%; width: calc(100% - 2.4em); } .ui-controlgroup-vertical .ui-spinner .ui-spinner-up { border-top-style: solid; } .ui-checkboxradio-label .ui-icon-background { -webkit-box-shadow: inset 1px 1px 1px #ccc; box-shadow: inset 1px 1px 1px #ccc; border-radius: 0.12em; border: none; } .ui-checkboxradio-radio-label .ui-icon-background { width: 16px; height: 16px; border-radius: 1em; overflow: visible; border: none; } .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon, .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon { background-image: none; width: 8px; height: 8px; border-width: 4px; border-style: solid; } .ui-datepicker { width: 17em; padding: 0.2em 0.2em 0; display: none; } .ui-datepicker .ui-datepicker-header { position: relative; padding: 0.2em 0; } .ui-datepicker .ui-datepicker-next, .ui-datepicker .ui-datepicker-prev { position: absolute; top: 2px; width: 1.8em; height: 1.8em; } .ui-datepicker .ui-datepicker-next-hover, .ui-datepicker .ui-datepicker-prev-hover { top: 1px; } .ui-datepicker .ui-datepicker-prev { left: 2px; } .ui-datepicker .ui-datepicker-next { right: 2px; } .ui-datepicker .ui-datepicker-prev-hover { left: 1px; } .ui-datepicker .ui-datepicker-next-hover { right: 1px; } .ui-datepicker .ui-datepicker-next span, .ui-datepicker .ui-datepicker-prev span { display: block; position: absolute; left: 50%; margin-left: -8px; top: 50%; margin-top: -8px; } .ui-datepicker .ui-datepicker-title { margin: 0 2.3em; line-height: 1.8em; text-align: center; } .ui-datepicker .ui-datepicker-title select { font-size: 1em; margin: 1px 0; } .ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year { width: 45%; } .ui-datepicker table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin: 0 0 0.4em; } .ui-datepicker th { padding: 0.7em 0.3em; text-align: center; font-weight: 700; border: 0; } .ui-datepicker td { border: 0; padding: 1px; } .ui-datepicker td a, .ui-datepicker td span { display: block; padding: 0.2em; text-align: right; text-decoration: none; } .ui-datepicker .ui-datepicker-buttonpane { background-image: none; margin: 0.7em 0 0; padding: 0 0.2em; border-left: 0; border-right: 0; border-bottom: 0; } .ui-datepicker .ui-datepicker-buttonpane button { float: right; margin: 0.5em 0.2em 0.4em; cursor: pointer; padding: 0.2em 0.6em 0.3em; width: auto; overflow: visible; } .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-multi .ui-datepicker-group, .ui-datepicker-rtl .ui-datepicker-buttonpane button { float: left; } .ui-datepicker.ui-datepicker-multi { width: auto; } .ui-datepicker-multi .ui-datepicker-group table { width: 95%; margin: 0 auto 0.4em; } .ui-datepicker-multi-2 .ui-datepicker-group { width: 50%; } .ui-datepicker-multi-3 .ui-datepicker-group { width: 33.3%; } .ui-datepicker-multi-4 .ui-datepicker-group { width: 25%; } .ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header { border-left-width: 0; } .ui-datepicker-multi .ui-datepicker-buttonpane { clear: left; } .ui-datepicker-row-break { clear: both; width: 100%; font-size: 0; } .ui-datepicker-rtl { direction: rtl; } .ui-datepicker-rtl .ui-datepicker-prev { right: 2px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next { left: 2px; right: auto; } .ui-datepicker-rtl .ui-datepicker-prev:hover { right: 1px; left: auto; } .ui-datepicker-rtl .ui-datepicker-next:hover { left: 1px; right: auto; } .ui-datepicker-rtl .ui-datepicker-buttonpane { clear: right; } .ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current, .ui-datepicker-rtl .ui-datepicker-group, .ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; } .ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header, .ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header { border-right-width: 0; border-left-width: 1px; } .ui-datepicker .ui-icon { display: block; overflow: hidden; left: 0.5em; top: 0.3em; } .ui-dialog { position: absolute; top: 0; left: 0; padding: 0.2em; outline: 0; } .ui-dialog .ui-dialog-titlebar { padding: 0.4em 1em; position: relative; } .ui-dialog .ui-dialog-title { float: left; margin: 0.1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; } .ui-dialog .ui-dialog-titlebar-close { position: absolute; right: 0.3em; top: 50%; width: 20px; margin: -10px 0 0; padding: 1px; height: 20px; } .ui-dialog .ui-dialog-content { position: relative; border: 0; padding: 0.5em 1em; background: 0 0; overflow: auto; } .ui-dialog .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0; background-image: none; margin-top: 0.5em; padding: 0.3em 1em 0.5em 0.4em; } .ui-dialog .ui-dialog-buttonpane button { margin: 0.5em 0.4em 0.5em 0; cursor: pointer; } .ui-dialog .ui-resizable-n { height: 2px; top: 0; } .ui-dialog .ui-resizable-e { width: 2px; right: 0; } .ui-dialog .ui-resizable-s { height: 2px; bottom: 0; } .ui-dialog .ui-resizable-w { width: 2px; left: 0; } .ui-dialog .ui-resizable-ne, .ui-dialog .ui-resizable-nw, .ui-dialog .ui-resizable-se, .ui-dialog .ui-resizable-sw { width: 7px; height: 7px; } .ui-dialog .ui-resizable-se { right: 0; bottom: 0; } .ui-dialog .ui-resizable-sw { left: 0; bottom: 0; } .ui-dialog .ui-resizable-ne { right: 0; top: 0; } .ui-dialog .ui-resizable-nw { left: 0; top: 0; } .ui-draggable .ui-dialog-titlebar { cursor: move; } .ui-draggable-handle, .ui-selectable, .ui-sortable-handle { -ms-touch-action: none; touch-action: none; } .ui-resizable-handle { position: absolute; font-size: 0.1px; display: block; -ms-touch-action: none; touch-action: none; } .ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0; } .ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0; } .ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0; height: 100%; } .ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; } .ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; } .ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; } .ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; } .ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px; } .ui-progressbar { height: 2em; text-align: left; overflow: hidden; } .ui-progressbar .ui-progressbar-value { margin: -1px; height: 100%; } .ui-progressbar .ui-progressbar-overlay { background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw=="); height: 100%; opacity: 0.25; } .ui-progressbar-indeterminate .ui-progressbar-value { background-image: none; } .ui-selectable-helper { position: absolute; z-index: 100; border: 1px dotted #000; } .ui-selectmenu-menu { padding: 0; margin: 0; position: absolute; top: 0; left: 0; display: none; } .ui-selectmenu-menu .ui-menu { overflow: auto; overflow-x: hidden; padding-bottom: 1px; } .ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup { font-size: 1em; font-weight: 700; line-height: 1.5; padding: 2px 0.4em; margin: 0.5em 0 0; height: auto; border: 0; } .ui-selectmenu-open { display: block; } .ui-selectmenu-text { display: block; margin-right: 20px; overflow: hidden; text-overflow: ellipsis; } .ui-selectmenu-button.ui-button { text-align: left; white-space: nowrap; width: 14em; } .ui-selectmenu-icon.ui-icon { float: right; margin-top: 0; } .ui-slider { position: relative; text-align: left; } .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.2em; height: 1.2em; cursor: default; -ms-touch-action: none; touch-action: none; } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: 0.7em; display: block; border: 0; background-position: 0 0; } .ui-slider.ui-state-disabled .ui-slider-handle, .ui-slider.ui-state-disabled .ui-slider-range { -webkit-filter: inherit; filter: inherit; } .ui-slider-horizontal { height: 0.8em; } .ui-slider-horizontal .ui-slider-handle { top: -0.3em; margin-left: -0.6em; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } .ui-slider-vertical { width: 0.8em; height: 100px; } .ui-slider-vertical .ui-slider-handle { left: -0.3em; margin-left: 0; margin-bottom: -0.6em; } .ui-slider-vertical .ui-slider-range { left: 0; width: 100%; } .ui-slider-vertical .ui-slider-range-min, .ui-spinner-down { bottom: 0; } .ui-slider-vertical .ui-slider-range-max, .ui-spinner-up { top: 0; } .ui-spinner { position: relative; display: inline-block; overflow: hidden; padding: 0; vertical-align: middle; } .ui-spinner-input { border: none; background: 0 0; color: inherit; padding: 0.222em 0; margin: 0.2em 2em 0.2em 0.4em; vertical-align: middle; } .ui-spinner-button { width: 1.6em; height: 50%; font-size: 0.5em; padding: 0; margin: 0; text-align: center; position: absolute; cursor: default; display: block; overflow: hidden; right: 0; } .ui-spinner a.ui-spinner-button { border-top-style: none; border-bottom-style: none; border-right-style: none; } .ui-tabs { position: relative; padding: 0.2em; } .ui-tabs .ui-tabs-nav { margin: 0; padding: 0.2em 0.2em 0; } .ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 0; margin: 1px 0.2em 0 0; border-bottom-width: 0; padding: 0; white-space: nowrap; } .ui-tabs .ui-tabs-nav .ui-tabs-anchor { float: left; padding: 0.5em 1em; text-decoration: none; } .ui-tabs .ui-tabs-nav li.ui-tabs-active { margin-bottom: -1px; padding-bottom: 1px; } .ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor, .ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor { cursor: text; } .ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor { cursor: pointer; } .ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: 0 0; } .ui-tooltip { padding: 8px; position: absolute; z-index: 9999; max-width: 300px; } body .ui-tooltip { border-width: 2px; } .ui-widget, .ui-widget button, .ui-widget input, .ui-widget select, .ui-widget textarea { font-family: Arial, Helvetica, sans-serif; font-size: 1em; } .ui-widget .ui-widget { font-size: 1em; } .ui-widget.ui-widget-content { border: 1px solid #c5c5c5; } .ui-widget-content { border: 1px solid #ddd; background: #fff; color: #333; } .ui-widget-content a, .ui-widget-header a { color: #333; } .ui-widget-header { border: 1px solid #ddd; background: #e9e9e9; color: #333; font-weight: 700; } .ui-button, .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, html .ui-button.ui-state-disabled:active, html .ui-button.ui-state-disabled:hover { border: 1px solid #c5c5c5; background: #f6f6f6; font-weight: 400; color: #454545; } .ui-button, .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited, a.ui-button, a:link.ui-button, a:visited.ui-button { color: #454545; text-decoration: none; } .ui-button:focus, .ui-button:hover, .ui-state-focus, .ui-state-hover, .ui-widget-content .ui-state-focus, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-focus, .ui-widget-header .ui-state-hover { border: 1px solid #ccc; background: #ededed; font-weight: 400; color: #2b2b2b; } .ui-state-focus a, .ui-state-focus a:hover, .ui-state-focus a:link, .ui-state-focus a:visited, .ui-state-hover a, .ui-state-hover a:hover, .ui-state-hover a:link, .ui-state-hover a:visited, a.ui-button:focus, a.ui-button:hover { color: #2b2b2b; text-decoration: none; } .ui-visual-focus { -webkit-box-shadow: 0 0 3px 1px #5e9ed6; box-shadow: 0 0 3px 1px #5e9ed6; } .ui-button.ui-state-active:hover, .ui-button:active, .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active { border: 1px solid #003eff; background: #007fff; font-weight: 400; color: #fff; } .ui-icon-background, .ui-state-active .ui-icon-background { border: #003eff; background-color: #fff; } .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #fff; text-decoration: none; } .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight { border: 1px solid #dad55e; background: #fffa90; color: #777620; } .ui-state-checked { border: 1px solid #dad55e; background: #fffa90; } .ui-state-highlight a, .ui-widget-content .ui-state-highlight a, .ui-widget-header .ui-state-highlight a { color: #777620; } .ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error { border: 1px solid #f1a899; background: #fddfdf; color: #5f3f3f; } .ui-state-error a, .ui-state-error-text, .ui-widget-content .ui-state-error a, .ui-widget-content .ui-state-error-text, .ui-widget-header .ui-state-error a, .ui-widget-header .ui-state-error-text { color: #5f3f3f; } .ui-priority-primary, .ui-widget-content .ui-priority-primary, .ui-widget-header .ui-priority-primary { font-weight: 700; } .ui-priority-secondary, .ui-widget-content .ui-priority-secondary, .ui-widget-header .ui-priority-secondary { opacity: 0.7; filter: Alpha(Opacity=70); font-weight: 400; } .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { opacity: 0.35; filter: Alpha(Opacity=35); background-image: none; } .ui-state-disabled .ui-icon { filter: Alpha(Opacity=35); } .ui-icon { width: 16px; height: 16px; } .ui-icon, .ui-widget-content .ui-icon, .ui-widget-header .ui-icon { background-image: url("images/ui-icons_444444_256x240.png"); } .ui-button:focus .ui-icon, .ui-button:hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-hover .ui-icon { background-image: url("images/ui-icons_555555_256x240.png"); } .ui-button:active .ui-icon, .ui-state-active .ui-icon { background-image: url("images/ui-icons_ffffff_256x240.png"); } .ui-button .ui-state-highlight.ui-icon, .ui-state-highlight .ui-icon { background-image: url("images/ui-icons_777620_256x240.png"); } .ui-state-error .ui-icon, .ui-state-error-text .ui-icon { background-image: url("images/ui-icons_cc0000_256x240.png"); } .ui-button .ui-icon { background-image: url("images/ui-icons_777777_256x240.png"); } .ui-icon-blank { background-position: 16px 16px; } .ui-icon-caret-1-n { background-position: 0 0; } .ui-icon-caret-1-ne { background-position: -16px 0; } .ui-icon-caret-1-e { background-position: -32px 0; } .ui-icon-caret-1-se { background-position: -48px 0; } .ui-icon-caret-1-s { background-position: -65px 0; } .ui-icon-caret-1-sw { background-position: -80px 0; } .ui-icon-caret-1-w { background-position: -96px 0; } .ui-icon-caret-1-nw { background-position: -112px 0; } .ui-icon-caret-2-n-s { background-position: -128px 0; } .ui-icon-caret-2-e-w { background-position: -144px 0; } .ui-icon-triangle-1-n { background-position: 0 -16px; } .ui-icon-triangle-1-ne { background-position: -16px -16px; } .ui-icon-triangle-1-e { background-position: -32px -16px; } .ui-icon-triangle-1-se { background-position: -48px -16px; } .ui-icon-triangle-1-s { background-position: -65px -16px; } .ui-icon-triangle-1-sw { background-position: -80px -16px; } .ui-icon-triangle-1-w { background-position: -96px -16px; } .ui-icon-triangle-1-nw { background-position: -112px -16px; } .ui-icon-triangle-2-n-s { background-position: -128px -16px; } .ui-icon-triangle-2-e-w { background-position: -144px -16px; } .ui-icon-arrow-1-n { background-position: 0 -32px; } .ui-icon-arrow-1-ne { background-position: -16px -32px; } .ui-icon-arrow-1-e { background-position: -32px -32px; } .ui-icon-arrow-1-se { background-position: -48px -32px; } .ui-icon-arrow-1-s { background-position: -65px -32px; } .ui-icon-arrow-1-sw { background-position: -80px -32px; } .ui-icon-arrow-1-w { background-position: -96px -32px; } .ui-icon-arrow-1-nw { background-position: -112px -32px; } .ui-icon-arrow-2-n-s { background-position: -128px -32px; } .ui-icon-arrow-2-ne-sw { background-position: -144px -32px; } .ui-icon-arrow-2-e-w { background-position: -160px -32px; } .ui-icon-arrow-2-se-nw { background-position: -176px -32px; } .ui-icon-arrowstop-1-n { background-position: -192px -32px; } .ui-icon-arrowstop-1-e { background-position: -208px -32px; } .ui-icon-arrowstop-1-s { background-position: -224px -32px; } .ui-icon-arrowstop-1-w { background-position: -240px -32px; } .ui-icon-arrowthick-1-n { background-position: 1px -48px; } .ui-icon-arrowthick-1-ne { background-position: -16px -48px; } .ui-icon-arrowthick-1-e { background-position: -32px -48px; } .ui-icon-arrowthick-1-se { background-position: -48px -48px; } .ui-icon-arrowthick-1-s { background-position: -64px -48px; } .ui-icon-arrowthick-1-sw { background-position: -80px -48px; } .ui-icon-arrowthick-1-w { background-position: -96px -48px; } .ui-icon-arrowthick-1-nw { background-position: -112px -48px; } .ui-icon-arrowthick-2-n-s { background-position: -128px -48px; } .ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; } .ui-icon-arrowthick-2-e-w { background-position: -160px -48px; } .ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; } .ui-icon-arrowthickstop-1-n { background-position: -192px -48px; } .ui-icon-arrowthickstop-1-e { background-position: -208px -48px; } .ui-icon-arrowthickstop-1-s { background-position: -224px -48px; } .ui-icon-arrowthickstop-1-w { background-position: -240px -48px; } .ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; } .ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; } .ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; } .ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; } .ui-icon-arrowreturn-1-w { background-position: -64px -64px; } .ui-icon-arrowreturn-1-n { background-position: -80px -64px; } .ui-icon-arrowreturn-1-e { background-position: -96px -64px; } .ui-icon-arrowreturn-1-s { background-position: -112px -64px; } .ui-icon-arrowrefresh-1-w { background-position: -128px -64px; } .ui-icon-arrowrefresh-1-n { background-position: -144px -64px; } .ui-icon-arrowrefresh-1-e { background-position: -160px -64px; } .ui-icon-arrowrefresh-1-s { background-position: -176px -64px; } .ui-icon-arrow-4 { background-position: 0 -80px; } .ui-icon-arrow-4-diag { background-position: -16px -80px; } .ui-icon-extlink { background-position: -32px -80px; } .ui-icon-newwin { background-position: -48px -80px; } .ui-icon-refresh { background-position: -64px -80px; } .ui-icon-shuffle { background-position: -80px -80px; } .ui-icon-transfer-e-w { background-position: -96px -80px; } .ui-icon-transferthick-e-w { background-position: -112px -80px; } .ui-icon-folder-collapsed { background-position: 0 -96px; } .ui-icon-folder-open { background-position: -16px -96px; } .ui-icon-document { background-position: -32px -96px; } .ui-icon-document-b { background-position: -48px -96px; } .ui-icon-note { background-position: -64px -96px; } .ui-icon-mail-closed { background-position: -80px -96px; } .ui-icon-mail-open { background-position: -96px -96px; } .ui-icon-suitcase { background-position: -112px -96px; } .ui-icon-comment { background-position: -128px -96px; } .ui-icon-person { background-position: -144px -96px; } .ui-icon-print { background-position: -160px -96px; } .ui-icon-trash { background-position: -176px -96px; } .ui-icon-locked { background-position: -192px -96px; } .ui-icon-unlocked { background-position: -208px -96px; } .ui-icon-bookmark { background-position: -224px -96px; } .ui-icon-tag { background-position: -240px -96px; } .ui-icon-home { background-position: 0 -112px; } .ui-icon-flag { background-position: -16px -112px; } .ui-icon-calendar { background-position: -32px -112px; } .ui-icon-cart { background-position: -48px -112px; } .ui-icon-pencil { background-position: -64px -112px; } .ui-icon-clock { background-position: -80px -112px; } .ui-icon-disk { background-position: -96px -112px; } .ui-icon-calculator { background-position: -112px -112px; } .ui-icon-zoomin { background-position: -128px -112px; } .ui-icon-zoomout { background-position: -144px -112px; } .ui-icon-search { background-position: -160px -112px; } .ui-icon-wrench { background-position: -176px -112px; } .ui-icon-gear { background-position: -192px -112px; } .ui-icon-heart { background-position: -208px -112px; } .ui-icon-star { background-position: -224px -112px; } .ui-icon-link { background-position: -240px -112px; } .ui-icon-cancel { background-position: 0 -128px; } .ui-icon-plus { background-position: -16px -128px; } .ui-icon-plusthick { background-position: -32px -128px; } .ui-icon-minus { background-position: -48px -128px; } .ui-icon-minusthick { background-position: -64px -128px; } .ui-icon-close { background-position: -80px -128px; } .ui-icon-closethick { background-position: -96px -128px; } .ui-icon-key { background-position: -112px -128px; } .ui-icon-lightbulb { background-position: -128px -128px; } .ui-icon-scissors { background-position: -144px -128px; } .ui-icon-clipboard { background-position: -160px -128px; } .ui-icon-copy { background-position: -176px -128px; } .ui-icon-contact { background-position: -192px -128px; } .ui-icon-image { background-position: -208px -128px; } .ui-icon-video { background-position: -224px -128px; } .ui-icon-script { background-position: -240px -128px; } .ui-icon-alert { background-position: 0 -144px; } .ui-icon-info { background-position: -16px -144px; } .ui-icon-notice { background-position: -32px -144px; } .ui-icon-help { background-position: -48px -144px; } .ui-icon-check { background-position: -64px -144px; } .ui-icon-bullet { background-position: -80px -144px; } .ui-icon-radio-on { background-position: -96px -144px; } .ui-icon-radio-off { background-position: -112px -144px; } .ui-icon-pin-w { background-position: -128px -144px; } .ui-icon-pin-s { background-position: -144px -144px; } .ui-icon-play { background-position: 0 -160px; } .ui-icon-pause { background-position: -16px -160px; } .ui-icon-seek-next { background-position: -32px -160px; } .ui-icon-seek-prev { background-position: -48px -160px; } .ui-icon-seek-end { background-position: -64px -160px; } .ui-icon-seek-first, .ui-icon-seek-start { background-position: -80px -160px; } .ui-icon-stop { background-position: -96px -160px; } .ui-icon-eject { background-position: -112px -160px; } .ui-icon-volume-off { background-position: -128px -160px; } .ui-icon-volume-on { background-position: -144px -160px; } .ui-icon-power { background-position: 0 -176px; } .ui-icon-signal-diag { background-position: -16px -176px; } .ui-icon-signal { background-position: -32px -176px; } .ui-icon-battery-0 { background-position: -48px -176px; } .ui-icon-battery-1 { background-position: -64px -176px; } .ui-icon-battery-2 { background-position: -80px -176px; } .ui-icon-battery-3 { background-position: -96px -176px; } .ui-icon-circle-plus { background-position: 0 -192px; } .ui-icon-circle-minus { background-position: -16px -192px; } .ui-icon-circle-close { background-position: -32px -192px; } .ui-icon-circle-triangle-e { background-position: -48px -192px; } .ui-icon-circle-triangle-s { background-position: -64px -192px; } .ui-icon-circle-triangle-w { background-position: -80px -192px; } .ui-icon-circle-triangle-n { background-position: -96px -192px; } .ui-icon-circle-arrow-e { background-position: -112px -192px; } .ui-icon-circle-arrow-s { background-position: -128px -192px; } .ui-icon-circle-arrow-w { background-position: -144px -192px; } .ui-icon-circle-arrow-n { background-position: -160px -192px; } .ui-icon-circle-zoomin { background-position: -176px -192px; } .ui-icon-circle-zoomout { background-position: -192px -192px; } .ui-icon-circle-check { background-position: -208px -192px; } .ui-icon-circlesmall-plus { background-position: 0 -208px; } .ui-icon-circlesmall-minus { background-position: -16px -208px; } .ui-icon-circlesmall-close { background-position: -32px -208px; } .ui-icon-squaresmall-plus { background-position: -48px -208px; } .ui-icon-squaresmall-minus { background-position: -64px -208px; } .ui-icon-squaresmall-close { background-position: -80px -208px; } .ui-icon-grip-dotted-vertical { background-position: 0 -224px; } .ui-icon-grip-dotted-horizontal { background-position: -16px -224px; } .ui-icon-grip-solid-vertical { background-position: -32px -224px; } .ui-icon-grip-solid-horizontal { background-position: -48px -224px; } .ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; } .ui-icon-grip-diagonal-se { background-position: -80px -224px; } .ui-corner-all, .ui-corner-left, .ui-corner-tl, .ui-corner-top { border-top-left-radius: 3px; } .ui-corner-all, .ui-corner-right, .ui-corner-top, .ui-corner-tr { border-top-right-radius: 3px; } .ui-corner-all, .ui-corner-bl, .ui-corner-bottom, .ui-corner-left { border-bottom-left-radius: 3px; } .ui-corner-all, .ui-corner-bottom, .ui-corner-br, .ui-corner-right { border-bottom-right-radius: 3px; } .ui-widget-overlay { background: #aaa; opacity: 0.3; filter: Alpha(Opacity=30); } .ui-widget-shadow { -webkit-box-shadow: 0 0 5px #666; box-shadow: 0 0 5px #666; } /* START: Page Header CSS */ .tj-page-header { padding-top: 287px; padding-bottom: 170px; background-position: center; background-size: cover; background-repeat: no-repeat; background-color: var(--tj-color-theme-dark); position: relative; overflow: hidden; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-page-header { padding-top: 230px; padding-bottom: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-page-header { padding-top: 210px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-page-header { padding-top: 210px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-page-header { padding-top: 140px; padding-bottom: 80px; } } .tj-page-header::before { position: absolute; content: ""; top: 0; inset-inline-start: 0; width: 100%; height: 100%; z-index: -1; background-color: rgb(0 0 0 / 57%); } .tj-page-title { color: var(--tj-color-common-white); font-size: 48px; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-page-title { font-size: 42px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-page-title { font-size: 36px; } } .tj-page-link { margin-top: 25px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 10px; position: relative; border-radius: 50px; background: rgba(247, 247, 247, 0.1); padding: 8px 15px; z-index: 2; } .tj-page-link span { color: var(--tj-color-common-white); font-size: 16px; position: relative; display: inline-block; line-height: 1; } .tj-page-link span a:hover span { color: var(--tj-color-theme-primary); } /* !END: Page Header CSS */ /* START: Hero CSS */ .tj-hero-section { position: relative; padding-top: 170px; background-color: var(--tj-color-theme-dark); z-index: 1; overflow: hidden; } .tj-hero-section::before { position: absolute; content: ""; bottom: -1px; inset-inline-start: 0; width: 100%; height: 40px; -webkit-mask-image: url(../images/shapes/h1-hero-shapes.svg); mask-image: url(../images/shapes/h1-hero-shapes.svg); background: var(--tj-color-common-white); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: contain; mask-size: contain; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section { padding-top: 235px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section { padding-top: 140px; } } .heroStack { position: relative; z-index: 1; } .heroStack .stackOverlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); z-index: 1; opacity: 1; } .heroStack .tj-hero-section::before { display: none; } .tj-hero-section-two { padding-top: 246px; padding-bottom: 120px; background: var(--tj-color-common-white); position: relative; z-index: 2; overflow: hidden; } .tj-hero-section-two::before { position: absolute; content: ""; top: 0; inset-inline-start: 0; width: 100%; height: 65%; background: var(--tj-color-theme-bg); } .tj-hero-section-two::after { position: absolute; content: ""; top: -15%; inset-inline-end: -10%; width: 520px; height: 520px; background: var(--tj-color-theme-primary); border-radius: 50%; -webkit-filter: blur(180px); filter: blur(180px); opacity: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-two::after { width: 375px; height: 375px; -webkit-filter: blur(130px); filter: blur(130px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-two::after { inset-inline-end: -20%; width: 310px; height: 310px; -webkit-filter: blur(100px); filter: blur(100px); } } .tj-hero-section-two .hero_shapes { position: absolute; top: 0; inset-inline-end: 0; max-width: 300px; width: 100%; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-section-two .hero_shapes { max-width: 250px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-two .hero_shapes { max-width: 200px; inset-inline-end: -75px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-two .hero_shapes { max-width: 200px; inset-inline-end: -80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-section-two { padding-top: 180px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-two { padding-top: 160px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-two { padding-top: 140px; padding-bottom: 80px; } } .hero-wrapper-two { position: relative; margin-bottom: 140px; z-index: 1; } .hero-wrapper-two .shape-1 { position: absolute; bottom: -50px; inset-inline-start: -45px; max-width: 30px; width: 100%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-wrapper-two .shape-1 { inset-inline-start: -20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-wrapper-two .shape-1 { inset-inline-start: -15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-wrapper-two { margin-bottom: 100px; } } .hero-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-wrapper { gap: 60px; } } .hero-content-two { position: relative; max-width: 915px; width: 100%; z-index: 2; } .hero-content-two .hero-title { letter-spacing: -0.025em; margin-bottom: 0; line-height: 1; } .hero-content-two .hero-title span { color: var(--tj-color-theme-primary); } .hero-content-two .desc { position: absolute; bottom: -55px; inset-inline-start: 52%; -webkit-padding-start: 15px; padding-inline-start: 15px; max-width: 325px; width: 100%; font-size: 18px; -webkit-margin-start: auto; margin-inline-start: auto; } .hero-content-two .desc p:last-child { margin-bottom: 0; } .hero-content-two .desc span { display: inline-block; max-width: 12px; width: 100%; position: absolute; top: -14px; inset-inline-start: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-two .desc span { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-two .desc { inset-inline-start: 67%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-two .desc { margin-top: 30px; -webkit-padding-start: 0; padding-inline-start: 0; position: unset; max-width: 100%; } } .hero-content { max-width: 665px; width: 100%; padding-top: 80px; position: relative; z-index: 1; } .hero-content .hero-title { color: var(--tj-color-common-white); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 20px; } .hero-content .hero-title .active-color { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content .hero-title { font-size: 45px; } } .hero-content .desc { font-size: 18px; color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); max-width: 530px; width: 100%; line-height: 1.5; } .hero-content .desc p:last-child { margin-bottom: 0; } .hero-content .hero-button { margin-top: 40px; background-color: var(--tj-color-common-white); } .hero-content .hero-button .btn_text { color: var(--tj-color-heading-primary); } .hero-content .hero-shapes-1 { position: absolute; top: -30px; inset-inline-start: -25%; z-index: -1; max-width: 265px; width: 100%; opacity: 0.4; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content .hero-shapes-1 { top: -135px; inset-inline-end: -10%; inset-inline-start: auto; max-width: 230px; } } .hero-content .hero-shapes-1 img { width: 100%; mix-blend-mode: luminosity; } .hero-content .hero-shapes-2 { position: absolute; position: absolute; inset-inline-end: 75px; bottom: 30%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content .hero-shapes-2 { inset-inline-end: 35px; bottom: 10%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content { -webkit-padding-start: 65px; padding-inline-start: 65px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content { max-width: 460px; -webkit-padding-start: 40px; padding-inline-start: 40px; padding-top: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content { max-width: 100%; -webkit-padding-start: 0px; padding-inline-start: 0px; padding-top: 0px; } .hero-content .hero-buuton { margin-top: 25px; } } .hero-images-box { position: relative; max-width: 610px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; z-index: 1; } .hero-images-box img { width: 100%; } .hero-images-box .images-shapes { position: absolute; top: -30px; inset-inline-end: -78px; z-index: -1; opacity: 0.3; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-images-box { max-width: 430px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-images-box { max-width: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box { max-width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } } .hero-images-box-two { position: relative; max-width: 1800px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; height: 860px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-images-box-two { height: 760px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-images-box-two { height: 660px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-images-box-two { height: 560px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-images-box-two { height: 460px; } } @media (max-width: 575px) { .hero-images-box-two { height: 390px; } } .hero-images-box-two img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .hero-images-box-two .hero-button { position: absolute; top: -35px; inset-inline-end: 22%; z-index: 2; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-images-box-two .hero-button { inset-inline-end: 15%; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-images-box-two .hero-button { inset-inline-end: 10%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-two .hero-button { inset-inline-end: 15%; } } .hero-images-box-two .hero-button::before { position: absolute; content: ""; width: 196px; height: 196px; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--tj-color-theme-bg); border-radius: 50%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-two .hero-button::before { width: 130px; height: 130px; } } .hero-images-box-two .hero-button .hero-btn { position: relative; z-index: 1; } .hero-images-box-two .hero-button .hero-btn::before { position: absolute; content: ""; width: 160px; height: 160px; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: var(--tj-color-theme-dark); border-radius: 50%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-two .hero-button .hero-btn::before { width: 110px; height: 110px; } } .hero-images-box-two .hero-button .hero-btn::after { position: absolute; content: ""; width: 120px; height: 120px; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-image: url(../images/shapes/h3-circle.png); background-repeat: no-repeat; background-size: contain; background-position: center; -webkit-animation: rotateImg-two 10s infinite linear; animation: rotateImg-two 10s infinite linear; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-two .hero-button .hero-btn::after { width: 90px; height: 90px; } } .hero-images-box-two .hero-button .hero-btn .blue { 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: 64px; height: 64px; font-size: 20px; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-radius: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-two .hero-button .hero-btn .blue { width: 44px; height: 44px; font-size: 18px; } } .hero-images-box-two .hero-button .hero-btn .blue span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; } .hero-images-box-two .hero-button .hero-btn .blue span i:first-child, .hero-images-box-two .hero-button .hero-btn .blue span i:last-child { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; transition: -webkit-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s; } .hero-images-box-two .hero-button .hero-btn .blue span i:last-child { position: absolute; -webkit-transform: translateY(-150%); -ms-transform: translateY(-150%); transform: translateY(-150%); } .hero-images-box-two .hero-button .hero-btn:hover .blue span i:first-child { -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%); } .hero-images-box-two .hero-button .hero-btn:hover .blue span i:last-child { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .hero-circle { position: absolute; max-width: 150px; width: 100%; height: 130px; top: 50%; inset-inline-start: -1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-mask-image: url(../images/shapes/h1-hero-video.svg); mask-image: url(../images/shapes/h1-hero-video.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: var(--tj-color-theme-dark); -webkit-mask-position: center; mask-position: center; z-index: 1; } .hero-circle .circle-wrap { position: absolute; width: 100px; height: 100px; top: 50%; inset-inline-end: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-circle .circle-wrap .rotate-image { position: absolute; inset-inline-start: 50%; top: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: rotateImg 10s infinite linear; animation: rotateImg 10s infinite linear; } .hero-circle .circle-wrap .rotate-image textPath { fill: var(--tj-color-common-white); } .hero-circle .circle-wrap .circle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 58px; height: 58px; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-radius: 50%; text-decoration: none; line-height: 1; z-index: 5; } .hero-circle .circle-wrap:hover .circle { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-circle { height: 115px; max-width: 132px; } .hero-circle .circle-wrap { width: 90px; height: 90px; inset-inline-end: 12px; } } .hero_scroll { position: absolute; inset-inline-start: 15px; bottom: 100px; border: 1px solid var(--tj-color-border-1); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); border-radius: 70px; padding: 6px 20px; z-index: 2; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .hero_scroll .down { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 14px; gap: 12px; color: var(--tj-color-border-2); text-decoration: none; font-weight: var(--tj-fw-bold); text-transform: uppercase; } .hero_scroll .down span { -webkit-animation: bounce 2s infinite; animation: bounce 2s infinite; } .hero_scroll:hover { border-color: var(--tj-color-theme-primary); } .hero_scroll:hover .down { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero_scroll { inset-inline-start: -6px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero_scroll { inset-inline-start: -35px; } } /* !END: Hero CSS */ /* START: Feature CSS */ .tj-feature-section { overflow: hidden; } .tj-feature-section.with-shape { position: relative; z-index: 3; padding-top: 40px; margin-top: -40px; } .tj-feature-section.with-shape::before { position: absolute; content: ""; top: 1px; inset-inline-start: 0; width: 100%; height: 40px; -webkit-mask-image: url(../images/shapes/h1-hero-shapes.svg); mask-image: url(../images/shapes/h1-hero-shapes.svg); background: var(--tj-color-common-white); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: contain; mask-size: contain; z-index: 2; } .tj-feature-section-wrap { background-color: var(--tj-color-common-white); } .tj-feature-section .sec-heading { max-width: 585px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } .tj-feature-section .sec-heading .desc p:last-child { margin-bottom: 0; } .tj-feature-section-two { position: relative; z-index: 2; overflow: hidden; } .tj-feature-section-two .sec-heading { max-width: 500px; width: 100%; -webkit-margin-start: 0; margin-inline-start: 0; margin-bottom: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-feature-section-two .sec-heading .sec-title { color: var(--tj-color-common-white); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-feature-section-two .sec-heading { margin-bottom: 40px; } } .tj-feature-section-two .feature-bg-images { position: absolute; bottom: 0; inset-inline-end: 0; max-width: 1050px; width: 100%; height: calc(100% - 120px); z-index: -1; } .tj-feature-section-two .feature-bg-images img { height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tj-feature-section-two .feature-bg-images { max-width: 850px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-feature-section-two .feature-bg-images { max-width: 790px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-feature-section-two .feature-bg-images { max-width: 100%; height: 100%; } } .feature-item { border: 1px solid var(--tj-color-border-2); padding: 40px 30px; background-color: var(--tj-color-common-white); } .feature-item .feature-icon { max-width: 80px; width: 100%; margin-bottom: 35px; } .feature-item .feature-content .title { margin-bottom: 20px; letter-spacing: -0.025em; } .feature-item .feature-content .desc { line-height: 1.5; } .feature-item .feature-content .desc p:last-child { margin-bottom: 0; } .feature-item:hover .feature-icon { -webkit-animation: wobble-horizontal-hover 1s ease-in-out 1; animation: wobble-horizontal-hover 1s ease-in-out 1; } .feature-item.hover-bg { position: relative; overflow: hidden; z-index: 1; } .feature-item.hover-bg::before { content: ""; position: absolute; top: 0; inset-inline-start: auto; inset-inline-end: 0; width: 0; height: 100%; background-color: var(--tj-color-theme-bg); border-color: var(--tj-color-theme-bg); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: -1; } .feature-item.hover-bg:hover::before { width: 100%; inset-inline-start: 0; inset-inline-end: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-item { padding: 35px 15px; } } /* !END: Feature CSS */ /* START: About CSS */ .tj-about-section { background-color: var(--tj-color-common-white); padding-top: 140px; padding-bottom: 140px; position: relative; z-index: 1; overflow: hidden; } .tj-about-section::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; border-radius: 0 0 var(--br-bottom-left) 0; background: var(--tj-color-theme-bg); z-index: -1; -webkit-transition: none; transition: none; } .tj-about-section .sec-heading { margin-bottom: 0px; } .tj-about-section .about-bg-images .about-shape-1 { position: absolute; max-width: 745px; width: 100%; height: 676px; top: 50%; inset-inline-start: 0px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-mask-image: url(../img/about-mark-1.svg); mask-image: url(../img/about-mark-1.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--tj-color-common-white); -webkit-mask-position: center; mask-position: center; } .tj-about-section .about-bg-images .about-shape-1 img { height: 100%; -o-object-fit: contain; object-fit: contain; max-width: 100%; } .tj-about-section .about-bg-images .about-shape-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; max-width: 187px; width: 100%; height: 185px; position: absolute; top: -1px; inset-inline-start: 35%; -webkit-mask-image: url(../img/about-mark-2.svg); mask-image: url(../img/about-mark-2.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--tj-color-common-white); -webkit-mask-position: center; mask-position: center; } .tj-about-section .about-bg-images .about-shape-2 img { max-width: 74%; margin-top: 20px; } .tj-about-section .about-bg-images .about-shape-3 { position: absolute; inset-inline-start: 42%; bottom: 135px; max-width: 42px; width: 100%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tj-about-section .about-bg-images .about-shape-1 { max-width: 660px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-about-section { padding-top: 120px; padding-bottom: 120px; } .tj-about-section .about-bg-images .about-shape-1 { max-width: 565px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-about-section { padding-top: 100px; padding-bottom: 100px; } .tj-about-section::before { width: 100%; border-radius: 0 0 300px 0; } .tj-about-section .about-bg-images .about-shape-1 { max-width: 475px; } .tj-about-section .about-bg-images .about-shape-2 { inset-inline-start: 28%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-section { padding-top: 80px; padding-bottom: 80px; } .tj-about-section::before { width: 100%; border-radius: 0px; } .tj-about-section .sec-heading .sec-title { margin-bottom: 15px; } .tj-about-section .about-bg-images .about-shape-2, .tj-about-section .about-bg-images .about-shape-1 { display: none; } } .tj-about-section-two { background-color: var(--tj-color-theme-bg); } .about-wrapper-two { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 100px; -moz-column-gap: 100px; column-gap: 100px; position: relative; z-index: 2; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .about-wrapper-two { -webkit-column-gap: 80px; -moz-column-gap: 80px; column-gap: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .about-wrapper-two { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-wrapper-two { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-two { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 50px; } } .about-wrapper-two .about_images { position: absolute; bottom: 0; inset-inline-end: -75px; max-width: 200px; width: 100%; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 12%, 12% 0); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 12%, 12% 0); } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .about-wrapper-two .about_images { inset-inline-end: -20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .about-wrapper-two .about_images { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .about-wrapper-two .about_images { inset-inline-end: 0; bottom: unset; top: 22%; max-width: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-wrapper-two .about_images { top: 25%; max-width: 150px; } } .about-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .about-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper { gap: 40px; } } .about-left-content .desc { max-width: 540px; width: 100%; margin-bottom: 30px; } .about-left-content .desc p:last-child { margin-bottom: 0; } .about-feature-item { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 100%; width: 100%; border-top: 1px solid var(--tj-color-border-2); } .about-feature-item .feature-box { padding-top: 30px; -webkit-padding-end: 30px; padding-inline-end: 30px; -webkit-margin-end: 30px; margin-inline-end: 30px; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); } .about-feature-item .feature-box:last-child { -webkit-border-end: none; border-inline-end: none; } .about-feature-item .about-button { margin-top: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-feature-item .about-button { margin-top: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) { .about-feature-item .feature-box { -webkit-padding-end: 35px; padding-inline-end: 35px; -webkit-margin-end: 30px; margin-inline-end: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-feature-item .feature-box { -webkit-padding-end: 20px; padding-inline-end: 20px; -webkit-margin-end: 20px; margin-inline-end: 20px; } } @media (max-width: 575px) { .about-feature-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .about-feature-item .feature-box { -webkit-padding-end: 0; padding-inline-end: 0; -webkit-margin-end: 0; margin-inline-end: 0; padding-bottom: 30px; -webkit-border-end: 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-2); } .about-feature-item .feature-box:last-child { border: 0; padding-bottom: 0; } .about-feature-item .feature-box .client-experience .funfact-item-one .number { font-size: 40px; } .about-feature-item .feature-box .client-experience .funfact-item-one .sub-title { font-size: 14px; } } .check-list-one ul { margin: 0; padding: 0; list-style: none; } .check-list-one ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 10px; font-family: var(--tj-ff-heading); font-size: 16px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; margin-bottom: 10px; } .check-list-one ul li:last-child { margin-bottom: 0; } .check-list-one ul li i { font-size: 22px; margin-top: 2px; color: var(--tj-color-theme-primary); } .client-experience .images-thumb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0; padding: 0; list-style: none; margin-bottom: 20px; } .client-experience .images-thumb li { position: relative; max-width: 50px; width: 100%; background-color: var(--tj-color-common-white); border-radius: 50%; -webkit-margin-start: -18px; margin-inline-start: -18px; z-index: 2; } .client-experience .images-thumb li:first-child { -webkit-margin-start: 0; margin-inline-start: 0; } .client-experience .images-thumb li img { height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; padding: 3px; -webkit-filter: grayscale(1); filter: grayscale(1); } .client-experience .images-thumb li.plus { background-color: var(--tj-color-common-white); padding: 3px; max-width: 50px; width: 100%; } .client-experience .images-thumb li.plus i { 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: 44px; height: 44px; font-size: 13px; line-height: 1; color: var(--tj-color-common-white); background: var(--tj-color-theme-dark); border-radius: 50%; } .funfact-item-one .number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 48px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; margin-bottom: 4px; line-height: 1; font-family: var(--tj-ff-heading); } .funfact-item-one .number .odometer { font-family: var(--tj-ff-heading); line-height: 1; } .funfact-item-one .sub-title { display: inline-block; font-size: 16px; font-weight: var(--tj-fw-regular); } @media (max-width: 575px) { .funfact-item-one .sub-title br { display: none; } } .about-images-group-one { max-width: 400px; width: 100%; position: relative; z-index: 2; } .about-images-group-one .about-author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 20px; -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); background: rgba(247, 247, 247, 0.1); max-width: 360px; width: 100%; padding: 20px 25px; } .about-images-group-one .about-author .signature { -webkit-border-end: 1px solid rgba(247, 247, 247, 0.2); border-inline-end: 1px solid rgba(247, 247, 247, 0.2); -webkit-padding-end: 20px; padding-inline-end: 20px; -webkit-margin-end: 20px; margin-inline-end: 20px; } .about-images-group-one .about-author .author-name .title { color: var(--tj-color-common-white); margin-bottom: 0; letter-spacing: -0.04em; } .about-images-group-one .about-author .author-name .sub-title { display: inline-block; font-size: 14px; color: var(--tj-color-common-white-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-images-group-one { max-width: 370px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-images-group-one { max-width: 330px; } .about-images-group-one .about-author { max-width: 318px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-images-group-one { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; max-width: 100%; } .about-images-group-one img { width: 100%; } } @media (max-width: 575px) { .about-images-group-one { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; max-width: 100%; } .about-images-group-one img { width: 100%; } .about-images-group-one .about-author { max-width: 310px; } } .about-images-group-two { max-width: 565px; width: 100%; position: relative; z-index: 1; } .about-images-group-two img { -webkit-clip-path: polygon(0 0, 94% 0%, 100% 6%, 100% 100%, 0 100%); clip-path: polygon(0 0, 94% 0%, 100% 6%, 100% 100%, 0 100%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-images-group-two { max-width: 440px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-images-group-two { max-width: 100%; } } .about-video-box { position: absolute; bottom: 30px; inset-inline-start: 30px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); max-width: 240px; padding: 45px 30px 35px; width: 100%; } @media (max-width: 575px) { .about-video-box { padding: 30px; } } .about-video-box .sub-title { display: inline-block; color: var(--tj-color-common-black-3); margin-bottom: 6px; } .about-video-box .title { color: var(--tj-color-common-white); letter-spacing: -0.04em; margin-bottom: 0; } .about-video-box .video-box .video-popup { 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: 65px; height: 65px; line-height: 1; color: var(--tj-color-common-white); background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); border-radius: 50%; margin-bottom: 30px; -webkit-animation: pulse-two 2s ease infinite; animation: pulse-two 2s ease infinite; } .about-video-box .video-box .video-popup::before { position: absolute; content: ""; width: 90px; height: 90px; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); transform: translate(-50%, -50%); border-radius: 50%; display: none; } .about-content-two { max-width: 435px; width: 100%; -webkit-padding-start: 40px; padding-inline-start: 40px; } .about-content-two .sec-heading { margin-bottom: 0; } .about-content-two .sec-heading .sec-title { letter-spacing: -0.025em; margin-bottom: 0; } .about-content-two .sec-heading .desc { margin-top: 15px; } .about-content-two .sec-heading .desc p:last-child { margin-bottom: 0; } .about-content-two .sec-heading .about-feature-item { padding-top: 35px; border-top: none; } .about-content-two .sec-heading .about-feature-item .feature-box { padding-top: 0px; -webkit-padding-end: 0px; padding-inline-end: 0px; -webkit-margin-end: 0px; margin-inline-end: 0px; } .about-content-two .sec-heading .about-button { margin-top: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-content-two { max-width: 390px; -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-two { -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-content-two { max-width: 325px; -webkit-padding-start: 0; padding-inline-start: 0; } .about-content-two .sec-heading .about-feature-item { padding-top: 20px; } .about-content-two .sec-heading .about-button { margin-top: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-content-two { max-width: 100%; -webkit-padding-start: 0; padding-inline-start: 0; } .about-content-two .sec-heading .about-feature-item { padding-top: 20px; } .about-content-two .sec-heading .about-button { margin-top: 25px; } } .about-content-three { position: relative; max-width: 510px; width: 100%; z-index: 1; } .about-content-three .sec-heading { margin-bottom: 0; } .about-content-three .sec-heading .sec-title { letter-spacing: -0.025em; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-three .sec-heading .sec-title { font-size: 40px; } } .about-content-three .sec-heading .desc p:last-child { margin-bottom: 0; } .about-content-three .sec-heading .check-list-one { margin-top: 30px; } .about-content-three .sec-heading .about-button { margin-top: 35px; } .about-content-three .about-shapes { position: absolute; bottom: -15px; inset-inline-end: 25%; max-width: 28px; width: 100%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-three { max-width: 465px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-content-three { max-width: 100%; } } .funfact-item-two { 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; max-width: 400px; width: 100%; height: 435px; -webkit-mask-image: url(../images/shapes/h2-counter-shapes.svg); mask-image: url(../images/shapes/h2-counter-shapes.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-common-white); } .funfact-item-two .funfact-box { max-width: 250px; width: 100%; } .funfact-item-two .number { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 60px; color: var(--tj-color-theme-primary); font-weight: var(--tj-fw-medium); line-height: 1; } .funfact-item-two .number span { font-family: var(--tj-ff-heading); font-size: 156px; font-weight: var(--tj-fw-bold); line-height: 1; color: var(--tj-color-theme-primary); } .funfact-item-two .sub-title { margin-top: -30px; display: inline-block; line-height: 1.5; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .funfact-item-two { max-width: 295px; height: 295px; } .funfact-item-two .funfact-box { max-width: 224px; text-align: center; } .funfact-item-two .number { font-size: 50px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .funfact-item-two .number span { font-size: 95px; } .funfact-item-two .sub-title { margin-top: -10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .funfact-item-two { max-width: 340px; height: 350px; } .funfact-item-two .funfact-box { text-align: center; } .funfact-item-two .number { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .funfact-item-two .number span { font-size: 110px; } .funfact-item-two .sub-title { margin-top: -10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .funfact-item-two { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; max-width: 350px; height: 350px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } .funfact-item-two .funfact-box { text-align: center; } .funfact-item-two .number { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .funfact-item-two .number span { font-size: 110px; } .funfact-item-two .sub-title { margin-top: -10px; } } @media (max-width: 575px) { .funfact-item-two { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; max-width: 325px; height: 325px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } .funfact-item-two .funfact-box { text-align: center; } .funfact-item-two .number { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .funfact-item-two .number span { font-size: 85px; } .funfact-item-two .sub-title { margin-top: -10px; } } /* !END: About CSS */ /* START: Brand CSS */ .tj-brand-section { position: relative; padding-top: 120px; padding-bottom: 80px; background-color: var(--tj-color-theme-dark); z-index: 1; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .tj-brand-section::before { top: -4px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tj-brand-section::before { top: -5px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-brand-section::before { top: -8px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-brand-section { padding-top: 100px; } .tj-brand-section::before { top: -10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-brand-section { padding-top: 80px; padding-bottom: 60px; } .tj-brand-section::before { top: -12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-brand-section { padding-top: 80px; padding-bottom: 60px; } .tj-brand-section::before { top: -13px; } } @media (max-width: 575px) { .tj-brand-section { padding-top: 60px; padding-bottom: 60px; } .tj-brand-section::before { top: -15px; } } .tj-brand-section-two .sec-heading { position: relative; z-index: 1; } .tj-brand-section-two .sec-heading::before { position: absolute; content: ""; width: 34%; height: 1px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-start: 0; background: var(--tj-color-border-2); z-index: -1; } .tj-brand-section-two .sec-heading::after { position: absolute; content: ""; width: 34%; height: 1px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-end: 0; background: var(--tj-color-border-2); z-index: -1; } .tj-brand-section-two .sec-heading .sec-title { max-width: 395px; width: 100%; background: var(--tj-color-theme-bg); font-size: 16px; font-family: var(--tj-ff-body); padding: 5px 20px 8px; border-radius: 40px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 0; outline: 8px solid var(--tj-color-common-white); } .tj-brand-section-two .sec-heading .sec-title span { color: var(--tj-color-theme-primary); } @media (max-width: 575px) { .tj-brand-section-two .sec-heading .sec-title { max-width: 305px; } } .brand-slider-1 { overflow: hidden; position: relative; z-index: 1; } .brand-slider-1::before, .brand-slider-1::after { content: ""; position: absolute; width: 308px; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-theme-dark)), to(rgba(5, 18, 41, 0))); background-image: linear-gradient(90deg, var(--tj-color-theme-dark) 0%, rgba(5, 18, 41, 0) 100%); top: 0; inset-inline-start: 0; z-index: 2; } .brand-slider-1::after { inset-inline-start: auto; inset-inline-end: 0; background-image: -webkit-gradient(linear, right top, left top, from(var(--tj-color-theme-dark)), to(rgba(5, 18, 41, 0))); background-image: linear-gradient(-90deg, var(--tj-color-theme-dark) 0%, rgba(5, 18, 41, 0) 100%); } .brand-slider-1 .brand_wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .brand-slider-1 .brand-logo { 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: 195px; height: 74px; background: rgba(247, 247, 247, 0.1); } @media (max-width: 575px) { .brand-slider-1 .brand-logo { width: 165px; height: 60px; } } @media (max-width: 575px) { .brand-slider-1::before { width: 150px; } .brand-slider-1::after { width: 150px; } } .brand-slider-2 { overflow: hidden; position: relative; z-index: 1; } .brand-slider-2::before, .brand-slider-2::after { content: ""; position: absolute; width: 20%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-common-white)), to(rgba(247, 247, 247, 0))); background-image: linear-gradient(90deg, var(--tj-color-common-white) 0%, rgba(247, 247, 247, 0) 100%); top: 0; inset-inline-start: 0; z-index: 2; } .brand-slider-2::after { inset-inline-start: auto; inset-inline-end: 0; background-image: -webkit-gradient(linear, right top, left top, from(var(--tj-color-common-white)), to(rgba(247, 247, 247, 0))); background-image: linear-gradient(-90deg, var(--tj-color-common-white) 0%, rgba(247, 247, 247, 0) 100%); } .brand-slider-2 .brand_wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .brand-slider-2 .brand-logo { 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: 205px; height: 110px; /* background: rgb(225, 232, 240); */ } @media (max-width: 575px) { .brand-slider-2 .brand-logo { width: 165px; height: 60px; } } .brand-slider-2 .brand-logo img { -webkit-filter: invert(1); filter: invert(1); } @media (max-width: 575px) { .brand-slider-2::before { width: 150px; } .brand-slider-2::after { width: 150px; } } /* !END: Brand CSS */ /* START: Blog CSS */ .under-line a:hover { color: var(--tj-color-theme-primary); } .tj-blog-section { padding-top: 120px; padding-bottom: 120px; overflow: hidden; } .tj-blog-section.with-shape { position: relative; padding-top: 0; padding-bottom: 0; overflow: hidden; padding-bottom: 40px; margin-bottom: -40px; z-index: 1; } .tj-blog-section.with-shape::before { position: absolute; content: ""; bottom: 1px; inset-inline-start: 0; width: 100%; height: 40px; /* -webkit-mask-image: url(../images/shapes/brand-shapes.svg); mask-image: url(../images/shapes/brand-shapes.svg); */ background: var(--tj-color-common-white); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: top center; mask-position: top center; -webkit-mask-size: contain; mask-size: contain; z-index: 2; } .tj-blog-section-wrap { background-color: var(--tj-color-common-white); /* padding-top: 120px; */ /* padding-bottom: 120px; */ } .tj-blog-section .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tj-blog-section .sec-heading .sec-title { margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-blog-section { padding-top: 100px; padding-bottom: 100px; } .tj-blog-section-wrap { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-section { padding-top: 40px; padding-bottom: 40px; } .tj-blog-section-wrap { padding-top: 0px; padding-bottom: 40px; } .tj-blog-section .blog-button { margin-top: 35px; } } .tj-blog-section-two { overflow: hidden; } .tj-blog-section-three { overflow: hidden; } .tj-blog-section-three .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; } .tj-blog-section-three .sec-heading .sec-text .sec-title { margin-bottom: 0; } .blog-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr)); grid-gap: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .blog-wrapper .blog-item:first-child { grid-row: 1/4; -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: start; gap: 0; } .blog-wrapper .blog-item:first-child .blog-images { max-width: 100%; height: auto; } .blog-wrapper .blog-item:first-child .blog-content { width: 100%; padding: 20px 15px; } .blog-wrapper .blog-item:first-child .blog-content .blog-title { font-size: 32px; } .blog-wrapper .blog-item:first-child .blog-content .desc { display: block; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .blog-wrapper { grid-template-columns: 696px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-wrapper { grid-template-columns: 516px; } .blog-wrapper .blog-item:first-child .blog-content { padding: 20px 0; } } @media (max-width: 575px) { .blog-wrapper { grid-template-columns: 100%; } .blog-wrapper .blog-item:first-child .blog-content { padding: 20px 0 10px 0; } .blog-wrapper .blog-item:first-child .blog-content .blog-title { font-size: 24px; } } .blog-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--tj-color-theme-bg); padding: 15px; gap: 15px; } .blog-item .blog-images { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 220px; max-height: 235px; height: 100%; width: 100%; margin-bottom: 0; overflow: hidden; } .blog-item .blog-images a { height: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; } .blog-item .blog-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-item .blog-content { width: calc(100% - 240px); } .blog-item .blog-content .blog-meta { margin-bottom: 15px; } .blog-item .blog-content .blog-title { margin: 0; font-size: 24px; letter-spacing: -0.025em; } .blog-item .blog-content .blog-title a:hover { color: var(--tj-color-theme-primary); background-size: 100% 1px; } .blog-item .blog-content .desc { margin-top: 15px; display: none; } .blog-item .blog-content .blog-button { margin-top: 20px; } .blog-item:is(:hover, :focus) .blog-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .blog-item:not(:first-child) .blog-content .blog-meta ul li:not(:first-child) { display: none; } .blog-item:not(:first-child) .blog-content .blog-meta ul li:not(:first-child)::after { display: none; } .blog-item:not(:first-child) .blog-content .blog-meta.meta-2 { margin-top: 30px; } .blog-item:not(:first-child) .blog-content .blog-meta.meta-2 ul li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .blog-item:not(:first-child) .blog-content .blog-meta.meta-2 ul li::after { display: inline-block; } .blog-item:not(:first-child) .blog-content .blog-button { display: none; } .blog-item:first-child .blog-content .blog-meta.meta-2 { display: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-item { -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: start; gap: 0; } .blog-item .blog-images { max-width: 100%; height: auto; } .blog-item .blog-content { width: 100%; padding: 20px 0; } .blog-item .blog-content .blog-title { font-size: 32px; } .blog-item:not(:first-child) .blog-content .blog-meta ul li:last-child, .blog-item:not(:first-child) .blog-content .blog-meta ul li::after { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } @media (max-width: 575px) { .blog-item .blog-content { width: 100%; padding: 20px 0 10px 0; } .blog-item .blog-content .blog-meta { margin-bottom: 15px; } .blog-item .blog-content .blog-title { font-size: 24px; } .blog-item .blog-content .desc { margin-top: 20px; } .blog-item .blog-content .blog-button { margin-top: 25px; } } .blog-style-2 .blog-images { position: relative; z-index: 1; overflow: hidden; } .blog-style-2 .blog-images .blog-date { position: absolute; inset-inline-end: 15px; bottom: 15px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 20px; text-align: center; } .blog-style-2 .blog-images .blog-date .date { display: block; font-family: var(--tj-ff-heading); font-size: 32px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-sbold); letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1; } .blog-style-2 .blog-images .blog-date .month { display: block; font-size: 14px; color: var(--tj-color-common-white-2); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; } .blog-style-2 .blog-content { border: 1px solid var(--tj-color-border-2); margin-top: -1px; padding: 20px 30px 30px; } .blog-style-2 .blog-content .blog-two-meta { margin-bottom: 15px; } .blog-style-2 .blog-content .title { letter-spacing: -0.025em; margin-bottom: 15px; line-height: 1.3; } .blog-style-2 .blog-content .desc p:last-child { margin-bottom: 0; } .blog-style-2 .blog-content .blog-button { margin-top: 20px; } .blog-style-2:is(:hover, :focus) .blog-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .blog-style-2 .blog-content { padding: 20px 15px 25px; } } .blog-style-3 .blog-images { position: relative; z-index: 1; overflow: hidden; } .blog-style-3 .blog-images a { display: inline-block; } .blog-style-3 .blog-images .blog_category { position: absolute; top: 15px; inset-inline-start: 15px; } .blog-style-3 .blog-content { background: var(--tj-color-theme-bg); padding: 25px 30px 30px; } .blog-style-3 .blog-content .blog-three-meta { margin-bottom: 15px; } .blog-style-3 .blog-content .title { letter-spacing: -0.025em; margin-bottom: 15px; } .blog-style-3 .blog-content .desc p:last-child { margin-bottom: 0; } .blog-style-3 .blog-content .blog-button { margin-top: 20px; } .blog-style-3:is(:hover, :focus) .blog-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .blog_category ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; } .blog_category ul li a { display: inline-block; font-size: 14px; color: var(--tj-color-common-white-2); background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); border-radius: 40px; padding: 6px 10px; line-height: 1; } .blog_category ul li a:hover { color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); } .blog-meta ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-meta ul li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; font-size: 14px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-black-2); z-index: 1; } .blog-meta ul li a { color: inherit; font-size: inherit; } .blog-meta ul li a:hover { color: var(--tj-color-theme-primary); } .blog-meta ul li:not(:last-child, .category) { -webkit-padding-end: 12px; padding-inline-end: 12px; } .blog-meta ul li:not(:last-child, .category)::after { content: ""; position: absolute; width: 4px; height: 4px; border-radius: 50%; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tj-color-common-white-2); } .blog-meta ul li.category a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 14px; line-height: 1; font-weight: var(--tj-fw-regular); background-color: transparent; border: 1px solid var(--tj-color-border-2); color: var(--tj-color-common-black-2); padding: 5px 10px; border-radius: 40px; } .blog-meta ul li.category a:hover { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .blog-two-meta ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-two-meta ul li { font-size: 14px; color: var(--tj-color-common-black-2); } .blog-two-meta ul li .meta-link { display: inline-block; font-size: 14px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-black-2); border: 1px solid var(--tj-color-border-2); border-radius: 40px; padding: 5px 10px; line-height: 1; } .blog-two-meta ul li .meta-link:is(:hover, :focus) { color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .blog-three-meta { position: relative; -webkit-padding-start: 52px; padding-inline-start: 52px; z-index: 1; } .blog-three-meta::before { position: absolute; content: ""; top: 50%; inset-inline-start: 0; width: 40px; height: 1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: var(--tj-color-common-white-2); } .blog-three-meta ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .blog-three-meta ul li { position: relative; font-size: 14px; color: var(--tj-color-common-black-2); -webkit-padding-end: 12px; padding-inline-end: 12px; -webkit-margin-end: 8px; margin-inline-end: 8px; z-index: 1; } .blog-three-meta ul li::before { position: absolute; content: ""; width: 4px; height: 4px; top: 50%; inset-inline-end: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: var(--tj-color-common-black-2); border-radius: 50%; } .blog-three-meta ul li:last-child::before { display: none; } .tj-post-wrapper { -webkit-padding-end: 25px; padding-inline-end: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-wrapper { -webkit-padding-end: 0; padding-inline-end: 0; } } .tj-post-item { border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); } .tj-post-item:not(:last-child) { margin-bottom: 30px; } .tj-post-item:hover .tj-post-thumb img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .tj-post-thumb { position: relative; overflow: hidden; } .tj-post-thumb a.play-btn { position: absolute; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 85px; height: 85px; font-size: 20px; color: var(--tj-color-theme-dark); background-color: var(--tj-color-common-white); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-animation: pulse 2s ease infinite; animation: pulse 2s ease infinite; } .tj-post-date { position: absolute; top: 30px; inset-inline-start: 30px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 20px; text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-date { top: 15px; inset-inline-start: 15px; } } .tj-post-date .date { display: block; font-family: var(--tj-ff-heading); font-size: 32px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-sbold); letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-date .date { font-size: 18px; } } .tj-post-date .month { display: block; font-size: 14px; color: var(--tj-color-common-white-2); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; } .tj-post-content { padding: 30px; } .tj-post-title { margin-bottom: 0; } .tj-post-title:hover a { color: var(--tj-color-theme-primary); } .tj-post-meta { margin-bottom: 15px; } .tj-post-meta ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tj-post-meta ul li span, .tj-post-meta ul li a { font-size: 14px; } .tj-post-meta ul li a { display: inline-block; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-black-2); border: 1px solid var(--tj-color-border-2); border-radius: 40px; padding: 5px 10px; line-height: 1; } .tj-post-meta ul li a.active, .tj-post-meta ul li a:is(:hover, :focus) { color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .tj-post-excerpt { margin-top: 15px; } .tj-post-btn { margin-top: 35px; } .blog-standard-slider .blog-navigation .slider-next, .blog-standard-slider .blog-navigation .slider-prev { 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: 50px; height: 50px; font-size: 18px; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-radius: 50%; position: absolute; top: 44%; inset-inline-start: 20px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 2; } .blog-standard-slider .blog-navigation .slider-next .anim-icon, .blog-standard-slider .blog-navigation .slider-prev .anim-icon { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .blog-standard-slider .blog-navigation .slider-next .anim-icon i, .blog-standard-slider .blog-navigation .slider-prev .anim-icon i { color: var(--tj-color-common-white); } .blog-standard-slider .blog-navigation .slider-next .anim-icon i:first-child, .blog-standard-slider .blog-navigation .slider-next .anim-icon i:last-child, .blog-standard-slider .blog-navigation .slider-prev .anim-icon i:first-child, .blog-standard-slider .blog-navigation .slider-prev .anim-icon i:last-child { position: relative; top: -1px; color: var(--tj-color-common-white); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .blog-standard-slider .blog-navigation .slider-next .anim-icon i:last-child, .blog-standard-slider .blog-navigation .slider-prev .anim-icon i:last-child { position: absolute; -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .blog-standard-slider .blog-navigation .slider-next:hover, .blog-standard-slider .blog-navigation .slider-prev:hover { color: var(--tj-color-heading-primary); background-color: var(--tj-color-theme-primary); } .blog-standard-slider .blog-navigation .slider-next:hover .anim-icon i:first-child, .blog-standard-slider .blog-navigation .slider-prev:hover .anim-icon i:first-child { -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .blog-standard-slider .blog-navigation .slider-next:hover .anim-icon i:last-child, .blog-standard-slider .blog-navigation .slider-prev:hover .anim-icon i:last-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .blog-standard-slider .blog-navigation .slider-next { inset-inline-start: auto; inset-inline-end: 20px; } .blog-standard-slider .blog-navigation .slider-next .anim-icon i:last-child { -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .blog-standard-slider .blog-navigation .slider-next:hover .anim-icon i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .blog-standard-slider .blog-navigation .slider-next, .blog-standard-slider .blog-navigation .slider-prev { top: 42%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-standard-slider .blog-navigation .slider-next, .blog-standard-slider .blog-navigation .slider-prev { top: 40%; } } @media (max-width: 575px) { .blog-standard-slider .blog-navigation .slider-next, .blog-standard-slider .blog-navigation .slider-prev { width: 45px; height: 45px; top: 38%; } } .tj-pagination { margin-top: 50px; } .tj-pagination ul { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .tj-pagination ul li .page-numbers { display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid var(--tj-color-border-2); border-radius: 50%; font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); font-size: 18px; } .tj-pagination ul li .page-numbers i { line-height: 1; color: var(--tj-color-heading-primary); } .tj-pagination ul li .page-numbers:hover, .tj-pagination ul li .page-numbers.current { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border-color: var(--tj-color-theme-primary); } .tj-pagination ul li .page-numbers:hover i, .tj-pagination ul li .page-numbers.current i { color: var(--tj-color-common-white); } /* !END: Blog CSS */ /* START: Blog Details CSS */ .tj-post-single-post { margin-bottom: 50px; overflow: hidden; } .tj-post-single-post .tj-post-thumb { margin-bottom: 25px; } .tj-post-single-post .tj-entry-content img { margin: 30px 0; } .tj-post-single-post .tj-post-title { margin-bottom: 25px; } .tj-post-single-post .tj-post-meta { margin-bottom: 30px; } .tj-check-list { margin-top: 35px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-check-list { margin-top: 25px; } } .tj-check-list h4 { margin-bottom: 20px; } .tj-check-list ul { list-style: none; -webkit-padding-start: 30px; padding-inline-start: 30px; } @media (max-width: 575px) { .tj-check-list ul { -webkit-padding-start: 0; padding-inline-start: 0; } } .tj-check-list ul li { font-family: var(--tj-ff-heading); font-weight: 600; color: var(--tj-color-text-body); margin-bottom: 10px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tj-check-list ul li i { font-size: 24px; color: var(--tj-color-theme-primary); -webkit-margin-end: 8px; margin-inline-end: 8px; } .blog-category-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid var(--tj-color-border-2); margin-bottom: 25px; margin-top: 25px; padding: 22px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-category-two { padding: 20px; } } .blog-category-two .category-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); padding: 0 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .blog-category-two .category-item { padding: 0 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-category-two .category-item { padding: 0 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-category-two .category-item { padding: 0 20px; } } .blog-category-two .category-item:first-child { -webkit-padding-start: 0; padding-inline-start: 0; } .blog-category-two .category-item:last-child { -webkit-border-end: none; border-inline-end: none; -webkit-padding-end: 0; padding-inline-end: 0; } .blog-category-two .category-item .cate-images { width: 52px; height: 52px; } .blog-category-two .category-item .cate-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .blog-category-two .category-item .cate-text .degination { display: block; font-size: 14px; line-height: 1; color: var(--tj-color-text-body); margin-bottom: 10px; } .blog-category-two .category-item .cate-text .title:hover a { color: var(--tj-color-theme-primary); } .blog-category-two .category-item .cate-text h6 { margin-bottom: 0; } .blog-category-two .category-item .cate-icons { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 24px; width: 52px; height: 52px; line-height: 1; color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-bg-2); border-radius: 50%; } .blog-category-two .category-item .text { margin-bottom: 0; } @media (max-width: 575px) { .blog-category-two { -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 15px; } .blog-category-two .category-item { padding: 0; padding-bottom: 15px; -webkit-border-end: 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-2); width: 100%; } .blog-category-two .category-item:last-child { padding-bottom: 0; border-bottom: 0; } .blog-category-two .category-item .cate-text .degination { margin-bottom: 6px; } } blockquote { margin: 30px 0px !important; padding: 30px; -webkit-padding-start: 110px; padding-inline-start: 110px; color: var(--tj-color-theme-dark); position: relative; background: var(--tj-color-theme-bg); font-style: normal; text-align: start; clear: both; font-weight: 400; border: 1px solid var(--tj-color-theme-bg); font-size: 26px; line-height: 38px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { blockquote { font-size: 18px; line-height: 28px; } } blockquote::before { content: "\e90e"; position: absolute; inset-inline-start: 30px; top: 30px; font-family: "solvior-icons" !important; font-size: 64px; color: var(--tj-color-theme-primary); line-height: 1; display: inline-block; } blockquote p:last-child { margin-bottom: 0; } blockquote cite { font-size: 16px; display: block; margin-top: 10px; color: var(--tj-color-common-black-2); font-style: inherit; font-weight: 400; text-align: end; } blockquote cite::before { content: ""; display: inline-block; background: var(--tj-color-common-black-3); height: 1px; width: 40px; top: -4px; -webkit-margin-end: 10px; margin-inline-end: 10px; position: relative; } .tj-post-details_tags_share { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 25px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-top: 1px solid var(--tj-color-border-2); border-bottom: 1px solid var(--tj-color-border-2); padding-top: 25px; padding-bottom: 25px; margin-bottom: 30px; } .tj-post-details_tags_share .tag__title { display: inline-block; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); font-size: 16px; line-height: 1; text-transform: capitalize; } .tj-post-details_tags_share .tagcloud { width: calc(100% - 238px); } .tj-post-details_tags_share .tagcloud a { font-size: 16px !important; } .tj-post-details_tags_share .tj-socials_share { max-width: 208px; width: 100%; margin-top: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .tj-post-details_tags_share .tj-socials_share 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; width: 32px; height: 32px; border: 0; color: var(--tj-color-common-white); background-color: #aeb2b9; font-size: 16px; line-height: 1; border-radius: 50%; } .tj-post-details_tags_share .tj-socials_share a:hover { background-color: var(--tj-color-theme-primary); } .tj-post-details_tags_share.no-social-share .tagcloud { width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-details_tags_share .tagcloud { width: 100%; } } .tj-post__navigation { padding: 20px 30px; border: 1px solid var(--tj-color-border-2); display: -webkit-box; display: -ms-flexbox; display: flex; gap: 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 50px; } .tj-post__navigation .tj-nav-post__nav a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 15px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); } .tj-post__navigation .tj-nav-post__nav a span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background-color: var(--tj-color-theme-bg); font-size: 24px; line-height: 1; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-post__navigation .tj-nav-post__nav a span i { color: var(--tj-color-theme-primary); } .tj-post__navigation .tj-nav-post__nav a:hover span { background-color: var(--tj-color-theme-primary); } .tj-post__navigation .tj-nav-post__nav a:hover span i { color: var(--tj-color-common-white); } .tj-post__navigation .tj-nav-post__grid { font-size: 40px; line-height: 1; color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post__navigation { padding: 20px; gap: 15px; } } .tj-comments-wrap .comments-title .title { font-size: 28px; margin-bottom: 20px; } @media (max-width: 575px) { .tj-comments-wrap .comments-title .title { margin-bottom: 15px; } } .tj-latest-comments ul { margin: 0; padding: 0; list-style: none; } .tj-latest-comments ul .tj-comment { margin-bottom: 20px; } .tj-latest-comments ul .tj-comment:last-child { margin-bottom: 0; } .tj-latest-comments ul .tj-comment .comment-content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; padding: 30px; border: 1px solid var(--tj-color-border-2); position: relative; } .tj-latest-comments ul .tj-comment .comment-content .comment-avatar { max-width: 64px; width: 100%; } .tj-latest-comments ul .tj-comment .comment-content .comment-avatar img { width: 100%; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title { font-size: 18px; margin-bottom: 8px; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title a:hover { color: var(--tj-color-theme-primary); } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply { position: absolute; top: 30px; inset-inline-end: 30px; font-size: 14px; font-weight: var(--tj-fw-bold); color: var(--tj-color-theme-secondary); } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply i { -webkit-margin-end: 5px; margin-inline-end: 5px; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply:hover { color: var(--tj-color-theme-primary); } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text span { font-size: 14px; color: var(--tj-color-common-black-3); font-weight: var(--tj-fw-regular); } @media (max-width: 575px) { .tj-latest-comments ul .tj-comment .comment-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 20px; } .tj-latest-comments ul .tj-comment .comment-content .comment-avatar { -webkit-margin-end: auto; margin-inline-end: auto; } } .tj-latest-comments ul .tj-comment .desc { margin-top: 20px; } .tj-latest-comments ul .tj-comment .desc p:last-child { margin-bottom: 0; } .tj-latest-comments ul .tj-comment > .children { -webkit-padding-start: 75px; padding-inline-start: 75px; } .tj-latest-comments ul .tj-comment:last-child .comment-content .comments-header { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } @media (max-width: 575px) { .tj-latest-comments ul li .children { -webkit-padding-start: 35px; padding-inline-start: 35px; } } .tj-comments__container { margin-top: 50px; } .comment-respond .comment-reply-title { font-size: 28px; margin-bottom: 25px; } .comment-respond .form-input { margin-bottom: 25px; } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), .comment-respond .form-input textarea, .comment-respond .form-input input[type=email], .comment-respond .form-input input[type=text] { font-weight: var(--tj-fw-medium); background: var(--tj-color-theme-bg); height: 60px; padding: 18px 25px; border: 0; } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .comment-respond .form-input textarea::-webkit-input-placeholder, .comment-respond .form-input input[type=email]::-webkit-input-placeholder, .comment-respond .form-input input[type=text]::-webkit-input-placeholder { color: var(--tj-color-text-body-2); font-weight: var(--tj-fw-medium); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .comment-respond .form-input textarea::-moz-placeholder, .comment-respond .form-input input[type=email]::-moz-placeholder, .comment-respond .form-input input[type=text]::-moz-placeholder { color: var(--tj-color-text-body-2); font-weight: var(--tj-fw-medium); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .comment-respond .form-input textarea:-ms-input-placeholder, .comment-respond .form-input input[type=email]:-ms-input-placeholder, .comment-respond .form-input input[type=text]:-ms-input-placeholder { color: var(--tj-color-text-body-2); font-weight: var(--tj-fw-medium); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .comment-respond .form-input textarea::-ms-input-placeholder, .comment-respond .form-input input[type=email]::-ms-input-placeholder, .comment-respond .form-input input[type=text]::-ms-input-placeholder { color: var(--tj-color-text-body-2); font-weight: var(--tj-fw-medium); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder, .comment-respond .form-input textarea::placeholder, .comment-respond .form-input input[type=email]::placeholder, .comment-respond .form-input input[type=text]::placeholder { color: var(--tj-color-text-body-2); font-weight: var(--tj-fw-medium); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .comment-respond .form-input textarea::-ms-input-placeholder, .comment-respond .form-input input[type=email]::-ms-input-placeholder, .comment-respond .form-input input[type=text]::-ms-input-placeholder { color: var(--tj-color-text-body-2); font-weight: var(--tj-fw-medium); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus, .comment-respond .form-input textarea:focus, .comment-respond .form-input input[type=email]:focus, .comment-respond .form-input input[type=text]:focus { border-color: var(--tj-color-theme-primary); } .comment-respond .form-input textarea { min-height: 150px; resize: none; } .tj-sidebar-widget { padding: 35px 30px; border: 1px solid var(--tj-color-border-2); } .tj-sidebar-widget:not(:last-child) { margin-bottom: 30px; } .tj-sidebar-widget-title { margin-bottom: 30px; position: relative; padding-bottom: 14px; } .tj-sidebar-widget-title::before, .tj-sidebar-widget-title::after { position: absolute; content: ""; bottom: 0; height: 3px; background: var(--tj-color-theme-primary); } .tj-sidebar-widget-title::before { inset-inline-start: 0; width: 40px; } .tj-sidebar-widget-title::after { inset-inline-start: 45px; width: 10px; } .tj-sidebar-widget .sidebar-search form { position: relative; } .tj-sidebar-widget .sidebar-search form input[type=search] { border-radius: 0; width: 100%; height: 60px; padding: 16px 20px 16px 50px; border: 0; line-height: 1; color: var(--tj-color-body-text); background-color: var(--tj-color-theme-bg); -webkit-appearance: none; -moz-appearance: none; appearance: none; } .tj-sidebar-widget .sidebar-search form input[type=search]::-webkit-input-placeholder { color: var(--tj-color-common-black-2); } .tj-sidebar-widget .sidebar-search form input[type=search]::-moz-placeholder { color: var(--tj-color-common-black-2); } .tj-sidebar-widget .sidebar-search form input[type=search]:-ms-input-placeholder { color: var(--tj-color-common-black-2); } .tj-sidebar-widget .sidebar-search form input[type=search]::-ms-input-placeholder { color: var(--tj-color-common-black-2); } .tj-sidebar-widget .sidebar-search form input[type=search]::placeholder { color: var(--tj-color-common-black-2); } .tj-sidebar-widget .sidebar-search form button { position: absolute; top: 50%; inset-inline-start: 20px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; line-height: 1; color: var(--tj-color-common-black-2); } .tj-sidebar-widget .sidebar-search form button:hover { color: var(--tj-color-theme-primary); } .tj-sidebar-widget.widget_categories ul { margin: 0; padding: 0; list-style: none; } .tj-sidebar-widget.widget_categories ul li { 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: relative; font-size: 16px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); padding: 15px 25px; margin-bottom: 20px; color: var(--tj-color-heading-primary); background: var(--tj-color-theme-bg); z-index: 1; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .tj-sidebar-widget.widget_categories ul li:last-child { margin-bottom: 0; } .tj-sidebar-widget.widget_categories ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; color: var(--tj-color-heading-primary); } .tj-sidebar-widget.widget_categories ul li:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .tj-sidebar-widget.widget_categories ul li:hover a { color: var(--tj-color-common-white); } .tj-sidebar-widget.widget_categories ul li:hover a span { color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-sidebar-widget.widget_categories ul li { padding: 15px; } } .sidebar-recent-post .single-post { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; row-gap: 10px; } .sidebar-recent-post .single-post:not(:last-child) { margin-bottom: 25px; } .sidebar-recent-post .single-post .post-image { width: 100px; height: 100px; overflow: hidden; } .sidebar-recent-post .single-post .post-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 0; } .sidebar-recent-post .single-post .post-image a { display: inline-block; height: 100%; } .sidebar-recent-post .single-post:hover .post-image img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .sidebar-recent-post .single-post .post-header { width: calc(100% - 100px); } .sidebar-recent-post .single-post .post-header .title-link { margin-bottom: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sidebar-recent-post .single-post .post-header .title-link { font-size: 16px; } } .sidebar-recent-post .single-post .post-header .title-link a:hover { color: var(--tj-color-theme-primary); } .sidebar-recent-post .single-post .post-header .date { display: block; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sidebar-recent-post .single-post .post-header { width: calc(100% - 85px); } } .tagcloud { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .tagcloud a { position: relative; padding: 8px 10px; font-size: 16px; border: 1px solid var(--tj-color-border-2); background: transparent; line-height: 1; border-radius: 30px; z-index: 1; } .tagcloud a:hover { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .tj-sidebar-cta { height: 450px; padding: 40px 26px; 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; background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; z-index: 2; } .tj-sidebar-cta::before { position: absolute; top: 0; inset-inline-start: 0; content: ""; width: 100%; height: 100%; background: linear-gradient(153.92deg, #051229 43.48%, #0075ff 124.42%); z-index: -1; opacity: 0.85; } .tj-sidebar-cta .icon { margin-bottom: 30px; } .tj-sidebar-cta h3 { color: var(--tj-color-common-white); margin-bottom: 15px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-sidebar-cta h3 { font-size: 22px; } } .tj-sidebar-cta p { color: var(--tj-color-common-white-2); } .tj-sidebar-cta .cta-btn { position: relative; display: inline-block; max-width: 295px; } .tj-sidebar-cta .cta-btn .shapes { position: absolute; bottom: 20px; inset-inline-end: 30px; } /* !END: Blog Details CSS */ /* START: Project CSS */ .tj-project-section { padding-top: 120px; padding-bottom: 120px; background-color: var(--tj-color-theme-bg); overflow: hidden; } .tj-project-section .project-navigation { margin-top: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-project-section { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-section { padding-top: 80px; padding-bottom: 80px; } .tj-project-section .project-navigation { margin-top: 30px; } } .tj-project-section-two { position: relative; overflow: hidden; background-color: var(--tj-color-theme-dark); z-index: 1; } .tj-project-section-two .marquee-slider-wrapper-two { position: absolute; top: 120px; inset-inline-start: 0; width: 100%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-project-section-two .marquee-slider-wrapper-two { top: 120px; } } @media (max-width: 575px) { .tj-project-section-two .marquee-slider-wrapper-two { display: none; } } .tj-project-section-two .projects_button { margin-top: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tj-project-section-two .projects_button { margin-top: 40px; } } .project-section-three { background: var(--tj-color-theme-dark); overflow: hidden; } .project-section-three .sec-heading { max-width: 550px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } .project-section-three .sec-heading .sec-title { color: rgb(225, 232, 240); letter-spacing: -0.025em; } .project-wrapper { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 90px; -moz-column-gap: 90px; column-gap: 90px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; z-index: 2; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .project-wrapper { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 30px; } } .project-wrapper .project-style-2:nth-child(even) { margin-top: 300px; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .project-wrapper .project-style-2:nth-child(even) { margin-top: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper .project-style-2:nth-child(even) { margin-top: 0px; } } .project-item { position: relative; z-index: 1; overflow: hidden; } .project-item::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, var(--tj-color-theme-dark))); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, var(--tj-color-theme-dark) 84%); z-index: 3; } .project-item .project-image a { display: inline-block; width: 100%; } .project-item .project-image a img { width: 100%; height: 350px; } .project-item .project-content { position: absolute; bottom: 0; inset-inline-start: 0; width: 100%; padding: 15px 30px 40px 30px; z-index: 5; } .project-item .project-content .project-title .title { color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-bottom: 0; } .project-item .project-content .project-title .title a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; position: relative; z-index: 1; -webkit-padding-end: 30px; padding-inline-end: 30px; } .project-item .project-content .project-title .title a i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; position: absolute; inset-inline-end: 0; top: 5px; opacity: 0; visibility: hidden; } .project-item .project-content .project-title .title:hover { letter-spacing: 0; } .project-item .project-content .tag-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 11px; margin-top: 15px; } .project-item .project-content .tag-list a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-common-white-2); background: rgba(247, 247, 247, 0.1); font-size: 14px; line-height: 1; font-weight: var(--tj-fw-regular); padding: 6px 10px; border-radius: 40px; } .project-item .project-content .tag-list a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .project-item:hover .project-image img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .project-item:hover .project-content .project-title .title a i { visibility: visible; opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .project-item .project-content { padding: 15px 15px 35px 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project-item .project-content { padding: 15px 15px 35px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-item .project-content { padding: 15px 15px 35px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-item .project-content { padding: 15px 15px 30px 15px; } } .project-style-2 { max-width: 603px; width: 100%; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 15px 15px; margin-bottom: 300px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project-style-2 { max-width: 543px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-style-2 { max-width: 450px; margin-bottom: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project-style-2 { max-width: 332px; margin-bottom: 150px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-style-2 { margin-bottom: 0; } } .project-style-2 .project-images { overflow: hidden; position: relative; } .project-style-2 .project-images img { mix-blend-mode: luminosity; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; } .project-style-2 .project-images a { position: absolute; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%) scale(0.5); -ms-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 16px; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); width: 120px; height: 120px; padding: 3%; text-align: center; border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; } .project-style-2 .project-content { padding: 30px 15px 15px; } .project-style-2 .project-content .title { margin-bottom: 10px; } .project-style-2 .project-content .title a { color: var(--tj-color-common-white); } .project-style-2 .project-content .title:hover { letter-spacing: 0.026rem; } .project-style-2:hover .project-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .project-style-2:hover .project-images a { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; } .project-wrapper-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two { gap: 30px; } } .project-style-3 { position: relative; overflow: hidden; z-index: 1; } .project-style-3 .project-thumb { position: relative; width: 120px; height: 620px; -o-object-fit: cover; object-fit: cover; -webkit-border-start: 1px solid rgb(39, 53, 77); border-inline-start: 1px solid rgb(39, 53, 77); -webkit-border-end: 1px solid rgb(39, 53, 77); border-inline-end: 1px solid rgb(39, 53, 77); background-color: var(--tj-color-heading-primary); -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project-style-3 .project-thumb { width: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-style-3 .project-thumb { width: 80px; } } .project-style-3 .project-thumb .image { opacity: 0; visibility: hidden; width: 100%; height: 0; } .project-style-3 .project-thumb .image img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .project-style-3 .project-thumb .project-default-content .title { position: absolute; /* inset-inline-start: 50%; */ bottom: 0; -webkit-transform: translateX(100%) rotate(180deg); -ms-transform: translateX(100%) rotate(180deg); transform: translateX(100%) rotate(180deg); letter-spacing: -0.025em; color: var(--tj-color-common-white); -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; text-orientation: mixed; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .project-style-3 .project-thumb .project-default-content .title { -webkit-transform: translateX(57%) rotate(180deg); -ms-transform: translateX(57%) rotate(180deg); transform: translateX(57%) rotate(180deg); } } .project-style-3 .project-thumb .project-default-content span { position: absolute; inset-inline-start: 50%; top: 0; -webkit-transform: translateX(-50%) rotate(-45deg); -ms-transform: translateX(-50%) rotate(-45deg); transform: translateX(-50%) rotate(-45deg); 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: 64px; height: 64px; font-size: 28px; color: var(--tj-color-common-white); background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); border-radius: 50%; } .project-style-3 .project-content-box { position: absolute; bottom: 30px; inset-inline-start: 30px; max-width: 380px; width: 100%; opacity: 0; visibility: hidden; padding: 30px 30px; -webkit-transform: translateY(150%); -ms-transform: translateY(150%); transform: translateY(150%); -webkit-transition: all 0.9s; transition: all 0.9s; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); } @media (max-width: 575px) { .project-style-3 .project-content-box { inset-inline-start: 15px; bottom: 15px; max-width: 320px; padding: 25px; } } .project-style-3 .project-content-box .project-tags { margin-bottom: 25px; } .project-style-3 .project-content-box .project-tags ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 11px; -moz-column-gap: 11px; column-gap: 11px; row-gap: 11px; } .project-style-3 .project-content-box .project-tags ul li a { font-size: 14px; background: var(--tj-color-common-white); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); color: var(--tj-color-text-body); padding: 3px 10px 6px; line-height: 1; border-radius: 50px; } .project-style-3 .project-content-box .project-tags ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .project-style-3 .project-content-box .project-text .title { color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-bottom: 10px; } .project-style-3 .project-content-box .project-text .title:hover { letter-spacing: 0; } .project-style-3 .project-content-box .project-text .desc { color: var(--tj-color-common-white); } .project-style-3 .project-content-box .project-text .desc p:last-child { margin-bottom: 0; } .project-style-3 .project-content-box .project-text .project-button { margin-top: 20px; } .project-style-3 .project-content-box .project-text .project-button .project-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; color: var(--tj-color-common-white); font-size: 15px; font-weight: var(--tj-fw-bold); } .project-style-3 .project-content-box .project-text .project-button .project-btn i { position: relative; top: 1px; } .project-style-3 .project-content-box .project-text .project-button .project-btn::before { background: var(--tj-color-common-white); } .project-style-3.active .project-thumb { width: 735px; -webkit-border-start: 1px solid transparent; border-inline-start: 1px solid transparent; -webkit-border-end: 1px solid transparent; border-inline-end: 1px solid transparent; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project-style-3.active .project-thumb { width: 680px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-style-3.active .project-thumb { width: 535px; } } .project-style-3.active .project-thumb .image { height: 100%; opacity: 1; visibility: visible; } .project-style-3.active .project-thumb .project-default-content { opacity: 0; visibility: hidden; } .project-style-3.active .project-content-box { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-style-3 .project-thumb { -webkit-border-start: 1px solid transparent; border-inline-start: 1px solid transparent; -webkit-border-end: 1px solid transparent; border-inline-end: 1px solid transparent; } .project-style-3 .project-thumb .image { height: 100%; opacity: 1; visibility: visible; } .project-style-3 .project-thumb .project-default-content { opacity: 0; visibility: hidden; } .project-style-3 .project-content-box { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .project-category ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; row-gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .project-category ul li a { display: inline-block; color: var(--tj-color-common-white-2); background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); font-size: 14px; border-radius: 40px; padding: 6px 10px; line-height: 1; } .project-category ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two .project-style-3 .project-thumb { width: 100%; height: 90px; -webkit-border-start: 0; border-inline-start: 0; -webkit-border-end: 0; border-inline-end: 0; border-top: 1px solid rgb(39, 53, 77); border-bottom: 1px solid rgb(39, 53, 77); padding-top: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two .project-style-3 .project-thumb .project-default-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two .project-style-3 .project-thumb .project-default-content span { position: unset; -webkit-transform: unset; -ms-transform: unset; transform: unset; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two .project-style-3 .project-thumb .project-default-content .title { position: unset; -webkit-transform: unset; -ms-transform: unset; transform: unset; -webkit-writing-mode: unset; -ms-writing-mode: unset; writing-mode: unset; text-orientation: unset; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .project-wrapper-two .project-style-3.active .project-thumb { padding-top: 0; height: 565px; } } @media (max-width: 575px) { .project-wrapper-two .project-style-3.active .project-thumb { padding-top: 0; height: 495px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-wrapper-two .project-style-3 { width: 100%; } .project-wrapper-two .project-style-3 .project-thumb { padding-top: 0; height: 565px; } } @media (max-width: 575px) { .project-wrapper-two .project-style-3 .project-thumb { padding-top: 0; height: 495px; } } .project_catagory ul { margin: 0; padding: 0; list-style: none; } .project_catagory ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-weight: var(--tj-fw-sbold); padding: 19px 0; position: relative; z-index: 1; border-bottom: 1px solid var(--tj-color-border-3); } .project_catagory ul li:first-child { padding-top: 0; } .project_catagory ul li:last-child { border-bottom: 0; padding-bottom: 0; } .project_catagory ul li span { color: var(--tj-color-body-text); } .project_catagory ul li span.first-child { min-width: 100px; position: relative; z-index: 1; } .project_catagory ul li span.first-child::before { position: absolute; content: ":"; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-end: 0; } .project_catagory ul li .share-socials { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 5px; } .project_catagory ul li .share-socials 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; width: 32px; height: 32px; border: 0; color: var(--tj-color-common-white); background-color: #aeb2b9; font-size: 16px; line-height: 1; border-radius: 50%; } .project_catagory ul li .share-socials a:hover { background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project_catagory ul li span.first-child { min-width: 80px; } } /* !END: Project CSS */ /* START: Counter CSS */ .tj-counter-section { padding-top: 120px; padding-bottom: 120px; background-color: var(--tj-color-theme-bg); overflow: hidden; } .tj-counter-section .sec-heading { max-width: 560px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-counter-section { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-counter-section { padding-top: 80px; padding-bottom: 80px; } } .counter-wrapper { 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; background-color: var(--tj-color-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-wrapper { max-width: 516px; margin: 0 auto; } .counter-wrapper .counter-item { max-width: 50%; } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--tj-color-border-2); } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)) .bottom-line::before { position: absolute; content: ""; width: 12px; height: 12px; border-radius: 50%; left: 50%; bottom: -6px; border: 3px solid var(--tj-color-theme-primary); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: var(--tj-color-common-white); z-index: 2; } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)) .bottom-line::after { position: absolute; content: ""; width: 20px; height: 20px; border-radius: 50%; left: 50%; bottom: -10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: var(--tj-color-common-white); z-index: -1; } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 { border-color: var(--tj-color-border-1); } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::before { border: 3px solid var(--tj-color-theme-dark); background-color: var(--tj-color-theme-primary); } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::after { background-color: var(--tj-color-theme-primary); } } @media only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) and (max-width: 575px) { .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::after { width: 16px; height: 16px; bottom: -8px; } } @media (max-width: 575px) { .counter-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .counter-wrapper .counter-item { max-width: 50%; } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--tj-color-border-2); } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)) .bottom-line::before { position: absolute; content: ""; width: 12px; height: 12px; border-radius: 50%; left: 50%; bottom: -6px; border: 3px solid var(--tj-color-theme-primary); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: var(--tj-color-common-white); z-index: 2; } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)) .bottom-line::after { position: absolute; content: ""; width: 20px; height: 20px; border-radius: 50%; left: 50%; bottom: -10px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: var(--tj-color-common-white); z-index: -1; } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 { border-color: var(--tj-color-border-1); } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::before { border: 3px solid var(--tj-color-theme-dark); background-color: var(--tj-color-theme-primary); } .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::after { background-color: var(--tj-color-theme-primary); } } @media only screen and (max-width: 575px) and (min-width: 768px) and (max-width: 991px), only screen and (max-width: 575px) and (min-width: 576px) and (max-width: 767px), (max-width: 575px) and (max-width: 575px) { .counter-wrapper .counter-item:not(:nth-last-child(-n+2)).style-2 .bottom-line::after { width: 16px; height: 16px; bottom: -8px; } } .counter-item { position: relative; max-width: 324px; width: 100%; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); padding: 50px 40px 60px 55px; z-index: 1; } .counter-item::before { position: absolute; content: ""; width: 12px; height: 12px; border-radius: 50%; top: 50%; inset-inline-end: -6px; border: 3px solid var(--tj-color-theme-primary); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tj-color-common-white); z-index: 2; } .counter-item::after { position: absolute; content: ""; width: 20px; height: 20px; border-radius: 50%; top: 50%; inset-inline-end: -10px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tj-color-common-white); z-index: -1; } .counter-item:last-child { -webkit-border-end: none; border-inline-end: none; } .counter-item:last-child::after, .counter-item:last-child::before { display: none; } .counter-item .number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--tj-color-heading-primary); font-family: var(--tj-ff-heading); font-size: 70px; font-weight: var(--tj-fw-sbold); line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .counter-item .number { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter-item .number { font-size: 54px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter-item .number { font-size: 44px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter-item .number { font-size: 40px; } } .counter-item .number span { line-height: 1; font-family: inherit; } .counter-item .sub-title { line-height: 1; display: block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .counter-item { max-width: 278px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter-item { max-width: 230px; padding: 50px 30px 60px 31px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter-item { max-width: 174px; padding: 30px 20px 35px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-item { max-width: 258px; padding: 30px 15px 35px 70px; } .counter-item .number { margin-bottom: 10px; } .counter-item span { line-height: 1.4; } .counter-item:nth-child(2) { -webkit-border-end: none; border-inline-end: none; } .counter-item:nth-child(2)::after, .counter-item:nth-child(2)::before { display: none; } } @media (max-width: 575px) { .counter-item { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 170px; padding: 30px 15px; text-align: center; } .counter-item:nth-child(2) { -webkit-border-end: none; border-inline-end: none; } .counter-item:nth-child(2)::after, .counter-item:nth-child(2)::before { display: none; } .counter-item .number { margin-bottom: 10px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .counter-item span { line-height: 1.4; } } /* !END: Counter CSS */ /* START: Evolute CSS */ .tj-evolute { max-width: 905px; padding: 71px 60px; background-color: var(--tj-color-theme-bg-2); -webkit-clip-path: polygon(100% 0, 100% 90%, 90% 100%, 0 100%, 0 0); clip-path: polygon(100% 0, 100% 90%, 90% 100%, 0 100%, 0 0); -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: -100px; margin-inline-end: -100px; } @media (max-width: 1790px) { .tj-evolute { padding: 54px 50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute { margin: 0; max-width: 100%; -webkit-clip-path: none; clip-path: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute { padding: 40px; } } @media (max-width: 575px) { .tj-evolute { padding: 40px 25px; } } .tj-evolute-area { position: relative; padding-top: 66px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-area { padding-top: 0; } } .tj-evolute-image { max-width: calc(100% - 80px); position: relative; bottom: 65px; inset-inline-end: 0; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 10%, 10% 0); clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 10%, 10% 0); -webkit-margin-start: auto; margin-inline-start: auto; } @media (max-width: 1790px) { .tj-evolute-image { bottom: 58px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-image { max-width: 100%; bottom: 0; -webkit-clip-path: none; clip-path: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-image img { height: 100% !important; width: 100%; -o-object-fit: cover; object-fit: cover; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-evolute-image { height: 547px; } } @media (max-width: 575px) { .tj-evolute-image { height: 450px; } } .tj-evolute-title { font-size: 24px; font-family: var(--tj-ff-heading); font-weight: 600; display: inline-block; background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); padding: 5px 20px; border-radius: 30px; } .tj-evolute-title i { font-size: 17px; -webkit-margin-end: 5px; margin-inline-end: 5px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-title { font-size: 18px; } } .tj-evolute .desc { font-family: var(--tj-ff-heading); font-size: 24px; color: #364052; max-width: 750px; letter-spacing: -1px; } @media (max-width: 1870px) { .tj-evolute .desc { font-size: 22px; } } @media (max-width: 1650px) { .tj-evolute .desc { font-size: 20px; margin-bottom: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute .desc { max-width: 100%; font-size: 16px; letter-spacing: 0; } } .tj-evolute-counter { display: grid; grid-template-columns: 1fr 1fr 1fr; max-width: 560px; gap: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-counter { gap: 15px; } } @media (max-width: 500px) { .tj-evolute-counter { grid-template-columns: 1fr 1fr; } } .tj-evolute-counter .counter-item { padding: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-counter .counter-item { border: 0; } } .tj-evolute-counter .counter-item::after, .tj-evolute-counter .counter-item::before { display: none; } .tj-evolute-counter .counter-item .number { font-size: 48px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-counter .counter-item .number { font-size: 36px; } } .tj-evolute-counter .counter-item .sub-title { margin-top: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-evolute-counter .counter-item .sub-title { margin-top: 10px; } } /* !END: Counter CSS */ /* START: Service CSS */ .tj-service-section { background-color: var(--tj-color-common-white); padding-top: 120px; padding-bottom: 90px; overflow: hidden; } .tj-service-section .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tj-service-section .sec-heading .sec-title { margin-bottom: 0; line-height: 1; } .tj-service-section .sec-heading .service-rating { text-align: end; } .tj-service-section .sec-heading .service-rating .star-fill { display: inline-block; background-color: var(--tj-color-theme-primary); border-radius: 32px; padding: 2px 7px 3px 12px; margin-bottom: 16px; } .tj-service-section .sec-heading .service-rating .review { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-black-2); line-height: 1; } .tj-service-section .sec-heading .service-rating .review strong { color: var(--tj-color-heading-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-service-section { padding-top: 100px; padding-bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-section { padding-top: 80px; padding-bottom: 50px; } .tj-service-section .sec-heading { margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-section .sec-heading .service-rating { text-align: start; } } .tj-service-section-two { overflow: hidden; } .tj-service-section-two .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tj-service-section-two .sec-heading .sec-text { max-width: 550px; width: 100%; } .tj-service-section-two .sec-heading .sec-text .sec-title { margin-bottom: 0; } .tj-service-section-three { background: var(--tj-color-theme-bg); } .tj-service-section-three .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-section-three .sec-heading { row-gap: 30px; } } .tj-service-section-three .sec-heading .sec-text { max-width: 520px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-service-section-three .sec-heading .sec-text { max-width: 490px; } } .tj-service-section-three .sec-heading .sec-text .sec-title { margin-bottom: 0; letter-spacing: -0.025em; } .tj-service-section-three .sec-heading .service-rating { text-align: end; } .tj-service-section-three .sec-heading .service-rating .star-fill { display: inline-block; background-color: var(--tj-color-theme-primary); border-radius: 32px; padding: 2px 7px 3px 12px; margin-bottom: 16px; } .tj-service-section-three .sec-heading .service-rating .review { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-black-2); line-height: 1; } .tj-service-section-three .sec-heading .service-rating .review strong { color: var(--tj-color-heading-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-section-three .sec-heading .service-rating { text-align: start; } } .service-wrapper-two .service-style-3:last-child { border-bottom: none; } .service-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); position: relative; z-index: 5; margin-bottom: 30px; } .service-item .service-images { max-width: 645px; width: 100%; height: 100%; } .service-item .service-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-item .service-images { max-width: 550px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-item .service-images { max-width: 500px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-item .service-images { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-item .service-images { height: 610px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .service-item .service-images { height: 450px; } } @media (max-width: 575px) { .service-item .service-images { height: 350px; } } .service-item .service-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 25px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 60px 15px 60px 65px; justify-content: center; } .service-item .service-content .service-number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .service-item .service-content .service-number span { display: inline-block; font-size: 14px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-black-2); } .service-item .service-content .service-number span.active { font-size: 18px; color: var(--tj-color-common-white); } .service-item .service-content .service-text { max-width: 365px; width: 100%; /* margin-top: auto; */ } .service-item .service-content .service-text .service-icons { max-width: 56px; width: 100%; margin-bottom: 35px; } .service-item .service-content .service-text .service-icons img { width: 100%; } .service-item .service-content .service-text .title { letter-spacing: -0.025em; margin-bottom: 20px; } .service-item .service-content .service-text .title a { color: var(--tj-color-common-white); } .service-item .service-content .service-text .title:hover { letter-spacing: 0; } .service-item .service-content .service-text .desc { font-size: 16px; color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); } .service-item .service-content .service-text .desc p:last-child { margin-bottom: 0; } .service-item .service-content .service-btn { margin-top: 40px; background-color: var(--tj-color-common-white); } .service-item .service-content .service-btn .btn_inner .btn_text { color: var(--tj-color-heading-primary); } .service-item .service-content .service-btn:hover .btn_inner .btn_text { color: var(--tj-color-common-white); } .service-item:hover .service-icons { -webkit-animation: wobble-horizontal-hover 1s ease-in-out 1; animation: wobble-horizontal-hover 1s ease-in-out 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-item .service-content { padding: 40px 15px 40px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-item .service-content { padding: 35px 30px 45px; } .service-item .service-content .service-text { max-width: 100%; } .service-item .service-content .service-text .service-icons { margin-bottom: 25px; } .service-item .service-content .service-btn { margin-top: 25px; } } .service-style-2 { border: 1px solid var(--tj-color-border-2); padding: 40px 30px 45px; position: relative; z-index: 2; } .service-style-2 .thumb { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; opacity: 0; visibility: hidden; z-index: 1; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .service-style-2 .thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .service-style-2 .thumb::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: rgba(5, 18, 41, 0.65); z-index: 1; } .service-style-2 .service-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: 100px; height: 100px; line-height: 1; font-size: 70px; color: var(--tj-color-theme-primary); background: var(--tj-color-theme-bg); border-radius: 50%; margin-bottom: 55px; position: relative; z-index: 2; } .service-style-2 .service-content { position: relative; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 2; } .service-style-2 .service-content .number { display: block; font-size: 16px; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white-2); margin-bottom: 15px; line-height: 1; } .service-style-2 .service-content .title { margin-bottom: 15px; } .service-style-2 .service-content .title:hover { letter-spacing: 0.025em; } .service-style-2 .service-content .desc p:last-child { margin-bottom: 0; } .service-style-2 .service-button { margin-top: 25px; color: var(--tj-color-heading-primary); } .service-style-2 .service-button i { color: var(--tj-color-heading-primary); } .service-style-2:hover .thumb { opacity: 1; visibility: visible; } .service-style-2:hover .service-icon { background-color: var(--tj-color-common-white); } .service-style-2:hover .service-icon i { -webkit-animation: wobble-horizontal-hover 1s ease-in-out 1; animation: wobble-horizontal-hover 1s ease-in-out 1; } .service-style-2:hover .service-content .title a { color: var(--tj-color-common-white); } .service-style-2:hover .service-content .desc { color: var(--tj-color-common-white-2); } .service-style-2:hover .service-button { color: var(--tj-color-common-white); } .service-style-2:hover .service-button i { color: var(--tj-color-common-white); } .service-style-2:hover .service-button::before { background-color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .service-style-2 { padding: 30px 15px 35px; } .service-style-2 .service-icon { width: 85px; height: 85px; font-size: 60px; margin-bottom: 40px; } } @media (max-width: 575px) { .service-style-2 { padding: 30px 15px 35px; } .service-style-2 .service-icon { width: 80px; height: 80px; font-size: 50px; margin-bottom: 30px; } .service-style-2 .service-button { margin-top: 20px; } } .service-style-3 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-color: var(--tj-color-common-white); padding: 54px 30px; border-bottom: 1px solid var(--tj-color-border-2); position: relative; min-height: 185px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .service-style-3 { row-gap: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-3 { -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: start; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; row-gap: 20px; padding: 35px 30px; } } .service-style-3 .service-image { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .service-style-3 .service-image::before { width: 100%; height: 100%; position: absolute; content: ""; top: 0; inset-inline-start: 0; background: rgba(5, 18, 41, 0.2); z-index: -1; } .service-style-3:hover { min-height: 300px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-3:hover { min-height: auto; } } .service-style-3:hover .service-image { opacity: 1; visibility: visible; } .service-style-3:hover .service-button a i, .service-style-3:hover .service-button a, .service-style-3:hover p, .service-style-3:hover .title a { color: var(--tj-color-common-white); } .service-style-3 .service-title { max-width: 285px; width: 100%; } .service-style-3 .service-title .title { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin-bottom: 0; letter-spacing: -0.025em; } .service-style-3 .service-title .title span { color: var(--tj-color-common-white-2); position: relative; top: 3px; font-size: 16px; font-weight: var(--tj-fw-bold); line-height: 1; } .service-style-3 .service-title .title:hover { letter-spacing: 0; } .service-style-3 .desc { max-width: 340px; width: 100%; } .service-style-3 .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-3 .desc { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .service-style-3 .desc { -webkit-padding-start: 30px; padding-inline-start: 30px; } } .service-style-3 .service-button a { 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; font-size: 15px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); line-height: 1; } .service-style-3 .service-button a i { color: var(--tj-color-heading-primary); } .service-style-3 .service-button a.text-btn::before { background-color: var(--tj-color-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px) { .service-style-3 .service-button { margin-top: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-btn { margin-top: 40px; } } .star-ratings { unicode-bidi: bidi-override; color: var(--tj-color-common-white); font-size: 16px; letter-spacing: 5px; line-height: 1; position: relative; margin: 0; padding: 0; -webkit-text-stroke: 1px var(--tj-color-common-white); } .star-ratings .fill-ratings { color: var(--tj-color-common-white); padding: 0; position: absolute; z-index: 1; display: block; top: 0; inset-inline-start: 0; overflow: hidden; } .star-ratings .fill-ratings span { display: inline-block; } .star-ratings .empty-ratings { position: relative; padding: 0; display: block; z-index: 1; color: var(--tj-color-common-white); } /* !END: Service CSS */ /* START: Service details CSS */ .service-check-list ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--tj-color-border-2); border-bottom: 0; } @media (max-width: 575px) { .service-check-list ul { grid-template-columns: repeat(1, 1fr); } } .service-check-list ul li { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 6px; padding: 30px; border-bottom: 1px solid var(--tj-color-border-2); } .service-check-list ul li:not(:nth-child(even)) { -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); } @media (max-width: 575px) { .service-check-list ul li:not(:nth-child(even)) { -webkit-border-end: 0; border-inline-end: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-check-list ul li { padding: 15px; } } .service-check-list ul li span { font-family: var(--tj-ff-heading); font-weight: 600; color: var(--tj-color-heading-primary); } .service-check-list ul li i { font-size: 18px; color: var(--tj-color-theme-primary); margin-top: 3px; } .tj-feature { padding: 35px 30px; background: var(--tj-color-theme-bg); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-feature { padding: 25px 22px; } } .tj-feature-icon { font-size: 52px; color: var(--tj-color-theme-primary); line-height: 1; margin-bottom: 20px; } .tj-feature-title { margin-bottom: 20px; } .tj-feature p { margin-bottom: 0; } .tj-feature:hover .tj-feature-icon { -webkit-animation: wobble-horizontal-hover 1s ease-in-out 1; animation: wobble-horizontal-hover 1s ease-in-out 1; } .service-category ul { margin: 0; padding: 0; list-style: none; } .service-category ul li { margin-bottom: 20px; } .service-category ul li:last-child { margin-bottom: 0; } .service-category ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); padding: 17.5px 30px; background: var(--tj-color-theme-bg); } .service-category ul li a i { font-weight: 700; color: var(--tj-color-heading-primary); } .service-category ul li a.active, .service-category ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .service-category ul li a.active i, .service-category ul li a:hover i { color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-category ul li a { padding: 17px 15px; } } /* !END: Service details CSS */ /* START: Skill CSS */ .tj-skill-section { padding-top: 325px; padding-bottom: 120px; background-color: var(--tj-color-theme-bg); background-repeat: no-repeat; background-position: center; background-size: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-skill-section { padding-top: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-skill-section { padding-top: 220px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-skill-section { padding-top: 150px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-skill-section { padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 575px) { .tj-skill-section { padding-top: 80px; padding-bottom: 80px; } } .skill-wrapper { -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); background: rgba(247, 247, 247, 0.1); max-width: 525px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; padding: 40px; } .skill-wrapper .title { color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-bottom: 15px; } .skill-wrapper .desc { color: var(--tj-color-common-white-2); margin-bottom: 35px; } .skill-wrapper .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .skill-wrapper { max-width: 475px; padding: 30px 15px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .skill-wrapper { max-width: 465px; padding: 30px 15px 35px; } } @media (max-width: 575px) { .skill-wrapper { max-width: 465px; padding: 30px 15px 35px; } .skill-wrapper .desc { margin-bottom: 25px; } } .tj-progress-bar .progress-item { position: relative; margin-top: 20px; z-index: 1; } .tj-progress-bar .progress-item:first-child { margin-top: 0px; } .tj-progress-bar .progress-item .title { font-size: 16px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; margin-bottom: 10px; } .tj-progress-bar .progress-item .item_bar { position: relative; height: 8px; width: 100%; background-color: rgba(247, 247, 247, 0.2); -webkit-margin-start: 0; margin-inline-start: 0; } .tj-progress-bar .progress-item .item_bar .progress { position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 0; height: 8px; margin: 0; border-radius: 0px; overflow: visible; background-color: var(--tj-color-theme-primary); -webkit-transition: width 100ms ease; transition: width 100ms ease; } .tj-progress-bar .progress-item .item_bar .progress::before { position: absolute; content: ""; width: 18px; height: 18px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border: 4px solid var(--tj-color-theme-primary); background-color: var(--tj-color-common-white); border-radius: 50%; inset-inline-end: -10px; } .tj-progress-bar .progress-item .item_bar .progress::after { content: attr(data-value); position: absolute; inset-inline-end: -20px; top: -32px; font-size: 16px; font-weight: 600; color: var(--tj-color-common-white); } /* !END: Skill CSS */ /* START: Pricing CSS */ .pricing__area { overflow: hidden; } .pricing__box { background: var(--tj-color-theme-bg); padding: 40px 30px; position: relative; overflow: hidden; -webkit-clip-path: polygon(92% 0, 100% 5%, 100% 100%, 0 100%, 0 0); clip-path: polygon(92% 0, 100% 5%, 100% 100%, 0 100%, 0 0); } .pricing__box.active { background: var(--tj-color-theme-primary); } .pricing__box.active .pricing__package-desc span, .pricing__box.active .pricing__package-name, .pricing__box.active .pricing__package-price { color: var(--tj-color-common-white); } .pricing__box.active .pricing__package-currency, .pricing__box.active .pricing__package-period, .pricing__box.active .pricing__package-desc { color: var(--tj-color-common-white); } .pricing__box.active .pricing__features-list { border-color: rgba(247, 247, 247, 0.15); } .pricing__box.active .pricing__features-list ul li { color: var(--tj-color-common-white); opacity: 0.7; } .pricing__box.active .pricing__features-list ul li i { opacity: 0.7; color: var(--tj-color-common-white); } .pricing__box.active .pricing__features-list ul li.active { opacity: 1; } .pricing__box.style-2 { background: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-2); } @media (max-width: 575px) { .pricing__box.style-2 { max-width: 350px; margin: 0 auto; } } .pricing__box.style-2::before { position: absolute; content: ""; width: 150px; height: 150px; border: 1px solid var(--tj-color-border-2); top: -90px; inset-inline-end: -134px; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .pricing__box.style-2::before { top: -105px; inset-inline-end: -120px; -webkit-transform: rotate(48deg); -ms-transform: rotate(48deg); transform: rotate(48deg); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing__box.style-2::before { top: -104px; inset-inline-end: -120px; -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pricing__box.style-2::before { top: -125px; inset-inline-end: -104px; -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform: rotate(50deg); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .pricing__box.style-2::before { top: -108px; inset-inline-end: -116px; -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); transform: rotate(35deg); } } @media (max-width: 575px) { .pricing__box.style-2::before { top: -90px; inset-inline-end: -135px; -webkit-transform: rotate(48deg); -ms-transform: rotate(48deg); transform: rotate(48deg); } } .pricing__box.style-2.active { background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .pricing__box.style-2.active::before { border-color: var(--tj-color-theme-primary); } .pricing__box.style-2.active .pricing__btn a { background: var(--tj-color-common-white); color: var(--tj-color-theme-dark); } .pricing__box.style-2.active .pricing__btn a i { color: var(--tj-color-theme-dark); } .pricing__box.style-2.active .pricing__btn a:hover { color: var(--tj-color-common-white); background: var(--tj-color-theme-dark); } .pricing__box.style-2.active .pricing__btn a:hover i { color: var(--tj-color-common-white); } .pricing__box.style-2.active .pricing__package-desc span, .pricing__box.style-2.active .pricing__package-name, .pricing__box.style-2.active .pricing__package-price { color: var(--tj-color-common-white); } .pricing__box.style-2.active .pricing__package-currency, .pricing__box.style-2.active .pricing__package-period, .pricing__box.style-2.active .pricing__package-desc { color: var(--tj-color-common-white); } .pricing__box.style-2.active .pricing__features-list { border-color: rgba(247, 247, 247, 0.15); } .pricing__box.style-2.active .pricing__features-list ul li { color: var(--tj-color-common-white); opacity: 0.7; } .pricing__box.style-2.active .pricing__features-list ul li i { opacity: 0.7; color: var(--tj-color-common-white); } .pricing__box.style-2.active .pricing__features-list ul li.active { opacity: 1; } .pricing__box.style-2 .pricing__badge { background: var(--tj-color-theme-dark); } .pricing__badge { font-size: 14px; font-weight: 700; background: var(--tj-color-theme-dark); color: var(--tj-color-common-white); width: 197px; height: 31px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 5px; position: absolute; top: 0; inset-inline-end: 0; -webkit-clip-path: polygon(0 0, 83% 0, 100% 100%, 17% 100%); clip-path: polygon(0 0, 83% 0, 100% 100%, 17% 100%); } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 390px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .pricing__badge { -webkit-clip-path: polygon(0 0, 86% 0, 100% 100%, 17% 100%); clip-path: polygon(0 0, 86% 0, 100% 100%, 17% 100%); } } .pricing__package-price { font-size: 72px; font-family: var(--tj-ff-heading); font-weight: 600; color: var(--tj-color-heading-primary); line-height: 0.7; display: -webkit-box; display: -ms-flexbox; display: flex; margin-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing__package-price { font-size: 52px; margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__package-price { font-size: 44px; margin-bottom: 25px; } } .pricing__package-name { font-size: 18px; color: var(--tj-color-heading-primary); margin-bottom: 30px; } .pricing__package-currency { font-size: 20px; font-weight: 500; color: var(--tj-color-common-black-2); } .pricing__package-period { font-size: 20px; font-weight: 500; color: var(--tj-color-common-black-2); margin-top: auto; } .pricing__package-desc span { font-weight: 700; color: var(--tj-color-theme-dark); } .pricing__features-list { border-top: 1px solid var(--tj-color-border-2); padding-top: 29px; margin-top: 29px; margin-bottom: 40px; } .pricing__features-list ul li { margin-bottom: 8px; display: block; color: var(--tj-color-common-black-3); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pricing__features-list ul li i { -webkit-margin-end: 8px; margin-inline-end: 8px; color: var(--tj-color-common-black-3); } .pricing__features-list ul li.active { color: var(--tj-color-text-body); } .pricing__features-list ul li.active i { color: var(--tj-color-theme-primary); } .pricing__features-list ul li:last-child { margin-bottom: 0px; } .pricing__btn a { width: 100%; height: 56px; border-radius: 30px; padding: 0 30px; color: var(--tj-color-common-white); background: var(--tj-color-theme-dark); 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; } .pricing__btn a span.btn-icon { overflow: hidden; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-common-white); } .pricing__btn a span.btn-icon i { color: var(--tj-color-common-white); } .pricing__btn a span.btn-icon i:first-child, .pricing__btn a span.btn-icon i:last-child { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; transition: -webkit-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s; } .pricing__btn a span.btn-icon i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .pricing__btn a .btn-text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; color: var(--tj-color-common-white); text-shadow: 0 23px 0 currentColor; } .pricing__btn a .btn-text > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.5s; transition: 0.5s; } .pricing__btn a:hover { background: var(--tj-color-theme-primary); } .pricing__btn a:hover span.btn-icon { color: var(--tj-color-common-white); } .pricing__btn a:hover span.btn-icon i { color: var(--tj-color-common-white); } .pricing__btn a:hover span.btn-icon i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .pricing__btn a:hover span.btn-icon i:last-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .pricing__btn a:hover .btn-text { color: var(--tj-color-common-white); } .pricing__btn a:hover .btn-text > span { -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } .pricing__btn.active a { background: var(--tj-color-common-white); } .pricing__btn.active a span.btn-icon i { color: var(--tj-color-theme-dark); } .pricing__btn.active a .btn-text { color: var(--tj-color-theme-dark); } .pricing__btn.active a:hover { background: var(--tj-color-theme-dark); } .pricing__btn.active a:hover span.btn-icon { color: var(--tj-color-common-white); } .pricing__btn.active a:hover span.btn-icon i { color: var(--tj-color-common-white); } .pricing__btn.active a:hover .btn-text { color: var(--tj-color-common-white); } .pricing-tab { margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing-tab { margin-bottom: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing-tab { margin-bottom: 40px; } } .pricing-tab ul { border: none; display: inline-block; max-width: 190px; padding: 8px 10px; border-radius: 30px; background: var(--tj-color-theme-dark); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing-tab ul { -webkit-margin-start: 0; margin-inline-start: 0; } } .pricing-tab ul li { display: inline-block; list-style: none; -webkit-padding-start: 0px; padding-inline-start: 0px; } .pricing-tab ul .nav-link { padding: 7px 15px; background: transparent; font-weight: 600; text-transform: capitalize; color: var(--tj-color-common-white); position: relative; outline: none; font-size: 16px; border: none; z-index: 2; border-radius: 30px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .pricing-tab ul .nav-link.active { color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .pricing-top { margin-bottom: 45px; } } @media (max-width: 575px) { .pricing-top { margin-bottom: 40px; } } /* !END: Pricing CSS */ /* START: Testimonial CSS */ .tj-testimonial-section { background-color: var(--tj-color-common-white); padding-top: 120px; padding-bottom: 120px; overflow: hidden; } .tj-testimonial-section .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tj-testimonial-section .sec-heading .sec-title { margin-bottom: 0; } .tj-testimonial-section .testimonial-pagination { margin-top: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-testimonial-section { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-section { padding-top: 80px; padding-bottom: 80px; } .tj-testimonial-section .testimonial-pagination { margin-top: 40px; } } .tj-testimonial-section-two { overflow: hidden; } .tj-testimonial-section-three { background: var(--tj-color-theme-bg); overflow: hidden; } .testimonial-item { background-color: var(--tj-color-theme-bg); padding: 35px 40px 40px 0px; } .testimonial-item .testimonial-content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-padding-start: 40px; padding-inline-start: 40px; } .testimonial-item .testimonial-content .testimonial-quote { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 70px; color: var(--tj-color-theme-primary); line-height: 1; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .testimonial-item .testimonial-content .testimonial-quote i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .testimonial-item .testimonial-content .desc { max-width: 455px; width: 100%; font-size: 18px; font-weight: var(--tj-fw-regular); border-bottom: 1px solid var(--tj-color-border-2); padding-bottom: 30px; line-height: 1.5; } .testimonial-item .testimonial-content .desc p:last-child { margin: 0; } .testimonial-item .tj-testimonial-author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 20px; } .testimonial-item .tj-testimonial-author .author-images { max-width: 118px; width: 100%; height: 106px; -webkit-mask-image: url(../images/shapes/test-shapes.svg); mask-image: url(../images/shapes/test-shapes.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--tj-color-common-white); -webkit-mask-position: center; mask-position: center; position: relative; z-index: 1; } .testimonial-item .tj-testimonial-author .author-images img { width: 85px; height: 85px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; position: absolute; inset-inline-end: 10px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; } .testimonial-item .tj-testimonial-author .author-rating { display: inline-block; background: var(--tj-color-common-white); padding: 2px 10px 4px; margin-bottom: 10px; border-radius: 32px; } .testimonial-item .tj-testimonial-author .author-rating .star-ratings { color: var(--tj-color-theme-primary); -webkit-text-stroke: 1px var(--tj-color-theme-primary); } .testimonial-item .tj-testimonial-author .author-rating .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); } .testimonial-item .tj-testimonial-author .author-rating .star-ratings .empty-ratings { color: transparent; } .testimonial-item .tj-testimonial-author .author-text .author-name { letter-spacing: -0.025em; margin-bottom: 4px; } .testimonial-item .tj-testimonial-author .author-text .sub-title { display: block; line-height: 1; } .testimonial-item:hover .testimonial-quote { -webkit-transform: rotateY(-360deg); transform: rotateY(-360deg); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial-item { padding: 35px 15px 40px 0px; } .testimonial-item .testimonial-content .desc { max-width: 365px; font-size: 17px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-item { padding: 35px 15px 40px 0px; } .testimonial-item .testimonial-content { -webkit-padding-start: 20px; padding-inline-start: 20px; } .testimonial-item .testimonial-content .desc { max-width: 315px; font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-item { padding: 35px 15px 40px 0px; } .testimonial-item .testimonial-content { -webkit-padding-start: 20px; padding-inline-start: 20px; } .testimonial-item .testimonial-content .desc { max-width: 100%; font-size: 16px; } } @media (max-width: 575px) { .testimonial-item { padding: 30px 15px 35px 0px; } .testimonial-item .testimonial-content { -webkit-padding-start: 15px; padding-inline-start: 15px; gap: 15px; } .testimonial-item .testimonial-content .testimonial-quote { font-size: 48px; } .testimonial-item .testimonial-content .desc { max-width: 100%; font-size: 16px; } } .testimonial-images-2 { max-width: 550px; width: 100%; position: relative; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial-images-2 { max-width: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-images-2 { max-width: 440px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-images-2 { max-width: 100%; } .testimonial-images-2 img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } } .testimonial-images-2 .testimonial-funfact { position: absolute; inset-inline-start: 30px; bottom: 30px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); padding: 35px 30px 35px; } .testimonial-images-2 .testimonial-funfact .number { font-family: var(--tj-ff-heading); font-size: 48px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; color: var(--tj-color-common-white); line-height: 1; } .testimonial-images-2 .testimonial-funfact .number .odometer { font-family: var(--tj-ff-heading); line-height: 1; } .testimonial-images-2 .testimonial-funfact .sub-title { display: inline-block; color: var(--tj-color-common-white-2); } .tj-testimonial-slider-two .testimonial-navigation { position: absolute; inset-inline-end: 0; bottom: 30px; z-index: 10; } .tj-testimonial-slider-two .shape-image { position: absolute; bottom: 0; inset-inline-end: 0; width: 100%; } .tj-testimonial-slider-two .shape-image img { height: 127px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-testimonial-slider-two .shape-image img { height: 115px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-slider-two .shape-image img { height: 100px; } } .testimonial-style-2 .testimonial-content { max-width: 630px; width: 100%; } .testimonial-style-2 .testimonial-content .testimonial-quote { color: var(--tj-color-theme-primary); line-height: 1; font-size: 75px; margin-bottom: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-style-2 .testimonial-content .testimonial-quote { margin-bottom: 15px; } } .testimonial-style-2 .testimonial-content .desc { font-size: 26px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); letter-spacing: -0.04em; } .testimonial-style-2 .testimonial-content .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-style-2 .testimonial-content .desc { font-size: 21px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-style-2 .testimonial-content .desc { font-size: 18px; } } .testimonial-style-2 .testimonial-content .testimonial-author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; margin-top: 70px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-style-2 .testimonial-content .testimonial-author { margin-top: 50px; } } .testimonial-style-2 .testimonial-content .testimonial-author .author-images { width: 95px; height: 95px; border-radius: 50%; overflow: hidden; } .testimonial-style-2 .testimonial-content .testimonial-author .author-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-style-2 .testimonial-content .testimonial-author .author-images { width: 65px; height: 65px; } } .testimonial-style-2 .testimonial-content .testimonial-author .author-text .testimonial-rating { 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: var(--tj-color-theme-bg); padding: 2px 10px 4px; margin-bottom: 14px; border-radius: 32px; } .testimonial-style-2 .testimonial-content .testimonial-author .author-text .testimonial-rating .star-ratings { color: var(--tj-color-theme-primary); -webkit-text-stroke: 1px var(--tj-color-theme-primary); } .testimonial-style-2 .testimonial-content .testimonial-author .author-text .testimonial-rating .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); } .testimonial-style-2 .testimonial-content .testimonial-author .author-text .testimonial-rating .star-ratings .empty-ratings { color: var(--tj-color-theme-primary); } .testimonial-style-2 .testimonial-content .testimonial-author .author-text .title { margin-bottom: 0; } .testimonial-style-2 .testimonial-content .testimonial-author .author-text .designation { display: block; color: var(--tj-color-common-black-2); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-style-2 .testimonial-content { max-width: 100%; } } .testimonial-style-3 { position: relative; z-index: 1; } .testimonial-style-3 .testimonial-content-box { position: relative; background-color: var(--tj-color-common-white); padding: 55px 30px 35px 110px; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%, 0% 90%); clip-path: polygon(0 0, 100% 0, 100% 100%, 7% 100%, 0% 90%); z-index: 1; } @media (max-width: 575px) { .testimonial-style-3 .testimonial-content-box { padding: 40px 20px 35px 120px; } } .testimonial-style-3 .testimonial-content-box .testimonial-content .desc { font-size: 18px; max-width: 445px; width: 100%; margin-bottom: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-style-3 .testimonial-content-box .testimonial-content .desc { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-style-3 .testimonial-content-box .testimonial-content .desc { font-size: 16px; } } .testimonial-style-3 .testimonial-content-box .testimonial-content .desc p:last-child { margin-bottom: 0; } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author { padding-top: 28px; border-top: 1px solid var(--tj-color-border-2); } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author .testimonial-rating { 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: var(--tj-color-theme-bg); padding: 2px 7px 4px 13px; margin-bottom: 14px; border-radius: 32px; } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author .testimonial-rating .star-ratings { color: var(--tj-color-theme-primary); -webkit-text-stroke: 1px var(--tj-color-theme-primary); } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author .testimonial-rating .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author .testimonial-rating .star-ratings .empty-ratings { color: var(--tj-color-theme-primary); } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author .title { margin-bottom: 0; } .testimonial-style-3 .testimonial-content-box .testimonial-content .testimonial-author .designation { display: inline-block; font-size: 14px; color: var(--tj-color-common-black-2); } .testimonial-style-3 .testimonial-infos { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; position: absolute; inset-inline-start: -35px; top: 45px; z-index: 2; } @media (max-width: 575px) { .testimonial-style-3 .testimonial-infos { inset-inline-start: 25px; } } .testimonial-style-3 .testimonial-infos .testimonial-quote { 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: 65px; height: 65px; line-height: 1; font-size: 36px; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border: 2px solid var(--tj-color-theme-bg); border-radius: 50%; position: relative; z-index: 1; } @media (max-width: 575px) { .testimonial-style-3 .testimonial-infos .testimonial-quote { width: 56px; height: 56px; } } .testimonial-style-3 .testimonial-infos .testimonial-images { width: 65px; height: 65px; -webkit-margin-start: -16px; margin-inline-start: -16px; } @media (max-width: 575px) { .testimonial-style-3 .testimonial-infos .testimonial-images { width: 56px; height: 56px; } } .testimonial-style-3 .testimonial-infos .testimonial-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; -webkit-filter: grayscale(100%); filter: grayscale(100%); } @media (max-width: 575px) { .testimonial-style-3.swiper-slide { padding: 0 15px; } } /* !END: Testimonial CSS */ /* !START: Slider CSS */ .tj-slider-section { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; z-index: 2; } .tj-slider-section::before { position: absolute; content: ""; width: 100%; height: 100%; inset-inline-start: 0; top: 0; /* background: -webkit-gradient(linear, left top, right top, from(var(--tj-color-theme-dark)), to(rgba(5, 18, 41, 0))); background: linear-gradient(90deg, var(--tj-color-theme-dark) 0%, rgba(5, 18, 41, 0) 100%); */ mix-blend-mode: multiply; z-index: -1; } .slider-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; position: relative; } .slider-wrapper .slider-content { padding-top: 450px; padding-bottom: 450px; max-width: 700px; width: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .slider-wrapper .slider-content { padding-top: 200px; padding-bottom: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider-wrapper .slider-content { max-width: 550px; padding-top: 180px; padding-bottom: 220px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-wrapper .slider-content { padding-top: 150px; padding-bottom: 240px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider-wrapper .slider-content { padding-top: 150px; padding-bottom: 150px; } } .slider-wrapper .slider-content .sub-title { display: inline-block; font-size: 12px; font-weight: var(--tj-fw-bold); color: var(--tj-color-text-body-2); background-color: rgba(247, 247, 247, 0.1); text-transform: uppercase; padding: 3px 12px; margin-bottom: 25px; border-radius: 30px; } .slider-wrapper .slider-content .slider-title { color: var(--tj-color-common-white); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 0; } .slider-wrapper .slider-content .slider-button { margin-top: 45px; background-color: var(--tj-color-common-white); } .slider-wrapper .slider-content .slider-button .btn_text { color: var(--tj-color-heading-primary); } .slider-wrapper .slider-content .slider-button:hover .btn_text { color: var(--tj-color-common-white); } @media (max-width: 575px) { .slider-wrapper .slider-content .slider-button { margin-top: 30px; } } .slider-wrapper .slider-feature-box { max-width: 440px; width: 100%; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 45px 40px; position: absolute; inset-inline-end: 0; bottom: 0; z-index: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider-wrapper .slider-feature-box { max-width: 410px; padding: 35px 30px; gap: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider-wrapper .slider-feature-box { position: relative; max-width: 75%; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 25px 20px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: -35px; margin-inline-end: -35px; gap: 20px; } } @media (max-width: 575px) { .slider-wrapper .slider-feature-box { margin: 0 auto; max-width: 100%; } } .slider-wrapper .slider-feature-box .slider-logo { width: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider-wrapper .slider-feature-box .slider-logo { width: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider-wrapper .slider-feature-box .slider-logo { width: 70px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } .slider-wrapper .slider-feature-box .desc { font-size: 18px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-regular); line-height: 1.5; } .slider-wrapper .slider-feature-box .desc p:last-child { margin-bottom: 0; } @media (max-width: 575px) { .slider-wrapper .slider-feature-box .desc { font-size: 16px; } } .slider-wrapper .slider-feature-box .slider-shape { position: absolute; bottom: 0; inset-inline-end: 26px; z-index: -1; height: 100%; } .slider-wrapper .slider-feature-box .slider-shape img { height: 100%; } .tj-hero-slider.style-1 .sub-title { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); -webkit-transition: all 0.9s; transition: all 0.9s; -webkit-transition-delay: 1s; transition-delay: 1s; opacity: 0; } .tj-hero-slider.style-1 .slider-title { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1s; transition: all 1s; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; opacity: 0; } @media (max-width: 575px) { .tj-hero-slider.style-1 .slider-title { font-size: 45px; } } .tj-hero-slider.style-1 .slider-button { -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1.5s; transition: all 1.5s; -webkit-transition-delay: 1.8s; transition-delay: 1.8s; opacity: 0; } .tj-hero-slider.style-1 .swiper-slide-active .slider-title { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .tj-hero-slider.style-1 .swiper-slide-active .slider-button, .tj-hero-slider.style-1 .swiper-slide-active .sub-title { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .tj-hero-slider.style-1 .tj-navigation { position: absolute; bottom: 80px; z-index: 3; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 5px; inset-inline-start: 0; inset-inline-end: 0; max-width: 1320px; margin: 0 auto; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tj-hero-slider.style-1 .tj-navigation { bottom: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-slider.style-1 .tj-navigation { max-width: 1140px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-slider.style-1 .tj-navigation { max-width: 960px; bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-slider.style-1 .tj-navigation { max-width: 720px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-slider.style-1 .tj-navigation { max-width: 540px; } } @media (max-width: 575px) { .tj-hero-slider.style-1 .tj-navigation { padding: 0 12px; bottom: 25%; } } .tj-hero-slider.style-1 .tj-btn { color: var(--tj-color-common-white-2); font-size: 20px; font-weight: 500; line-height: 1.3; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .tj-hero-slider.style-1 .tj-btn:hover { color: var(--tj-color-common-white); } .tj-hero-slider.style-1 .tj-sw-pagination { width: 160px; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; color: var(--tj-color-common-white); font-size: large; font-weight: 500; text-transform: uppercase; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-slider.style-1 .tj-sw-pagination { width: 130px; } } .tj-hero-slider.style-1 .tj-sw-pagination .dash { width: 100%; height: 1px; background: rgba(255, 255, 255, 0.2); display: inline-block; position: relative; } .tj-hero-slider.style-1 .tj-sw-pagination .dash .dash-inner { position: absolute; content: ""; top: -1.5px; inset-inline-start: 0; height: 3px; background: var(--tj-color-common-white); display: inline-block; -webkit-transition: width 0.3s ease; transition: width 0.3s ease; } /* !END: Slider CSS */ /* START: Team CSS */ .tj-team-section { overflow: hidden; } .tj-team-section .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; } .tj-team-section .sec-heading .sec-text .sec-title { margin-bottom: 0; line-height: 1; } .team-item { position: relative; min-height: 468px; overflow: hidden; z-index: 2; } .team-item::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, var(--tj-color-theme-dark))); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, var(--tj-color-theme-dark) 84%); z-index: 3; } .team-item .team-images { overflow: hidden; } .team-item .team-images img { width: 100%; } .team-item .team-content { position: absolute; bottom: 0; width: 100%; inset-inline-start: 0; padding: 25px 30px; background-color: var(--tj-color-theme-dark); z-index: 5; } .team-item .team-content .team-text .title { color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-bottom: 0; } .team-item .team-content .team-text .title a:hover { color: var(--tj-color-theme-primary); } .team-item .team-content .team-text .sub-title { display: inline-block; font-size: 14px; color: var(--tj-color-common-white-2); line-height: 1; } .team-item .team-share { position: absolute; bottom: 30px; inset-inline-end: -30px; opacity: 0; visibility: hidden; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .team-item .team-share ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6px; } .team-item .team-share ul li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; color: var(--tj-color-heading-primary); background: rgba(223, 236, 253, 0.4); line-height: 1; } .team-item .team-share ul li a i { color: var(--tj-color-heading-primary); } .team-item .team-share ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .team-item .team-share ul li a:hover i { color: var(--tj-color-common-white); } .team-item:hover .team-share { opacity: 1; visibility: visible; inset-inline-end: 30px; } .team-item:hover .team-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .team-item { min-height: 420px; } .team-item .team-content { padding: 25px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team-item { min-height: 360px; } .team-item .team-content { padding: 25px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-item { min-height: auto; } } /* !END: Team CSS */ /* START: Team details CSS */ .team-details { padding: 120px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team-details { padding: 100px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team-details { padding: 80px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details { padding: 80px 0; } } .team-details__img { margin-top: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__img { margin-top: 0; } } .team-details__img img { border-radius: var(--tj-br-md); width: 100%; } .team-details__content { -webkit-padding-start: 30px; padding-inline-start: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__content { margin-top: 30px; -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__content { margin-top: 20px; } } .team-details .team-details__subtitle { margin-bottom: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details .team-details__subtitle { margin-bottom: 12px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__name { font-size: 36px; margin-bottom: 8px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__name { font-size: 30px; margin-bottom: 8px; } } .team-details__desig { margin-bottom: 20px; color: var(--tj-color-grey-4); display: inline-block; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__desig { margin-bottom: 8px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__desig { margin-bottom: 8px; } } .team-details__contact-info ul { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid var(--tj-color-border-2); margin: 25px 0; border-radius: var(--tj-br-md); list-style: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__contact-info ul { margin: 20px 0; } } @media (max-width: 575px) { .team-details__contact-info ul { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .team-details__contact-info ul li { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; padding: 25px 28px; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .team-details__contact-info ul li:last-child { -webkit-border-end: 0; border-inline-end: 0; border-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .team-details__contact-info ul li { padding: 16px 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__contact-info ul li { padding: 12px 14px; } } @media (max-width: 575px) { .team-details__contact-info ul li { -webkit-border-end: 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-2); } } .team-details__contact-info ul span { color: var(--tj-color-grey-4); display: inline-block; } .team-details__contact-info ul a { font-size: 20px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-sbold); margin-bottom: 0; position: relative; display: inline-block; } .team-details__contact-info ul a::after { content: ""; width: 0; height: 1px; -webkit-transition: all 0.3s; transition: all 0.3s; position: absolute; bottom: 2px; inset-inline-start: 0; background-color: var(--tj-color-heading-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .team-details__contact-info ul a { font-size: 15px; } } .team-details__contact-info ul a:hover::after { width: 100%; } .team-details__experience { margin-top: 40px; margin-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__experience { margin-top: 24px; margin-bottom: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__experience { margin-top: 20px; margin-bottom: 20px; } } .team-details__experience__list ul { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid var(--tj-color-border-2); -ms-flex-wrap: wrap; flex-wrap: wrap; margin: 25px 0; border-radius: 0; list-style: none; } .team-details__experience__list ul li { -webkit-box-flex: 1; -ms-flex: 1 1 50%; flex: 1 1 50%; padding: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; border: 1px solid var(--tj-color-border-2); border-top: 0; -webkit-border-start: 0; border-inline-start: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__experience__list ul li { padding: 16px; } } .team-details__experience__list ul li p { margin-bottom: 0; } .team-details__experience__list ul li i { font-size: 18px; color: var(--tj-color-theme-primary); margin-top: 4px; } .team-details__experience__list ul li:last-child { -webkit-border-end: 0; border-inline-end: 0; } .team-details__experience__list ul li:nth-child(2n) { -webkit-border-end: 0; border-inline-end: 0; } /* !END: Team details CSS */ /* START: Faq CSS */ .tj-faq-style .accordion-item { border: none; margin-bottom: 20px; border-radius: 0; background-color: var(--tj-color-theme-bg); color: inherit; -webkit-box-shadow: none; box-shadow: none; position: relative; z-index: 1; overflow: hidden; } .tj-faq-style .accordion-item:last-child { margin-bottom: 0; } .tj-faq-style .accordion-item .accordion-header .accordion-button { background: transparent; font-size: 18px; padding: 25px 60px 25px 25px; color: var(--tj-color-heading-primary); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); position: relative; border: 1px solid transparent; border-radius: 0; } .tj-faq-style .accordion-item .accordion-header .accordion-button:before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-end: 15px; content: "+"; font-family: "Font Awesome 6 Pro"; font-weight: 400; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; color: var(--tj-color-heading-primary); background: none; -webkit-transition: 0.4s; transition: 0.4s; } .tj-faq-style .accordion-item .accordion-header .accordion-button.collapsed { border: 1px solid var(--tj-color-border-2); background: var(--tj-color-common-white); } .tj-faq-style .accordion-item .accordion-header .accordion-button:not(.collapsed) { -webkit-box-shadow: none; box-shadow: none; } .tj-faq-style .accordion-item .accordion-header .accordion-button:not(.collapsed):before { content: "\f068"; color: var(--tj-color-heading-primary); } .tj-faq-style .accordion-item .accordion-header .accordion-button:focus { -webkit-box-shadow: none; box-shadow: none; } .tj-faq-style .accordion-item .accordion-header .accordion-button:after { display: none; } .tj-faq-style .accordion-item .accordion-body { padding: 0; padding-bottom: 25px; margin: 0 25px; } .tj-faq-style .accordion-item .accordion-body p { padding-top: 20px; border-top: 1px solid var(--tj-color-border-2); margin-bottom: 0; } .tj-faq-style.style-2 .accordion-item { background: var(--tj-color-theme-bg-2); } .tj-faq-style.style-2 .accordion-item .accordion-header .accordion-button:not(.collapsed) { color: var(--tj-color-theme-primary); } .tj-faq-style.style-2 .accordion-item .accordion-header .accordion-button:not(.collapsed):before { color: var(--tj-color-theme-primary); } .tj-faq-search-wrap { border-bottom: 1px solid var(--tj-color-border-2); } .tj-faq-search-wrap .faq-search { position: relative; overflow: hidden; } .tj-faq-search-wrap .faq-search label { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-start: 20px; line-height: 1; font-size: 18px; color: #7e8590; } .tj-faq-search-wrap .faq-search input { height: 62px; border: 2px solid var(--tj-color-border-2); -webkit-padding-start: 45px; padding-inline-start: 45px; -webkit-padding-end: 144px; padding-inline-end: 144px; } .tj-faq-search-wrap .faq-search input::-webkit-input-placeholder { color: #7e8590; } .tj-faq-search-wrap .faq-search input::-moz-placeholder { color: #7e8590; } .tj-faq-search-wrap .faq-search input:-ms-input-placeholder { color: #7e8590; } .tj-faq-search-wrap .faq-search input::-ms-input-placeholder { color: #7e8590; } .tj-faq-search-wrap .faq-search input::placeholder { color: #7e8590; } .tj-faq-search-wrap .faq-search input:focus { border: 2px solid var(--tj-color-theme-primary); -webkit-padding-start: 20px; padding-inline-start: 20px; } .tj-faq-search-wrap .faq-search input:focus ~ label { opacity: 0; visibility: hidden; } .tj-faq-search-wrap .faq-search button { max-width: 138px; width: 100%; padding: 13px 35px; background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); position: absolute; top: 4.5px; inset-inline-end: 4.5px; text-align: center; } .tj-faq-search-wrap .faq-search button .btn-text { overflow: hidden; color: var(--tj-color-common-white); text-shadow: 0 23px 0 currentColor; display: inline-block; line-height: 1; } .tj-faq-search-wrap .faq-search button span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.5s; transition: 0.5s; } .tj-faq-search-wrap .faq-search button:hover { background: var(--tj-color-theme-dark); } .tj-faq-search-wrap .faq-search button:hover .btn-text span { -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } /* !END: Faq CSS */ /* START: History CSS */ .timeline { position: relative; width: 100%; padding: 0; } .timeline::after { content: ""; position: absolute; width: 1px; background: var(--tj-color-border-2); top: 0; bottom: 0; inset-inline-start: 50%; -webkit-margin-start: -1px; margin-inline-start: -1px; } .timeline-inner { position: relative; background: inherit; width: 50%; } .timeline-inner:nth-child(odd) { inset-inline-start: 0; -webkit-padding-end: 90px; padding-inline-end: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .timeline-inner:nth-child(odd) { -webkit-padding-end: 60px; padding-inline-end: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .timeline-inner:nth-child(odd) { -webkit-padding-end: 40px; padding-inline-end: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .timeline-inner:nth-child(odd) { -webkit-padding-end: 0; padding-inline-end: 0; -webkit-padding-start: 40px; padding-inline-start: 40px; } } .timeline-inner:nth-child(even) { inset-inline-start: 50%; -webkit-padding-start: 90px; padding-inline-start: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .timeline-inner:nth-child(even) { -webkit-padding-start: 60px; padding-inline-start: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .timeline-inner:nth-child(even) { -webkit-padding-start: 40px; padding-inline-start: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .timeline-inner:nth-child(even) { -webkit-padding-start: 40px; padding-inline-start: 40px; } } .timeline-inner::after { content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); inset-inline-end: -8px; background: #ffffff; border: 4px solid var(--tj-color-common-black-2); border-radius: 16px; z-index: 1; } .timeline-inner:nth-child(even)::after { inset-inline-start: -8px; } .timeline-inner .date { position: absolute; display: inline-block; top: calc(50% - 25px); text-align: center; font-size: 48px; line-height: 1; font-weight: bold; color: var(--tj-color-common-black-2); text-transform: uppercase; letter-spacing: 1px; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .timeline-inner .date { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .timeline-inner .date { font-size: 24px; top: calc(50% - 12px); } } .timeline-inner:nth-child(odd) .date { inset-inline-end: -200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .timeline-inner:nth-child(odd) .date { inset-inline-end: -170px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .timeline-inner:nth-child(odd) .date { inset-inline-end: -130px; } } .timeline-inner:nth-child(even) .date { inset-inline-start: -200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .timeline-inner:nth-child(even) .date { inset-inline-start: -170px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .timeline-inner:nth-child(even) .date { inset-inline-start: -130px; } } .timeline-inner .content { padding: 30px 30px; background: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-2); position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .timeline-inner .content { padding: 20px; } } .timeline-inner .content .top { -webkit-padding-start: 40px; padding-inline-start: 40px; position: relative; } .timeline-inner .content .top span { position: absolute; top: 0; inset-inline-start: 0; font-size: 24px; font-family: var(--tj-ff-heading); line-height: 1.2; font-weight: 600; color: var(--tj-color-common-black-3); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .timeline-inner .content .top span { font-size: 20px; } } .timeline-inner .content .top .title { margin-bottom: 15px; } .timeline-inner .content .top p { margin: 0; } .timeline-inner .content .bottom { margin-top: 30px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 767.98px) { .timeline { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 60px; padding-top: 30px; } .timeline::after { inset-inline-start: 10px; } .timeline-inner { width: 100%; } .timeline-inner:nth-child(even) { inset-inline-start: 0%; } .timeline-inner:nth-child(odd)::after, .timeline-inner:nth-child(even)::after { inset-inline-start: 1px; top: -38px; } .timeline-inner:nth-child(odd) .date, .timeline-inner:nth-child(even) .date { inset-inline-end: auto; inset-inline-start: 40px; top: -42px; } } /* !END: History CSS */ /* START: Careers CSS */ .tj-careers { padding: 30px; border: 1px solid var(--tj-color-border-3); background-color: var(--tj-color-common-white); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-careers-icon { width: 88px; height: 88px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 48px; line-height: 1; background-color: var(--tj-color-theme-bg-2); border-radius: 50%; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-careers-icon i { color: var(--tj-color-theme-primary); } .tj-careers-tag { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 5px; margin-bottom: 22px; } .tj-careers-tag span { display: inline-block; padding: 2px 14px; border: 1px solid var(--tj-color-border-3); background-color: transparent; border-radius: 30px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-careers-tag span:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); } .tj-careers-title { margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-careers-title { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-careers-title { font-size: 19px; } } .tj-careers-salary { margin-top: 15px; font-family: var(--tj-ff-heading); font-weight: 600; font-size: 20px; color: var(--tj-color-common-black-3); } .tj-careers-salary span { color: var(--tj-color-text-body); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-careers-bottom { margin-top: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } .tj-careers-bottom .location { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-careers-bottom .location i { color: var(--tj-color-common-black-3); -webkit-margin-end: 5px; margin-inline-end: 5px; } .tj-careers-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--tj-color-heading-primary); } .tj-careers-btn span.btn-icon { overflow: hidden; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-heading-primary); } .tj-careers-btn span.btn-icon i { color: var(--tj-color-heading-primary); font-weight: 700; } .tj-careers-btn span.btn-icon i:first-child, .tj-careers-btn span.btn-icon i:last-child { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; transition: -webkit-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s; } .tj-careers-btn span.btn-icon i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-careers-btn .btn-text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; color: var(--tj-color-heading-primary); text-shadow: 0 23px 0 currentColor; font-weight: 700; } .tj-careers-btn .btn-text > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.5s; transition: 0.5s; } .tj-careers:hover { border-color: var(--tj-color-theme-dark); background-color: var(--tj-color-theme-dark); } .tj-careers:hover .tj-careers-icon { background-color: var(--tj-color-theme-primary); } .tj-careers:hover .tj-careers-icon i { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-tag span { border: 1px solid #364052; } .tj-careers:hover .tj-careers-title a { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-salary span { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-bottom .location { color: var(--tj-color-common-black-3); } .tj-careers:hover .tj-careers-btn { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-btn span.btn-icon { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-btn span.btn-icon i { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-btn span.btn-icon i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-careers:hover .tj-careers-btn span.btn-icon i:last-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .tj-careers:hover .tj-careers-btn .btn-text { color: var(--tj-color-common-white); } .tj-careers:hover .tj-careers-btn .btn-text > span { -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } /* !END: Careers CSS */ /* START: Careers details CSS */ .tj-careers-details .tj-post-single-post { border: 1px solid var(--tj-color-border-3); padding: 30px; } .tj-careers-details .service-check-list ul li span { font-weight: 400; } .tj-careers-details .tj-post-details_tags_share { margin-top: 25px; padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .tj-careers-details .project_catagory ul { border: 1px solid var(--tj-color-border-3); padding: 0 20px 25px 20px; } .tj-careers-details .project_catagory ul li:first-child { padding-top: 19px; } .tj-careers-details .project_catagory ul li { font-weight: 400; } .tj-careers-details .tj-sidebar-widget { border-color: var(--tj-color-border-3); } .tj-careers-top { padding: 30px; background-color: var(--tj-color-theme-bg-2); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; } .tj-careers-top-icon { width: 130px; height: 130px; 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(--tj-color-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-careers-top-icon { width: 100px; height: 100px; } } .tj-careers-top-icon i { font-size: 70px; color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-careers-top-icon i { font-size: 55px; } } .tj-careers-top-title { margin-bottom: 0; } .tj-careers-top .tj-careers-tag span { border-color: var(--tj-color-border-2); } .tj-careers-top .tj-careers-tag span:hover { border-color: var(--tj-color-theme-primary); } .tj-careers-top .location { display: block; margin-top: 15px; color: var(--tj-color-heading-primary); } .tj-careers-top .location i { -webkit-margin-end: 5px; margin-inline-end: 5px; } .tj-careers-form .form-input { margin-bottom: 20px; } .tj-careers-form .form-input.reduce { margin-top: -10px; } .tj-careers-form .form-input textarea, .tj-careers-form .form-input input { height: 60px; border: 1px solid var(--tj-color-border-2); border-radius: 0; } .tj-careers-form .form-input textarea::-webkit-input-placeholder, .tj-careers-form .form-input input::-webkit-input-placeholder { color: var(--tj-color-common-black-2); } .tj-careers-form .form-input textarea::-moz-placeholder, .tj-careers-form .form-input input::-moz-placeholder { color: var(--tj-color-common-black-2); } .tj-careers-form .form-input textarea:-ms-input-placeholder, .tj-careers-form .form-input input:-ms-input-placeholder { color: var(--tj-color-common-black-2); } .tj-careers-form .form-input textarea::-ms-input-placeholder, .tj-careers-form .form-input input::-ms-input-placeholder { color: var(--tj-color-common-black-2); } .tj-careers-form .form-input textarea::placeholder, .tj-careers-form .form-input input::placeholder { color: var(--tj-color-common-black-2); } .tj-careers-form .form-input textarea:focus, .tj-careers-form .form-input input:focus { border: 1px solid var(--tj-color-theme-primary); } .tj-careers-form .form-input textarea { min-height: 160px; } .tj-careers-form .form-input label { color: var(--tj-color-common-black-2); display: block; line-height: 1; margin-bottom: 10px; } .tj-careers-form .form-input input[type=file] { padding: 7px; cursor: pointer; } .tj-careers-form .form-input input[type=file]:focus { border: 1px solid var(--tj-color-border-2); } .tj-careers-form .form-input input::-webkit-file-upload-button { width: 125px; height: 44px; -webkit-margin-end: 10px; margin-inline-end: 10px; color: var(--tj-color-theme-primary); background: var(--tj-color-theme-bg-2); border: none; cursor: pointer; } .tj-careers-form .form-input input::file-selector-button { width: 125px; height: 44px; -webkit-margin-end: 10px; margin-inline-end: 10px; color: var(--tj-color-theme-primary); background: var(--tj-color-theme-bg-2); border: none; cursor: pointer; } /* !END: Careers details CSS */ /* START: Contact CSS */ .tj-contact-section { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; padding-top: 120px; z-index: 1; overflow: hidden; } .tj-contact-section::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: rgba(5, 18, 41, 0.2); z-index: -1; } .tj-contact-section .sec-heading { max-width: 535px; width: 100%; } .tj-contact-section .sec-heading .sec-title { letter-spacing: -0.025em; color: var(--tj-color-common-white); } .tj-contact-section .sec-heading .desc { color: var(--tj-color-common-white-2); } .tj-contact-section .sec-heading .desc p:last-child { margin-bottom: 0; } .tj-contact-section .sec-heading .contact-button { margin-top: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-contact-section .sec-heading .contact-button { margin-top: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-contact-section .sec-heading .contact-button { margin-top: 40px; } } .tj-contact-section .contact-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-contact-section { padding-top: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-contact-section { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-contact-section .sec-heading .contact-button { margin-top: 40px; } .tj-contact-section .contact-wrapper { gap: 10px; } } .contact-left-content { max-width: 535px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact-left-content { max-width: 445px; } } .contact-form-one { max-width: 630px; width: 100%; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: 60px 50px; } .contact-form-one .title { color: var(--tj-color-common-white); letter-spacing: -0.025em; max-width: 405px; width: 100%; margin-bottom: 35px; } .contact-form-one .contact-item { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 60px; } .contact-form-one .contact-item .contact-text { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 21px 20px; color: rgb(247, 247, 247); line-height: 1; } .contact-form-one .contact-item .contact-text a { color: rgb(247, 247, 247); position: relative; } .contact-form-one .contact-item .contact-text a::after { content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; width: 0; height: 1px; background-color: var(--tj-color-common-white); } .contact-form-one .contact-item .contact-text a:hover::after { width: 100%; } .contact-form-one .contact-item .contact-text i { color: var(--tj-color-theme-primary); } .contact-form-one .form-input { margin-bottom: 45px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-form-one .form-input { margin-bottom: 25px; } } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), .contact-form-one .form-input textarea, .contact-form-one .form-input input[type=tel], .contact-form-one .form-input input[type=email], .contact-form-one .form-input input[type=text] { width: 100%; color: var(--tj-color-common-white); border: none; border-bottom: 1.2px solid rgb(103, 110, 122); background: transparent; padding: 0px 0px 15px 0px; } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .contact-form-one .form-input textarea::-webkit-input-placeholder, .contact-form-one .form-input input[type=tel]::-webkit-input-placeholder, .contact-form-one .form-input input[type=email]::-webkit-input-placeholder, .contact-form-one .form-input input[type=text]::-webkit-input-placeholder { color: var(--tj-color-common-white-2); } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .contact-form-one .form-input textarea::-moz-placeholder, .contact-form-one .form-input input[type=tel]::-moz-placeholder, .contact-form-one .form-input input[type=email]::-moz-placeholder, .contact-form-one .form-input input[type=text]::-moz-placeholder { color: var(--tj-color-common-white-2); } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .contact-form-one .form-input textarea:-ms-input-placeholder, .contact-form-one .form-input input[type=tel]:-ms-input-placeholder, .contact-form-one .form-input input[type=email]:-ms-input-placeholder, .contact-form-one .form-input input[type=text]:-ms-input-placeholder { color: var(--tj-color-common-white-2); } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-form-one .form-input textarea::-ms-input-placeholder, .contact-form-one .form-input input[type=tel]::-ms-input-placeholder, .contact-form-one .form-input input[type=email]::-ms-input-placeholder, .contact-form-one .form-input input[type=text]::-ms-input-placeholder { color: var(--tj-color-common-white-2); } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder, .contact-form-one .form-input textarea::placeholder, .contact-form-one .form-input input[type=tel]::placeholder, .contact-form-one .form-input input[type=email]::placeholder, .contact-form-one .form-input input[type=text]::placeholder { color: var(--tj-color-common-white-2); } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-form-one .form-input textarea::-ms-input-placeholder, .contact-form-one .form-input input[type=tel]::-ms-input-placeholder, .contact-form-one .form-input input[type=email]::-ms-input-placeholder, .contact-form-one .form-input input[type=text]::-ms-input-placeholder { color: var(--tj-color-common-white-2); } .contact-form-one .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus, .contact-form-one .form-input textarea:focus, .contact-form-one .form-input input[type=tel]:focus, .contact-form-one .form-input input[type=email]:focus, .contact-form-one .form-input input[type=text]:focus { border-bottom: 1px solid var(--tj-color-common-white); } .contact-form-one .form-input textarea { min-height: 130px; resize: none; } .contact-form-one .nice-select { position: relative; padding: 0px 0px 20px 0px; border-bottom: 1.2px solid rgb(103, 110, 122); -webkit-border-start: none; border-inline-start: none; -webkit-border-end: none; border-inline-end: none; border-top: none; border-radius: 0px; background: transparent; line-height: normal; z-index: 1; } .contact-form-one .nice-select::after { display: none; } .contact-form-one .nice-select::before { position: absolute; content: "\e91a"; font-family: "solvior-icons"; top: 6px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); inset-inline-end: 0px; font-size: 16px; color: var(--tj-color-common-white-2); } .contact-form-one .nice-select.open::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .contact-form-one .nice-select span.current { color: var(--tj-color-common-white-2); } .contact-form-one .nice-select .list { width: 100%; margin-top: 2px; border-radius: 0px; -webkit-box-shadow: none; box-shadow: none; } .contact-form-one .nice-select .list .option { color: var(--tj-color-text-body); } .contact-form-one .nice-select .list .option:hover, .contact-form-one .nice-select .list .option.focus, .contact-form-one .nice-select .list .option.selected { color: var(--tj-color-text-body); font-weight: var(--tj-fw-regular); background-color: var(--tj-color-theme-bg); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .contact-form-one { max-width: 560px; padding: 40px 30px; } .contact-form-one .contact-item .contact-text { padding: 18px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact-form-one { max-width: 470px; padding: 35px 15px; } .contact-form-one .contact-item { margin-bottom: 40px; } .contact-form-one .contact-item .contact-text { padding: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-form-one { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact-form-one { max-width: 100%; padding: 35px 15px; } .contact-form-one .title { margin-bottom: 25px; } .contact-form-one .contact-item { margin-bottom: 35px; } } @media (max-width: 575px) { .contact-form-one { max-width: 100%; padding: 35px 15px; } .contact-form-one .title { margin-bottom: 25px; } .contact-form-one .contact-item { margin-bottom: 35px; } .contact-form-one .contact-item .contact-text { max-width: 100%; width: 100%; } .contact-form-one .input-textarea { margin-top: 25px; } } .contact-form-one.style-2 { background: var(--tj-color-common-white); -webkit-backdrop-filter: none; backdrop-filter: none; border: 1px solid var(--tj-color-border-2); } .contact-form-one.style-2 .title { color: var(--tj-color-heading-primary); } .contact-form-one.style-2 .title span { color: var(--tj-color-theme-primary); } .contact-form-one.style-2 .form-input { margin-bottom: 25px; } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), .contact-form-one.style-2 .form-input textarea, .contact-form-one.style-2 .form-input input[type=tel], .contact-form-one.style-2 .form-input input[type=email], .contact-form-one.style-2 .form-input input[type=text] { color: var(--tj-color-text-body); border-color: var(--tj-color-border-2); } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .contact-form-one.style-2 .form-input textarea::-webkit-input-placeholder, .contact-form-one.style-2 .form-input input[type=tel]::-webkit-input-placeholder, .contact-form-one.style-2 .form-input input[type=email]::-webkit-input-placeholder, .contact-form-one.style-2 .form-input input[type=text]::-webkit-input-placeholder { color: var(--tj-color-text-body); } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .contact-form-one.style-2 .form-input textarea::-moz-placeholder, .contact-form-one.style-2 .form-input input[type=tel]::-moz-placeholder, .contact-form-one.style-2 .form-input input[type=email]::-moz-placeholder, .contact-form-one.style-2 .form-input input[type=text]::-moz-placeholder { color: var(--tj-color-text-body); } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .contact-form-one.style-2 .form-input textarea:-ms-input-placeholder, .contact-form-one.style-2 .form-input input[type=tel]:-ms-input-placeholder, .contact-form-one.style-2 .form-input input[type=email]:-ms-input-placeholder, .contact-form-one.style-2 .form-input input[type=text]:-ms-input-placeholder { color: var(--tj-color-text-body); } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-form-one.style-2 .form-input textarea::-ms-input-placeholder, .contact-form-one.style-2 .form-input input[type=tel]::-ms-input-placeholder, .contact-form-one.style-2 .form-input input[type=email]::-ms-input-placeholder, .contact-form-one.style-2 .form-input input[type=text]::-ms-input-placeholder { color: var(--tj-color-text-body); } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder, .contact-form-one.style-2 .form-input textarea::placeholder, .contact-form-one.style-2 .form-input input[type=tel]::placeholder, .contact-form-one.style-2 .form-input input[type=email]::placeholder, .contact-form-one.style-2 .form-input input[type=text]::placeholder { color: var(--tj-color-text-body); } .contact-form-one.style-2 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus, .contact-form-one.style-2 .form-input textarea:focus, .contact-form-one.style-2 .form-input input[type=tel]:focus, .contact-form-one.style-2 .form-input input[type=email]:focus, .contact-form-one.style-2 .form-input input[type=text]:focus { border-color: var(--tj-color-heading-primary); } .contact-form-one.style-2 .nice-select { border-color: var(--tj-color-border-2); } .contact-form-one.style-2 .nice-select::before { color: var(--tj-color-text-body); } .contact-form-one.style-2 .nice-select span.current { color: var(--tj-color-text-body); } .contact-form-one.style-2 .nice-select .list { margin-top: 0; border: 1px solid var(--tj-color-border-2); } .contact-form-one.style-2 .nice-select .list:hover .option { color: var(--tj-color-text-body); } .contact-form-one.style-2 .nice-select .list .option { color: var(--tj-color-text-body); } .contact-form-one.style-2 .nice-select .list .option:hover, .contact-form-one.style-2 .nice-select .list .option.focus, .contact-form-one.style-2 .nice-select .list .option.selected { color: var(--tj-color-text-body); font-weight: var(--tj-fw-regular); background-color: var(--tj-color-theme-bg); } .contact-item.style-2 { padding: 40px; border: 1px solid var(--tj-color-border-2); text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .contact-item.style-2 { padding: 25px; } } .contact-item.style-2 p { margin-bottom: 0; max-width: 224px; margin: 0 auto; } .contact-item.style-2:hover .contact-icon { background: var(--tj-color-theme-primary); } .contact-item.style-2:hover .contact-icon i { color: var(--tj-color-common-white); -webkit-animation: wobble-horizontal-hover 1s ease-in-out 1; animation: wobble-horizontal-hover 1s ease-in-out 1; } .contact-item.style-2 .contact-icon { width: 88px; height: 88px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: var(--tj-color-theme-bg-2); border-radius: 50%; margin-bottom: 30px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .contact-item.style-2 .contact-icon { width: 50px; height: 50px; } } .contact-item.style-2 .contact-icon i { font-size: 32px; color: var(--tj-color-theme-primary); } .contact-item.style-2 .contact-title { font-size: 24px; margin-bottom: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .contact-item.style-2 .contact-title { font-size: 20px; } } .contact-item.style-2 .contact-list { list-style: none; } .contact-item.style-2 .contact-list li a { color: var(--tj-color-text-body); } .contact-item.style-2 .contact-list li a:hover { color: var(--tj-color-theme-primary); } .contact-item.style-2 .contact-list li.active a { color: var(--tj-color-theme-primary); } .google-map { position: relative; min-height: 585px; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .google-map { min-height: 544px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .google-map { min-height: 529px; } } .google-map iframe { width: 100%; height: 100%; -webkit-filter: grayscale(1); filter: grayscale(1); } .contact-team-details { padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact-team-details { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-team-details { padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details { padding-bottom: 60px; } } .contact-team-details__inner { background: var(--tj-color-theme-bg); padding: 80px; -webkit-padding-start: 50px; padding-inline-start: 50px; border-radius: var(--tj-br-md); } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-team-details__inner { padding: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__inner { padding: 30px; } } .contact-team-details__message { font-size: 16px; } .contact-team-details__message a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .contact-team-details__message a i { color: var(--tj-color-theme-primary); } .contact-team-details__message a:hover { color: var(--tj-color-theme-primary); } .contact-team-details__form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0; -webkit-padding-start: 125px; padding-inline-start: 125px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .contact-team-details__form { -webkit-padding-start: 60px; padding-inline-start: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form { margin-top: 30px; -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form { grid-template-columns: 1fr; gap: 16px; max-width: 100%; margin-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form { grid-template-columns: 1fr; gap: 16px; margin-top: 20px; } } .contact-team-details__form select, .contact-team-details__form .nice-select, .contact-team-details__form input:not([type=submit]):not([type=radio]):not([type=checkbox]), .contact-team-details__form textarea { color: var(--tj-color-common-black); font-weight: var(--tj-fw-normal); height: 60px; border-radius: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form select, .contact-team-details__form .nice-select, .contact-team-details__form input:not([type=submit]):not([type=radio]):not([type=checkbox]), .contact-team-details__form textarea { font-size: 14px; } } .contact-team-details__form textarea { min-height: 200px; } .contact-team-details__form .tj-input { width: 100%; font-size: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form .tj-input { font-size: 14px; } } .contact-team-details__form .tj-input__wrapper { width: 100%; border: 0; } .contact-team-details__form .tj-input__wrapper--message { grid-column: 1/3; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form .tj-input__wrapper--message { grid-column: 1/2; } } .contact-team-details__form .tj-input.tj-nice-select .list { border-radius: 0; width: 100%; } .contact-team-details__form .tj-input.tj-nice-select .list:hover .option { color: var(--tj-color-text-body); } .contact-team-details__form .tj-input.tj-nice-select .list .option { color: var(--tj-color-text-body); } .contact-team-details__form .tj-input.tj-nice-select .list .option:hover, .contact-team-details__form .tj-input.tj-nice-select .list .option.focus, .contact-team-details__form .tj-input.tj-nice-select .list .option.selected { color: var(--tj-color-text-body); font-weight: var(--tj-fw-regular); background-color: var(--tj-color-theme-bg); } .contact-team-details__form .tj-input.tj-nice-select::after { display: none; } .contact-team-details__form .tj-input.tj-nice-select::before { position: absolute; content: "\e91a"; font-family: "solvior-icons"; top: 10px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); inset-inline-end: 15px; font-size: 16px; color: var(--tj-color-text-body); } /* !END: Contact CSS */ /* START: CTA CSS */ .tj-cta-section { position: relative; background-color: var(--tj-color-theme-primary); padding: 53px 0; z-index: 2; overflow: hidden; } .tj-cta-section .cta-shape-1, .tj-cta-section .cta-shape-2 { position: absolute; inset-inline-start: 10%; top: 0; z-index: -1; } .tj-cta-section .cta-shape-2 { top: auto; bottom: 0; inset-inline-start: auto; inset-inline-end: 22%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-cta-section .cta-shape-1 { inset-inline-start: 0; } .tj-cta-section .cta-shape-2 { inset-inline-end: 10%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-section .cta-shape-1 { inset-inline-start: 0; max-width: 160px; } .tj-cta-section .cta-shape-2 { inset-inline-end: 0; max-width: 160px; } } @media (max-width: 575px) { .tj-cta-section .cta-shape-1, .tj-cta-section .cta-shape-2 { max-width: 135px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-section { padding: 45px 0; } } .cta-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .cta-wrapper .cta-title .title { color: var(--tj-color-common-white); font-size: 72px; letter-spacing: -0.025em; margin-bottom: 0; text-transform: uppercase; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-wrapper .cta-title .title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-wrapper .cta-title .title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .cta-wrapper .cta-title .title { font-size: 40px; } } @media (max-width: 575px) { .cta-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .cta-wrapper .cta-title .title { font-size: 28px; } } .tj-cta-section-3 { padding: 38px 0; position: relative; overflow: hidden; z-index: 2; } .tj-cta-section-3::before { position: absolute; top: 0; inset-inline-start: 0; content: ""; height: 100%; width: 50%; background-color: var(--tj-color-theme-primary); z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-section-3::before { width: 100%; } } .tj-cta-section-3::after { position: absolute; top: 0; inset-inline-end: 0; width: 50%; height: 100%; content: ""; background-image: url("../img/cta-3.png"); background-repeat: no-repeat; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-section-3::after { display: none; } } .tj-cta-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 15px; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-list { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } .tj-cta-list li { list-style: none; position: relative; } .tj-cta-list li:not(:first-child)::before { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-start: -20px; width: 1px; height: 18px; background-color: rgba(247, 247, 247, 0.3); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-list li:not(:first-child)::before { display: none; } } .tj-cta-list li a, .tj-cta-list li span { color: var(--tj-color-common-white); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-size: 18px; } .tj-cta-list li span { color: var(--tj-color-heading-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) { .tj-cta-list li span { color: var(--tj-color-common-white); } } .tj-cta-list.style-2 { -webkit-padding-start: 35px; padding-inline-start: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-list.style-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } @media (max-width: 575px) { .tj-cta-list.style-2 { margin-top: 15px; } } /* !END: Cta CSS */ /* START: Progress CSS */ .tj-progress-section { position: relative; background: var(--tj-color-theme-bg); z-index: 2; } .tj-progress-section .sec-heading { margin-bottom: 0; } .tj-progress-section .progress-bg-images { position: absolute; width: 50%; height: 100%; inset-inline-start: 0; top: 0; background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; } .tj-progress-section .progress-bg-images::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: rgba(5, 18, 41, 0.85); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .progress-images { margin-top: 40px; } .progress-images img { width: 100%; } } .progress-right-content { -webkit-padding-start: 95px; padding-inline-start: 95px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .progress-right-content { -webkit-padding-start: 30px; padding-inline-start: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .progress-right-content { -webkit-padding-start: 25px; padding-inline-start: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .progress-right-content { -webkit-padding-start: 0; padding-inline-start: 0; } } .progress-style-2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; margin-top: 40px; } .progress-style-2 .proggess-item .proggess-circle { margin-bottom: 10px; } .progress-style-2 .proggess-item .proggess-circle input { color: var(--tj-color-heading-primary) !important; font-size: 22px !important; width: auto; font-weight: var(--tj-fw-bold) !important; font-family: var(--tj-ff-heading) !important; } .progress-style-2 .proggess-item .proggess-text { text-align: center; } .progress-style-2 .proggess-item .proggess-text .sub-title { display: block; font-size: 18px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-regular); letter-spacing: initial; text-transform: unset; color: var(--tj-color-heading-primary); margin-bottom: 0px; line-height: 1.5; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .progress-style-2 { gap: 40px; } } @media (max-width: 575px) { .progress-style-2 { gap: 30px; } .progress-style-2 .proggess-item .proggess-circle canvas { width: 145px !important; height: 145px !important; } .progress-style-2 .proggess-item .proggess-circle input { margin-top: 45px !important; -webkit-margin-start: -115px !important; margin-inline-start: -115px !important; } } /* !END: Progress CSS */ /* START: Marquee CSS */ .tj-marquee-section { position: relative; padding-top: 25px; padding-bottom: 23px; background-color: var(--tj-color-theme-primary); overflow: hidden; } .marquee-slider-wrapper .marquee-slider .marquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .marquee-item { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; -webkit-padding-end: 30px; padding-inline-end: 30px; } .marquee-item .marquee-title .text { color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-bottom: 0; } .marquee-item .marquee-icons { position: relative; top: 3px; max-width: 32px; width: 100%; } .marquee-item .marquee-icons img { -webkit-animation: rotateImg-2 6s infinite linear; animation: rotateImg-2 6s infinite linear; } .marquee-slider-two { position: relative; z-index: 1; } .marquee-slider-two::before, .marquee-slider-two::after { position: absolute; content: ""; top: 0; inset-inline-start: 0; width: 40%; height: 100%; background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-color-theme-dark)), to(rgba(5, 18, 41, 0))); background-image: linear-gradient(90deg, var(--tj-color-theme-dark) 0%, rgba(5, 18, 41, 0) 100%); z-index: 2; } .marquee-slider-two::after { inset-inline-start: auto; inset-inline-end: 0; background-image: -webkit-gradient(linear, right top, left top, from(var(--tj-color-theme-dark)), to(rgba(5, 18, 41, 0))); background-image: linear-gradient(-90deg, var(--tj-color-theme-dark) 0%, rgba(5, 18, 41, 0) 100%); } .scrolling-ticker-box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .scrolling-content { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; min-width: 100%; -webkit-animation: scroll 120s linear infinite; animation: scroll 120s linear infinite; } .scrolling-content span { font-size: 114px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; text-transform: uppercase; color: var(--tj-color-common-white); vertical-align: middle; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; } .scrolling-content span i { color: var(--tj-color-theme-primary); font-size: 50px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-animation: rotateMarquee 6s infinite linear; animation: rotateMarquee 6s infinite linear; } /* !END: Theme Marquee CSS */ /* START: Animate CSS */ @-webkit-keyframes sticky { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @keyframes sticky { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 100% { -webkit-transform: translateY(0%); transform: translateY(0%); } } @-webkit-keyframes rotateImg { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotateImg { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes rotateImg-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotateImg-2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes rotateImg-two { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @keyframes rotateImg-two { 0% { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } 100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } } @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 var(--tj-color-common-white); box-shadow: 0 0 0 0 var(--tj-color-common-white); } 100% { -webkit-box-shadow: 0 0 0 25px transparent; box-shadow: 0 0 0 25px transparent; } } @keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 var(--tj-color-common-white); box-shadow: 0 0 0 0 var(--tj-color-common-white); } 100% { -webkit-box-shadow: 0 0 0 25px transparent; box-shadow: 0 0 0 25px transparent; } } @-webkit-keyframes pulse-two { 0% { -webkit-box-shadow: 0 0 0 0 rgba(247, 247, 247, 0.3); box-shadow: 0 0 0 0 rgba(247, 247, 247, 0.3); } 100% { -webkit-box-shadow: 0 0 0 25px transparent; box-shadow: 0 0 0 25px transparent; } } @keyframes pulse-two { 0% { -webkit-box-shadow: 0 0 0 0 rgba(247, 247, 247, 0.3); box-shadow: 0 0 0 0 rgba(247, 247, 247, 0.3); } 100% { -webkit-box-shadow: 0 0 0 25px transparent; box-shadow: 0 0 0 25px transparent; } } @-webkit-keyframes move { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(30px); transform: translateY(30px); } } @keyframes move { 0%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(30px); transform: translateY(30px); } } @-webkit-keyframes move-two { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @keyframes move-two { 0%, 100% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { -webkit-transform: translateX(30px); transform: translateX(30px); } } @-webkit-keyframes zoom-effect { 0%, 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } } @keyframes zoom-effect { 0%, 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } } @-webkit-keyframes shine { 0% { -webkit-transform: skewX(-25deg) translateX(0); transform: skewX(-25deg) translateX(0); } 100% { -webkit-transform: skewX(-25deg) translateX(250%); transform: skewX(-25deg) translateX(250%); } } @keyframes shine { 0% { -webkit-transform: skewX(-25deg) translateX(0); transform: skewX(-25deg) translateX(0); } 100% { -webkit-transform: skewX(-25deg) translateX(250%); transform: skewX(-25deg) translateX(250%); } } @-webkit-keyframes wobble-horizontal-hover { 16.65% { -webkit-transform: translateX(5px); transform: translateX(5px); } 33.3% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes wobble-horizontal-hover { 16.65% { -webkit-transform: translateX(5px); transform: translateX(5px); } 33.3% { -webkit-transform: translateX(-3px); transform: translateX(-3px); } 49.95% { -webkit-transform: translateX(4px); transform: translateX(4px); } 66.6% { -webkit-transform: translateX(-2px); transform: translateX(-2px); } 83.25% { -webkit-transform: translateX(1px); transform: translateX(1px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - 40px)); transform: translateX(calc(-100% - 40px)); } } @keyframes scroll { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(calc(-100% - 40px)); transform: translateX(calc(-100% - 40px)); } } @-webkit-keyframes rotateMarquee { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotateMarquee { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0) rotate(90deg); transform: translateX(0) rotate(90deg); } 40% { -webkit-transform: translateX(6px) rotate(90deg); transform: translateX(6px) rotate(90deg); } 60% { -webkit-transform: translateX(3px) rotate(90deg); transform: translateX(3px) rotate(90deg); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateX(0) rotate(90deg); transform: translateX(0) rotate(90deg); } 40% { -webkit-transform: translateX(6px) rotate(90deg); transform: translateX(6px) rotate(90deg); } 60% { -webkit-transform: translateX(3px) rotate(90deg); transform: translateX(3px) rotate(90deg); } } @-webkit-keyframes bounce2 { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(6px); transform: translateY(6px); } 60% { -webkit-transform: translateY(3px); transform: translateY(3px); } } @keyframes bounce2 { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(6px); transform: translateY(6px); } 60% { -webkit-transform: translateY(3px); transform: translateY(3px); } } /* !END: Animate CSS */ /* START: Section Title CSS */ .sec-heading { display: block; margin-bottom: 50px; } .sec-heading .sub-title { display: inline-block; font-size: 14px; font-weight: var(--tj-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tj-color-theme-primary); -webkit-padding-start: 16px; padding-inline-start: 16px; -webkit-padding-end: 16px; padding-inline-end: 16px; margin-bottom: 15px; position: relative; z-index: 1; } .sec-heading .sub-title::before, .sec-heading .sub-title::after { position: absolute; content: ""; width: 4px; height: 4px; border-radius: 50%; top: 50%; inset-inline-start: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tj-color-theme-primary); } .sec-heading .sub-title::after { inset-inline-start: auto; inset-inline-end: 0; } .sec-heading .sec-title { margin: 0; letter-spacing: -0.04em; } .sec-heading .sec-title span { color: var(--tj-color-theme-primary); } .sec-heading .desc { margin-top: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-heading .desc { margin-bottom: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sec-heading .desc { margin-bottom: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-heading { margin-bottom: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sec-heading { margin-bottom: 40px; } .sec-heading .sub-title { margin-bottom: 10px; } } .sec-heading.style-2 .sub-title { -webkit-padding-start: 0; padding-inline-start: 0; -webkit-padding-end: 0; padding-inline-end: 0; } .sec-heading.style-2 .sub-title::before, .sec-heading.style-2 .sub-title::after { display: none; } .sec-heading.style-3 .sub-title { line-height: 1; padding: 5px 7px; background-color: var(--tj-color-theme-bg); } .sec-heading.style-3 .sub-title::after, .sec-heading.style-3 .sub-title::before { display: none; } .sec-heading.style-4 .sub-title { line-height: 1; padding: 5px 7px 5px 17px; background-color: var(--tj-color-theme-bg); } .sec-heading.style-4 .sub-title::before { inset-inline-start: 7px; } .sec-heading.style-4 .sub-title::after { display: none; } .sec-heading-centered { max-width: 560px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } /* !END: Section Title CSS */ /* START: Hero CSS */ .tj-hero-section-three { padding-top: 177px; margin-bottom: 30px; background: var(--tj-color-theme-bg); position: relative; z-index: 2; } .tj-hero-section-three .hero-shape { position: absolute; top: 157px; inset-inline-start: -20px; max-width: 180px; width: 100%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-three .hero-shape { top: 85px; inset-inline-start: auto; inset-inline-end: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-three .hero-shape { max-width: 120px; top: 50px; inset-inline-start: auto; inset-inline-end: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-section-three { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-three { padding-top: 160px; margin-bottom: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-three { padding-top: 140px; margin-bottom: 40px; } } .hero-three-bg { position: absolute; top: 0; inset-inline-end: 0; width: 568px; height: 100%; background-color: var(--tj-color-theme-dark); background-repeat: no-repeat; background-size: cover; background-blend-mode: luminosity; } .hero-three-bg::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); opacity: 0.8; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-three-bg { width: 350px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-three-bg { width: 250px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-three-bg { width: 190px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-three-bg { display: none; } } .hero-wrapper-three { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; position: relative; z-index: 1; } .hero-wrapper-three .shape-1 { position: absolute; bottom: -24px; inset-inline-end: 145px; max-width: 30px; width: 100%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .hero-wrapper-three .shape-1 { bottom: -35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-wrapper-three .shape-1 { bottom: -35px; inset-inline-end: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-wrapper-three { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .hero-content-area { max-width: 764px; width: 100%; padding-top: 34px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hero-content-area { padding-top: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-area { max-width: 716px; padding-top: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-area { max-width: 550px; padding-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-area { padding-top: 0; } } .hero-content-three { position: relative; max-width: 645px; width: 100%; z-index: 2; margin-bottom: 113px; } .hero-content-three .hero-title { letter-spacing: -0.025em; margin-bottom: 10px; line-height: 1.056; } .hero-content-three .hero-title span { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-three .hero-title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-content-three .hero-title { font-size: 56px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-three .hero-title { font-size: 48px; } } .hero-content-three .desc { max-width: 530px; width: 100%; font-size: 18px; line-height: 1.444; } .hero-content-three .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-three .desc { max-width: 100%; } } .hero-content-three .btn-area { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; margin-top: 27px; } .hero-content-three .client-experience .images-thumb { margin-bottom: 0; } .hero-content-three .client-experience .images-thumb li { -webkit-margin-start: -22px; margin-inline-start: -22px; max-width: 58px; background-color: var(--tj-color-theme-bg); } .hero-content-three .client-experience .images-thumb li img { height: 58px; mix-blend-mode: luminosity; background-color: var(--tj-color-common-white); } .hero-content-three .client-experience .images-thumb li:first-child { -webkit-margin-start: 0; margin-inline-start: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hero-content-three { margin-bottom: 95px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-three { margin-bottom: 75px; max-width: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-three { max-width: 450px; margin-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-three { max-width: 500px; margin-bottom: 60px; } } .hero-images-box-three { position: relative; max-width: 592px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: -60px; margin-inline-end: -60px; z-index: 1; -webkit-clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 8%); clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 8%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-three img { width: 100%; height: 600px; -o-object-fit: cover; object-fit: cover; } } @media (max-width: 575px) { .hero-images-box-three img { height: 500px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hero-images-box-three { max-width: 565px; -webkit-margin-end: -33px; margin-inline-end: -33px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-images-box-three { max-width: 470px; -webkit-margin-end: -30px; margin-inline-end: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-images-box-three { max-width: 410px; -webkit-margin-end: -20px; margin-inline-end: -20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-three { max-width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } } .hero-funfact { padding: 0 15px; margin-bottom: -30px; background-color: var(--tj-color-theme-dark); background-size: cover; background-repeat: no-repeat; background-blend-mode: luminosity; position: relative; -webkit-clip-path: polygon(5% 0, 100% 0, 100% 85%, 95% 100%, 0 100%, 0 16%); clip-path: polygon(5% 0, 100% 0, 100% 85%, 95% 100%, 0 100%, 0 16%); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .hero-funfact::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); opacity: 0.9; } .hero-funfact .counter-item { padding: 50px 42px 55px; max-width: 100%; width: 33.33%; -webkit-border-end: 1px solid var(--tj-color-border-1); border-inline-end: 1px solid var(--tj-color-border-1); } .hero-funfact .counter-item::before { display: block; width: 16px; height: 16px; inset-inline-end: -8px; border-width: 4px; background-color: var(--tj-color-theme-dark); } .hero-funfact .counter-item::after { display: none; } .hero-funfact .counter-item .number { color: var(--tj-color-common-white); letter-spacing: -0.025em; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact .counter-item .number { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .hero-funfact .counter-item .sub-title { color: var(--tj-color-common-white-2); margin-top: 6px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact .counter-item .sub-title { text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact .counter-item:nth-child(2) { border: none; } .hero-funfact .counter-item:nth-child(2)::before { display: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-funfact .counter-item { padding: 30px 42px 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-funfact .counter-item { padding: 30px 20px 40px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact .counter-item { padding: 30px 30px 40px; width: 50%; } } .hero-funfact .circle-wrap-item { width: 33.33%; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact .circle-wrap-item { width: 100%; padding: 30px 0; border-top: 1px solid var(--tj-color-border-1); } } .hero-funfact .circle-wrap { position: relative; width: 127px; height: 128px; margin: 0 auto; } .hero-funfact .circle-wrap .rotate-image { position: absolute; inset-inline-start: 50%; top: 50%; -webkit-animation: rotateImg-two 12s infinite linear; animation: rotateImg-two 12s infinite linear; } .hero-funfact .circle-wrap a { position: absolute; inset-inline-start: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--tj-color-common-white); font-size: 20px; } .hero-funfact .circle-wrap a i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .hero-funfact .circle-wrap a:hover i { -webkit-transform: rotate(-45deg) scale(1.5); -ms-transform: rotate(-45deg) scale(1.5); transform: rotate(-45deg) scale(1.5); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-funfact .circle-wrap { width: 110px; height: 111px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-funfact { padding: 0; margin-bottom: -25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-funfact { padding: 0; margin-bottom: -22px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact { max-width: 100%; width: 100%; margin-top: 60px; margin-bottom: -26px; padding: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-funfact { -webkit-clip-path: polygon(8% 0, 100% 0, 100% 88%, 93% 100%, 0 100%, 0 13%); clip-path: polygon(8% 0, 100% 0, 100% 88%, 93% 100%, 0 100%, 0 13%); margin-bottom: -40px; } } @-webkit-keyframes spin { from { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } to { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } } @keyframes spin { from { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } to { -webkit-transform: translate(-50%, -50%) rotate(180deg); transform: translate(-50%, -50%) rotate(180deg); } } /* !END: Hero CSS */ /* START: About CSS */ .tj-about-section-four { background-color: var(--tj-color-theme-bg); position: relative; overflow: hidden; } .tj-about-section-four .about-shapes { position: absolute; top: 356px; inset-inline-end: -40px; width: 180px; height: 180px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-section-four .about-shapes { width: 120px; height: 120px; } } .about-wrapper-three { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; position: relative; z-index: 2; padding-top: 120px; padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-three { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 50px; } } .about-wrapper-three .about_images { position: absolute; top: 0; inset-inline-end: 0; max-width: 305px; width: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .about-wrapper-three .about_images { max-width: 180px; inset-inline-end: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-three .about_images { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-wrapper-three .about_images { max-width: 230px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-three { padding: 80px 0; } } .about-image-wrap { max-width: 512px; -webkit-padding-end: 90px; padding-inline-end: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-image-wrap img { width: 100%; height: 600px; -o-object-fit: cover; object-fit: cover; } } @media (max-width: 575px) { .about-image-wrap img { height: 500px; } } .about-image-wrap .circle-wrap { position: absolute; width: 178px; height: 178px; border-radius: 50%; top: 50%; inset-inline-end: 0; border: 9px solid var(--tj-color-theme-bg); background-color: var(--tj-color-theme-dark); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .about-image-wrap .circle-wrap .rotate-image { position: absolute; inset-inline-start: 50%; top: 50%; width: 125px; height: 125px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: rotateImg 10s infinite linear; animation: rotateImg 10s infinite linear; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-image-wrap .circle-wrap .rotate-image { width: 100px; height: 100px; } } .about-image-wrap .circle-wrap .circle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; width: 100%; position: relative; z-index: 2; } .about-image-wrap .circle-wrap .circle 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: 58px; height: 58px; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-radius: 50%; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-image-wrap .circle-wrap .circle span { width: 45px; height: 45px; font-size: 14px; } } .about-image-wrap .circle-wrap:hover .circle span { -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); -webkit-box-shadow: 0 0 0 8px rgba(0, 117, 255, 0.2); box-shadow: 0 0 0 8px rgba(0, 117, 255, 0.2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-image-wrap .circle-wrap { width: 140px; height: 140px; border-width: 6px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-image-wrap .circle-wrap { top: 0; inset-inline-end: 50%; -webkit-transform: translate(50%, 0); -ms-transform: translate(50%, 0); transform: translate(50%, 0); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-image-wrap { max-width: 400px; -webkit-padding-end: 70px; padding-inline-end: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-image-wrap { padding: 90px 0 0 0; max-width: 100%; width: 100%; } } .about-content-four .sec-heading { max-width: 420px; margin-bottom: 30px; } .about-content-four .sec-heading .sub-title { background-color: var(--tj-color-common-white); } .about-content-four .sec-heading .sec-title { letter-spacing: -0.025em; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-content-four .sec-heading { max-width: 100%; } } .about-content-four .about-feature-item { max-width: 764px; } .about-content-four .about-feature-item .feature-box { padding-top: 32px; -webkit-padding-end: 35px; padding-inline-end: 35px; -webkit-margin-end: 40px; margin-inline-end: 40px; } .about-content-four .about-feature-item .feature-box:last-child { -webkit-border-end: none; border-inline-end: none; padding-top: 40px; -webkit-padding-end: 0; padding-inline-end: 0; -webkit-margin-end: 0; margin-inline-end: 0; } .about-content-four .about-feature-item .feature-box .desc { max-width: 380px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-content-four .about-feature-item .feature-box { width: 50%; -webkit-padding-end: 30px; padding-inline-end: 30px; -webkit-margin-end: 30px; margin-inline-end: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .about-content-four .about-feature-item .feature-box { width: 50%; -webkit-padding-end: 25px; padding-inline-end: 25px; -webkit-margin-end: 25px; margin-inline-end: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-content-four .about-feature-item .feature-box { width: 50%; } } @media (max-width: 575px) { .about-content-four .about-feature-item .feature-box { width: 100%; -webkit-border-end: 0; border-inline-end: 0; } } .about-content-four .about-feature-item .about-button { margin-top: 22px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-content-four .about-feature-item { max-width: 584px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-four .about-feature-item { max-width: 515px; } } @media (max-width: 575px) { .about-content-four .about-feature-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .about-content-four .about-author { background-color: var(--tj-color-common-white); padding: 28px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .about-content-four .about-author .author-img { width: 58px; height: 58px; border-radius: 50%; overflow: hidden; margin-bottom: 10px; } .about-content-four .about-author .author-name { -webkit-padding-end: 15px; padding-inline-end: 15px; -webkit-margin-end: 10px; margin-inline-end: 10px; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); } .about-content-four .about-author .author-name .title { margin-bottom: 3px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-content-four .about-author .author-name .title { font-size: 17px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-content-four .about-author .author-name { -webkit-padding-end: 10px; padding-inline-end: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .about-content-four .about-author .author-name { margin: 0 0 15px 0; padding: 0 0 10px 0; -webkit-border-end: 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-2); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-content-four .about-author { padding: 28px 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .about-content-four .about-author { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 575px) { .about-content-four .about-author { max-width: 310px; } } @media (max-width: 575px) { .about-content-four { padding: 0 10px; } } /* !END: About CSS */ /* START: Feature CSS */ .feature-item.style-4 { padding: 10px; position: relative; z-index: 1; } .feature-item.style-4::before { content: ""; position: absolute; width: calc(100% - 20px); height: 65%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(225, 232, 240, 0)), to(rgb(225, 232, 240))); background: linear-gradient(180deg, rgba(225, 232, 240, 0) 0%, rgb(225, 232, 240) 100%); bottom: 10px; inset-inline-start: 10px; z-index: -1; } .feature-item.style-4 .feature-icon { margin: 20px; margin-bottom: 55px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-item.style-4 .feature-icon { margin-bottom: 30px; } } .feature-item.style-4 .feature-content { padding: 30px 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-item.style-4 .feature-content { padding: 20px; } } .feature-item.style-4:hover::before { height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(225, 232, 240, 0)), color-stop(70%, rgb(225, 232, 240))); background: linear-gradient(180deg, rgba(225, 232, 240, 0) 0%, rgb(225, 232, 240) 70%); } /* Progress css */ .h4-progress-section { position: relative; overflow: hidden; padding-top: 480px; padding-bottom: 60px; z-index: 1; } .h4-progress-section .h4-progress-bg { position: absolute; inset-inline-start: 0; top: 0; width: 100%; z-index: -1; height: 130%; /* Slightly bigger for parallax depth */ background-size: cover; background-position: center; will-change: transform; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h4-progress-section .h4-progress-bg { height: 100%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h4-progress-section { padding-top: 350px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h4-progress-section { padding-top: 250px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h4-progress-section { padding-top: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h4-progress-section { padding-top: 160px; padding-bottom: 15px; } } @media (max-width: 575px) { .h4-progress-section { padding-top: 240px; padding-bottom: 15px; } } .h4-progress .progress-style-2 { max-width: 485px; padding: 30px; -webkit-margin-start: auto; margin-inline-start: auto; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(17.5px); backdrop-filter: blur(17.5px); -ms-flex-wrap: nowrap; flex-wrap: nowrap; gap: 80px; position: relative; } .h4-progress .progress-style-2::after { position: absolute; content: ""; top: 50%; inset-inline-start: 48%; width: 1px; height: 204px; background-color: rgba(247, 247, 247, 0.1); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media (max-width: 575px) { .h4-progress .progress-style-2 { padding: 16px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; } } .h4-progress .progress-style-2 .proggess-item .proggess-circle { text-align: start; } @media (max-width: 575px) { .h4-progress .progress-style-2 .proggess-item .proggess-circle { text-align: center; } } .h4-progress .progress-style-2 .proggess-item .proggess-text .sub-title, .h4-progress .progress-style-2 .proggess-item .proggess-circle input { color: var(--tj-color-common-white) !important; } .h4-progress .progress-style-2 .proggess-item .proggess-text .sub-title { line-height: 1; font-family: var(--tj-ff-body); } /* START: Service CSS */ .service-style-4 { padding: 10px; border: 1px solid var(--tj-color-border-2); position: relative; z-index: 2; } .service-style-4 .thumb { height: 300px; overflow: hidden; } .service-style-4 .thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .service-style-4 .service-icon { width: 90px; height: 90px; 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; -webkit-margin-start: 15px; margin-inline-start: 15px; margin-top: -45px; margin-bottom: 0; border-radius: 50%; background-color: var(--tj-color-common-white); position: relative; z-index: 2; text-align: center; } .service-style-4 .service-icon 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: 70px; height: 70px; font-size: 50px; line-height: 1; border-radius: 50%; color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-bg); } .service-style-4 .service-icon span i { -webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } .service-style-4 .service-content { padding: 20px 20px 20px 20px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; row-gap: 30px; } .service-style-4 .service-content .title { /* max-width: 260px; */ margin-bottom: 0; } .service-style-4 .service-content .title:hover a { color: var(--tj-color-theme-primary); } .service-style-4 .service-button { margin-top: 0; 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: 50px; height: 50px; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--tj-color-common-white); background-color: var(--tj-color-heading-primary); } .service-style-4 .service-button::before { display: none; } .service-style-4 .service-button i { -webkit-transform: rotate(-45deg) translateX(0); -ms-transform: rotate(-45deg) translateX(0); transform: rotate(-45deg) translateX(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; text-shadow: -40px 0 0; } .service-style-4 .service-button:hover i { -webkit-transform: rotate(-45deg) translateX(40px); -ms-transform: rotate(-45deg) translateX(40px); transform: rotate(-45deg) translateX(40px); } .service-style-4:hover .thumb img { -webkit-transform: scale(1.15); -ms-transform: scale(1.15); transform: scale(1.15); } .service-style-4:hover .service-icon span { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .service-style-4:hover .service-icon i { -webkit-transform: rotateY(360deg); transform: rotateY(360deg); } /* START: Cta CSS */ .h4-cta-section { padding: 80px 0; border-bottom: 1px solid var(--tj-color-border-1); background-position: center; background-repeat: no-repeat; background-size: cover; background-color: var(--tj-color-theme-primary); position: relative; overflow: hidden; z-index: 2; } .h4-cta-section .thumb { position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; } .h4-cta-section .thumb::before { position: absolute; content: ""; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), to(#051229)); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 100%); z-index: 2; } .h4-cta-section .thumb img { opacity: 0.2; height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .h4-cta-wrapper { position: relative; z-index: 2; } .h4-cta-wrapper .h4-cta-shape { position: absolute; inset-inline-start: 0; top: -80px; height: 300px; } .h4-cta-wrapper .h4-cta-shape img { height: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h4-cta-wrapper .h4-cta-shape { height: 285px; } } .h4-cta-newsletter { max-width: 650px; margin: 0 auto; text-align: center; } .h4-cta-newsletter .title { color: var(--tj-color-common-white); margin-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .h4-cta-newsletter .title { font-size: 35px; } } .newsletter-form.style-4 { position: relative; z-index: 2; } .newsletter-form.style-4 .form-input { position: relative; z-index: 2; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]), .newsletter-form.style-4 .form-input input[type=email] { color: var(--tj-color-text-body); font-weight: var(--tj-fw-regular); font-size: 16px; padding: 18px 160px 18px 25px; background: var(--tj-color-common-white); border: 0; border-radius: 60px; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .newsletter-form.style-4 .form-input input[type=email]::-ms-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .newsletter-form.style-4 .form-input input[type=email]::-webkit-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .newsletter-form.style-4 .form-input input[type=email]::-moz-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .newsletter-form.style-4 .form-input input[type=email]:-ms-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .newsletter-form.style-4 .form-input input[type=email]::-ms-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .newsletter-form.style-4 .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .newsletter-form.style-4 .form-input input[type=email]::placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .newsletter-form.style-4 .form-input button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-end: 25px; font-size: 16px; font-weight: var(--tj-fw-bold); color: var(--tj-color-text-body); } .newsletter-form.style-4 .form-input button::before { content: ""; position: absolute; width: 1px; height: 30px; top: 50%; inset-inline-start: -16px; background: var(--tj-color-border-2); -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); } .newsletter-form.style-4 .form-input button i { font-size: 22px; -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; color: var(--tj-color-theme-primary); -webkit-margin-end: 10px; margin-inline-end: 10px; } .newsletter-form.style-4 .form-input button:hover i { -webkit-transform: rotate(40deg); -ms-transform: rotate(40deg); transform: rotate(40deg); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .newsletter-form.style-4 { width: 73%; margin: 0 auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .newsletter-form.style-4 { width: 90%; margin: 0 auto; } } @media (max-width: 575px) { .newsletter-form.style-4 { max-width: 396px; margin: 0 auto; } } .footer-widget .title { color: var(--tj-color-common-white); } /* START: Case study CSS */ .h4-case-section { position: relative; z-index: 1; overflow: hidden; } .h4-case-section .sec-heading { margin-bottom: 28px; } .h4-case-section .case-shapes { position: absolute; top: 50%; inset-inline-start: -25px; width: 180px; height: 180px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: -1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h4-case-section .case-shapes { width: 120px; height: 120px; top: 20%; } } .case-item { border-bottom: 1px solid var(--tj-color-border-2); padding: 20px 0; } .case-item:first-child { border-top: 1px solid var(--tj-color-border-2); } .case-item .header { font-size: 32px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } @media only screen and (min-width: 576px) and (max-width: 767px) { .case-item .header { font-size: 26px; } } @media (max-width: 575px) { .case-item .header { font-size: 22px; } } .case-item .number { color: var(--tj-color-theme-primary); } .case-item .icon { font-size: 18px; color: var(--tj-color-heading-primary); border: 1px solid var(--tj-color-border-2); border-radius: 50%; width: 64px; height: 64px; text-align: center; line-height: 64px; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; } @media (max-width: 575px) { .case-item .icon { width: 45px; height: 45px; line-height: 45px; } } .case-item .icon.active { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .case-item .content { height: 0; opacity: 0; visibility: hidden; position: relative; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; margin-top: 0; } .case-item .content img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .case-item.active .content { height: 432px; opacity: 1; visibility: visible; margin-top: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .case-item.active .content { height: 350px; } } .project-cursor { display: block !important; } .project-cursor.cursor-outer { display: none !important; } .project-cursor.cursor-big { -webkit-margin-start: -85px; margin-inline-start: -85px; margin-top: -80px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .project-cursor.cursor-big { width: 90px; height: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-cursor.cursor-big { width: 80px; height: 80px; } } .project-cursor span { line-height: 23px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: absolute; top: 50%; inset-inline-start: 50%; } /* START: Team CSS */ .tj-team-section-two { background-color: var(--tj-color-theme-bg); overflow: hidden; } .tj-team-section-two .sec-heading { max-width: 585px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } .tj-team-section-two .sec-heading .sub-title { background-color: var(--tj-color-common-white); } .team-item.style-2 { min-height: auto; } .team-item.style-2::before { display: none; } .team-item.style-2 .team-images { overflow: hidden; position: relative; } .team-item.style-2 .team-images::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; inset-inline-start: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, var(--tj-color-theme-dark))); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, var(--tj-color-theme-dark) 84%); z-index: 1; opacity: 0; } .team-item.style-2 .team-content { position: unset; padding: 15px 0 0 0; background-color: var(--tj-color-theme-bg); 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: justify; -ms-flex-pack: justify; justify-content: space-between; } .team-item.style-2 .team-content .team-text { width: calc(100% - 50px); } .team-item.style-2 .team-content .team-text .title { color: var(--tj-color-heading-primary); } .team-item.style-2 .team-content .team-text .title a:hover { color: var(--tj-color-theme-primary); } .team-item.style-2 .team-content .team-text .sub-title { color: var(--tj-color-common-black-2); } .team-item.style-2 .team-share { position: absolute; bottom: 50%; inset-inline-end: -30px; background-color: var(--tj-color-theme-bg); border-top-left-radius: 24px; border-bottom-left-radius: 24px; padding: 12px 0 12px 12px; opacity: 0; visibility: hidden; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); z-index: 2; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .team-item.style-2 .team-share ul { gap: 9px; } .team-item.style-2 .team-share ul li a { width: 28px; height: 28px; font-size: 16px; color: var(--tj-color-theme-bg); background: rgba(5, 18, 41, 0.4); } .team-item.style-2 .team-share ul li a i { color: var(--tj-color-theme-bg); } .team-item.style-2 .team-share ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .team-item.style-2 .team-share ul li a:hover i { color: var(--tj-color-common-white); } .team-item.style-2:hover .team-share { opacity: 1; visibility: visible; inset-inline-end: 0; } .team-item.style-2:hover .team-images::before { opacity: 1; } .team-item.style-2:hover .team-images img { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-item.style-2 { min-height: auto; } } .team-item .team-btn { background-color: var(--tj-color-common-white); color: var(--tj-color-heading-primary); font-size: 18px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; } .team-item .team-btn i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .team-item .team-btn:hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .team-item .team-btn:hover i { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } /* !END: Team CSS */ /* START: Blog CSS */ .tj-blog-section-four { border-top: 1px solid var(--tj-color-border-2); overflow: hidden; } .tj-blog-section-four .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; } .tj-blog-section-four .sec-heading .sec-text .sec-title { margin-bottom: 0; } .blog-style-4 { position: relative; z-index: 1; overflow: hidden; } .blog-style-4 .blog-images { position: relative; z-index: 1; overflow: hidden; } .blog-style-4 .blog-images::before { content: ""; position: absolute; width: 100%; height: 77%; bottom: 0; inset-inline-start: 0; background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(5, 18, 41)), to(rgba(5, 18, 41, 0))); background: linear-gradient(0deg, rgb(5, 18, 41) 10%, rgba(5, 18, 41, 0) 100%); opacity: 1; z-index: 1; pointer-events: none; } .blog-style-4 .blog-images img { width: 100%; min-height: 485px; height: 100%; -o-object-fit: cover; object-fit: cover; -webkit-transition: all 0.4s linear; transition: all 0.4s linear; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-style-4 .blog-images img { min-height: 380px; } } .blog-style-4 .blog-images a { display: inline-block; } .blog-style-4 .blog-date { position: absolute; inset-inline-start: 15px; top: 15px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 20px; text-align: center; } .blog-style-4 .blog-date .date { display: block; font-family: var(--tj-ff-heading); font-size: 32px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-sbold); letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1; } .blog-style-4 .blog-date .month { display: block; font-size: 14px; color: var(--tj-color-common-white-2); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; } .blog-style-4 .blog-two-meta { margin-bottom: 15px; } .blog-style-4 .blog-two-meta ul li { color: var(--tj-color-common-white-2); } .blog-style-4 .blog-two-meta ul li .meta-link { color: var(--tj-color-common-white-2); border: 1px solid var(--tj-color-border-1); } .blog-style-4 .blog-two-meta ul li .meta-link:is(:hover, :focus) { color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .blog-style-4 .blog-content { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: auto; padding: 30px; z-index: 3; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; background-color: transparent; } .blog-style-4 .blog-content .title { color: var(--tj-color-common-white); line-height: 1.333; letter-spacing: -0.025em; margin-bottom: 0; } .blog-style-4 .blog-content .title a:hover { color: var(--tj-color-theme-primary); } .blog-style-4 .blog-content .blog-button { position: absolute; margin: 0; inset-inline-start: 30px; bottom: 0; opacity: 0; visibility: hidden; overflow: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .blog-style-4 .blog-content .blog-button .text-btn { color: var(--tj-color-common-white); } .blog-style-4 .blog-content .blog-button .text-btn::before { background-color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-style-4 .blog-content .blog-button { inset-inline-start: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-style-4 .blog-content { padding: 25px 20px; } } .blog-style-4:is(:hover, :focus) .blog-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .blog-style-4:is(:hover, :focus) .blog-content { padding-bottom: 75px; } .blog-style-4:is(:hover, :focus) .blog-content .blog-button { opacity: 1; visibility: visible; bottom: 35px; } /* !END: Blog CSS */ /* START: Hero CSS */ .tj-hero-section-four { padding-top: 140px; background: var(--tj-color-theme-bg); position: relative; z-index: 2; } .tj-hero-section-four .hero-shapes-2 { position: absolute; bottom: 0; inset-inline-start: -166px; max-width: 333px; width: 100%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-section-four .hero-shapes-2 { max-width: 220px; inset-inline-start: -110px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-four .hero-shapes-2 { max-width: 180px; inset-inline-start: -100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-four .hero-shapes-2 { max-width: 140px; inset-inline-start: -75px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-section-four { padding-top: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-section-four { padding-top: 140px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-section-four { padding-top: 120px; } } .hero-wrapper-four { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 1; } .hero-wrapper-four .hero-shapes-1 { position: absolute; top: -100px; inset-inline-end: -44px; max-width: 589px; width: 100%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-wrapper-four .hero-shapes-1 { max-width: 500px; inset-inline-end: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-wrapper-four .hero-shapes-1 { max-width: 400px; inset-inline-end: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-wrapper-four .hero-shapes-1 { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-wrapper-four .hero-shapes-1 { display: none; } } .hero-wrapper-four .client-experience { max-width: 210px; width: 100%; background-color: var(--tj-color-common-white); padding: 23px 23px 18px; position: absolute; inset-inline-start: 0; bottom: 175px; -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.08); } .hero-wrapper-four .client-experience .images-thumb { margin-bottom: 9px; } .hero-wrapper-four .client-experience .images-thumb li.plus i { background-color: var(--tj-color-theme-primary); } .hero-wrapper-four .client-experience .sub-title { display: inline-block; line-height: 1.5; } .hero-wrapper-four .client-experience .sub-title span { font-weight: var(--tj-fw-bold); } @media (max-width: 575px) { .hero-wrapper-four .client-experience { bottom: 75px; } } .hero-content-four { position: relative; max-width: 600px; width: 100%; z-index: 2; padding-top: 130px; } .hero-content-four .hero-subtitle { background-color: var(--tj-color-common-white); font-size: 14px; font-weight: var(--tj-fw-bold); padding: 2px 5px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 20px; } .hero-content-four .hero-subtitle span { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); height: 20px; width: 20px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 5px; } .hero-content-four .hero-title { color: var(--tj-color-heading-primary); letter-spacing: -0.025em; line-height: 1.083; margin-bottom: 10px; } .hero-content-four .hero-title span { color: var(--tj-color-theme-primary); } @media (max-width: 575px) { .hero-content-four .hero-title { font-size: 40px; } } .hero-content-four .desc { max-width: 530px; width: 100%; color: var(--tj-color-text-body); font-size: 18px; line-height: 1.444; } .hero-content-four .desc p:last-child { margin-bottom: 0; } .hero-content-four .tj-primary-btn { margin-top: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-four { max-width: 550px; padding-top: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-four { max-width: 420px; padding-top: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-content-four { padding-top: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-content-four { padding-top: 20px; } } .hero-images-box-four { position: relative; max-width: 630px; width: 100%; z-index: 1; } .hero-images-box-four .hero-images { max-width: 531px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-images-box-four .hero-images { max-width: 450px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-images-box-four { max-width: 550px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-images-box-four { max-width: 460px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-images-box-four { margin-top: 50px; } } .hero-video-btn { max-width: 200px; position: absolute; top: 200px; inset-inline-end: -100px; } .hero-video-btn .video-btn { 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: 12px; padding: 16px 25px 16px 20px; background: var(--tj-color-common-white); border-radius: 50px; -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.08); } .hero-video-btn .video-btn .play-btn { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); width: 52px; height: 52px; border-radius: 50%; 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: 14px; position: relative; -webkit-animation: pulse-three 2s infinite; animation: pulse-three 2s infinite; z-index: 5; } .hero-video-btn .video-btn .play-btn i { line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .hero-video-btn .video-btn .play-btn { width: 40px; height: 40px; } } .hero-video-btn .video-btn .video-text { color: var(--tj-color-common-black); font-weight: var(--tj-fw-bold); font-size: 15px; line-height: 1.2; position: relative; } .hero-video-btn .video-btn .video-text::after { content: ""; position: absolute; bottom: 0px; inset-inline-end: 0; width: 100%; height: 1px; background-color: var(--tj-color-common-black); } .hero-video-btn .video-btn:hover .video-text::after { -webkit-animation: linehover 0.8s linear; animation: linehover 0.8s linear; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hero-video-btn .video-btn { gap: 10px; padding: 12px 20px 12px 18px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .hero-video-btn .video-btn { gap: 10px; padding: 12px 20px 12px 14px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .hero-video-btn { inset-inline-end: -45px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-video-btn { top: 170px; inset-inline-end: -35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-video-btn { top: 170px; inset-inline-end: -25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-video-btn { inset-inline-end: -25px; } } @media (max-width: 575px) { .hero-video-btn { inset-inline-end: 0px; top: 32%; } } @-webkit-keyframes pulse-three { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 117, 255, 0.6); box-shadow: 0 0 0 0 rgba(0, 117, 255, 0.6); } 100% { -webkit-box-shadow: 0 0 0 8px transparent; box-shadow: 0 0 0 8px transparent; } } @keyframes pulse-three { 0% { -webkit-box-shadow: 0 0 0 0 rgba(0, 117, 255, 0.6); box-shadow: 0 0 0 0 rgba(0, 117, 255, 0.6); } 100% { -webkit-box-shadow: 0 0 0 8px transparent; box-shadow: 0 0 0 8px transparent; } } @-webkit-keyframes linehover { 0% { width: 100%; } 50% { width: 0; inset-inline-end: 0; } 100% { width: 100%; inset-inline-start: 0; } } @keyframes linehover { 0% { width: 100%; } 50% { width: 0; inset-inline-end: 0; } 100% { width: 100%; inset-inline-start: 0; } } /* !END: Hero CSS */ /* START: Feature CSS */ .tj-feature-section-three { background-color: var(--tj-color-theme-dark); overflow: hidden; } .feature-style-5 { display: grid; grid-template-columns: repeat(4, 1fr); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .feature-style-5 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-style-5 { grid-template-columns: repeat(1, 1fr); } } .feature-item.style-5 { border: 0; -webkit-border-end: 1px solid var(--tj-color-border-1); border-inline-end: 1px solid var(--tj-color-border-1); -webkit-border-start: 1px solid var(--tj-color-border-1); border-inline-start: 1px solid var(--tj-color-border-1); padding: 60px 35px 55px 40px; background-color: transparent; position: relative; overflow: hidden; -webkit-margin-start: -1px; margin-inline-start: -1px; } .feature-item.style-5::after { content: ""; position: absolute; bottom: -150px; inset-inline-start: 50%; width: 272px; height: 124px; background-color: var(--tj-color-theme-primary); -webkit-filter: blur(16px); filter: blur(16px); border-radius: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .feature-item.style-5 .feature-icon { color: var(--tj-color-common-white); } .feature-item.style-5 .feature-content .title { color: var(--tj-color-common-white); margin-bottom: 20px; letter-spacing: -0.025em; } .feature-item.style-5 .feature-content .desc { color: var(--tj-color-common-white-2); line-height: 1.5; } .feature-item.style-5 .feature-content .desc p:last-child { margin-bottom: 0; } .feature-item.style-5:hover .feature-icon { -webkit-animation: wobble-horizontal-hover 1s ease-in-out 1; animation: wobble-horizontal-hover 1s ease-in-out 1; } .feature-item.style-5:hover::after { bottom: -90px; opacity: 1; visibility: visible; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-item.style-5:hover::after { bottom: -100px; } } @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) { .feature-item.style-5 { border-bottom: 1px solid var(--tj-color-border-1); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-item.style-5 { padding: 40px 30px 35px; } } /* !END: Feature CSS */ /* START: H5 Process CSS */ .h5-process-section { position: relative; text-align: end; padding-bottom: 120px; margin-top: 120px; z-index: 1; overflow: hidden; } .h5-process-section .h5-process-image { position: absolute; inset-inline-start: 0; top: 0; width: 57%; height: 100%; background-size: cover; background-position: left center; background-repeat: no-repeat; z-index: -1; } .h5-process-section .sec-heading { display: inline-block; max-width: 418px; width: 100%; text-align: start; margin-bottom: 60px; } .h5-process_wrap { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-column-gap: 27px; -moz-column-gap: 27px; column-gap: 27px; row-gap: 30px; padding: 40px; background-color: var(--tj-color-theme-bg); } .h5-process_item { max-width: 278px; width: 100%; text-align: start; position: relative; z-index: 1; } .h5-process_item .line { position: absolute; width: calc(100% - 70px); height: 16px; inset-inline-end: 0; top: 17px; z-index: 1; } .h5-process_item .line::before { content: ""; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; width: 100%; height: 4px; background-color: var(--tj-color-border-2); /* You can change this color dynamically */ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='214' height='4' viewBox='0 0 214 4' fill='none'%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 4 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 16 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 22 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 28 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 34 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 40 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 46 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 52 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 58 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 64 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 70 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 76 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 82 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 88 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 94 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 100 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 106 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 112 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 118 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 124 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 130 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 136 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 142 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 148 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 154 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 160 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 166 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 172 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 178 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 184 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 190 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 196 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 202 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 208 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 214 0)' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='214' height='4' viewBox='0 0 214 4' fill='none'%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 4 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 16 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 22 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 28 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 34 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 40 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 46 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 52 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 58 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 64 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 70 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 76 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 82 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 88 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 94 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 100 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 106 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 112 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 118 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 124 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 130 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 136 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 142 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 148 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 154 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 160 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 166 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 172 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 178 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 184 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 190 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 196 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 202 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 208 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 214 0)' fill='black'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: left center; mask-position: left center; z-index: -1; } .h5-process_item .line::after { content: ""; position: absolute; top: 0; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 16px; height: 16px; background-color: var(--tj-color-theme-dark); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 4 6)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 6)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 16 6)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 12)' fill='black'/%3E%3C/svg%3E"); mask-repeat: no-repeat; mask-size: cover; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 4 6)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 6)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 16 6)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 0)' fill='black'/%3E%3Crect width='4' height='4' rx='2' transform='matrix(-1 0 0 1 10 12)' fill='black'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; -webkit-mask-size: cover; z-index: 1; } .h5-process_item .step { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; background-color: var(--tj-color-theme-dark); width: 50px; height: 50px; border-radius: 50%; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 18px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-common-white); margin-bottom: 32px; -webkit-transition: 0.4s; transition: 0.4s; } .h5-process_item .title { letter-spacing: -0.025em; margin: 0; } .h5-process_item .desc { margin-top: 20px; line-height: 1.5; } .h5-process_item.active .line::after { background-color: var(--tj-color-theme-primary); } .h5-process_item.active .step { background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h5-process-section { margin-top: 0; padding-top: 100px; padding-bottom: 100px; text-align: start; } .h5-process-section .h5-process-image { width: 100%; } .h5-process-section .sec-heading { max-width: 560px; } .h5-process-section .sec-heading .sec-title { color: var(--tj-color-common-white); } .h5-process_wrap { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; padding: 40px 30px; } .h5-process_item { max-width: 275px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h5-process-section { margin-top: 0; padding-top: 80px; padding-bottom: 80px; text-align: start; } .h5-process-section .h5-process-image { width: 100%; } .h5-process-section .sec-heading { max-width: 560px; margin-bottom: 40px; } .h5-process-section .sec-heading .sec-title { color: var(--tj-color-common-white); } .h5-process_wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; padding: 40px 30px; } .h5-process_item { max-width: 350px; -webkit-padding-start: 70px; padding-inline-start: 70px; } .h5-process_item .step { position: absolute; inset-inline-start: 0; top: 0; margin: 0; } .h5-process_item .line { width: 16px; height: calc(100% - 60px); bottom: -10px; top: auto; inset-inline-start: 17px; inset-inline-end: auto; } .h5-process_item .line::before { width: 4px; height: 100%; top: 0; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-mask-image: url("../images/shapes/process-vertical.svg"); mask-image: url("../images/shapes/process-vertical.svg"); -webkit-mask-position: top center; mask-position: top center; } .h5-process_item .line::after { inset-inline-start: 0; top: 48%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-process-section { margin-top: 0; padding-top: 80px; padding-bottom: 80px; text-align: start; } .h5-process-section .h5-process-image { width: 100%; } .h5-process-section .sec-heading { max-width: 560px; margin-bottom: 40px; } .h5-process-section .sec-heading .sec-title { color: var(--tj-color-common-white); } .h5-process_wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; padding: 40px 30px; } .h5-process_item { max-width: 350px; -webkit-padding-start: 70px; padding-inline-start: 70px; } .h5-process_item .step { position: absolute; inset-inline-start: 0; top: 0; margin: 0; } .h5-process_item .line { width: 16px; height: calc(100% - 60px); bottom: -10px; top: auto; inset-inline-start: 17px; inset-inline-end: auto; } .h5-process_item .line::before { width: 4px; height: 100%; top: 0; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); -webkit-mask-image: url("../images/shapes/process-vertical.svg"); mask-image: url("../images/shapes/process-vertical.svg"); -webkit-mask-position: top center; mask-position: top center; } .h5-process_item .line::after { inset-inline-start: 0; top: 48%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } } @media (max-width: 575px) { .h5-process_wrap { padding: 30px 20px; } .h5-process_item .desc { margin-top: 15px; } } /* !END: H5 Process CSS */ /* START: About CSS */ .tj-about-section-five { overflow: hidden; } .about-wrapper-four { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; position: relative; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-wrapper-four { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 125px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-four { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; row-gap: 50px; } } .about-wrapper-four .about_images { position: absolute; bottom: -120px; inset-inline-end: -188px; max-width: 220px; width: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .about-wrapper-four .about_images { inset-inline-end: -40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-wrapper-four .about_images { max-width: 198px; inset-inline-end: -40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-wrapper-four .about_images { max-width: 180px; inset-inline-end: -25px; bottom: -100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-wrapper-four .about_images { max-width: 180px; inset-inline-end: -2px; bottom: auto; top: 373px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-four .about_images { display: none; } } .about-images-group-three { max-width: 610px; width: 100%; position: relative; z-index: 1; } .about-images-group-three::after { content: ""; position: absolute; width: 100%; height: 36%; bottom: 0; inset-inline-start: 0; background: -webkit-gradient(linear, left bottom, left top, color-stop(10%, rgb(5, 18, 41)), to(rgba(5, 18, 41, 0))); background: linear-gradient(0deg, rgb(5, 18, 41) 10%, rgba(5, 18, 41, 0) 100%); opacity: 1; z-index: 1; pointer-events: none; } .about-images-group-three .establish-text { font-size: 66px; color: var(--tj-color-common-white); position: absolute; bottom: 20px; inset-inline-start: 30px; z-index: 2; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; line-height: 1; } .about-images-group-three .establish-text span { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-images-group-three .establish-text { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-images-group-three .establish-text { font-size: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-images-group-three { max-width: 530px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-images-group-three { max-width: 450px; } } .about-circle { position: absolute; max-width: 216px; width: 100%; height: 188px; top: 50%; inset-inline-start: -1px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-mask-image: url(../images/shapes/h5-about-mask.svg); mask-image: url(../images/shapes/h5-about-mask.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background-color: var(--tj-color-common-white); -webkit-mask-position: center; mask-position: center; z-index: 1; } .about-circle .circle-wrap { position: absolute; width: 160px; height: 160px; top: 50%; inset-inline-end: 15px; background: linear-gradient(to right, #6db6ff, #0c34e9, #030a5b); border-radius: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .about-circle .circle-wrap .rotate-image { position: absolute; inset-inline-start: 50%; top: 50%; width: 135px; height: 136px; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-animation: rotateImg 10s infinite linear; animation: rotateImg 10s infinite linear; z-index: 9; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .about-circle .circle-wrap .rotate-image { width: 120px; height: 120px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-circle .circle-wrap .rotate-image { width: 100px; height: 100px; } } .about-circle .circle-wrap .logo-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: 40px; height: 40px; z-index: 5; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .about-circle .circle-wrap { width: 140px; height: 140px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-circle .circle-wrap { width: 120px; height: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .about-circle { width: 195px; height: 168px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-circle { width: 170px; height: 150px; } } .about-content-five { position: relative; max-width: 550px; width: 100%; z-index: 1; } .about-content-five .sec-heading { margin-bottom: 0; } .about-content-five .sec-heading .sec-title { letter-spacing: -0.025em; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-five .sec-heading .sec-title { font-size: 40px; } } .about-content-five .desc { line-height: 1.5; -webkit-margin-end: 20px; margin-inline-end: 20px; margin-top: 10px; } .about-content-five .desc p:last-child { margin-bottom: 0; } .about-content-five .about-button { margin-top: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-content-five { max-width: 465px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-content-five { max-width: 100%; } } .about-funfact { background-color: var(--tj-color-theme-bg); max-width: 520px; width: 100%; 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; margin-top: 25px; } .about-funfact .counter-item { max-width: 50%; padding: 24px 30px 33px; -webkit-border-end: 2px solid var(--tj-color-common-white); border-inline-end: 2px solid var(--tj-color-common-white); } .about-funfact .counter-item::before { inset-inline-end: -7px; } .about-funfact .counter-item::after { background-color: var(--tj-color-theme-bg); } .about-funfact .counter-item .sub-title { color: var(--tj-color-heading-primary); margin-top: 6px; } @media (max-width: 575px) { .about-funfact .counter-item { padding: 24px 20px 33px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-funfact { max-width: 516px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } } @media (max-width: 575px) { .about-funfact { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } /* !END: About CSS */ /* START: Home 5 Price CSS */ @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-price-section { overflow: hidden; } } .pricing-left-content .desc { max-width: 300px; } .tj-sticky-top { position: sticky; top: 120px; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-sticky-top { top: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-sticky-top { position: unset; } } .pricing-card { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); position: relative; overflow: hidden; padding: 20px; } .pricing-card:not(:last-child) { margin-bottom: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-card { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing-card { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding-bottom: 0; } } .pricing-card.active .pricing-badge { display: inline-block; } .pricing-card .pricing-badge { position: absolute; top: 0; inset-inline-end: 0; display: none; padding: 10px 11px 10px 35px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); line-height: 1; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%); } .pricing-card .pricing-left, .pricing-card .pricing-right { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-card .pricing-left, .pricing-card .pricing-right { padding: 30px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing-card .pricing-left, .pricing-card .pricing-right { padding: 30px 25px; } } .pricing-card .pricing-left { background-color: var(--tj-color-theme-bg); } .pricing-card .pricing-left .title { margin: 0; } .pricing-card .price { margin: 18px 0; font-size: var(--tj-fs-h1); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pricing-card .price { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing-card .price { font-size: 48px; } } .pricing-card .price .dollar { font-size: 18px; vertical-align: top; color: var(--tj-color-common-black-2); } .pricing-card .price .period { font-size: 20px; font-weight: normal; color: var(--tj-color-common-black-2); } .pricing-card .offer { margin-bottom: 25px; } .pricing-card .pricing-right { position: relative; } .pricing-card .pricing-right h4 { position: absolute; inset-inline-end: 22px; top: -20px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; font-size: 72px; color: var(--tj-color-theme-bg); letter-spacing: -2.5%; margin: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing-card .pricing-right h4 { inset-inline-end: 18px; top: -10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .pricing-card .pricing-right h4 { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing-card .pricing-right h4 { font-size: 48px; top: 30px; } } .pricing-card .pricing-right .features { list-style: none; -webkit-padding-start: 0; padding-inline-start: 0; margin-top: 0; } .pricing-card .pricing-right .features li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--tj-color-common-black-3); } .pricing-card .pricing-right .features li:not(:last-child) { margin-bottom: 12px; } .pricing-card .pricing-right .features li i { font-size: 18px; line-height: 1; -webkit-margin-end: 8px; margin-inline-end: 8px; } .pricing-card .pricing-right .features li.active { color: var(--tj-color-text-body); } .pricing-card .pricing-right .features li.active i { color: var(--tj-color-theme-primary); } /* START: Testimonial CSS */ .dark-bg { background-color: var(--tj-color-theme-dark); } .h5-testimonial-section { overflow: hidden; } .h5-testimonial-section .sec-heading .sub-title { background-color: rgba(247, 247, 247, 0.1); } .h5-testimonial-section .sec-heading .sec-title { color: var(--tj-color-common-white); } .h5-testimonial-item { padding: 40px 30px; background-color: rgba(247, 247, 247, 0.1); overflow: hidden; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-testimonial-item { padding: 35px 30px; } } @media (max-width: 575px) { .h5-testimonial-item { padding: 30px 20px; } } .h5-testimonial-item .author { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } @media (max-width: 575px) { .h5-testimonial-item .author { gap: 12px; } } .h5-testimonial-item .author-images { width: 117px; height: 136px; -webkit-mask-image: url(../images/shapes/h5-author-mask.svg); -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; mask-image: url(../images/shapes/h5-author-mask.svg); mask-size: contain; mask-repeat: no-repeat; mask-position: center; background-color: var(--tj-color-theme-dark); position: relative; z-index: 1; margin-top: -41px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-testimonial-item .author-images { margin-top: -35px; } } @media (max-width: 575px) { .h5-testimonial-item .author-images { width: 110px; height: 130px; } } .h5-testimonial-item .author-images img { width: 95px; height: 95px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; z-index: 2; position: absolute; top: 30px; inset-inline-start: 11px; } @media (max-width: 575px) { .h5-testimonial-item .author-images img { width: 85px; height: 85px; inset-inline-start: 13px; } } .h5-testimonial-item .author-rating { display: inline-block; background: var(--tj-color-theme-dark); padding: 2px 10px 4px; margin-bottom: 10px; border-radius: 32px; } .h5-testimonial-item .author-rating .star-ratings { color: var(--tj-color-theme-primary); -webkit-text-stroke: 1px var(--tj-color-theme-primary); } .h5-testimonial-item .author-rating .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); } .h5-testimonial-item .author-rating .star-ratings .empty-ratings { color: transparent; } .h5-testimonial-item .author-name { letter-spacing: -0.025em; margin-bottom: 4px; color: var(--tj-color-common-white); } @media (max-width: 575px) { .h5-testimonial-item .author-name { font-size: 18px; } } .h5-testimonial-item .author .sub-title { display: block; line-height: 1; color: var(--tj-color-common-white-2); } .h5-testimonial-item .desc { color: var(--tj-color-common-white-2); font-size: 20px; margin-top: 35px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .h5-testimonial-item .desc { margin-top: 25px; font-size: 18px; } } @media (max-width: 575px) { .h5-testimonial-item .desc { margin-top: 20px; font-size: 16px; } } .h5-testimonial-item .desc p { margin: 0; } .h5-testimonial-item .quote-icon { position: absolute; inset-inline-end: 30px; top: 40px; font-size: 70px; line-height: 1; color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px) { .h5-testimonial-item .quote-icon { top: 25px; } } @media (max-width: 575px) { .h5-testimonial-item .quote-icon { top: 25px; inset-inline-end: 15px; font-size: 52px; } } /* START: Home 5 Blog CSS */ .h5-blog-section { overflow: hidden; } .h5-blog-section .sec-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; } .h5-blog-section .sec-heading .desc { margin: 0; max-width: 300px; } .h5-blog-section .sec-heading .desc p { margin-bottom: 0; } .blog-style-3.style-5 { border: 1px solid var(--tj-color-border-2); } .blog-style-3.style-5 .blog-content { background-color: transparent; } .blog-btn-2 { font-weight: var(--tj-fw-bold); color: var(--tj-color-theme-dark); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; gap: 8px; overflow: hidden; position: relative; } .blog-btn-2 .btn-icon { width: 50px; height: 50px; border-radius: 50%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 22px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-dark); -webkit-transition: background-color 0.3s ease-in-out 0s; transition: background-color 0.3s ease-in-out 0s; } .blog-btn-2 .btn-text { -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); opacity: 0; visibility: hidden; white-space: nowrap; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .blog-btn-2:hover .btn-icon { background-color: var(--tj-color-theme-primary); } .blog-btn-2:hover .btn-text { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } /* END: Home 5 Blog CSS */ /* START: Home 5 CTA CSS */ .h5-cta-section { padding: 60px 0; background-color: var(--tj-color-theme-primary); position: relative; overflow: hidden; } .h5-cta-section .thumb { width: 100%; height: 100%; position: absolute; top: 0; inset-inline-start: 0; } .h5-cta-section .thumb img { width: 100%; height: 100%; opacity: 0.15; mix-blend-mode: luminosity; } .h5-cta-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-cta-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .h5-cta-wrapper .sec-title { color: var(--tj-color-common-white); margin-bottom: 0; max-width: 685px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h5-cta-wrapper .sec-title { max-width: 480px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-cta-wrapper .sec-title { max-width: 100%; text-align: center; } } .h5-cta-contact { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 15px; } .h5-cta-contact .tj-primary-btn .btn_inner .btn_icon { font-size: 20px; } @media (max-width: 450px) { .h5-cta-contact { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } /* START: Home 5 Footer CSS */ .h5-footer { background-color: var(--tj-color-theme-bg); border-top: 0; } .h5-footer .footer-top-area { z-index: 2; } .h5-footer .footer-top-area .line::before { background: var(--tj-color-border-2); } .h5-footer-shape { position: absolute; bottom: 0; inset-inline-start: -166px; max-width: 333px; width: 100%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .h5-footer-shape { max-width: 280px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h5-footer-shape { max-width: 250px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h5-footer-shape { max-width: 270px; } } @media (max-width: 575px) { .h5-footer-shape { display: none; } } .h5-footer-copyright { padding: 28px 0; background-color: var(--tj-color-theme-dark); } .h5-footer .footer-widget .title { color: var(--tj-color-heading-primary); } .h5-footer .footer-widget .desc { color: var(--tj-color-common-black-2); } .h5-footer .footer-widget .widget-menu ul li a { color: var(--tj-color-text-body); } .h5-footer .footer-widget .footer-social ul li a { color: var(--tj-color-common-white); background: rgba(5, 18, 41, 0.3); } .h5-footer .footer-widget .footer-social ul li a i { color: var(--tj-color-common-white); } .h5-footer .footer-widget .footer-social ul li a:hover { background: var(--tj-color-theme-primary); } @media (max-width: 575px) { .h5-footer .footer-widget .newsletter-title { max-width: 100%; } } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]), .h5-footer .footer-widget .newsletter-form .form-input input[type=email] { color: var(--tj-color-common-black-2); background: var(--tj-color-common-white); border: 1px solid var(--tj-color-common-white); } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):focus, .h5-footer .footer-widget .newsletter-form .form-input input[type=email]:focus { border: 1px solid var(--tj-color-theme-primary); } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .h5-footer .footer-widget .newsletter-form .form-input input[type=email]::-webkit-input-placeholder { color: var(--tj-color-common-black-2); } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .h5-footer .footer-widget .newsletter-form .form-input input[type=email]::-moz-placeholder { color: var(--tj-color-common-black-2); } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .h5-footer .footer-widget .newsletter-form .form-input input[type=email]:-ms-input-placeholder { color: var(--tj-color-common-black-2); } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .h5-footer .footer-widget .newsletter-form .form-input input[type=email]::-ms-input-placeholder { color: var(--tj-color-common-black-2); } .h5-footer .footer-widget .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .h5-footer .footer-widget .newsletter-form .form-input input[type=email]::placeholder { color: var(--tj-color-common-black-2); } .h5-footer .footer-widget .newsletter-form .form-input button::before { background: var(--tj-color-border-2); } @media (max-width: 575px) { .h5-footer .footer-newsletter-form { border-top: 1px solid var(--tj-color-border-2); } } /* START: H5 Team CSS */ .h5-team-section { padding-top: 120px; padding-bottom: 120px; overflow: hidden; } .h5-team-section .sec-heading { margin: 0; } .h5-team-section .sec-heading-wrap { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .h5-team-section .sec-heading-wrap .desc { max-width: 300px; width: 100%; } .h5-team-item { padding-bottom: 12px; } .h5-team-item-inner { width: 100%; border: 1px solid var(--tj-color-border-2); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; padding: 30px 20px 25px 20px; } .h5-team-item-inner .team_image { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 220px; height: 220px; border-radius: 50%; overflow: hidden; } .h5-team-item-inner .team_image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; -webkit-transition: 0.5s; transition: 0.5s; } .h5-team-item-inner .team-content { margin-top: 30px; text-align: center; } .h5-team-item-inner .team-content .title { margin: 0; letter-spacing: 0.02em; } .h5-team-item-inner .team-content .title a:hover { color: var(--tj-color-theme-primary); } .h5-team-item-inner .team-content .designation { display: inline-block; margin-top: 7px; color: var(--tj-color-common-black-2); } .h5-team-item-inner .team-socials { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; position: absolute; inset-inline-start: 50%; bottom: -12px; z-index: 2; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background-color: var(--tj-color-common-white); padding: 0 15px; } .h5-team-item-inner .team-socials li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .h5-team-item-inner .team-socials li 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; width: 24px; height: 24px; border-radius: 50%; background-color: rgba(5, 18, 41, 0.4); color: var(--tj-color-common-white); font-size: 14px; line-height: 1; } .h5-team-item-inner .team-socials li a i, .h5-team-item-inner .team-socials li a svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .h5-team-item-inner .team-socials li a:hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .h5-team-item:hover .h5-team-item-inner .team_image img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h5-team-section { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-team-section { padding-top: 80px; padding-bottom: 80px; } .h5-team-section .sec-heading-wrap { margin-bottom: 40px; } .h5-team-section .teams_btn { margin-top: 40px; } } @media (max-width: 575px) { .h5-team-section .sec-heading-wrap { row-gap: 15px; } } /* !END: H5 Team CSS */ /* START: Case Study CSS */ .h5-case-study-section { background-color: var(--tj-color-theme-bg); padding-top: 120px; padding-bottom: 120px; overflow: hidden; } .h5-case-study-section .sec-heading { max-width: 555px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } .h5-case-study-section .sec-heading .sub-title { background-color: var(--tj-color-common-white); } .h5-case-study-slider { overflow: inherit; } .h5-case-study-item-inner { min-height: 524px; background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 1; overflow: hidden; } .h5-case-study-item .case-study-content { background-color: var(--tj-color-common-white); padding: 30px 22px 30px 30px; max-width: 410px; width: 100%; position: absolute; inset-inline-end: 0; bottom: 0; z-index: 2; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: 0.4s; transition: 0.4s; } .h5-case-study-item .case-study-content .category { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 11px; margin-bottom: 15px; } .h5-case-study-item .case-study-content .category li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .h5-case-study-item .case-study-content .category li 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; border-radius: 40px; border: 1px solid var(--tj-color-border-2); color: var(--tj-color-text-body); font-size: 14px; line-height: 1; padding: 5px 9px; } .h5-case-study-item .case-study-content .category li a:hover { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .h5-case-study-item .case-study-content .case-study-text { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; } .h5-case-study-item .case-study-content .case-study-text .title { margin: 0; max-width: calc(100% - 84px); } .h5-case-study-item .case-study-content .case-study-text .title a:hover { color: var(--tj-color-theme-primary); } .h5-case-study-item .case-study-content .case-study-text .icon-btn { width: 64px; height: 64px; } .h5-case-study-item .case-study-content .case-study-text .icon-btn:hover { background-color: var(--tj-color-theme-primary); } .h5-case-study-item:hover .case-study-content { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h5-case-study-section { padding-top: 100px; padding-bottom: 100px; } .h5-case-study-item .case-study-content { padding: 30px 20px; max-width: 390px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-case-study-section { padding-top: 80px; padding-bottom: 80px; } .h5-case-study-section .sec-heading { margin-bottom: 40px; } .h5-case-study-item .case-study-content { padding: 30px 20px; max-width: 390px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-case-study-item .case-study-content { max-width: 350px; } .h5-case-study-item .case-study-content .case-study-text .title { max-width: calc(100% - 70px); } .h5-case-study-item .case-study-content .case-study-text .icon-btn { width: 50px; height: 50px; } } @media (max-width: 575px) { .h5-case-study-item-inner { min-height: 400px; } .h5-case-study-item .case-study-content { max-width: 320px; } } /* !END: Case Study CSS */ /* START: Project CSS */ .tj-service-section-four { background-color: var(--tj-color-theme-bg); overflow: hidden; } .tj-service-section-four .sec-heading { margin: 0; max-width: 500px; } .tj-service-section-four .sec-heading-wrap { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tj-service-section-four .sec-heading-wrap .desc { max-width: 300px; 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) { .tj-service-section-four .sec-heading-wrap { margin-bottom: 40px; } } .tj-service-section-four .sec-heading .sub-title { background-color: var(--tj-color-common-white); } .h5-service-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: var(--tj-color-common-white); padding: 40px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h5-service-wrap { background-color: transparent; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; row-gap: 24px; } } .service-style-5 { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 45px; width: 175px; height: 437px; place-content: center; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); } .service-style-5:last-child { border: 0; } .service-style-5 .service-icon { width: 80px; height: 80px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 25px; border-radius: 50%; position: relative; z-index: 2; text-align: center; } .service-style-5 .service-icon 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: 80px; height: 80px; font-size: 52px; line-height: 1; border-radius: 50%; color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-bg); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .service-icon span { width: 70px; height: 70px; font-size: 45px; } } @media (max-width: 390px) { .service-style-5 .service-icon span { width: 60px; height: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .service-icon { width: 70px; height: 70px; margin-bottom: 15px; } } @media (max-width: 390px) { .service-style-5 .service-icon { width: 60px; height: 60px; } } .service-style-5 .blog-btn-2 i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .service-style-5 .blog-btn-2:hover i { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .service-style-5 .h5-service-content { position: relative; overflow: hidden; width: 100%; } .service-style-5 .h5-service-content .h5-title-area { position: absolute; height: 247px; bottom: 70px; inset-inline-start: 13px; text-align: start; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } .service-style-5 .h5-service-content .h5-title-area .title { -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .h5-service-content .h5-title-area .title { -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .h5-service-content .h5-title-area { max-width: 245px; width: 100%; height: auto; inset-inline-start: 110px; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .h5-service-content .h5-title-area { inset-inline-start: 100px; } } @media (max-width: 390px) { .service-style-5 .h5-service-content .h5-title-area { max-width: 195px; inset-inline-start: 88px; } } .service-style-5 .h5-service-content .title { margin-bottom: 16px; } .service-style-5 .h5-service-content .title a { display: inline-block; } .service-style-5 .h5-service-content .title a:hover { color: var(--tj-color-theme-primary); } .service-style-5 .h5-service-content .blog-btn-2 { position: absolute; bottom: 0; inset-inline-start: 15px; } .service-style-5 .h5-service-content .blog-btn-2.mobile-show { visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-style-5 .h5-service-content .blog-btn-2 { inset-inline-start: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .h5-service-content .blog-btn-2 { inset-inline-start: 20px; bottom: 30px; } } @media (max-width: 575px) { .service-style-5 .h5-service-content .blog-btn-2 .btn-icon { width: 45px; height: 45px; } } .service-style-5 .h5-service-content-inner { position: relative; text-align: start; top: 0; inset-inline-start: 0; width: 330px; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-style-5 .h5-service-content-inner { width: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .h5-service-content-inner { width: calc(100% - 60px); padding-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 .h5-service-content { padding: 30px 20px; } } .service-style-5.active { place-content: unset; width: 420px; } .service-style-5.active .h5-service-content { opacity: 1; visibility: visible; } .service-style-5.active .h5-service-content-inner { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } .service-style-5.active .h5-title-area { opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .service-style-5.active .service-icon span { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .service-style-5.active .blog-btn-2 { visibility: visible; opacity: 1; inset-inline-start: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5.active .blog-btn-2 { inset-inline-start: 20px; } } .service-style-5.active .blog-btn-2.mobile-show { visibility: hidden; opacity: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-style-5.active { width: 390px; padding: 0 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-style-5.active { width: 360px; padding: 0 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5.active { width: 100%; height: auto; } } @media (max-width: 390px) { .service-style-5 { height: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-style-5 { width: 145px; padding: 0 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-style-5 { width: 115px; padding: 0 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-style-5 { padding: 0; -webkit-border-end: none; border-inline-end: none; background-color: var(--tj-color-common-white); place-content: unset; width: 100%; height: auto; } .service-style-5 .h5-service-content { opacity: 1; visibility: visible; } .service-style-5 .h5-service-content-inner { width: 100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } .service-style-5 .h5-title-area { opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .service-style-5 .service-icon span { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .service-style-5 .blog-btn-2 { visibility: visible; opacity: 1; inset-inline-start: 20px; } .service-style-5 .blog-btn-2.mobile-show { visibility: hidden; opacity: 0; } } .services-btn { margin-top: 40px; } /* !END: Project CSS */ /* START: Home 6 Blog CSS */ .h6-blog-section { position: relative; overflow: hidden; z-index: 2; } .h6-blog-shape { position: absolute; inset-inline-start: -90px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); max-width: 180px; width: 100%; z-index: -1; } .blog-style-2.style-6 { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-style-2.style-6 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .blog-style-2.style-6 .blog-images, .blog-style-2.style-6 .blog-content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .blog-style-2.style-6 .blog-images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .blog-style-2.style-6 .blog-images .blog-date { inset-inline-start: 15px; top: 15px; inset-inline-end: auto; bottom: auto; } .blog-style-2.style-6 .blog-content { padding: 30px; border: 0; } .blog-style-2.style-6 .blog-content .blog-button { margin-top: 25px; } /* END: Home 6 Blog CSS */ /* START: Home 6 CTA CSS */ .h6-cta-section { background-color: var(--tj-color-theme-dark); position: relative; overflow: hidden; } .h6-cta-shape { position: absolute; bottom: 0; inset-inline-end: 8%; width: 270px; height: 270px; } @media (min-width: 2350px) { .h6-cta-shape { inset-inline-end: 15%; } } @media (min-width: 2850px) { .h6-cta-shape { inset-inline-end: 20%; } } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .h6-cta-shape { inset-inline-end: 5%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .h6-cta-shape { inset-inline-end: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-cta-shape { inset-inline-end: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h6-cta-shape { width: 200px; height: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-cta-shape { width: 160px; height: 160px; } } .h6-cta-shape i { font-size: 270px; line-height: 1; color: var(--tj-color-common-white); opacity: 0.05; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-cta-shape i { font-size: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-cta-shape i { font-size: 160px; } } .h6-cta-shape::after { content: ""; position: absolute; bottom: -90px; inset-inline-end: 0; width: 100%; height: 124px; background-color: var(--tj-color-theme-primary); -webkit-filter: blur(16px); filter: blur(16px); border-radius: 50%; } .h6-cta-image { height: 553px; } @media (min-width: 2350px) { .h6-cta-image { height: 750px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-cta-image { height: 570px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-cta-image { height: 502px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h6-cta-image { height: 380px; } } @media (max-width: 575px) { .h6-cta-image { height: 320px; } } .h6-cta-image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .h6-cta-content { padding: 120px 15px 120px 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-cta-content { padding: 100px 15px 100px 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-cta-content { padding: 80px 15px 80px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-cta-content { padding: 80px 15px; padding-top: 65px; } } .h6-cta-content .sec-heading { max-width: 615px; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .h6-cta-content .sec-heading { max-width: 520px; margin: 0 auto; } } .h6-cta-content .sec-title { color: var(--tj-color-common-white); } .h6-cta-content .desc { max-width: 405px; color: var(--tj-color-text-body-2); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-cta-content .desc { max-width: 320px; } } .h6-cta-content .contact-button { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .h6-cta-content .call-btn-style-2 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h6-cta-content .call-btn-style-2 .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: 54px; height: 54px; border-radius: 50%; background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); font-size: 20px; line-height: 1; color: var(--tj-color-common-white); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .h6-cta-content .call-btn-style-2 .text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; color: var(--tj-color-common-white); font-weight: var(--tj-fw-bold); position: relative; } .h6-cta-content .call-btn-style-2 .text::before { content: ""; position: absolute; bottom: -2px; inset-inline-start: auto; inset-inline-end: 0; width: 0; height: 1px; background-color: var(--tj-color-common-white); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .h6-cta-content .call-btn-style-2:hover .icon { background-color: var(--tj-color-theme-primary); } .h6-cta-content .call-btn-style-2:hover .text::before { width: 100%; inset-inline-start: 0; inset-inline-end: auto; } /* END: Home 6 CTA CSS */ /* START: Home 6 Testimonial CSS */ .h6-testimonial-section { background-color: var(--tj-color-theme-bg); overflow: hidden; position: relative; z-index: 2; } .h6-testimonial-section .sec-heading .desc { margin-bottom: 0; max-width: 400px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h6-testimonial-section .sec-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; } .h6-testimonial-section .sec-text .swiper_navigations { width: 180px; } } .h6-testimonial-quote { display: inline-block; line-height: 1; font-size: 70px; color: var(--tj-color-theme-primary); } .h6-testimonial-slider { -webkit-margin-end: -460px; margin-inline-end: -460px; -webkit-margin-start: 30px; margin-inline-start: 30px; } @media only screen and (min-width: 1600px) and (max-width: 1799px) { .h6-testimonial-slider { -webkit-margin-end: -380px; margin-inline-end: -380px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .h6-testimonial-slider { -webkit-margin-end: -300px; margin-inline-end: -300px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-testimonial-slider { -webkit-margin-end: -110px; margin-inline-end: -110px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-testimonial-slider { -webkit-margin-end: -150px; margin-inline-end: -150px; -webkit-margin-start: 0; margin-inline-start: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-testimonial-slider { -webkit-margin-end: -160px; margin-inline-end: -160px; -webkit-margin-start: 0; margin-inline-start: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h6-testimonial-slider { -webkit-margin-end: -110px; margin-inline-end: -110px; -webkit-margin-start: 0; margin-inline-start: 0; } } @media (max-width: 575px) { .h6-testimonial-slider { -webkit-margin-end: -20px; margin-inline-end: -20px; -webkit-margin-start: 0; margin-inline-start: 0; } } @media (max-width: 449px) { .h6-testimonial-slider { -webkit-margin-end: 0; margin-inline-end: 0; } } .testimonial-item.style-6 { padding: 35px 30px 35px 30px; background-color: var(--tj-color-common-white); } @media (max-width: 575px) { .testimonial-item.style-6 { padding: 30px 20px; } } .testimonial-item.style-6 .tj-testimonial-author { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .testimonial-item.style-6 .author-images { -webkit-mask-image: url(../images/shapes/h6-test-shape.svg); mask-image: url(../images/shapes/h6-test-shape.svg); background: var(--tj-color-theme-bg); width: 90px; height: 110px; margin-bottom: -40px; } .testimonial-item.style-6 .author-images img { top: 12px; inset-inline-end: 8px; -webkit-transform: unset; -ms-transform: unset; transform: unset; width: 75px; height: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial-item.style-6 .author-text .author-name { font-size: 20px; } } .testimonial-item.style-6 .author-rating { background: var(--tj-color-theme-bg); display: inline-block; padding: 2px 10px 4px; border-radius: 32px; } .testimonial-item.style-6 .author-rating .star-ratings { color: var(--tj-color-theme-primary); -webkit-text-stroke: 1px var(--tj-color-theme-primary); } .testimonial-item.style-6 .author-rating .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); } .testimonial-item.style-6 .author-rating .star-ratings .empty-ratings { color: transparent; } .testimonial-item.style-6 .testimonial-content { -webkit-padding-start: 0; padding-inline-start: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .testimonial-item.style-6 .testimonial-content .desc { max-width: 100%; font-size: 18px; border-bottom-style: dashed; padding-bottom: 25px; } @media (max-width: 575px) { .testimonial-item.style-6 .testimonial-content .desc { font-size: 16px; } } .swiper_navigations.style-6 .navigation { color: var(--tj-color-heading-primary); border: 1px solid var(--tj-color-border-2); background: var(--tj-color-common-white); } .swiper_navigations.style-6 .navigation:hover { border-color: var(--tj-color-theme-primary); background: var(--tj-color-theme-primary); } /* START: Home 6 Testimonial CSS */ /* START: Home 6 Team CSS */ .h6-team-section { overflow: hidden; } .h6-team-section .sec-heading { max-width: 585px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 50px; } .h6-tabs { padding-bottom: 30px; display: block; } .h6-tabs .h6-tab { height: 200px; position: relative; cursor: pointer; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-tabs .h6-tab { height: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tabs .h6-tab { height: 160px; } } .h6-tabs .h6-tab-image { height: 100%; position: relative; overflow: hidden; } .h6-tabs .h6-tab-image::before { position: absolute; content: ""; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); opacity: 0.6; } .h6-tabs .h6-tab::after { position: absolute; content: ""; inset-inline-start: 50%; bottom: -50px; -webkit-transform: translateX(-50%) rotate(45deg); -ms-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg); width: 30px; height: 30px; background-color: var(--tj-color-theme-bg); z-index: -1; display: none; } .h6-tabs .h6-tab.active::after { display: block; } .h6-tabs .h6-tab.active .h6-tab-image::before { opacity: 0; } .h6-tabs .h6-tab img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; } .h6-tab-content { display: none; } .h6-tab-content.active { display: block; } .h6-tab-info { background-color: var(--tj-color-theme-bg); padding: 60px 30px 60px 60px; display: -webkit-box; display: -ms-flexbox; display: flex; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h6-tab-info { padding: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-info { padding: 30px 22px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h6-tab-info .tj-socials { margin-top: 30px; } .h6-tab-info .qr-image { margin-top: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-info .qr-image { margin-top: 10px; max-width: 90px; } } .h6-tab-left { width: 30%; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); -webkit-padding-end: 20px; padding-inline-end: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-tab-left { width: 33%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-left { width: 100%; -webkit-padding-end: 0; padding-inline-end: 0; padding-bottom: 30px; -webkit-border-end: 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-2); margin-bottom: 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-left-content { max-width: 175px; width: 100%; } } .h6-tab-left .title { margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-tab-left .title { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-left .title { font-size: 20px; } } .h6-tab-right { width: 70%; -webkit-padding-start: 80px; padding-inline-start: 80px; position: relative; overflow: hidden; 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 only screen and (min-width: 992px) and (max-width: 1199px) { .h6-tab-right { -webkit-padding-start: 50px; padding-inline-start: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-tab-right { width: 67%; -webkit-padding-start: 30px; padding-inline-start: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-right { width: 100%; -webkit-padding-start: 0; padding-inline-start: 0; } } .h6-tab-right .shape { position: absolute; inset-inline-end: 0; bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-tab-right .shape { max-width: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-tab-right .shape { display: none; } } .progress-style-2.style-6 { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .progress-style-2.style-6 { margin-top: 20px; } } @media (max-width: 575px) { .progress-style-2.style-6 .proggess-item .proggess-circle canvas { width: 130px !important; height: 130px !important; } } @media (max-width: 575px) { .progress-style-2.style-6 .proggess-item .proggess-circle input { -webkit-margin-start: -100px !important; margin-inline-start: -100px !important; } } /* END: Home 6 Team CSS */ /* START: H6 Services CSS */ .h6-services-section { background-color: var(--tj-color-theme-bg); overflow: hidden; } .h6-services-section .sec-heading { max-width: 555px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } .h6-services-section .sec-heading .sec-title { letter-spacing: -0.025em; } .h6-services-slider .swiper_pagination { margin-top: 60px; } .h6-services-item-inner { position: relative; z-index: 1; background-color: var(--tj-color-theme-bg); min-height: 460px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; background-blend-mode: luminosity; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; } .h6-services-item-inner::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: rgba(5, 18, 41, 0.6); z-index: -1; opacity: 1; -webkit-transition: 0.5s; transition: 0.5s; } .h6-services-item-inner .service_shape { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-primary); z-index: 1; -webkit-mask-image: url(../images/shapes/h6-service.svg); mask-image: url(../images/shapes/h6-service.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-position: center; mask-position: center; -webkit-transition: 0.4s; transition: 0.4s; -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); visibility: hidden; opacity: 0; } .h6-services-item-inner .service_icon { position: absolute; inset-inline-end: 15px; top: 35px; z-index: 2; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 80px; line-height: 1; color: rgba(247, 247, 247, 0.3); opacity: 0; -webkit-transform: scale(0.8); -ms-transform: scale(0.8); transform: scale(0.8); visibility: hidden; -webkit-transition: 0.3s; transition: 0.3s; } .h6-services-item-inner .service_icon i, .h6-services-item-inner .service_icon svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .h6-services-item-inner .service_content { max-width: 280px; width: 100%; position: relative; z-index: 1; padding: 35px 0 35px 30px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; width: 100%; height: auto; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; } .h6-services-item-inner .service_content .title { color: var(--tj-color-common-white); margin: 0; line-height: 1.3; letter-spacing: -0.025em; } .h6-services-item-inner .service_content .title a:hover { letter-spacing: 0; } .h6-services-item-inner .service_content .service_btn { margin-top: 0; color: var(--tj-color-common-white); } .h6-services-item-inner .service_content .service_btn .btn-icon { background-color: var(--tj-color-common-white); color: var(--tj-color-heading-primary); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: 0.4s; transition: 0.4s; } .h6-services-item-inner .service_content .service_btn .btn-icon i { color: var(--tj-color-heading-primary); } .h6-services-item:hover .h6-services-item-inner { background-blend-mode: normal; } .h6-services-item:hover .h6-services-item-inner::before { opacity: 0; } .h6-services-item:hover .h6-services-item-inner .service_shape { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1; } .h6-services-item:hover .h6-services-item-inner .service_icon { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; visibility: visible; } .h6-services-item:hover .h6-services-item-inner .service_content .service_btn .btn-icon { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-services-item-inner .service_icon { font-size: 70px; } .h6-services-item-inner .service_content { max-width: 265px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-services-item-inner { min-height: 420px; } .h6-services-item-inner .service_icon { font-size: 60px; inset-inline-end: 10px; } .h6-services-item-inner .service_content { max-width: 225px; } .h6-services-item-inner .service_content .title { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-services-section .sec-heading { margin-bottom: 40px; } .h6-services-slider .swiper_pagination { margin-top: 40px; } } /* END: H6 Services CSS */ /* START: H6 Insight CSS */ .h6-insight-section { overflow: hidden; } .h6-insight-section .sec-heading { margin-bottom: 18px; max-width: 553px; width: 100%; } .h6-insight_accordion { max-width: 553px; width: 100%; border: 1px solid var(--tj-color-border-2); } .h6-insight_accordion .accordion_item { text-align: start; } .h6-insight_accordion .accordion_item:not(:last-child) { border-bottom: 1px solid var(--tj-color-border-2); } .h6-insight_accordion .accordion_item .accordion_title { width: 100%; border: none; background-color: transparent; outline: none; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; padding: 28px 65px 20px 30px; text-align: start; position: relative; z-index: 1; } .h6-insight_accordion .accordion_item .accordion_title::before { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); inset-inline-end: 30px; content: "+"; font-family: "Font Awesome 6 Pro"; 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; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 34px; height: 34px; border: 1px solid var(--tj-color-border-2); font-size: 16px; line-height: 1; text-align: center; border-radius: 50%; color: var(--tj-color-heading-primary); background-color: transparent; -webkit-transition: 0.4s; transition: 0.4s; } .h6-insight_accordion .accordion_item .accordion_title:not(.collapsed)::before { content: "-"; } .h6-insight_accordion .accordion_item .accordion_title:not(.collapsed) .subtitle { color: var(--tj-color-theme-primary); } .h6-insight_accordion .accordion_item .accordion_title .subtitle { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 16px; line-height: 1; letter-spacing: -0.025em; color: #c0c6d1; margin-bottom: 10px; } .h6-insight_accordion .accordion_item .accordion_title .title { color: var(--tj-color-heading-primary); font-size: 20px; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-heading); margin: 0; letter-spacing: -0.025em; line-height: 28px; } @media (max-width: 575px) { .h6-insight_accordion .accordion_item .accordion_title .title { font-size: 17px; } } .h6-insight_accordion .accordion_item .accordion_desc .accordion-body { padding: 0 30px 25px 30px; } .h6-insight-chart { position: relative; z-index: 1; border: 1px solid var(--tj-color-border-2); padding: 40px 30px; margin-top: 8px; text-align: center; } .h6-insight-chart .chart_content { text-align: start; max-width: 240px; width: 100%; position: absolute; inset-inline-start: 30px; top: 30px; } .h6-insight-chart .chart_content .title { font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 20px; line-height: 1.3; letter-spacing: -0.025em; color: var(--tj-color-heading-primary); margin-bottom: 20px; } .h6-insight-chart .chart_content .counter { display: -webkit-box; display: -ms-flexbox; display: flex; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 45px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-heading-primary); -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h6-insight-chart .chart_content .counter span { font-family: inherit; } .h6-insight-chart .chart_content .counter .up { 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: end; -ms-flex-align: end; align-items: end; width: 34px; height: 34px; font-size: 19px; color: var(--tj-color-theme-primary); } .h6-insight-chart .chart_content .subtitle { display: -webkit-box; display: -ms-flexbox; display: flex; color: var(--tj-color-common-black-2); line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-insight-chart { padding: 62px 30px 40px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-insight-section .sec-heading { margin-bottom: 40px; } .h6-insight_accordion { margin-bottom: 40px; max-width: 100%; } } @media (max-width: 575px) { .h6-insight-chart { padding: 80px 30px 30px 30px; } .h6-insight-chart .chart_content { max-width: 195px; } .h6-insight-chart .chart_content .title { font-size: 16px; margin-bottom: 10px; } .h6-insight-chart .chart_content .counter { font-size: 30px; } .h6-insight-chart .chart_content .counter .up { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h6-insight-chart .chart_content .subtitle { margin-top: 5px; } } /* END: H6 Insight CSS */ /* START: Home 6 Footer CSS */ .h6-footer { border-top: 0; } .h6-footer-middle { padding: 60px 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-logo { text-align: center; } } .h6-footer-logo a img { max-width: 150px; } .h6-footer-menu ul { list-style: none; padding: 0; margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-menu ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .h6-footer-menu ul li { display: inline-block; padding: 0 30px; position: relative; line-height: 1; } .h6-footer-menu ul li:first-child { -webkit-padding-start: 0; padding-inline-start: 0; } .h6-footer-menu ul li:last-child { -webkit-padding-end: 0; padding-inline-end: 0; } .h6-footer-menu ul li:not(:first-child)::before { position: absolute; content: ""; top: 50%; inset-inline-start: 0; width: 1px; height: 12px; background-color: var(--tj-color-border-1); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .h6-footer-menu ul li a { color: var(--tj-color-common-white); font-weight: var(--tj-fw-bold); } .h6-footer-menu ul li a:hover { color: var(--tj-color-theme-primary); } .h6-footer-widget-top { padding-top: 70px; padding-bottom: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-widget-top { padding-bottom: 60px; text-align: center; } } .h6-footer-widget-title { font-size: 68px; color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-footer-widget-title { font-size: 58px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-footer-widget-title { font-size: 48px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-widget-title { font-size: 42px; } } .h6-footer-widget-title span { color: var(--tj-color-theme-primary); } .h6-footer-widget-btn { margin-top: 30px; } .h6-footer-widget .footer-contact-infos { display: grid; grid-template-columns: repeat(2, 1fr); position: relative; } .h6-footer-widget .footer-contact-infos::before, .h6-footer-widget .footer-contact-infos::after { position: absolute; content: ""; inset-inline-end: 0; top: 0; width: calc(100% + 4000px); height: 1px; background-color: var(--tj-color-border-1); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-widget .footer-contact-infos::before, .h6-footer-widget .footer-contact-infos::after { inset-inline-end: -100%; } } .h6-footer-widget .footer-contact-infos::after { top: auto; bottom: 0; } .h6-footer-widget .footer-contact-infos .infos-right, .h6-footer-widget .footer-contact-infos .infos-left { padding-top: 76px; padding-bottom: 80px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-widget .footer-contact-infos .infos-right, .h6-footer-widget .footer-contact-infos .infos-left { padding-top: 50px; padding-bottom: 50px; } } .h6-footer-widget .footer-contact-infos .infos-right { -webkit-padding-start: 70px; padding-inline-start: 70px; -webkit-border-start: 1px solid var(--tj-color-border-1); border-inline-start: 1px solid var(--tj-color-border-1); -webkit-margin-start: -25px; margin-inline-start: -25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-footer-widget .footer-contact-infos .infos-right { -webkit-margin-start: 0; margin-inline-start: 0; -webkit-padding-start: 20px; padding-inline-start: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-widget .footer-contact-infos .infos-right { -webkit-margin-start: 0; margin-inline-start: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h6-footer-widget .footer-contact-infos .infos-right { -webkit-padding-start: 50px; padding-inline-start: 50px; } } @media (max-width: 575px) { .h6-footer-widget .footer-contact-infos .infos-right { -webkit-padding-start: 20px; padding-inline-start: 20px; } } .h6-footer-widget .footer-contact-infos .infos-item { max-width: 230px; } .h6-footer-widget .footer-contact-infos .infos-item span { display: inline-block; font-size: 14px; color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); margin-bottom: 6px; } .h6-footer-widget .footer-contact-infos .infos-item p { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white-2); margin-bottom: 6px; } .h6-footer-widget .footer-contact-infos .infos-item a { font-size: 16px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white); position: relative; z-index: 1; } .h6-footer-widget .footer-contact-infos .infos-item a::before { position: absolute; content: ""; width: 100%; height: 1px; bottom: -2px; inset-inline-start: 0; -webkit-transform-origin: right; -ms-transform-origin: right; transform-origin: right; -webkit-transform: scaleX(0); -ms-transform: scaleX(0); transform: scaleX(0); background: var(--tj-color-common-white); -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; } .h6-footer-widget .footer-contact-infos .infos-item a:hover::before { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .h6-footer-widget .contact-form-one { padding: 80px 50px; max-width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-footer-widget .contact-form-one { padding: 80px 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer-widget .contact-form-one { padding: 50px 35px; } } .h6-footer-widget .contact-form-one .title { max-width: 300px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-footer-widget .contact-form-one .form-input { margin-bottom: 42px; } } .h6-footer-widget .contact-form-one textarea { height: 140px; } @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) { .h6-footer-widget .contact-form-one textarea { height: 130px; } } .h6-footer .backtop { inset-inline-end: 40px; bottom: 130px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h6-footer .backtop { inset-inline-end: 20px; bottom: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-footer .backtop { inset-inline-end: 20px; bottom: 50px; } } .tj-submit-btn { width: 100%; height: 56px; border-radius: 30px; padding: 0 30px; color: var(--tj-color-common-white); background: var(--tj-color-theme-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; } .tj-submit-btn span.btn-icon { overflow: hidden; position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-common-white); } .tj-submit-btn span.btn-icon i { color: var(--tj-color-common-white); } .tj-submit-btn span.btn-icon i:first-child, .tj-submit-btn span.btn-icon i:last-child { -webkit-transition: -webkit-transform 0.4s ease-in-out 0s; transition: -webkit-transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s; transition: transform 0.4s ease-in-out 0s, -webkit-transform 0.4s ease-in-out 0s; } .tj-submit-btn span.btn-icon i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-submit-btn .btn-text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; color: var(--tj-color-common-white); text-shadow: 0 23px 0 currentColor; font-weight: var(--tj-fw-bold); } .tj-submit-btn .btn-text > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); -webkit-transition: 0.5s; transition: 0.5s; } .tj-submit-btn:hover { background: var(--tj-color-common-white); } .tj-submit-btn:hover span.btn-icon { color: var(--tj-color-theme-dark); } .tj-submit-btn:hover span.btn-icon i { color: var(--tj-color-theme-dark); } .tj-submit-btn:hover span.btn-icon i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-submit-btn:hover span.btn-icon i:last-child { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } .tj-submit-btn:hover .btn-text { color: var(--tj-color-theme-dark); } .tj-submit-btn:hover .btn-text > span { -webkit-transform: translateY(-24px); -ms-transform: translateY(-24px); transform: translateY(-24px); } /* START: H6 Marquee CSS */ .h6-marquee-slider { background-color: var(--tj-color-theme-primary); padding: 30px 0 22px 0; } .h6-marquee-slider .marquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .h6-marquee-slider .marquee_item { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 55px; line-height: 1; letter-spacing: -0.03em; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-marquee-slider .marquee_item { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-marquee-slider .marquee_item { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h6-marquee-slider { padding: 30px 0 25px 0; } .h6-marquee-slider .marquee_item { font-size: 40px; } } @media (max-width: 575px) { .h6-marquee-slider { padding: 30px 0 25px 0; } .h6-marquee-slider .marquee_item { font-size: 35px; } } /* !END: H6 Marquee CSS */ /* START: H6 Projects CSS */ .h6-project-section { overflow: hidden; } .h6-project-wrap .pin-spacer:nth-child(even) .h6-project-item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-project-wrap .pin-spacer:nth-child(even) .h6-project-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } .h6-project-item { background-color: var(--tj-color-theme-dark); 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; position: relative; z-index: 2; } .h6-project-item:not(:last-child) { margin-bottom: 30px; } .h6-project-item:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } .h6-project-item .project_image { max-width: calc(50% - 0px); max-height: 550px; width: 100%; overflow: hidden; } .h6-project-item .project_image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .h6-project-item .project_content { max-width: calc(50% - 0px); width: 100%; padding: 30px; 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; } .h6-project-item .project_content_inner { max-width: 440px; width: 100%; } .h6-project-item .project_content_inner .no { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 88px; line-height: 1; letter-spacing: -0.025em; color: rgba(247, 247, 247, 0.1); margin-bottom: 10px; } .h6-project-item .project_content_inner .title { margin: 0; color: var(--tj-color-common-white); } .h6-project-item .project_content_inner .title a:hover { color: var(--tj-color-theme-primary); } .h6-project-item .project_content_inner .desc { color: var(--tj-color-common-white-2); margin-top: 15px; } .h6-project-item .project_content_inner .project_btn { background-color: var(--tj-color-theme-primary); margin-top: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-project-item .project_content_inner { max-width: 395px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-project-item .project_content_inner { max-width: 395px; } .h6-project-item .project_content_inner .no { font-size: 75px; margin-bottom: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-project-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .h6-project-item:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .h6-project-item .project_image { max-width: 100%; max-height: 420px; } .h6-project-item .project_content { max-width: 100%; min-height: 420px; padding: 35px 30px 40px; } .h6-project-item .project_content_inner { max-width: 100%; } .h6-project-item .project_content_inner .no { font-size: 75px; margin-bottom: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h6-project-item .project_image { max-height: 420px; } .h6-project-item .project_content_inner .no { font-size: 60px; margin-bottom: 20px; } } @media (max-width: 575px) { .h6-project-item .project_image { max-height: 420px; } .h6-project-item .project_content { padding: 30px 20px 40px; } .h6-project-item .project_content_inner .no { font-size: 50px; margin-bottom: 15px; } } /* !END: H6 Projects CSS */ /* START: Home 6 Header CSS */ .tj-header-area.header-6 { border-color: var(--tj-color-border-2); } .tj-header-area.header-6 .header-bottom { -webkit-padding-start: 18px; padding-inline-start: 18px; -webkit-padding-end: 18px; padding-inline-end: 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-6 .header-bottom { -webkit-padding-start: 0; padding-inline-start: 0; -webkit-padding-end: 0; padding-inline-end: 0; } } .tj-header-area.header-6 .mainmenu ul > li > a { color: var(--tj-color-heading-primary); } .tj-header-area.header-6 .mainmenu ul > li > a:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-6 .mainmenu ul > li.current-menu-ancestor > a, .tj-header-area.header-6 .mainmenu ul > li.current-menu-item > a, .tj-header-area.header-6 .mainmenu ul > li:hover > a { color: var(--tj-color-theme-primary); } .tj-header-area.header-6 .tj-primary-btn { padding: 5px; } .tj-header-area.header-6 .tj-primary-btn .btn_inner { padding: 12px 18px 12px 50px; } .tj-header-area.header-6 .tj-primary-btn .btn_inner::before { width: 40px; } .tj-header-area.header-6 .tj-primary-btn .btn_inner .btn_icon { min-width: 40px; font-size: 1.4em; } .tj-header-area.header-6 .tj-primary-btn:hover .btn_inner::before { width: 100%; } .tj-header-area.style-6 .header_search { color: var(--tj-color-heading-primary); } .tj-header-area.style-6 .header_search i { color: var(--tj-color-heading-primary); } .tj-header-area.style-6 .header_right_info { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .tj-header-area.style-6 .header_right_info > *:not(:last-child) { -webkit-padding-end: 13px; padding-inline-end: 13px; -webkit-margin-end: 12px; margin-inline-end: 12px; position: relative; } .tj-header-area.style-6 .header_right_info > *:first-child::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 16px; width: 1px; background-color: var(--tj-color-border-2); } .tj-header-area.style-6.header-duplicate .header_search { color: var(--tj-color-common-white); } .tj-header-area.style-6.header-duplicate .header_search i { color: var(--tj-color-common-white); } .tj-header-area.style-6.header-duplicate .header_right_info > *:first-child::after { background-color: var(--tj-color-border-1); } /* END: Home 6 Header CSS */ /* START: Hero CSS */ .h6-hero-section { position: relative; z-index: 1; overflow: hidden; /* padding-top: 188px; */ } .h6-hero-section .hero-shapes-2, .h6-hero-section .hero-shapes-1 { position: absolute; top: 220px; inset-inline-start: -90px; z-index: -1; max-width: 220px; width: 100%; } .h6-hero-section .hero-shapes-2 img, .h6-hero-section .hero-shapes-1 img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h6-hero-section .hero-shapes-2, .h6-hero-section .hero-shapes-1 { max-width: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-hero-section .hero-shapes-2, .h6-hero-section .hero-shapes-1 { max-width: 140px; } } .h6-hero-section .hero-shapes-2 { inset-inline-start: inherit; inset-inline-end: -100px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-hero-section .hero-shapes-2 { inset-inline-end: -80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-hero-section { /* padding-top: 140px; */ } } .h6-hero-content { max-width: 880px; margin: 0 auto; text-align: center; } .h6-hero-content .sub-title { background-color: var(--tj-color-theme-bg); color: var(--tj-color-text-body); font-size: 14px; line-height: 1; padding: 3px 8px; border-radius: 30px; margin-bottom: 18px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; vertical-align: sub; } .h6-hero-content .sub-title i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-theme-primary); font-size: 20px; line-height: 1; } .h6-hero-content .hero-title { line-height: 1.083; margin-bottom: 10px; letter-spacing: -0.025em; } .h6-hero-content .hero-title span { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-hero-content .hero-title { font-size: 40px; } } .h6-hero-content .desc { max-width: 530px; font-size: 18px; line-height: 1.444; margin: 0 auto; } .h6-hero-content .desc p:last-child { margin: 0; } .h6-hero-content .hero-btn-area { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 20px; margin-top: 24px; } @media (max-width: 390px) { .h6-hero-content .hero-btn-area { gap: 10px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-hero-content { max-width: 700px; } } .h6-hero-slider { margin: 0 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-hero-slider { margin: 0 20px; } } .h6-slider-area { position: relative; overflow: hidden; margin: 80px 0 80px 0; } .h6-slider-area::before { content: ""; position: absolute; top: -2px; inset-inline-start: 0; width: 100%; height: 48px; background-color: var(--tj-color-common-white); -webkit-mask-image: url(../img/h6-slider-curve-1.svg); mask-image: url(../img/h6-slider-curve-1.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center top; mask-position: center top; -webkit-mask-size: cover; mask-size: cover; z-index: 2; } @media (min-width: 1921px) and (max-width: 2500px) { .h6-slider-area::before { height: 60px; } } @media (min-width: 2501px) and (max-width: 3200px) { .h6-slider-area::before { height: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-slider-area::before { height: 38px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-slider-area::before { height: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-slider-area::before { height: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-slider-area::before { height: 20px; } } .h6-slider-area::after { content: ""; position: absolute; bottom: -1px; inset-inline-start: 0; width: 100%; height: 48px; background-color: var(--tj-color-common-white); -webkit-mask-image: url(../img/h6-slider-curve-2.svg); mask-image: url(../img/h6-slider-curve-2.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center bottom; mask-position: center bottom; -webkit-mask-size: cover; mask-size: cover; z-index: 2; } @media (min-width: 1921px) and (max-width: 2500px) { .h6-slider-area::after { height: 60px; } } @media (min-width: 2501px) and (max-width: 3200px) { .h6-slider-area::after { height: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-slider-area::after { height: 38px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-slider-area::after { height: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-slider-area::after { height: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-slider-area::after { height: 20px; } } .h6-slider-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .h6-slider-item { width: auto; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h6-slider-item .slider-img { max-width: 442px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-slider-item .slider-img { max-width: 360px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-slider-item .slider-img { max-width: 320px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h6-slider-item .slider-img { max-width: 280px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-slider-item .slider-img { max-width: 200px; } } /* !END: Hero CSS */ /* START: About CSS */ .h6-about-section { overflow: hidden; } .h6-about-video { position: relative; height: 100%; } .h6-about-video .about-shape-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; max-width: 305px; width: 100%; height: 348px; position: absolute; bottom: -121px; inset-inline-start: 0; -webkit-mask-image: url(../images/shapes/h6-about-video-shape.svg); mask-image: url(../images/shapes/h6-about-video-shape.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--tj-color-theme-bg); -webkit-mask-position: center; mask-position: center; } .h6-about-video .about-shape-1 .video-inner { position: relative; overflow: hidden; max-width: 244px; width: 100%; border-radius: 50%; margin-bottom: 45px; } .h6-about-video .about-shape-1 .video-inner::before { content: ""; background-color: var(--tj-color-theme-dark); position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; opacity: 0.3; } .h6-about-video .about-shape-1 .video-inner img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .h6-about-video .about-shape-1 .video-inner .video-btn { background-color: var(--tj-color-common-white); color: var(--tj-color-theme-dark); width: 52px; height: 52px; border-radius: 50%; 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: 14px; -webkit-animation: pulse 2s infinite; animation: pulse 2s infinite; position: absolute; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } .h6-about-video .about-shape-1 .video-inner .video-btn i { line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-margin-start: 2px; margin-inline-start: 2px; } .h6-about-video .about-shape-1 .video-inner .video-btn:hover { -webkit-transform: translate(-50%, -50%) scale(1.1); -ms-transform: translate(-50%, -50%) scale(1.1); transform: translate(-50%, -50%) scale(1.1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-about-video .about-shape-1 .video-inner { max-width: 200px; margin-bottom: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-about-video .about-shape-1 { max-width: 250px; height: 288px; bottom: -102px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-about-video .about-shape-1 { position: relative; max-width: 250px; height: 288px; bottom: -82px; margin: 0 auto; } } .h6-about-content { position: relative; } .h6-about-content .shape { position: absolute; max-width: 220px; width: 100%; top: 80px; inset-inline-end: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h6-about-content .shape { max-width: 160px; top: inherit; bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-about-content .shape { max-width: 130px; top: inherit; bottom: 10px; } } .h6-about-content .sec-heading { max-width: 870px; width: 100%; } .h6-about-content .sec-title { letter-spacing: -0.025em; } .h6-about-content .about-btn-area { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .h6-about-content .images-thumb { margin-bottom: 0; } .h6-about-content .images-thumb li.plus i { background-color: var(--tj-color-theme-primary); } .h6-about-funfact { max-width: 645px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; margin-top: -35px; } .h6-about-funfact-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 1px solid var(--tj-color-border-2); overflow: hidden; } .h6-about-funfact-item:not(:first-child) { border-top: 0; } .h6-about-funfact-item .counter-item { max-width: 257px; padding: 28px 30px 40px 30px; -webkit-border-end: 0; border-inline-end: 0; } @media (max-width: 575px) { .h6-about-funfact-item .counter-item { max-width: 160px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 20px 15px 30px 15px; } } .h6-about-funfact-item .desc { position: relative; padding: 30px; } .h6-about-funfact-item .desc::before { content: ""; background-color: var(--tj-color-border-2); position: absolute; width: 1px; height: calc(100% + 100px); top: -50px; inset-inline-start: 0; z-index: -1; } .h6-about-funfact-item .desc p:last-child { margin-bottom: 0; } @media (max-width: 575px) { .h6-about-funfact-item .desc { padding: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-about-funfact { max-width: 100%; margin-top: 50px; } } .tj-text-invert > div { background-size: 200% 100%; background-position-x: 100%; color: transparent; background-clip: text; -webkit-background-clip: text; background-image: -webkit-gradient(linear, left top, right top, color-stop(50%, var(--tj-color-theme-dark)), color-stop(50%, var(--tj-color-common-white-2))); background-image: linear-gradient(to right, var(--tj-color-theme-dark) 50%, var(--tj-color-common-white-2) 50%); } /* !END: About CSS */ /* START: Header CSS */ .tj-header-area.header-7 .container-fluid:not(.gap-60-25) { --bs-gutter-x: 0; } .tj-header-area.header-7 .container-fluid:not(.gap-60-25) > .row { --bs-gutter-x: 0; } .tj-header-area.header-7.sticky .container-fluid { --bs-gutter-x: 30px; } .tj-header-area.header-7.sticky .container-fluid > .row { --bs-gutter-x: 30px; } .tj-header-area.header-7.header-absolute .header-wrapper { padding: 0px 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-7.header-absolute .header-wrapper { padding: 17px 15px; } } .tj-header-area.header-7 .mainmenu > ul > li > a { color: var(--tj-color-common-white); } .tj-header-area.header-7 .mainmenu > ul > li:hover > a, .tj-header-area.header-7 .mainmenu > ul > li.current-menu-ancestor > a { color: var(--tj-color-theme-primary); } .tj-header-area.header-7 .header-bottom { padding: 0; } .tj-header-area.header-7 .header_right_info { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } .tj-header-area.header-7 .header_right_info > :not(:last-child) { -webkit-padding-end: 0; padding-inline-end: 0; -webkit-margin-end: 0; margin-inline-end: 0; } .tj-header-area.header-7 .header_right_info > :not(:last-child)::after { display: none; } .tj-header-area.header-7 .header_btn.tj-primary-btn { background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); -webkit-padding-end: 4.5px; padding-inline-end: 4.5px; -webkit-margin-end: 0; margin-inline-end: 0; } .tj-header-area.header-7 .header_btn.tj-primary-btn .btn_text { color: var(--tj-color-common-white); } .tj-header-area.header-7 .header_search .icon { height: 48px; width: 48px; } .tj-header-area.header-7 .header_search i { font-size: 17px; } .tj-header-area.header-7 .tj-demo-button .header_btn.tj-primary-btn { background-color: var(--tj-color-common-white); } .tj-header-area.header-7 .tj-demo-button .header_btn.tj-primary-btn .btn_text { color: var(--tj-color-heading-primary); text-shadow: 0 23px 0 var(--tj-color-common-white); } .tj-header-area .menu_btn .line { width: 50px; height: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 8px; border-radius: var(--tj-br-md); } .tj-header-area .menu_btn .line span { width: 100%; height: 1px; background-color: var(--tj-color-common-white); -ms-flex-negative: 0; flex-shrink: 0; } .tj-header-area .menu_btn .line span:nth-child(2) { width: 50%; } .tj-header-area .menu_btn .line:hover span:nth-child(2) { width: 100%; } /* !END: Header CSS */ /* START: Footer CSS */ .h7-footer { position: relative; background: var(--tj-color-theme-dark); border-top: 0; z-index: 1; overflow: hidden; } .h7-footer-overlay { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background: url("../images/footer/h7-footer-bg.webp") no-repeat center; background-size: cover; z-index: -1; } .h7-footer-shape { position: relative; top: -1px; background-color: var(--tj-color-common-white); width: 101%; aspect-ratio: 1920/166; -webkit-mask-image: url("../images/icons/hero-bottom-shape.svg"); mask-image: url("../images/icons/hero-bottom-shape.svg"); -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); z-index: 1; } .h7-footer-shape::after { content: ""; position: absolute; inset-inline-start: -1px; top: 0; height: 100%; width: 99%; background-color: var(--tj-color-theme-primary); -webkit-mask-image: url("../images/icons/hero-bottom-shape-2.svg"); mask-image: url("../images/icons/hero-bottom-shape-2.svg"); -webkit-mask-position: top left; mask-position: top left; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; z-index: 1; } .h7-footer-contact-infos.footer-contact-infos { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; border: 1px solid var(--tj-color-border-1); -webkit-border-start: 0; border-inline-start: 0; -webkit-border-end: 0; border-inline-end: 0; margin-top: 47px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-footer-contact-infos.footer-contact-infos { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-footer-contact-infos.footer-contact-infos { border-bottom: 1px solid var(--tj-color-border-1); width: 100%; gap: 0 20px; } } @media (max-width: 575px) { .h7-footer-contact-infos.footer-contact-infos { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0; } } .h7-footer-contact-infos.footer-contact-infos::before, .h7-footer-contact-infos.footer-contact-infos::after { display: none; } .h7-footer .h7-infos-single { display: -webkit-box; display: -ms-flexbox; display: flex; -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; padding-top: 21px; padding-bottom: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-footer .h7-infos-single { padding-top: 20px; padding-bottom: 20px; } } .h7-footer .h7-infos-single-divider .line { width: 1px; height: 100%; background-color: var(--tj-color-border-1); } @media (max-width: 575px) { .h7-footer .h7-infos-single-divider .line { width: 100%; height: 1px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-footer .h7-infos-single-common:nth-child(2) { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-footer .h7-infos-single-action { border-bottom: 1px solid var(--tj-color-border-1); width: 100%; } } .h7-footer .h7-infos-single-action .infos-item { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 331px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-footer .h7-infos-single-action .infos-item { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .h7-footer .h7-infos-single-action .infos-item-left { -ms-flex-negative: 0; flex-shrink: 0; } .h7-footer .h7-infos-single-action p { font-family: var(--tj-ff-heading); margin-bottom: 10px; } .h7-footer .h7-infos-single-action .info-title { font-size: 32px; margin-bottom: 0; color: var(--tj-color-common-white); } .h7-footer .h7-infos-single-action .info-call { -ms-flex-negative: 0; flex-shrink: 0; width: 64px; height: 64px; background-color: var(--tj-color-theme-primary); border-radius: 100%; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .h7-footer .h7-infos-single-action .info-call::before { display: none; } .h7-footer .h7-infos-single-action .info-call i { font-size: 22px; } .h7-footer .h7-infos-single-action .info-call:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .h7-footer .h7-infos-single.infos-right, .h7-footer .h7-infos-single.infos-left { -webkit-padding-start: 0; padding-inline-start: 0; -webkit-border-start: 0; border-inline-start: 0; padding-top: 21px; padding-bottom: 25px; } .h7-footer .footer-widget .h7-footer-social { margin-top: 30px; } .h7-footer-widget-2.footer-widget { -webkit-padding-start: 90px; padding-inline-start: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-footer-widget-2.footer-widget { -webkit-padding-start: 22px; padding-inline-start: 22px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-footer-widget-2.footer-widget { -webkit-padding-start: 66px; padding-inline-start: 66px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-footer-widget-2.footer-widget { -webkit-padding-start: 30px; padding-inline-start: 30px; } } @media (max-width: 575px) { .h7-footer-widget-2.footer-widget { -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-footer-widget-3.footer-widget { -webkit-padding-start: 50px; padding-inline-start: 50px; } } .h7-footer-newsletter-form.footer-widget { -webkit-padding-start: 66px; padding-inline-start: 66px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-footer-newsletter-form.footer-widget { -webkit-padding-start: 14px; padding-inline-start: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-footer-newsletter-form.footer-widget { -webkit-padding-start: 30px; padding-inline-start: 30px; } } @media (max-width: 575px) { .h7-footer-newsletter-form.footer-widget { -webkit-padding-start: 0; padding-inline-start: 0; } } .h7-footer-newsletter-form .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]), .h7-footer-newsletter-form .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email] { border-color: transparent; border-radius: 70px; } .h7-footer-newsletter-form .newsletter-form .form-input button { inset-inline-end: 22px; } .h7-footer-newsletter-form .newsletter-form .form-input button::before { background-color: rgba(247, 247, 247, 0.1); } .h7-footer-copyright { background-color: var(--tj-color-theme-primary); padding: 17px 0; } .h7-footer-copyright .copyright-text p { color: rgb(247, 247, 247); } .h7-footer-copyright .copyright-text p a:hover { color: rgb(247, 247, 247); } .h7-footer-copyright .copyright-menu ul li::before { background-color: rgb(247, 247, 247); } .h7-footer-copyright .copyright-menu ul li a { color: rgb(247, 247, 247); } .h7-footer .h7-back-to-top-wrapper { bottom: 120px; inset-inline-end: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-footer .h7-back-to-top-wrapper { inset-inline-end: 35px; } } @media (max-width: 575px) { .h7-footer .h7-back-to-top-wrapper { bottom: 23px; inset-inline-end: 15px; } } .h7-footer .back-to-top-btn { border-color: var(--tj-color-border-1); } /* !END: Footer CSS */ /* START: Hero CSS */ .h7-hero-slider { position: relative; overflow: hidden; } .h7-hero-slider .swiper-slide { height: auto; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .h7-hero-slider .tj-slider-section { width: 100%; } .h7-hero-slider .tj-slider-section::before { width: 100%; background-color: var(--tj-color-theme-dark); opacity: 0.55; } .h7-hero-slider .tj-slider-section .slider-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; } .h7-hero-slider .tj-slider-section .slider-content { max-width: 750px; } .h7-hero-slider .tj-slider-section .slider-content .sub-title { color: var(--tj-color-common-white); font-size: 14px; letter-spacing: 0.12em; padding: 4px 12px; margin-bottom: 18px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .h7-hero-slider .tj-slider-section .slider-content .slider-title { line-height: 1.0833; margin-bottom: 15px; } @media (max-width: 575px) { .h7-hero-slider .tj-slider-section .slider-content .slider-title { font-size: 39px; } } .h7-hero-slider .tj-slider-section .slider-content .desc { color: var(--tj-color-common-white-2); font-size: 18px; max-width: 530px; margin: 0 auto; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); -webkit-transition: all 1s; transition: all 1s; -webkit-transition-delay: 1.8s; transition-delay: 1.8s; opacity: 0; } .h7-hero-slider .tj-slider-section .slider-content .desc p { margin-bottom: 0; } .h7-hero-slider .tj-slider-section .slider-content .hero-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px 20px; margin-top: 30px; } .h7-hero-slider .tj-slider-section .slider-content .slider-button { margin-top: 0; -webkit-transition-delay: 2.2s; transition-delay: 2.2s; } .h7-hero-slider .tj-slider-section .slider-content .slider-button:last-child { background: transparent; -webkit-transition-delay: 2.5s; transition-delay: 2.5s; } .h7-hero-slider .tj-slider-section .slider-content .call-btn-style-2 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h7-hero-slider .tj-slider-section .slider-content .call-btn-style-2 .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: 54px; height: 54px; border-radius: 50%; background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); font-size: 20px; line-height: 1; color: var(--tj-color-common-white); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .h7-hero-slider .tj-slider-section .slider-content .call-btn-style-2 .text { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; color: var(--tj-color-common-white); font-weight: var(--tj-fw-bold); position: relative; } .h7-hero-slider .tj-slider-section .slider-content .call-btn-style-2 .text::before { content: ""; position: absolute; bottom: -2px; inset-inline-start: auto; inset-inline-end: 0; width: 0; height: 1px; background-color: var(--tj-color-common-white); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .h7-hero-slider .tj-slider-section .slider-content .call-btn-style-2:hover .icon { background-color: var(--tj-color-theme-primary); } .h7-hero-slider .tj-slider-section .slider-content .call-btn-style-2:hover .text::before { width: 100%; inset-inline-start: 0; inset-inline-end: auto; } .h7-hero-slider.tj-hero-slider.style-1 .tj-navigation { position: static; } .h7-hero-slider.tj-hero-slider.style-1 .tj-btn { position: absolute; inset-inline-start: 50px; top: 50%; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); z-index: 10; 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; font-weight: bold; color: var(--tj-color-common-white); opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; visibility: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-hero-slider.tj-hero-slider.style-1 .tj-btn { width: 48px; height: 48px; font-size: 14px; inset-inline-start: 15px; } } .h7-hero-slider.tj-hero-slider.style-1 .tj-btn-next { inset-inline-start: auto; inset-inline-end: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-hero-slider.tj-hero-slider.style-1 .tj-btn-next { inset-inline-end: 15px; } } .h7-hero-slider.tj-hero-slider.style-1 .tj-btn svg { position: absolute; inset-inline-start: 0; top: 0px; z-index: 10; width: 100%; height: 100%; stroke-width: 1px; stroke: var(--tj-color-common-white); fill: none; stroke-dashoffset: 125.6px; stroke-dasharray: 125.6; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-transition: all 0.6s; transition: all 0.6s; } .h7-hero-slider.tj-hero-slider.style-1 .tj-btn svg:first-child { stroke-dashoffset: 0px; stroke: rgba(206, 215, 224, 0.2); } .h7-hero-slider.tj-hero-slider.style-1 .tj-btn:hover svg { stroke-dashoffset: 0px; } .h7-hero-slider.tj-hero-slider:hover.style-1 .tj-btn { inset-inline-start: 30px; opacity: 1; visibility: visible; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-hero-slider.tj-hero-slider:hover.style-1 .tj-btn { inset-inline-start: 15px; } } .h7-hero-slider.tj-hero-slider:hover.style-1 .tj-btn-next { inset-inline-start: auto; inset-inline-end: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-hero-slider.tj-hero-slider:hover.style-1 .tj-btn-next { inset-inline-end: 15px; } } .h7-hero-slider .swiper-slide-active .slider-content .desc { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); opacity: 1; } .h7-hero-slider .tj-hero-shape { position: absolute; inset-inline-start: 0; bottom: -1px; background-color: var(--tj-color-common-white); width: 101%; aspect-ratio: 1920/166; -webkit-mask-image: url("../images/icons/hero-bottom-shape.svg"); mask-image: url("../images/icons/hero-bottom-shape.svg"); -webkit-mask-position: top center; mask-position: top center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-hero-slider .tj-hero-shape { inset-inline-start: -1px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-hero-slider .tj-hero-shape { inset-inline-start: -4px; width: 102%; } } .h7-hero-slider .tj-hero-shape::after { content: ""; position: absolute; inset-inline-start: -1px; bottom: 0; height: 100%; width: 99%; background-color: var(--tj-color-theme-primary); -webkit-mask-image: url("../images/icons/hero-bottom-shape-2.svg"); mask-image: url("../images/icons/hero-bottom-shape-2.svg"); -webkit-mask-position: top left; mask-position: top left; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; z-index: 1; } .sec-heading.h7-section-heading .sub-title { -webkit-padding-start: 9px; padding-inline-start: 9px; } .sec-heading.h7-section-heading .sub-title::before, .sec-heading.h7-section-heading .sub-title::after { display: none; } /* !END: Hero CSS */ /* START: Feature CSS */ .h7-feature-section .container { --bs-gutter-x: 30px; } .h7-feature-section .container .row { --bs-gutter-x: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-feature-section .container .row { --bs-gutter-x: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-feature-section .container .rg-30 { row-gap: 20px; } } .h7-feature-section .feature-item.style-4 { padding: 30px 30px 30px 25px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 15px; background-color: var(--tj-color-theme-bg); border: 0; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-feature-section .feature-item.style-4 { -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 20px; } } .h7-feature-section .feature-item.style-4::before { display: none; } .h7-feature-section .feature-item.style-4 .feature-icon { margin: 0; max-width: 98px; width: 100%; height: 112px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-mask-image: url(../images/shapes/h7-feature-icon-bg.svg); mask-image: url(../images/shapes/h7-feature-icon-bg.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-common-white); position: relative; 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; z-index: 1; margin-top: -30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-feature-section .feature-item.style-4 .feature-icon { margin-bottom: 10px; margin-top: -20px; max-width: 80px; height: 91px; } } .h7-feature-section .feature-item.style-4 .feature-icon svg, .h7-feature-section .feature-item.style-4 .feature-icon img { width: 62px; margin-top: 13px; } @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) { .h7-feature-section .feature-item.style-4 .feature-icon svg, .h7-feature-section .feature-item.style-4 .feature-icon img { width: 46px; } } .h7-feature-section .feature-item.style-4 .feature-content { padding: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-feature-section .feature-item.style-4 .feature-content { padding: 0; } } .h7-feature-section .feature-item.style-4 .feature-content .title { margin-bottom: 18px; } /* START: About CSS */ .h7-about-section { position: relative; border-top: 1px solid var(--tj-color-border-2); } .h7-about-section .about-wrapper-four { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-about-section .about-wrapper-four { gap: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-about-section .about-wrapper-four { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .h7-about-section .about-wrapper-four .sec-heading.style-4 + .desc { margin-top: 16px; } .h7-about-section .about-wrapper-four .sec-heading.style-4 .sub-title { -webkit-padding-start: 9px; padding-inline-start: 9px; } .h7-about-section .about-wrapper-four .sec-heading.style-4 .sub-title::before { display: none; } .h7-about-section .about-wrapper-four .about-images-group-three { max-width: 645px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h7-about-section .about-wrapper-four .about-images-group-three { min-height: 630px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-about-section .about-wrapper-four .about-images-group-three { min-height: 630px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-about-section .about-wrapper-four .about-images-group-three { width: 100%; max-width: 100%; } .h7-about-section .about-wrapper-four .about-images-group-three img { width: 100%; } } .h7-about-section .about-content-five { position: static; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-about-section .about-content-five { max-width: 100%; } } .h7-about-section .about-float-area { position: absolute; inset-inline-end: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-about-section .about-float-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) { .h7-about-section .about-float-area { position: static; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 35px; margin-top: 30px; } } .h7-about-section .about-float-area-left { padding: 48px 0 0 50px; background-color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-about-section .about-float-area-left { padding: 40px 0 0 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-about-section .about-float-area-left { padding: 0; } } .h7-about-section .about-float-area-left .check-list-one { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; border: 1px solid var(--tj-color-border-2); -webkit-border-end: 0; border-inline-end: 0; -webkit-border-start: 0; border-inline-start: 0; } @media (max-width: 575px) { .h7-about-section .about-float-area-left .check-list-one { gap: 5px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 25px 0; } } .h7-about-section .about-float-area-left .check-list-one .vr-line { width: 1px; background-color: var(--tj-color-border-2); } @media (max-width: 575px) { .h7-about-section .about-float-area-left .check-list-one .vr-line { width: 0; height: 0; } } .h7-about-section .about-float-area-left .check-list-one ul { padding: 26px 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-about-section .about-float-area-left .check-list-one ul { max-width: 45%; width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-about-section .about-float-area-left .check-list-one ul { max-width: 44%; width: 100%; } } @media (max-width: 575px) { .h7-about-section .about-float-area-left .check-list-one ul { padding: 0; } } .h7-about-section .about-float-area-left .btn-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; } .h7-about-section .about-float-area-left .btn-area .images-thumb { margin-bottom: 0; } .h7-about-section .about-float-area-left .btn-area .images-thumb li { max-width: 60px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 575px) { .h7-about-section .about-float-area-left .btn-area .images-thumb li { max-width: 56px; } } .h7-about-section .about-float-area-left .btn-area .images-thumb li:not(.h7-about-section .about-float-area-left .btn-area .images-thumb li:first-child) { -webkit-margin-start: -24px; margin-inline-start: -24px; } .h7-about-section .about-float-area-left .btn-area .images-thumb li img { height: 60px; padding: 4px; } @media (max-width: 575px) { .h7-about-section .about-float-area-left .btn-area .images-thumb li img { height: 56px; } } .h7-about-section .about-float-area-left .btn-area .images-thumb li.plus { padding: 4px; } .h7-about-section .about-float-area-left .btn-area .images-thumb li.plus i { background-color: var(--tj-color-theme-primary); height: 52px; width: 52px; padding: 4px; } @media (max-width: 575px) { .h7-about-section .about-float-area-left .btn-area .images-thumb li.plus i { height: 48px; width: 48px; } } .h7-about-section .about-statistics { position: relative; } .h7-about-section .about-statistics > img { width: 100%; height: 300px; -o-object-fit: cover; object-fit: cover; } .h7-about-section .about-funfact { position: absolute; bottom: 15px; inset-inline-start: 15px; inset-inline-end: 15px; width: auto; max-width: inherit; margin-top: 0; padding: 11px 15px 21px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); gap: 10px; } .h7-about-section .about-funfact .funfact-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; width: 100%; } .h7-about-section .about-funfact .funfact-wrapper .counter-item { padding: 0; -webkit-border-end: 0; border-inline-end: 0; } .h7-about-section .about-funfact .funfact-wrapper .counter-item::after, .h7-about-section .about-funfact .funfact-wrapper .counter-item::before { display: none; } .h7-about-section .about-funfact .funfact-wrapper .number { font-size: 58px; color: var(--tj-color-common-white); } .h7-about-section .about-funfact .funfact-wrapper .sub-title { color: var(--tj-color-common-white); margin-top: 0; } .h7-about-section .about-funfact .funfact-wrapper img { opacity: 0.27; } /* !END: About CSS */ /* START: H6 Services CSS */ .h7-service-section .sec-heading { margin: 0; max-width: 500px; width: 100%; } .h7-service-section .sec-heading-wrap { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .h7-service-section .sec-heading-wrap .desc { max-width: 300px; 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) { .h7-service-section .sec-heading-wrap { margin-bottom: 40px; } } .h7-service-section .sec-heading .sub-title { background-color: var(--tj-color-common-white); -webkit-padding-start: 9px; padding-inline-start: 9px; } .h7-service-section .sec-heading .sub-title::before { display: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .sec-heading { row-gap: 0; } } .h7-service-section .service-wrapper-two { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } .h7-service-section .service-style-3 { padding: 30px; min-height: auto; border-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 { padding: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-service-section .service-style-3 { padding-top: 30px; padding-bottom: 30px; } } .h7-service-section .service-style-3 .service-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; max-width: 550px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h7-service-section .service-style-3 .service-title { max-width: 480px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-service-section .service-style-3 .service-title { max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 .service-title { max-width: 320px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 .service-title { max-width: 100%; } } .h7-service-section .service-style-3 .service-right { 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; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } @media (max-width: 575px) { .h7-service-section .service-style-3 .service-right { -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; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-service-section .service-style-3 .service-right .desc { max-width: 235px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-service-section .service-style-3 .service-right .desc { max-width: calc(100% - 120px); -webkit-margin-start: 0; margin-inline-start: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 .service-right .desc { max-width: 100%; -webkit-margin-start: 0; margin-inline-start: 0; } } .h7-service-section .service-style-3 .service-icon { width: 80px; height: 80px; 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: 50%; position: relative; z-index: 2; text-align: center; -ms-flex-negative: 0; flex-shrink: 0; } .h7-service-section .service-style-3 .service-icon 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: 80px; height: 80px; font-size: 52px; line-height: 1; border-radius: 50%; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 .service-icon span { width: 70px; height: 70px; font-size: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 .service-icon { width: 70px; height: 70px; } } .h7-service-section .service-style-3 .service-button { margin: 0; margin-top: 0px; max-width: 112px; width: 100%; height: 98px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-mask-image: url(../images/shapes/h7-service.svg); mask-image: url(../images/shapes/h7-service.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-theme-bg); position: relative; 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; z-index: 1; -webkit-margin-end: -30px; margin-inline-end: -30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3 .service-button { max-width: 100px; height: 86px; -webkit-margin-end: -20px; margin-inline-end: -20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-service-section .service-style-3 .service-button { margin-top: -90px; } } @media (max-width: 575px) { .h7-service-section .service-style-3 .service-button { height: 88px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); margin-bottom: -14px; margin-top: 32px; -webkit-margin-end: 0; margin-inline-end: 0; } } .h7-service-section .service-style-3 .service-button:hover .blog-btn-2 .btn-icon { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } @media (max-width: 575px) { .h7-service-section .service-style-3 .service-button:hover .blog-btn-2 .btn-icon { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } } .h7-service-section .service-style-3 .blog-btn-2 .btn-icon { width: auto; height: auto; border-radius: 0; display: block; background-color: transparent; font-size: 28px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-margin-end: 13px; margin-inline-end: 13px; } @media (max-width: 575px) { .h7-service-section .service-style-3 .blog-btn-2 .btn-icon { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); font-size: 26px; } } .h7-service-section .service-style-3:hover { min-height: auto; background-color: var(--tj-color-theme-primary); } .h7-service-section .service-style-3:hover .service-title { max-width: 550px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h7-service-section .service-style-3:hover .service-title { max-width: 480px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-service-section .service-style-3:hover .service-title { max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3:hover .service-title { max-width: 320px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-service-section .service-style-3:hover .service-title { max-width: 100%; } } .h7-service-section .service-style-3:hover .service-icon span { color: var(--tj-color-theme-primary); background-color: var(--tj-color-common-white); } .h7-service-section .service-style-3:hover .blog-btn-2 .btn-icon i { color: var(--tj-color-theme-primary); display: inline-block; } /* END: H6 Services CSS */ /* START: Project CSS */ .tj-brand { background: var(--tj-color-theme-dark); overflow: hidden; background-repeat: no-repeat; background-size: cover; } .tj-brand .sec-heading { -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 0; -webkit-margin-start: 13px; margin-inline-start: 13px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-brand .sec-heading { -webkit-margin-start: 0; margin-inline-start: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-brand .sec-heading { margin-bottom: 40px; -webkit-margin-start: 0; margin-inline-start: 0; } } .tj-brand .sec-heading .sec-title { color: rgb(225, 232, 240); letter-spacing: -0.025em; } .tj-brand .sec-heading .sec-title span { color: var(--tj-color-theme-primary); } .tj-brand .sec-heading .text-btn { color: var(--tj-color-common-white); margin-top: 10px; } .tj-brand .sec-heading .text-btn::before { background-color: var(--tj-color-common-white); } .tj-brand-inner { background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tj-brand-inner .brand-logo { -webkit-box-flex: 0; -ms-flex: 0 1 33%; flex: 0 1 33%; height: 160px; 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 rgba(247, 247, 247, 0.1); -webkit-border-start: 0; border-inline-start: 0; border-top: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .tj-brand-slider .brand-logo img { opacity: 1 !important; filter: none !important; mix-blend-mode: normal !important; } .tj-brand-inner .brand-logo:last-child, .tj-brand-inner .brand-logo:nth-child(3n) { -webkit-border-end: 0; border-inline-end: 0; } .tj-brand-inner .brand-logo:nth-child(4), .tj-brand-inner .brand-logo:nth-child(5), .tj-brand-inner .brand-logo:nth-child(6) { border-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tj-brand-inner .brand-logo { -webkit-box-flex: 0; -ms-flex: 0 1 50%; flex: 0 1 50%; } .tj-brand-inner .brand-logo:nth-child(3n) { -webkit-border-end: 1px solid rgba(247, 247, 247, 0.1); border-inline-end: 1px solid rgba(247, 247, 247, 0.1); } .tj-brand-inner .brand-logo:nth-child(2n), .tj-brand-inner .brand-logo:last-child { -webkit-border-end: 0; border-inline-end: 0; } .tj-brand-inner .brand-logo:nth-child(4) { border-bottom: 1px solid rgba(247, 247, 247, 0.1); } } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tj-brand-inner .brand-logo a { max-width: 85%; } } .tj-brand-inner .brand-logo:hover a { -webkit-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } /* !END: Project CSS */ /* START: H6 Projects CSS */ .h7-project { overflow: hidden; } .h7-project .swiper-container { max-width: 872px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; overflow: visible; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-project .swiper-container { max-width: 700px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-project .swiper-container { max-width: 600px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-project .swiper-container { max-width: 450px; } } @media (max-width: 575px) { .h7-project .swiper-container { max-width: 315px; } } .h7-project .sec-heading { max-width: 555px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-project .sec-heading { margin-bottom: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-project .sec-heading { margin-bottom: 40px; } } .h7-project .h7-case-study-slider-wrapper { overflow: hidden; } .h7-project .h5-case-study-item-inner { z-index: 0; min-height: 800px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h7-project .h5-case-study-item-inner { min-height: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h7-project .h5-case-study-item-inner { min-height: 300px; } } @media (max-width: 575px) { .h7-project .h5-case-study-item-inner { min-height: 250px; } } .h7-project .h5-case-study-item-inner::after, .h7-project .h5-case-study-item-inner::before { content: " "; width: 100%; height: 0; /* background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, #051229)); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 84%); */ position: absolute; inset-inline-start: 0; bottom: 0; -webkit-transition: all 0.4s 0.3s; transition: all 0.4s 0.3s; z-index: 1; } .h7-project .h5-case-study-item-inner::before { height: 100%; background: rgba(5, 18, 41, 0.7); -webkit-transition-duration: 0; transition-duration: 0; opacity: 1; } .h7-project .h5-case-study-item .case-study-content { background-color: transparent; padding: 30px 30px 20px; max-width: 100%; z-index: 2; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } @media (max-width: 575px) { .h7-project .h5-case-study-item .case-study-content { padding: 15px 15px 5px; } } .h7-project .h5-case-study-item .case-study-content .case-study-text { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h7-project .h5-case-study-item .case-study-content .category { margin-bottom: 0; } .h7-project .h5-case-study-item .case-study-content .category li a { color: var(--tj-color-common-white); background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); border: 0; } .h7-project .h5-case-study-item .case-study-content .category li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .h7-project .h5-case-study-item .case-study-content .title a { color: var(--tj-color-common-white); margin-bottom: 15px; } .h7-project .h5-case-study-item .case-study-content .icon-btn { background-color: transparent; border: 1px solid var(--tj-color-common-white); } .h7-project .h5-case-study-item .case-study-content .icon-btn:hover { border-color: var(--tj-color-theme-primary); } .h7-project .h5-case-study-item:hover .case-study-content { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .h7-project .swiper-slide-active .h5-case-study-item-inner::after { height: 100%; opacity: 0.8; } .h7-project .swiper-slide-active .h5-case-study-item-inner::before { opacity: 0; } .h7-project .swiper-slide-active .h5-case-study-item-inner .case-study-content, .h7-project .swiper-slide-active .h5-case-study-item-inner:hover { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .h7-project-inner { position: relative; } .h7-project-inner .tj-project-nav { position: absolute; inset-inline-end: 100%; top: 50%; -webkit-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); z-index: 10; 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; font-weight: bold; color: var(--tj-color-theme-dark); background-color: var(--tj-color-common-white); opacity: 0; -webkit-transition: all 0.4s; transition: all 0.4s; visibility: hidden; border: 1px solid var(--tj-color-border-2); border-radius: 100%; font-size: 21px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-project-inner .tj-project-nav { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-project-inner .tj-project-nav { width: 48px; height: 48px; font-size: 14px; inset-inline-start: 15px; } } .h7-project-inner .tj-project-nav-next { inset-inline-start: 100%; inset-inline-end: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-project-inner .tj-project-nav-next { inset-inline-end: 15px; } } .h7-project-inner .tj-project-nav:hover { background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border-color: var(--tj-color-theme-primary); } .h7-project-inner:hover .tj-project-nav { -webkit-transform: translateY(-50%) translateX(-30px); -ms-transform: translateY(-50%) translateX(-30px); transform: translateY(-50%) translateX(-30px); opacity: 1; visibility: visible; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .h7-project-inner:hover .tj-project-nav { -webkit-transform: translateY(-50%) translateX(30px); -ms-transform: translateY(-50%) translateX(30px); transform: translateY(-50%) translateX(30px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-project-inner:hover .tj-project-nav { inset-inline-start: 15px; } } .h7-project-inner:hover .tj-project-nav-next { -webkit-transform: translateY(-50%) translateX(30px); -ms-transform: translateY(-50%) translateX(30px); transform: translateY(-50%) translateX(30px); } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .h7-project-inner:hover .tj-project-nav-next { -webkit-transform: translateY(-50%) translateX(-30px); -ms-transform: translateY(-50%) translateX(-30px); transform: translateY(-50%) translateX(-30px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-project-inner:hover .tj-project-nav-next { inset-inline-end: 15px; } } /* !END: H6 Projects CSS */ /* START: Process CSS */ .h7-process { background-color: var(--tj-color-theme-bg); padding-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-process { padding-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-process { padding-bottom: 0; } } .h7-process .sec-heading { margin-bottom: 20px; } .h7-process .sec-heading .sub-title { background: var(--tj-color-common-white); } .h7-process .process-left { position: relative; z-index: 0; height: 100%; } .h7-process .process-banner { position: relative; width: 100%; margin-top: 20px; max-width: 526px; z-index: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-process .process-banner { margin-top: 54px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-process .process-banner { width: auto; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } } .h7-process .process-banner-bg { position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 80%; background-color: var(--tj-color-theme-primary); z-index: -1; } .h7-process .process-banner-bg::before, .h7-process .process-banner-bg::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 70px; -webkit-mask-image: url(../images/shapes/h7-process-banner-shape-1.svg); mask-image: url(../images/shapes/h7-process-banner-shape-1.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-theme-dark); z-index: 1; } .h7-process .process-banner-bg::before { -webkit-mask-image: url(../images/shapes/h7-process-banner-shape-2.svg); mask-image: url(../images/shapes/h7-process-banner-shape-2.svg); background-color: var(--tj-color-theme-bg); z-index: 0; } .h7-process .process-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 36px; max-width: 612px; -webkit-margin-start: auto; margin-inline-start: auto; position: relative; z-index: 0; margin-bottom: 120px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-process .process-inner { margin-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .h7-process .process-inner { margin-bottom: 60px; max-width: 100%; } } @media (max-width: 575px) { .h7-process .process-inner { margin-bottom: 40px; max-width: 100%; } } .h7-process .process-inner .process-line { position: absolute; width: 1px; height: 100%; background-color: var(--tj-color-border-2); top: 0; inset-inline-start: 48px; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: 0; } .h7-process .process-inner .process-line-active { position: absolute; width: 100%; height: 33.333%; background-color: var(--tj-color-border-1); top: 0; inset-inline-start: 0; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 1; } .h7-process .process-item.style-4 { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; z-index: 1; } @media (max-width: 575px) { .h7-process .process-item.style-4 { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .h7-process .process-item.style-4::before { display: none; } .h7-process .process-item.style-4 .process-index { margin: 0; max-width: 112px; width: 100%; height: 98px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-mask-image: url(../images/shapes/h7-process.svg); mask-image: url(../images/shapes/h7-process.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-common-white); position: relative; 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; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-process .process-item.style-4 .process-index { max-width: 91px; height: 80px; } } @media (max-width: 575px) { .h7-process .process-item.style-4 .process-index { -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); margin-bottom: 5px; } } .h7-process .process-item.style-4 .process-index span { width: 68px; height: 68px; background-color: var(--tj-color-theme-bg); color: var(--tj-color-heading-primary); border-radius: 100%; font-size: 20px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-margin-end: 14px; margin-inline-end: 14px; -webkit-transition: all 0.4s; transition: all 0.4s; } @media (max-width: 575px) { .h7-process .process-item.style-4 .process-index span { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); width: 62px; height: 62px; font-size: 17px; } } .h7-process .process-item.style-4 .process-content { padding: 0; background-color: var(--tj-color-common-white); padding: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-process .process-item.style-4 .process-content { padding: 20px; padding: 30px 20px; } } .h7-process .process-item.style-4 .process-content .title { margin-bottom: 18px; letter-spacing: -0.025em; } .h7-process .process-item.style-4 .process-content .desc { line-height: 1.5; } .h7-process .process-item.active .process-index span { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .h7-process-circle { max-width: inherit; width: auto; height: auto; top: 50%; inset-inline-start: auto; inset-inline-end: 30px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-mask-image: none; mask-image: none; background-color: transparent; z-index: 1; } .h7-process-circle .circle-wrap { background-color: var(--tj-color-theme-dark); } .h7-process-circle .circle-wrap .logo-icon { background: var(--tj-color-theme-primary); border-radius: 100%; width: 80px; height: 80px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-process-circle .circle-wrap .logo-icon { width: 65px; height: 65px; } } /* !END: Process CSS */ /* START: Testimonial CSS */ .h7-testimonial { overflow: hidden; } .h7-testimonial .sec-heading { max-width: 555px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } .h7-testimonial-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; background-color: var(--tj-color-common-white); padding: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-wrap { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0; } } .h7-testimonial-single { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; width: 132px; height: 509px; place-content: center; overflow: hidden; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-border-start: 1px solid var(--tj-color-border-2); border-inline-start: 1px solid var(--tj-color-border-2); } .h7-testimonial-single:last-child { -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); } .h7-testimonial-single .testimonial-content { position: relative; overflow: hidden; width: 100%; max-width: 660px; padding: 40px 45px; } .h7-testimonial-single .testimonial-content-inner { position: relative; text-align: start; top: 0; inset-inline-start: 0; width: 570px; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); -webkit-transition: -webkit-transform 0.5s ease-in-out; transition: -webkit-transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out; transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out; opacity: 0; visibility: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-testimonial-single .testimonial-content-inner { width: 495px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single .testimonial-content-inner { width: 100%; padding-bottom: 10px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h7-testimonial-single .testimonial-content { padding: 20px 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-testimonial-single .testimonial-content { padding: 20px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single .testimonial-content { padding: 30px 20px; max-width: 100%; } } .h7-testimonial-single .testimonial-content .desc { font-size: 22px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h7-testimonial-single .testimonial-content .desc { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single .testimonial-content .desc { font-size: 18px; } } .h7-testimonial-single .testimonial-content .testimonial-author { margin-top: 24px; padding-top: 30px; border-top: 1px solid var(--tj-color-border-2); } .h7-testimonial-single .testimonial-content .testimonial-author .author-text .testimonial-rating { background: var(--tj-color-common-white); } .h7-testimonial-single .h7-testimonial-title { position: absolute; height: 100%; bottom: 0; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); text-align: start; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; cursor: pointer; } .h7-testimonial-single .h7-testimonial-title .title { -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; margin-bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 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) { .h7-testimonial-single .h7-testimonial-title .title { -webkit-writing-mode: inherit; -ms-writing-mode: inherit; writing-mode: inherit; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single .h7-testimonial-title { max-width: 100%; width: 100%; height: auto; inset-inline-start: 0; bottom: 50%; -webkit-transform: translateY(50%); -ms-transform: translateY(50%); transform: translateY(50%); } } .h7-testimonial-single .h7-testimonial-title .title { margin-bottom: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single .h7-testimonial-title .title { margin-bottom: 0; width: 100%; } } .h7-testimonial-single .h7-testimonial-title .title a { display: inline-block; } .h7-testimonial-single .h7-testimonial-title .title a:hover { color: var(--tj-color-theme-primary); } .h7-testimonial-single.active { place-content: unset; width: 660px; border: 0; } .h7-testimonial-single.active + .h7-testimonial-single { -webkit-border-start: 0; border-inline-start: 0; } .h7-testimonial-single.active .testimonial-content { opacity: 1; visibility: visible; background-color: var(--tj-color-theme-bg); } .h7-testimonial-single.active .testimonial-content-inner { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } .h7-testimonial-single.active .h7-testimonial-title { opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h7-testimonial-single.active { width: 640px; padding: 0 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-testimonial-single.active { width: 560px; padding: 0 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single.active { width: 100%; height: auto; border-top: 0 !important; border-bottom: 0 !important; } .h7-testimonial-single.active + .h7-testimonial-single { border-top: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h7-testimonial-single { width: 100px; height: 470px; padding: 0 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h7-testimonial-single { width: 80px; padding: 0 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-testimonial-single { width: 100%; height: 80px; padding: 0; -webkit-border-end: 0; border-inline-end: 0; -webkit-border-start: 0; border-inline-start: 0; border-top: 1px solid var(--tj-color-border-2); } .h7-testimonial-single:last-child { -webkit-border-end: 0; border-inline-end: 0; } .h7-testimonial-single:last-child { border-bottom: 1px solid var(--tj-color-border-2); } } @media (max-width: 390px) { .h7-testimonial-single { height: 80px; } } /* !END: Testimonial CSS */ /* START: Blog CSS */ .h7-blog { background-color: var(--tj-color-theme-bg); } .h7-blog .sec-heading .sub-title { background-color: var(--tj-color-common-white); } .h7-blog-wrapper .blog-item { gap: 30px 20px; padding: 15px 20px 15px 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item { padding: 15px 15px 15px 15px; } } .h7-blog-wrapper .blog-item:not(:first-child) .blog-meta ul li:not(:first-child) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-theme-dark); } .h7-blog-wrapper .blog-images { max-width: 210px; height: auto; min-height: 210px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-images { max-width: 100%; height: auto; min-height: inherit; } } .h7-blog-wrapper .blog-content { padding: 0; width: calc(100% - 230px); margin-top: 5px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-content { width: 100%; padding-bottom: 10px; margin-top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-content .blog-title { font-size: 20px; } } .h7-blog-wrapper .blog-content .blog-meta ul li.category a { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border: 1px solid var(--tj-color-theme-primary); } .h7-blog-wrapper .blog-content .blog-meta ul li.category a:hover { background-color: transparent; color: var(--tj-color-common-black-2); border-color: var(--tj-color-border-2); } .h7-blog-wrapper .blog-content .desc { display: block; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-content .desc { margin-top: 12px; } } .h7-blog-wrapper .blog-item { background-color: var(--tj-color-common-white); } .h7-blog-wrapper .blog-item:first-child { grid-row: inherit; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; padding: 15px 20px 15px 15px; gap: 20px; } .h7-blog-wrapper .blog-item:first-child .blog-images { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 210px; height: auto; min-height: 210px; width: 100%; margin-bottom: 0; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child .blog-images { max-width: 100%; height: auto; min-height: inherit; } } .h7-blog-wrapper .blog-item:first-child .blog-images a { height: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 100%; } .h7-blog-wrapper .blog-item:first-child .blog-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .h7-blog-wrapper .blog-item:first-child .blog-content { width: calc(100% - 230px); padding: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child .blog-content { width: 100%; } } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-title { margin: 0; font-size: 24px; letter-spacing: -0.025em; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child .blog-content .blog-title { font-size: 20px; } } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-title a:hover { color: var(--tj-color-theme-primary); background-size: 100% 1px; } .h7-blog-wrapper .blog-item:first-child .blog-content .desc { margin-top: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child .blog-content .desc { margin-top: 12px; } } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-button { margin-top: 20px; } .h7-blog-wrapper .blog-item:first-child:is(:hover, :focus) .blog-images img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta ul li:not(:first-child) { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-theme-dark); } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta ul li:not(:first-child)::after { display: none; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta.meta-2 { margin-top: 30px; display: block; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta.meta-2 ul li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta.meta-2 ul li::after { display: inline-block; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-button { display: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 0; } .h7-blog-wrapper .blog-item:first-child .blog-images { max-width: 100%; height: auto; } .h7-blog-wrapper .blog-item:first-child .blog-content { width: 100%; padding: 30px 0 10px; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta ul li:last-child, .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta ul li::after { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child .blog-content .blog-content { padding: 30px 0 10px 0; } } @media (max-width: 575px) { .h7-blog-wrapper .blog-item:first-child .blog-content { width: 100%; padding: 30px 0 10px 0; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-meta { margin-bottom: 15px; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-title { font-size: 20px; } .h7-blog-wrapper .blog-item:first-child .blog-content .desc { margin-top: 12px; } .h7-blog-wrapper .blog-item:first-child .blog-content .blog-button { margin-top: 25px; } } /* !END: Blog CSS */ /* START: Faq CSS */ .h7-faq-style { border: 1px solid var(--tj-color-border-2); } .h7-faq-style .accordion-item { margin-bottom: 0; } .h7-faq-style .accordion-item .accordion-header .accordion-button { border: 0; padding: 34px 80px 34px 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-faq-style .accordion-item .accordion-header .accordion-button { padding: 24px 60px 24px 15px; font-size: 16px; } } .h7-faq-style .accordion-item .accordion-header .accordion-button span { color: var(--tj-color-common-black-2); -webkit-margin-end: 5px; margin-inline-end: 5px; } .h7-faq-style .accordion-item .accordion-header .accordion-button::before { content: "\e905"; font-family: "solvior-icons"; border: 1px solid var(--tj-color-border-2); height: 36px; width: 36px; 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; line-height: 1; font-size: 22px; inset-inline-end: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-faq-style .accordion-item .accordion-header .accordion-button::before { height: 30px; width: 30px; line-height: 1; font-size: 19px; inset-inline-end: 15px; } } .h7-faq-style .accordion-item .accordion-header .accordion-button.collapsed { border: 0; border-top: 1px solid var(--tj-color-border-2); } .h7-faq-style .accordion-item .accordion-header .accordion-button:not(.collapsed) { -webkit-box-shadow: none; box-shadow: none; color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-bg); } .h7-faq-style .accordion-item .accordion-header .accordion-button:not(.collapsed) span { color: var(--tj-color-theme-primary); } .h7-faq-style .accordion-item .accordion-header .accordion-button:not(.collapsed):before { content: "\e904"; color: var(--tj-color-common-white); border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); } .h7-faq-style .accordion-item:first-child .accordion-button.collapsed { border-top: 0; } .h7-faq-style .accordion-item:not(:has(.collapsed)) + .accordion-item .accordion-button.collapsed { border-color: var(--tj-color-theme-bg); } .h7-faq-style .accordion-button { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .h7-faq .faq-banner { position: relative; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h7-faq .faq-banner { bottom: 40px; } } .h7-faq .faq-banner img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h7-faq .faq-banner img { max-height: 600px; -o-object-fit: cover; object-fit: cover; } } .h7-faq .faq-banner::after { content: " "; width: 100%; height: 40%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, #051229)); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 84%); position: absolute; inset-inline-start: 0; top: 0; -webkit-transition: all 0.4s 0.3s; transition: all 0.4s 0.3s; -webkit-transform: scaleY(-1); -ms-transform: scaleY(-1); transform: scaleY(-1); z-index: 1; } .h7-faq .sec-heading { position: absolute; inset-inline-start: 30px; inset-inline-end: 30px; top: 30px; z-index: 2; } .h7-faq .sec-heading .sec-title { color: var(--tj-color-common-white); } /* !END: Faq CSS */ /* START: Header CSS */ .tj-header-area.header-8 .mainmenu > ul { gap: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-8 .mainmenu > ul { gap: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-8 .mainmenu > ul { gap: 24px; } } .tj-header-area.header-8 .mainmenu > ul > li > a { position: relative; color: var(--tj-color-common-white); text-transform: uppercase; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-8 .mainmenu > ul > li > a { font-size: 14px; } } .tj-header-area.header-8 .mainmenu > ul > li > a::before { content: ""; width: 0; height: 3px; background-color: var(--tj-color-theme-primary); position: absolute; inset-inline-start: 0; bottom: -1px; } .tj-header-area.header-8 .mainmenu > ul > li > a::after { display: none; } .tj-header-area.header-8 .mainmenu > ul > li .sub-menu::before { display: none; } .tj-header-area.header-8 .mainmenu > ul > li:hover > a, .tj-header-area.header-8 .mainmenu > ul > li.current-menu-item > a, .tj-header-area.header-8 .mainmenu > ul > li.current-menu-ancestor > a { color: var(--tj-color-theme-primary); } .tj-header-area.header-8 .mainmenu > ul > li:hover > a::before, .tj-header-area.header-8 .mainmenu > ul > li.current-menu-item > a::before, .tj-header-area.header-8 .mainmenu > ul > li.current-menu-ancestor > a::before { width: 100%; } .tj-header-area.header-8 .menu_btn { color: var(--tj-color-common-white); } .tj-header-area.header-8 .menu_btn .cubes span { border-color: var(--tj-color-common-white); } .tj-header-area.header-8 .menu_btn .cubes span:nth-child(2) { -webkit-box-shadow: inset 0 0 0 2px var(--tj-color-common-white); box-shadow: inset 0 0 0 2px var(--tj-color-common-white); } .tj-header-area.header-8 .header_right_info { -webkit-column-gap: 18px; -moz-column-gap: 18px; column-gap: 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-8 .header_right_info { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .tj-header-area.header-8 .header_search:hover i { color: var(--tj-color-common-white); } /* !END: Header CSS */ /* START: Hero CSS */ .h8-hero { position: relative; overflow: hidden; } .h8-hero-inner::before { display: none; } .h8-hero-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .h8-hero-wrapper .h8-hero-content { max-width: 984px; padding-bottom: 214px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-wrapper .h8-hero-content { max-width: 850px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-wrapper .h8-hero-content { max-width: 800px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-wrapper .h8-hero-content { padding-bottom: 244px; padding-top: 218px; max-width: 660px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h8-hero-wrapper .h8-hero-content { padding-bottom: 240px; padding-top: 127px; max-width: 465px; } } @media (max-width: 575px) { .h8-hero-wrapper .h8-hero-content { padding-bottom: 250px; padding-top: 127px; max-width: 350px; } } .h8-hero-title { font-size: 132px; line-height: 1.076; letter-spacing: -0.025em; font-weight: var(--tj-fw-sbold); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-title { font-size: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-title { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-title { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-title { text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h8-hero-title { font-size: 70px; margin-bottom: 27px; } } @media (max-width: 575px) { .h8-hero-title { font-size: 50px; } } .h8-hero-title span { display: block; text-align: end; font-style: italic; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-title span { text-align: center; } } .h8-hero-title span:last-child { text-align: center; font-style: normal; } .h8-hero-title-wrapper { position: relative; } .h8-hero-circle { position: absolute; max-width: inherit; width: 152px; height: auto; top: 16%; inset-inline-end: 15%; inset-inline-start: auto; -webkit-transform: translateY(-16%); -ms-transform: translateY(-16%); transform: translateY(-16%); -webkit-mask-image: none; mask-image: none; margin-top: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-circle { inset-inline-end: 12%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-circle { inset-inline-end: 22%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-circle { width: 105px; inset-inline-end: 16%; top: 15%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-circle { position: static; -webkit-transform: none; -ms-transform: none; transform: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background-color: transparent; margin-top: 30px; margin-bottom: 42px; width: 100%; } } .h8-hero-circle .circle-wrap { width: 152px; height: 152px; inset-inline-end: -35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-circle .circle-wrap { width: 142px; height: 142px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-circle .circle-wrap { width: 122px; height: 122px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-circle .circle-wrap { width: 105px; height: 105px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-circle .circle-wrap { position: relative; -webkit-transform: none; -ms-transform: none; transform: none; width: 122px; height: 122px; inset-inline-end: 0; } } .h8-hero-circle .circle-wrap .rotate-image { width: 132px; height: 133px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-circle .circle-wrap .rotate-image { width: 122px; height: 123px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-circle .circle-wrap .rotate-image { width: 102px; height: 103px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-circle .circle-wrap .rotate-image { width: 90px; height: 91px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-circle .circle-wrap .rotate-image { width: 108px; height: 109px; } } .h8-hero-circle .circle-wrap .logo-icon { width: 92px; height: 92px; border-radius: 100%; border: 1px solid rgba(247, 247, 247, 0.15); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-circle .circle-wrap .logo-icon { width: 82px; height: 82px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-circle .circle-wrap .logo-icon { width: 68px; height: 68px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-circle .circle-wrap .logo-icon { width: 52px; height: 52px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-circle .circle-wrap .logo-icon { width: 74px; height: 74px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-circle .circle-wrap .logo-icon img { width: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-circle .circle-wrap .logo-icon img { width: 30; } } .h8-hero-desc { position: absolute; inset-inline-start: 0; bottom: 9%; max-width: 365px; color: var(--tj-color-common-white-2); font-size: 20px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-desc { inset-inline-start: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-desc { inset-inline-start: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-desc { max-width: 361px; inset-inline-start: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-desc { font-size: 18px; position: static; text-align: center; margin: 0 auto; } } .h8-hero-desc-icon { margin-bottom: 22px; -webkit-animation: bounce2 2s infinite; animation: bounce2 2s infinite; } .h8-hero-desc-icon i { -webkit-margin-start: -10px; margin-inline-start: -10px; font-size: 89px; color: var(--tj-color-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-desc-icon i { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-desc-icon i { font-size: 60px; } } .h8-hero-banner { position: absolute; inset-inline-end: 0; bottom: 0; max-width: 331px; height: 221px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-hero-banner { inset-inline-end: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-hero-banner { inset-inline-end: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-hero-banner { inset-inline-end: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-hero-banner { height: 230px; max-width: 100%; } } .h8-hero-banner img, .h8-hero-banner svg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .sec-heading.h8-section-heading.sec-heading-centered { max-width: 555px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-heading.h8-section-heading.sec-heading-centered { margin-bottom: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sec-heading.h8-section-heading.sec-heading-centered { margin-bottom: 40px; } } .sec-heading.h8-section-heading .sub-title { padding: 0 14px; margin-bottom: 20px; background-color: transparent; } .sec-heading.h8-section-heading .sub-title::before, .sec-heading.h8-section-heading .sub-title::after { position: absolute; display: block; content: ""; width: 4px; height: 4px; border-radius: 50%; top: 50%; inset-inline-start: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tj-color-theme-primary); } .sec-heading.h8-section-heading .sub-title::after { inset-inline-start: auto; inset-inline-end: 0; } /* !END: Hero CSS */ /* START: Feature CSS */ .h8-feature .container { --bs-gutter-x: 30px; } .h8-feature .container .row { --bs-gutter-x: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-feature .container .row { --bs-gutter-x: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-feature .container .rg-30 { row-gap: 20px; } } .h8-feature .sec-heading { max-width: 360px; margin: 0; -webkit-margin-start: auto; margin-inline-start: auto; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-feature .sec-heading { margin-bottom: 50px; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-feature .sec-heading { margin-bottom: 40px; max-width: 100%; } } .h8-feature .sec-heading .desc { max-width: 307px; margin-top: 16px; margin-bottom: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-feature .sec-heading .desc { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-feature .sec-heading .desc { max-width: 100%; } } .h8-feature-item.style-4 { padding: 40px 35px 40px 30px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; gap: 30px; background-color: var(--tj-color-theme-bg); border: 0; z-index: 1; -webkit-transition: all 0.4s; transition: all 0.4s; } @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) { .h8-feature-item.style-4 { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; padding: 24px; } } .h8-feature-item.style-4::before { display: none; } .h8-feature-item.style-4 .feature-icon { max-width: inherit; width: auto; margin: 0; -ms-flex-negative: 0; flex-shrink: 0; position: relative; z-index: 1; } .h8-feature-item.style-4 .feature-icon svg, .h8-feature-item.style-4 .feature-icon img { width: 72px; -webkit-transition: -webkit-filter 0.4s; transition: -webkit-filter 0.4s; transition: filter 0.4s; transition: filter 0.4s, -webkit-filter 0.4s; } @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) { .h8-feature-item.style-4 .feature-icon svg, .h8-feature-item.style-4 .feature-icon img { width: 62px; } } .h8-feature-item.style-4 .feature-content { padding: 0; padding-top: 18px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-feature-item.style-4 .feature-content { padding: 0; } } .h8-feature-item.style-4 .feature-content .title { margin-bottom: 18px; } .h8-feature-item.style-4 .feature-content .desc { color: var(--tj-color-text-body); } .h8-feature-item.style-4:hover { background-color: var(--tj-color-theme-primary); } .h8-feature-item.style-4:hover .feature-icon { color: var(--tj-color-common-white); } .h8-feature-item.style-4:hover .title { color: var(--tj-color-common-white); } .h8-feature-item.style-4:hover .desc { color: var(--tj-color-common-white); } /* START: About CSS */ .h8-about { position: relative; background-color: var(--tj-color-theme-bg); } .h8-about-wrapper { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-about-wrapper { gap: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-about-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h8-about-wrapper .about-images-group-three { max-width: 645px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-about-wrapper .about-images-group-three { min-height: 630px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-about-wrapper .about-images-group-three { min-height: 630px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-about-wrapper .about-images-group-three { width: 100%; max-width: 100%; } .h8-about-wrapper .about-images-group-three img { 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) { .h8-about-content { width: 100%; max-width: 100%; } } .h8-about-content .desc { margin-top: 20px; } .h8-about-content .check-list-one { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; margin: 24px 0 30px; } @media (max-width: 575px) { .h8-about-content .check-list-one { gap: 5px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h8-about-content .check-list-one .vr-line { width: 1px; background-color: var(--tj-color-border-2); } @media (max-width: 575px) { .h8-about-content .check-list-one .vr-line { width: 0; height: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-about-content .check-list-one ul { max-width: 45%; width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h8-about-content .check-list-one ul { max-width: 44%; width: 100%; } } .h8-about-content .btn-area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px 20px; margin-top: 26px; } .h8-about-content .btn-area .images-thumb { margin-bottom: 0; } .h8-about-content .btn-area .images-thumb li { max-width: 60px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 575px) { .h8-about-content .btn-area .images-thumb li { max-width: 56px; } } .h8-about-content .btn-area .images-thumb li:not(.h8-about-content .btn-area .images-thumb li:first-child) { -webkit-margin-start: -24px; margin-inline-start: -24px; } .h8-about-content .btn-area .images-thumb li img { height: 60px; padding: 4px; } @media (max-width: 575px) { .h8-about-content .btn-area .images-thumb li img { height: 56px; } } .h8-about-content .btn-area .images-thumb li.plus { padding: 4px; } .h8-about-content .btn-area .images-thumb li.plus i { background-color: var(--tj-color-theme-primary); height: 52px; width: 52px; padding: 4px; } @media (max-width: 575px) { .h8-about-content .btn-area .images-thumb li.plus i { height: 48px; width: 48px; } } .h8-about-banner::after { display: none; } .h8-about-float-area { position: absolute; inset-inline-start: 0; bottom: 0; padding: 27px 30px 22px; background-color: var(--tj-color-theme-primary); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8px; outline: 10px solid var(--tj-color-theme-bg); } @media (max-width: 575px) { .h8-about-float-area { padding: 27px 20px 22px; outline-width: 8px; } } .h8-about-client-experience.client-experience .images-thumb { margin-bottom: 0; } .h8-about-client-experience.client-experience .images-thumb li { max-width: 54px; -ms-flex-negative: 0; flex-shrink: 0; } @media (max-width: 575px) { .h8-about-client-experience.client-experience .images-thumb li { max-width: 54px; } } .h8-about-client-experience.client-experience .images-thumb li:not(.h8-about-client-experience.client-experience .images-thumb li:first-child) { -webkit-margin-start: -23px; margin-inline-start: -23px; } .h8-about-client-experience.client-experience .images-thumb li img { height: 54px; width: 54px; padding: 3px; } .h8-about-client-experience.client-experience .images-thumb li.plus { padding: 3px; } .h8-about-client-experience.client-experience .images-thumb li.plus i { background-color: var(--tj-color-theme-dark); height: 48px; width: 48px; padding: 3px; } .h8-about-feedback-text { color: var(--tj-color-common-white); max-width: 158px; margin-bottom: 0; } /* !END: About CSS */ /* START: Footer CSS */ .h8-footer.footer-2.style-2 .footer-top-area .line::before { inset-inline-start: 38%; } .h8-footer-newsletter-form .newsletter-form { max-width: 350px; } .h8-footer-newsletter-form .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]), .h8-footer-newsletter-form .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email] { border-color: transparent; border-radius: 70px; } .h8-footer-newsletter-form .newsletter-form .form-input button { inset-inline-end: 22px; } .h8-footer-newsletter-form .newsletter-form .form-input button::before { background-color: rgba(247, 247, 247, 0.1); } @media (max-width: 575px) { .h8-footer-newsletter-form .newsletter-form { max-width: 100%; } } @media (max-width: 575px) { .h8-footer-newsletter-form { padding-top: 0; padding-bottom: 50px; border-top: 0; border-bottom: 1px solid var(--tj-color-border-1); } } /* !END: Footer CSS */ /* START: Home 5 CTA CSS */ .h8-cta-section { padding: 50px 0; background-color: var(--tj-color-theme-primary); position: relative; overflow: hidden; } .h8-cta-section .thumb { width: 100%; height: 100%; position: absolute; top: 0; inset-inline-start: 0; } .h8-cta-section .thumb img { width: 100%; height: 100%; mix-blend-mode: multiply; } .h8-cta-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; z-index: 2; position: relative; } .h8-cta-wrapper .sec-title { color: var(--tj-color-common-white); margin-bottom: 0; } .h8-cta-wrapper .sec-title a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; overflow: hidden; } .h8-cta-wrapper .sec-title a::after { content: ""; position: absolute; bottom: 5px; inset-inline-end: 0; width: 100%; height: 2px; background-color: var(--tj-color-common-white); } .h8-cta-wrapper .sec-title a:hover::after { -webkit-animation: linehover 0.8s linear; animation: linehover 0.8s linear; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-cta-wrapper .sec-title { font-size: 38px; } } @media (max-width: 575px) { .h8-cta-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; } } .h8-cta-icon { width: 66px; height: 66px; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; background-color: var(--tj-color-theme-dark); color: var(--tj-color-common-white); font-size: 28px; border-radius: 50%; 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; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(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; } .h8-cta-icon:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } /* START: H6 Marquee CSS */ .h8-marquee-section { border-top: 1px solid var(--tj-color-border-2); border-bottom: 1px solid var(--tj-color-border-2); padding: 30px 0 25px 0; } .h8-marquee-section .marquee-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h8-marquee-section .marquee-item .marquee-title .text { color: var(--tj-color-heading-primary); font-size: 102px; line-height: 1.1; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-heading); } .h8-marquee-section .marquee-item .marquee-title .text.stroke { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(39, 53, 77, 0.4); } .h8-marquee-section .marquee-item .marquee-icons { max-width: 51px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h8-marquee-section .marquee-item .marquee-title .text { font-size: 85px; } .h8-marquee-section .marquee-item .marquee-icons { max-width: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-marquee-section .marquee-item .marquee-title .text { font-size: 75px; } .h8-marquee-section .marquee-item .marquee-icons { max-width: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-marquee-section .marquee-item { gap: 20px; -webkit-padding-end: 20px; padding-inline-end: 20px; } .h8-marquee-section .marquee-item .marquee-title .text { font-size: 50px; } .h8-marquee-section .marquee-item .marquee-icons { max-width: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-marquee-section { padding: 20px 0; } } /* !END: H6 Marquee CSS */ /* Growth css */ .tj-growth-section { position: relative; overflow: hidden; padding-top: 375px; padding-bottom: 70px; z-index: 1; } .tj-growth-section .tj-growth-bg { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; z-index: -1; height: 130%; /* Slightly bigger for parallax depth */ background-size: cover; background-position: center; will-change: transform; } .tj-growth-section .tj-growth-bg::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); opacity: 0.3; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-growth-section { padding-top: 350px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-growth-section { padding-top: 280px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-growth-section { padding-top: 220px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-growth-section { padding-top: 180px; padding-bottom: 15px; } } @media (max-width: 575px) { .tj-growth-section { padding-top: 240px; padding-bottom: 15px; } } .growth-content { max-width: 460px; padding: 30px; -webkit-margin-start: auto; margin-inline-start: auto; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); position: relative; } .growth-content .title { color: var(--tj-color-common-white); } .growth-content .title span { color: var(--tj-color-theme-primary); } .growth-content .icon-shape { position: absolute; bottom: 0; inset-inline-end: 40px; width: 136px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .growth-content .icon-shape { width: 100px; inset-inline-end: 20px; } } @media (max-width: 575px) { .growth-content { padding: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; } } .video-btn-wrap { margin-top: 30px; margin-bottom: 20px; } .video-btn-wrap .video-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; } .video-btn-wrap .video-btn .play-btn { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); width: 52px; height: 52px; border-radius: 50%; 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: 14px; position: relative; -webkit-animation: pulse-three 2s infinite; animation: pulse-three 2s infinite; z-index: 5; } .video-btn-wrap .video-btn .play-btn i { line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-margin-start: 2px; margin-inline-start: 2px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video-btn-wrap .video-btn .play-btn { width: 40px; height: 40px; } } .video-btn-wrap .video-btn .video-text { color: var(--tj-color-common-white); font-weight: var(--tj-fw-bold); font-size: 15px; line-height: 1.2; position: relative; } .video-btn-wrap .video-btn .video-text::after { content: ""; position: absolute; bottom: -1px; inset-inline-end: 0; width: 100%; height: 1px; background-color: var(--tj-color-common-white); } .video-btn-wrap .video-btn:hover .video-text::after { -webkit-animation: linehover 0.8s linear; animation: linehover 0.8s linear; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video-btn-wrap .video-btn { gap: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .video-btn-wrap { margin-top: 20px; margin-bottom: 10px; } } /* START: Team CSS */ .h8-team-section { overflow: hidden; } .h8-team-section .sec-heading { max-width: 585px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } .team-item.style-5 { min-height: 380px; } .team-item.style-5 .team-images { overflow: hidden; position: relative; } .team-item.style-5 .team-content { width: calc(100% - 30px); height: 88px; position: absolute; bottom: 15px; inset-inline-start: 15px; padding: 20px; background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .team-item.style-5 .team-content .team-text .title a { color: var(--tj-color-common-white); } .team-item.style-5 .team-content .team-text .title:hover { letter-spacing: 0; } .team-item.style-5 .team-content .desc { color: var(--tj-color-common-white); opacity: 0; visibility: hidden; margin-top: 20px; } .team-item.style-5 .team-share { position: absolute; bottom: 10px; inset-inline-start: 20px; opacity: 0; visibility: hidden; z-index: 2; -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .team-item.style-5 .team-share ul { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; gap: 8px; } .team-item.style-5 .team-share ul li a { width: 28px; height: 28px; font-size: 16px; color: var(--tj-color-theme-dark); background: var(--tj-color-theme-bg-2); opacity: 0.4; } .team-item.style-5 .team-share ul li a i { color: var(--tj-color-theme-dark); } .team-item.style-5 .team-share ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); opacity: 1; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } .team-item.style-5 .team-share ul li a:hover i { color: var(--tj-color-common-white); } .team-item.style-5:hover .team-content { height: calc(100% - 30px); padding: 30px 20px 60px; } .team-item.style-5:hover .desc { opacity: 1; visibility: visible; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; } .team-item.style-5:hover .team-share { opacity: 1; visibility: visible; bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .team-item.style-5 { min-height: 340px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .team-item.style-5 { min-height: auto; } } /* !END: Team CSS */ /* START: Home 8 Blog CSS */ .h8-blog-section { position: relative; overflow: hidden; z-index: 2; } .h8-blog-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 28px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-blog-wrapper { gap: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-blog-wrapper { gap: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-wrapper { gap: 20px; } } .h8-blog-item { display: -webkit-box; display: -ms-flexbox; display: flex; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); width: 300px; height: 400px; -webkit-transition: width 0.3s ease-in; transition: width 0.3s ease-in; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-blog-item { width: 240px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-blog-item { width: 200px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item { height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h8-blog-item .blog-images { width: 300px; position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } .h8-blog-item .blog-images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .h8-blog-item .blog-images .blog-date { position: absolute; top: 15px; inset-inline-start: 15px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 20px; text-align: center; } .h8-blog-item .blog-images .blog-date .date { display: block; font-family: var(--tj-ff-heading); font-size: 32px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-sbold); letter-spacing: -0.03em; margin-bottom: 8px; line-height: 1; } .h8-blog-item .blog-images .blog-date .month { display: block; font-size: 14px; color: var(--tj-color-common-white); letter-spacing: 0.24em; text-transform: uppercase; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-blog-item .blog-images { width: 240px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-blog-item .blog-images { width: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item .blog-images { width: 100%; } } .h8-blog-item .blog-content { position: relative; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .h8-blog-item .blog-content-inner { position: relative; top: 0; inset-inline-start: 0; width: 300px; -webkit-transform: translateX(-105%); -ms-transform: translateX(-105%); transform: translateX(-105%); -webkit-transition: -webkit-transform 0.2s ease-in-out; transition: -webkit-transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out; transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out; opacity: 0; visibility: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-blog-item .blog-content-inner { width: 290px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-blog-item .blog-content-inner { width: 270px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item .blog-content-inner { width: 100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } } .h8-blog-item .blog-content .blog-two-meta { margin-bottom: 15px; } .h8-blog-item .blog-content .title { line-height: 1.333; margin-bottom: 12px; } .h8-blog-item .blog-content .blog-button { margin-top: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-blog-item .blog-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 30px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item .blog-content { padding: 30px 20px; } } .h8-blog-item.active { width: 640px; } .h8-blog-item.active .blog-content { padding: 45px 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-blog-item.active .blog-content { padding: 48px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item.active .blog-content { padding: 30px 20px; } } .h8-blog-item.active .blog-content-inner { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-blog-item.active { width: 595px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-blog-item.active { width: 500px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-blog-item.active { width: 100%; } } /* END: Home 8 Blog CSS */ /* START: H8 Services CSS */ .h8-services-section { background-color: var(--tj-color-theme-dark); } .h8-services-section .tj-primary-btn { background-color: var(--tj-color-common-white); } .h8-services-section .tj-primary-btn .btn_inner .btn_text { color: var(--tj-color-heading-primary); } .h8-services-section .tj-primary-btn:hover .btn_inner .btn_text { color: var(--tj-color-common-white); } .h8-services-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 60px; } .h8-services-left { max-width: calc(100% - 700px); width: 100%; } .h8-services-left-content { margin-top: 55px; } .h8-services-left-content .title { max-width: 380px; width: 100%; color: var(--tj-color-common-white); letter-spacing: -0.025em; margin: 0; } .h8-services-left-content .title span { color: var(--tj-color-theme-primary); } .h8-services-left-content .tj-primary-btn { margin-top: 30px; } .h8-services-right { max-width: 640px; width: 100%; } .h8-services-list { border-top: 1px solid var(--tj-color-border-1); } .h8-services-list .service_item { border-bottom: 1px solid var(--tj-color-border-1); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 13px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 45px 0; } .h8-services-list .service_item .no { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 16px; line-height: 1.5; letter-spacing: -0.025em; color: var(--tj-color-common-white-2); } .h8-services-list .service_item .content { max-width: 100%; width: 100%; } .h8-services-list .service_item .content .title { color: var(--tj-color-common-white); letter-spacing: -0.025em; margin: 0; } .h8-services-list .service_item .content .title a:hover { color: var(--tj-color-theme-primary); } .h8-services-list .service_item .content .desc { color: var(--tj-color-common-white-2); margin-top: 15px; } .h8-services-list .service_item .service_btn { width: 70px; height: 70px; border: 1px solid var(--tj-color-border-1); background-color: var(--tj-color-theme-dark); font-size: 24px; -webkit-margin-start: auto; margin-inline-start: auto; } .h8-services-list .service_item .service_btn i, .h8-services-list .service_item .service_btn svg { text-shadow: -45px 0 0; } .h8-services-list .service_item:hover .service_btn { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .h8-services-list .service_item:hover .service_btn i, .h8-services-list .service_item:hover .service_btn svg { -webkit-transform: rotate(-45deg) translateX(45px); -ms-transform: rotate(-45deg) translateX(45px); transform: rotate(-45deg) translateX(45px); } .h8-services-list .service_item:hover .service_btn:hover i, .h8-services-list .service_item:hover .service_btn:hover svg { -webkit-transform: rotate(0deg) translateX(45px); -ms-transform: rotate(0deg) translateX(45px); transform: rotate(0deg) translateX(45px); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-services-wrapper { gap: 30px; } .h8-services-left { max-width: calc(100% - 630px); } .h8-services-right { max-width: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-services-wrapper { gap: 30px; } .h8-services-left { max-width: calc(100% - 530px); } .h8-services-right { max-width: 500px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-services-wrapper { gap: 50px; } .h8-services-wrapper .mobile_btn { margin-top: 50px; } .h8-services-left { max-width: 100%; } .h8-services-left-content { margin-top: 50px; } .h8-services-left-content .title { max-width: 100%; } .h8-services-right { max-width: 100%; } .h8-services-list .service_item { padding: 36px 0; } } @media (max-width: 575px) { .h8-services-wrapper .mobile_btn { margin-top: 40px; } .h8-services-left { max-width: 100%; } .h8-services-left-content { margin-top: 40px; } .h8-services-list .service_item { padding: 36px 0; gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .h8-services-list .service_item .service_btn { -webkit-margin-start: 0; margin-inline-start: 0; width: 50px; height: 50px; } } .h8-video { position: relative; z-index: 1; } .h8-video::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: rgba(5, 18, 41, 0.3); z-index: 1; } .h8-video img { width: 100%; min-height: 330px; -o-object-fit: cover; object-fit: cover; } .h8-video .play_btn { position: absolute; inset-inline-start: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h8-video img { min-height: 300px; } } .play_btn { width: 58px; height: 58px; 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: 16px; line-height: 1; background-color: var(--tj-color-common-white); color: var(--tj-color-theme-dark); border-radius: 50%; -webkit-animation: pulse 2s ease infinite; animation: pulse 2s ease infinite; } .play_btn i, .play_btn svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } /* !END: H8 Services CSS */ /* START: H8 Services CSS */ .h8-price-section { overflow: hidden; } .h8-price-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; margin-bottom: 60px; } .h8-price-header .sec-heading { max-width: 550px; width: 100%; margin: 0; } .h8-price-header .pricing-tab { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-price-header .sec-heading { max-width: 465px; } } .h8-price-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; } .h8-price-wrapper .price_tabs, .h8-price-wrapper .price_tab_contents { max-width: calc(50% - 15px); width: 100%; } .h8-price-wrapper .price_tabs { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } .h8-price-wrapper .price_tabs .tab_item { position: relative; z-index: 1; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 17px; padding: 45px 30px; cursor: pointer; } .h8-price-wrapper .price_tabs .tab_item::after { content: ""; width: 20px; height: 20px; background-color: transparent; position: absolute; inset-inline-end: -11px; top: 50%; -webkit-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); z-index: -1; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .content { padding-top: 7px; } .h8-price-wrapper .price_tabs .tab_item .checkbox { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 32px; height: 32px; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); border-radius: 50%; position: relative; z-index: 1; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .checkbox:after { content: ""; position: absolute; inset-inline-start: 11px; top: 8px; width: 7px; height: 11px; border: solid var(--tj-color-theme-dark); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .h8-price-wrapper .price_tabs .tab_item .title { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; line-height: 1; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .title span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: var(--tj-fw-sbold); font-size: 14px; line-height: 1; letter-spacing: -0.025em; background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); padding: 4px 7px; border-radius: 40px; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .desc { margin-top: 10px; line-height: 1.3; } .h8-price-wrapper .price_tabs .tab_item .price { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 72px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-heading-primary); -webkit-margin-start: auto; margin-inline-start: auto; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .price .dollar { color: var(--tj-color-common-black-2); font-size: 18px; line-height: 1.7; letter-spacing: -0.04em; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .price .period { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-medium); font-size: 20px; line-height: 1.7; letter-spacing: -0.04em; -ms-flex-item-align: end; align-self: flex-end; -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item .price span { -webkit-transition: none; transition: none; } .h8-price-wrapper .price_tabs .tab_item.active { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .h8-price-wrapper .price_tabs .tab_item.active::after { background-color: var(--tj-color-theme-primary); -webkit-animation: 0.3s arrowLeftRight 0s linear; animation: 0.3s arrowLeftRight 0s linear; } .h8-price-wrapper .price_tabs .tab_item.active .checkbox { border-color: var(--tj-color-common-white); } .h8-price-wrapper .price_tabs .tab_item.active .checkbox::after { opacity: 1; } .h8-price-wrapper .price_tabs .tab_item.active .title { color: var(--tj-color-common-white); } .h8-price-wrapper .price_tabs .tab_item.active .title span { background-color: var(--tj-color-common-white); color: var(--tj-color-heading-primary); } .h8-price-wrapper .price_tabs .tab_item.active .desc { color: var(--tj-color-common-white); } .h8-price-wrapper .price_tabs .tab_item.active .price { color: var(--tj-color-common-white); } .h8-price-wrapper .price_tabs .tab_item.active .price .period, .h8-price-wrapper .price_tabs .tab_item.active .price .dollar { color: var(--tj-color-common-white); } .h8-price-wrapper .tab_content { position: relative; padding: 60px 40px 50px 40px; background-color: var(--tj-color-theme-bg); z-index: 1; height: 100%; } .h8-price-wrapper .tab_content.active { -webkit-animation: 0.4s leftRight 0s linear; animation: 0.4s leftRight 0s linear; } .h8-price-wrapper .tab_content .pricing-badge { position: absolute; top: 0; inset-inline-end: 0; padding: 9px 10px 10px 35px; font-size: 14px; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); line-height: 1; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%); z-index: 1; } .h8-price-wrapper .tab_content .features { list-style: none; } .h8-price-wrapper .tab_content .features li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; font-size: 18px; color: var(--tj-color-common-black-3); } .h8-price-wrapper .tab_content .features li:not(:last-child) { margin-bottom: 18px; } .h8-price-wrapper .tab_content .features li i, .h8-price-wrapper .tab_content .features li svg { font-size: 18px; line-height: 1; -webkit-margin-end: 8px; margin-inline-end: 8px; margin-top: 5px; } .h8-price-wrapper .tab_content .features li.active { color: var(--tj-color-text-body); } .h8-price-wrapper .tab_content .features li.active i { color: var(--tj-color-theme-primary); } .h8-price-wrapper .tab_content .buttons { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h8-price-wrapper .tab_content .buttons .text-btn { gap: 0; } .h8-price-mobile-wrapper .pricing_a_item:not(:last-child) { margin-bottom: 15px; } .h8-price-mobile-wrapper .tab_item { position: relative; z-index: 1; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 17px; padding: 45px 30px; } .h8-price-mobile-wrapper .tab_item .content { padding-top: 7px; } .h8-price-mobile-wrapper .tab_item .checkbox { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; width: 32px; height: 32px; border: 1px solid var(--tj-color-border-2); background-color: var(--tj-color-common-white); border-radius: 50%; position: relative; z-index: 1; -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item .checkbox:after { content: ""; position: absolute; inset-inline-start: 11px; top: 8px; width: 7px; height: 11px; border: solid var(--tj-color-theme-dark); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); opacity: 0; -webkit-transition: opacity 0.25s ease; transition: opacity 0.25s ease; } .h8-price-mobile-wrapper .tab_item .title { margin: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; line-height: 1; -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item .title span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-weight: var(--tj-fw-sbold); font-size: 14px; line-height: 1; letter-spacing: -0.025em; background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); padding: 4px 7px; border-radius: 40px; -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item .desc { margin-top: 10px; line-height: 1.3; } .h8-price-mobile-wrapper .tab_item .price { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 72px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-heading-primary); -webkit-margin-start: auto; margin-inline-start: auto; -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item .price > div { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 1px; } .h8-price-mobile-wrapper .tab_item .price .dollar { color: var(--tj-color-common-black-2); font-size: 18px; line-height: 1.7; letter-spacing: -0.04em; -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item .price .period { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-medium); font-size: 20px; line-height: 1.7; letter-spacing: -0.04em; -ms-flex-item-align: end; align-self: flex-end; -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item .price span { -webkit-transition: none; transition: none; } .h8-price-mobile-wrapper .tab_item:not(.collapsed) { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .h8-price-mobile-wrapper .tab_item:not(.collapsed)::after { background-color: var(--tj-color-theme-primary); -webkit-animation: 0.3s arrowLeftRight 0s linear; animation: 0.3s arrowLeftRight 0s linear; } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .checkbox { border-color: var(--tj-color-common-white); } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .checkbox::after { opacity: 1; } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .title { color: var(--tj-color-common-white); } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .title span { background-color: var(--tj-color-common-white); color: var(--tj-color-heading-primary); } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .desc { color: var(--tj-color-common-white); } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .price { color: var(--tj-color-common-white); } .h8-price-mobile-wrapper .tab_item:not(.collapsed) .price .period, .h8-price-mobile-wrapper .tab_item:not(.collapsed) .price .dollar { color: var(--tj-color-common-white); } .h8-price-mobile-wrapper .tab_content { position: relative; padding: 50px 40px; background-color: var(--tj-color-theme-bg); z-index: 1; margin-top: 15px; } .h8-price-mobile-wrapper .tab_content .pricing-badge { position: absolute; top: 0; inset-inline-end: 0; padding: 9px 10px 10px 35px; font-size: 14px; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); line-height: 1; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 20% 100%); z-index: 1; } .h8-price-mobile-wrapper .tab_content .features { list-style: none; } .h8-price-mobile-wrapper .tab_content .features li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; font-size: 18px; color: var(--tj-color-common-black-3); } .h8-price-mobile-wrapper .tab_content .features li:not(:last-child) { margin-bottom: 18px; } .h8-price-mobile-wrapper .tab_content .features li i, .h8-price-mobile-wrapper .tab_content .features li svg { font-size: 18px; line-height: 1; -webkit-margin-end: 8px; margin-inline-end: 8px; margin-top: 5px; } .h8-price-mobile-wrapper .tab_content .features li.active { color: var(--tj-color-text-body); } .h8-price-mobile-wrapper .tab_content .features li.active i { color: var(--tj-color-theme-primary); } .h8-price-mobile-wrapper .tab_content .buttons { margin-top: 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 25px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-price-wrapper .price_tabs { max-width: 520px; } .h8-price-wrapper .price_tab_contents { max-width: calc(100% - 550px); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-price-wrapper .price_tabs { max-width: 490px; } .h8-price-wrapper .price_tabs .tab_item { padding: 40px 20px; } .h8-price-wrapper .price_tabs .tab_item .price { font-size: 65px; } .h8-price-wrapper .price_tab_contents { max-width: calc(100% - 520px); } .h8-price-wrapper .tab_content { padding: 50px 20px 50px 20px; } .h8-price-wrapper .tab_content .features li { font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-price-header { margin-bottom: 40px; } .h8-price-mobile-wrapper .tab_content .features li { font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-price-header { margin-bottom: 40px; gap: 25px; } .h8-price-mobile-wrapper .tab_item { padding: 40px 20px; } .h8-price-mobile-wrapper .tab_item .price { font-size: 60px; } .h8-price-mobile-wrapper .tab_content { padding: 50px 20px 50px 20px; } .h8-price-mobile-wrapper .tab_content .features li { font-size: 16px; } } @media (max-width: 575px) { .h8-price-mobile-wrapper .tab_item { padding: 30px 20px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; row-gap: 10px; -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } .h8-price-mobile-wrapper .tab_item .check_wrap { width: 100%; line-height: 1; } .h8-price-mobile-wrapper .tab_item .checkbox { width: 28px; height: 28px; } .h8-price-mobile-wrapper .tab_item .checkbox::after { inset-inline-start: 10px; top: 6px; } .h8-price-mobile-wrapper .tab_item .content { padding-top: 0; } .h8-price-mobile-wrapper .tab_item .content .title span { font-size: 12px; } .h8-price-mobile-wrapper .tab_item .content .desc { font-size: 14px; } .h8-price-mobile-wrapper .tab_item .price { font-size: 48px; -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: start; } .h8-price-mobile-wrapper .tab_item .price .period { font-size: 16px; -ms-flex-item-align: start; align-self: flex-start; line-height: 1; -webkit-padding-start: 12px; padding-inline-start: 12px; } .h8-price-mobile-wrapper .tab_content .pricing-badge { padding: 8px 10px 9px 35px; } .h8-price-mobile-wrapper .tab_content .features li:not(:last-child) { margin-bottom: 13px; } .h8-price-mobile-wrapper .tab_content .buttons { margin-top: 30px; gap: 20px; } } @-webkit-keyframes arrowLeftRight { 0% { -webkit-transform: translate(-20px, -50%) rotate(45deg); transform: translate(-20px, -50%) rotate(45deg); } 100% { -webkit-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } } @keyframes arrowLeftRight { 0% { -webkit-transform: translate(-20px, -50%) rotate(45deg); transform: translate(-20px, -50%) rotate(45deg); } 100% { -webkit-transform: translate(0, -50%) rotate(45deg); transform: translate(0, -50%) rotate(45deg); } } @-webkit-keyframes leftRight { 0% { -webkit-transform: translateX(-25px); transform: translateX(-25px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes leftRight { 0% { -webkit-transform: translateX(-25px); transform: translateX(-25px); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } /* !END: H8 Services CSS */ /* START: Process CSS */ .h8-process { overflow: hidden; } .h8-process-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; position: relative; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-process-inner { gap: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-process-inner { gap: 20px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h8-process-inner .process-line { position: absolute; width: 100%; height: 1px; background-color: var(--tj-color-border-2); top: 48px; inset-inline-start: 0; z-index: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-process-inner .process-line { width: 1px; height: 100%; top: 0px; inset-inline-start: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } .h8-process-inner .process-line-active { position: absolute; width: 33.333%; height: 100%; background-color: var(--tj-color-border-1); top: 0; inset-inline-start: 0; -webkit-transition: all 0.4s; transition: all 0.4s; z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-process-inner .process-line-active { width: 100%; height: 33.333%; } } .h8-process-inner .process-item.style-4 { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; z-index: 1; width: 33.33%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-process-inner .process-item.style-4 { width: 100%; } } .h8-process-inner .process-item.style-4::before { display: none; } .h8-process-inner .process-item.style-4 .process-index { margin: 0; max-width: 98px; width: 100%; height: 112px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-mask-image: url(../images/shapes/h8-process.svg); mask-image: url(../images/shapes/h8-process.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-theme-bg); position: relative; 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; margin-bottom: -1px; z-index: 1; -webkit-transition: all 0.4s; transition: all 0.4s; } @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) { .h8-process-inner .process-item.style-4 .process-index { max-width: 80px; height: 91px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-process-inner .process-item.style-4 .process-index { margin-bottom: -1px; } } .h8-process-inner .process-item.style-4 .process-index span { width: 68px; height: 68px; background-color: var(--tj-color-theme-dark); color: var(--tj-color-common-white); border-radius: 100%; font-size: 20px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 14px; -webkit-transition: all 0.4s; transition: all 0.4s; } @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) { .h8-process-inner .process-item.style-4 .process-index span { width: 62px; height: 62px; } } @media (max-width: 575px) { .h8-process-inner .process-item.style-4 .process-index span { font-size: 17px; margin-bottom: 10px; } } .h8-process-inner .process-item.style-4 .process-content { padding: 0; background-color: var(--tj-color-theme-bg); padding: 50px 30px; -webkit-transition: all 0.3s; transition: all 0.3s; } @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) { .h8-process-inner .process-item.style-4 .process-content { padding: 30px 25px; } } .h8-process-inner .process-item.style-4 .process-content .title { margin-bottom: 18px; letter-spacing: -0.025em; } .h8-process-inner .process-item.style-4 .process-content .desc { line-height: 1.5; margin-bottom: 35px; } @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) { .h8-process-inner .process-item.style-4 .process-content .desc { margin-bottom: 20px; } } .h8-process-inner .process-item.style-4 .process-content .service-button.text-btn { gap: 0; } .h8-process-inner .process-item.active .process-index { background-color: var(--tj-color-theme-primary); } .h8-process-inner .process-item.active .process-index span { background-color: var(--tj-color-common-white); color: var(--tj-color-theme-dark); } .h8-process-inner .process-item.active .process-content { background-color: var(--tj-color-theme-primary); } .h8-process-inner .process-item.active .process-content .title { color: var(--tj-color-common-white); } .h8-process-inner .process-item.active .process-content .desc { color: var(--tj-color-common-white); } .h8-process-inner .process-item.active .process-content .service-button { color: var(--tj-color-common-white); } .h8-process-inner .process-item.active .process-content .service-button::before { background-color: var(--tj-color-common-white); } /* !END: Process CSS */ /* START: Case Study CSS */ .h8-case-study { background-color: var(--tj-color-theme-dark); padding-top: 120px; padding-bottom: 120px; overflow: hidden; } .h8-case-study .sec-heading { max-width: 555px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } .h8-case-study .sec-heading .sec-title { color: var(--tj-color-common-white); } .h8-case-study-slider { overflow: inherit; } .h8-case-study-item { background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 15px 15px; } .h8-case-study-item .h8-case-study-banner { overflow: hidden; position: relative; } .h8-case-study-item .h8-case-study-banner img { mix-blend-mode: luminosity; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; position: relative; z-index: 0; } .h8-case-study-item .h8-case-study-banner .icon-btn { position: absolute; top: 50%; inset-inline-start: 50%; -webkit-transform: translate(-50%, -50%) scale(0.5); -ms-transform: translate(-50%, -50%) scale(0.5); transform: translate(-50%, -50%) scale(0.5); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 32px; font-weight: var(--tj-fw-regular); color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); width: 80px; height: 80px; padding: 3%; text-align: center; border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: -webkit-transform 0.4s ease-in-out; transition: -webkit-transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out; transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-case-study-item .h8-case-study-banner .icon-btn { width: 60px; height: 60px; font-size: 24px; } } .h8-case-study-item .h8-case-study-banner .icon-btn i { -webkit-transform: rotate(-45deg) translateX(0); -ms-transform: rotate(-45deg) translateX(0); transform: rotate(-45deg) translateX(0); text-shadow: -56px 0 0; } .h8-case-study-item .h8-case-study-banner .icon-btn:hover i { -webkit-transform: rotate(-45deg) translateX(56px); -ms-transform: rotate(-45deg) translateX(56px); transform: rotate(-45deg) translateX(56px); } .h8-case-study-item .h8-case-study-banner::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); opacity: 0; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .h8-case-study-item .h8-case-study-content { padding: 25px 15px 15px; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; } .h8-case-study-item .h8-case-study-content .title { margin-bottom: 0; max-width: 307px; } .h8-case-study-item .h8-case-study-content .title a { color: var(--tj-color-common-white); } .h8-case-study-item .h8-case-study-content .title:hover { letter-spacing: 0.026rem; } .h8-case-study-item .h8-case-study-category ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; row-gap: 12px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h8-case-study-item .h8-case-study-category ul li a { display: inline-block; color: var(--tj-color-common-white-2); background: transparent; font-size: 14px; border-radius: 40px; padding: 6px 10px; border: 1px solid var(--tj-color-border-1); line-height: 1; } .h8-case-study-item .h8-case-study-category ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .h8-case-study-item:hover .h8-case-study-banner img { -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } .h8-case-study-item:hover .h8-case-study-banner .icon-btn { -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); opacity: 1; visibility: visible; } .h8-case-study-item:hover .h8-case-study-banner::after { opacity: 0.6; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-case-study { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-case-study { padding-top: 80px; padding-bottom: 80px; } .h8-case-study .sec-heading { margin-bottom: 40px; } } /* !END: Case Study CSS */ /* START: Home 8 Testimonial CSS */ .h8-testimonial { background-color: var(--tj-color-theme-bg); overflow: hidden; position: relative; z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial { padding-bottom: 80px; } } .h8-testimonial-section-heading { margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-testimonial-section-heading { margin-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-testimonial-section-heading { margin-bottom: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial-section-heading { margin-bottom: 0; } } .h8-testimonial-section-heading-wrapper { padding: 120px 0 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h8-testimonial-section-heading-wrapper { padding: 100px 0 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h8-testimonial-section-heading-wrapper { padding: 80px 0 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial-section-heading-wrapper { max-width: 540px; padding: 80px 12px 40px; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } } .h8-testimonial-fanfact .counter-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; padding: 0; max-width: 361px; margin-bottom: 35px; margin-top: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h8-testimonial-fanfact .counter-item { margin-bottom: 15px; margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial-fanfact .counter-item { text-align: start; margin-bottom: 10px; margin-top: 10px; } } .h8-testimonial-fanfact .number { -ms-flex-negative: 0; flex-shrink: 0; color: var(--tj-color-theme-primary); -webkit-padding-end: 10px; padding-inline-end: 10px; position: relative; font-size: 72px; font-family: var(--tj-ff-heading); margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial-fanfact .number { font-size: 60px; } } .h8-testimonial-fanfact .number::after { content: ""; width: 1px; height: 69%; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%) translateX(50%); -ms-transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%); background-color: var(--tj-color-border-2); } .h8-testimonial-fanfact .sub-title { line-height: 1.5; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial .container { max-width: 100%; --bs-gutter-x: 0; } .h8-testimonial .container .row { --bs-gutter-x: 0; } } .h8-testimonial-slider { height: 783px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial-slider { height: auto; margin-bottom: 24px; } } .h8-testimonial-slider .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .h8-testimonial-slider .swiper-slide { height: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-testimonial-slider .swiper-slide { width: 400px; } } .h8-testimonial-item { padding: 35px 30px 35px 30px; background-color: var(--tj-color-common-white); } @media (max-width: 575px) { .h8-testimonial-item { padding: 30px 20px; } } .h8-testimonial-item .tj-testimonial-author { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .h8-testimonial-item .tj-testimonial-author .author-images { -webkit-mask-image: url(../images/shapes/h6-test-shape.svg); mask-image: url(../images/shapes/h6-test-shape.svg); background: var(--tj-color-theme-bg); width: 90px; height: 110px; margin-bottom: -40px; } .h8-testimonial-item .tj-testimonial-author .author-images img { top: 12px; inset-inline-end: 8px; -webkit-transform: unset; -ms-transform: unset; transform: unset; width: 75px; height: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-testimonial-item .tj-testimonial-author .author-text .author-name { font-size: 20px; } } .h8-testimonial-item .tj-testimonial-author .sub-title { color: var(--tj-color-common-black-2); } .h8-testimonial-item .author-rating { background: var(--tj-color-theme-bg); display: inline-block; padding: 2px 10px 4px; border-radius: 32px; } .h8-testimonial-item .author-rating .star-ratings { color: var(--tj-color-theme-primary); -webkit-text-stroke: 1px var(--tj-color-theme-primary); } .h8-testimonial-item .author-rating .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); } .h8-testimonial-item .author-rating .star-ratings .empty-ratings { color: transparent; } .h8-testimonial-item .testimonial-content { -webkit-padding-start: 0; padding-inline-start: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .h8-testimonial-item .testimonial-content .desc { max-width: 100%; font-size: 18px; border-bottom-style: dashed; padding-bottom: 25px; } @media (max-width: 575px) { .h8-testimonial-item .testimonial-content .desc { font-size: 16px; } } .tj-gap-30 { --bs-gutter-x: 30px; } @media (max-width: 575px) { .tj-gap-30 { --bs-gutter-x: 24px; } } .tj-gap-30 .row { --bs-gutter-x: 30px; } @media (max-width: 575px) { .tj-gap-30 .row { --bs-gutter-x: 24px; } } /* START: Home 8 Testimonial CSS */ /* START: Header CSS */ .tj-header-area.header-9 { background-color: var(--tj-color-common-white); } .tj-header-area.header-9 .header-bottom { -webkit-padding-start: 18px; padding-inline-start: 18px; -webkit-padding-end: 18px; padding-inline-end: 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-9 .header-bottom { -webkit-padding-start: 0; padding-inline-start: 0; -webkit-padding-end: 0; padding-inline-end: 0; } } .tj-header-area.header-9 .mainmenu > ul { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-9 .mainmenu > ul { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .tj-header-area.header-9 .mainmenu > ul > li > a { color: var(--tj-color-heading-primary); -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-9 .mainmenu > ul > li > a { -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-9 .mainmenu > ul > li > a { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .tj-header-area.header-9 .mainmenu > ul > li > a::after { display: none; } .tj-header-area.header-9 .mainmenu > ul > li > a::before { content: ""; width: 4px; height: 4px; border-radius: 100%; background-color: var(--tj-color-border-2); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-header-area.header-9 .mainmenu > ul > li > a:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-9 .mainmenu > ul > li.current-menu-ancestor > a, .tj-header-area.header-9 .mainmenu > ul > li.current-menu-item > a, .tj-header-area.header-9 .mainmenu > ul > li:hover > a { color: var(--tj-color-theme-primary); } .tj-header-area.header-9 .mainmenu > ul > li.current-menu-ancestor > a::before, .tj-header-area.header-9 .mainmenu > ul > li.current-menu-item > a::before, .tj-header-area.header-9 .mainmenu > ul > li:hover > a::before { background-color: var(--tj-color-theme-primary); } .tj-header-area.header-9 .tj-primary-btn { padding: 5px; } .tj-header-area.header-9 .tj-primary-btn .btn_inner { padding: 12px 18px 12px 50px; } .tj-header-area.header-9 .tj-primary-btn .btn_inner::before { width: 40px; } .tj-header-area.header-9 .tj-primary-btn .btn_inner .btn_icon { min-width: 40px; font-size: 1.4em; } .tj-header-area.header-9 .tj-primary-btn:hover .btn_inner::before { width: 100%; } .tj-header-area.header-9 .header_search { color: var(--tj-color-heading-primary); } .tj-header-area.header-9 .header_search i { color: var(--tj-color-heading-primary); } .tj-header-area.header-9 .header_search:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-9 .header_search:hover i { color: var(--tj-color-theme-primary); } .tj-header-area.header-9 .header_right_info { -webkit-column-gap: 0; -moz-column-gap: 0; column-gap: 0; } .tj-header-area.header-9 .header_right_info > *:not(:last-child) { -webkit-padding-end: 15px; padding-inline-end: 15px; -webkit-margin-end: 14px; margin-inline-end: 14px; position: relative; } .tj-header-area.header-9 .header_right_info > *:first-child::after { content: ""; position: absolute; inset-inline-end: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); height: 16px; width: 1px; background-color: var(--tj-color-border-2); } .tj-header-area.header-9 .header_right_info .header_contact { font-weight: var(--tj-fw-bold); color: var(--tj-color-heading-primary); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 8px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .tj-header-area.header-9 .header_right_info .header_contact i { font-size: 17px; margin-top: 3px; } .tj-header-area.header-9 .header_right_info .header_contact:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-9.header-duplicate { -webkit-box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.08); box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.08); } .tj-header-area.header-9.header-duplicate .header_search { color: var(--tj-color-heading-primary); } .tj-header-area.header-9.header-duplicate .header_search i { color: var(--tj-color-heading-primary); } .tj-header-area.header-9.header-duplicate .header_search:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-9.header-duplicate .header_search:hover i { color: var(--tj-color-theme-primary); } .tj-header-area.header-9.header-duplicate .menu_btn .cubes span { border-color: var(--tj-color-theme-dark); } .tj-header-area.header-9.header-duplicate .menu_btn .cubes span:nth-child(2) { -webkit-box-shadow: inset 0 0 0 2px var(--tj-color-theme-dark); box-shadow: inset 0 0 0 2px var(--tj-color-theme-dark); } .tj-header-area .header-9-topbar { background-color: var(--tj-color-theme-dark); padding: 0; -webkit-transition: all 0.3s; transition: all 0.3s; overflow: hidden; } .tj-header-area .header-9-topbar .header-topbar_wrap { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; padding: 14px 45px; } .tj-header-area .header-9-topbar .header-topbar_wrap .topbar_note { color: var(--tj-color-common-white-2); } .tj-header-area .header-9-topbar .header-topbar_wrap a { color: var(--tj-color-common-white); } .tj-header-area .header-9-topbar .header-topbar-toggler { position: absolute; top: 50%; inset-inline-end: 34px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area .header-9-topbar .header-topbar-toggler { inset-inline-end: 24px; } } .tj-header-area .header-9-topbar .header-topbar-toggler svg path { stroke: var(--tj-color-common-white); } .tj-header-area .header-9-topbar .header-topbar-toggler:hover { -webkit-transform: translateY(-50%) rotate(90deg); -ms-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); } /* !END: Header CSS */ /* START: Footer CSS */ .h9-footer { z-index: 3; } .h9-footer .footer-top-area { padding-top: 90px; padding-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-footer .footer-top-area { padding: 80px 0; } } .h9-footer-widget-2 { -webkit-padding-start: 45px; padding-inline-start: 45px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h9-footer-widget-2 { -webkit-padding-start: 73px; padding-inline-start: 73px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-footer-widget-2 { -webkit-padding-start: 65px; padding-inline-start: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-footer-widget-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-footer-widget-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } @media (max-width: 575px) { .h9-footer-widget-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } .h9-footer-widget-3 { -webkit-padding-start: 40px; padding-inline-start: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-footer-widget-3 { -webkit-padding-start: 15px; padding-inline-start: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-footer-widget-3 { -webkit-padding-start: 0; padding-inline-start: 0; } } .h9-footer-widget-4 { -webkit-margin-start: auto; margin-inline-start: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-footer-widget-4 { -webkit-margin-start: 0; margin-inline-start: 0; } } .h9-footer-img { height: 100%; width: 100%; } .h9-footer-img-wrapper { position: absolute; inset-inline-start: 0; bottom: 84px; width: 38%; height: 677px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-footer-img-wrapper { height: 539px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-footer-img-wrapper { position: static; width: 100%; height: 332px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-footer-img { height: 100%; width: 100%; } } .h9-footer-img img { height: 100%; -o-object-fit: cover; object-fit: cover; width: auto; width: 100%; } .h9-footer .backtop { right: 20px; bottom: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-footer .backtop { bottom: 165px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-footer .backtop { width: 45px; height: 45px; bottom: 180px; } } /* !END: Footer CSS */ .sec-heading.h9-section-heading.sec-heading-centered { max-width: 555px; width: 100%; text-align: center; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .sec-heading.h9-section-heading.sec-heading-centered { margin-bottom: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sec-heading.h9-section-heading.sec-heading-centered { margin-bottom: 40px; } } .sec-heading.h9-section-heading .sub-title { padding: 0; margin-bottom: 20px; background-color: transparent; } .sec-heading.h9-section-heading .sub-title::before, .sec-heading.h9-section-heading .sub-title::after { display: none; } .tj-gap-0 { --bs-gutter-x: 0; } .tj-gap-0 .row { --bs-gutter-x: 0; } /* START: Hero CSS */ .h9-hero { position: relative; overflow: hidden; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero .container { max-width: 100%; } } .h9-hero::before, .h9-hero::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; background: var(--tj-color-theme-dark) url("../images/hero/h9-hero-bg.webp") no-repeat center; background-size: cover; height: 100%; width: 50%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero::before, .h9-hero::after { display: none; } } .h9-hero::after { background: var(--tj-color-theme-primary); inset-inline-start: 50%; } .h9-hero-wrapper { position: relative; } .h9-hero-wrapper::after { content: ""; width: 50%; height: 283px; position: absolute; inset-inline-end: 0; bottom: 0; z-index: 3; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 117, 255, 0)), to(#0075ff)); background: linear-gradient(180deg, rgba(0, 117, 255, 0) 0%, #0075ff 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) { .h9-hero-wrapper::after { width: 100%; } } .h9-hero-marquee-wrapper { position: absolute; inset-inline-end: 0; top: 0; width: 50%; overflow: hidden; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-marquee-wrapper { width: 100%; top: 50%; } } .h9-hero-content { min-height: 770px; max-width: 643px; width: 100%; padding-top: 0; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; height: 100%; z-index: 1; padding: 80px 0 80px 12px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-content-wrapper { background: var(--tj-color-theme-dark) url("../images/hero/h9-hero-bg.webp") no-repeat center; background-size: cover; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-hero-content { max-width: 450px; min-height: 650px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-content { max-width: 100%; min-height: auto; padding: 70px 0 70px 12px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-hero-content { max-width: 720px; margin: 0 auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-hero-content { max-width: 540px; margin: 0 auto; } } @media (max-width: 575px) { .h9-hero-content { min-height: auto; padding: 60px 0 60px 12px; } } .h9-hero-content .hero-sub-title { padding: 0 14px; margin-bottom: 20px; background-color: transparent; display: inline-block; font-size: 14px; font-weight: var(--tj-fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tj-color-theme-primary); position: relative; line-height: 1; } .h9-hero-content .hero-sub-title::before, .h9-hero-content .hero-sub-title::after { position: absolute; display: block; content: "["; width: auto; height: auto; border-radius: 0; top: 50%; inset-inline-start: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: transparent; } .h9-hero-content .hero-sub-title::after { content: "]"; inset-inline-start: auto; inset-inline-end: 0; } .h9-hero-content .hero-title { color: var(--tj-color-common-white); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 20px; } .h9-hero-content .hero-title .active-color { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-content .hero-title { font-size: 45px; } } .h9-hero-content .desc { font-size: 18px; color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); max-width: 524px; width: 100%; line-height: 1.5; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-hero-content .desc { max-width: 433px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-hero-content .desc { max-width: 100%; } } .h9-hero-content .desc p:last-child { margin-bottom: 0; } .h9-hero-action { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-action { margin-top: 25px; } } .h9-hero-action .text-btn { color: var(--tj-color-common-white); } .h9-hero-action .text-btn::before { background-color: var(--tj-color-common-white); } .h9-hero-action .hero-button { background-color: var(--tj-color-common-white); } .h9-hero-action .hero-button .btn_text { color: var(--tj-color-heading-primary); } .h9-hero-banner { position: absolute; inset-inline-end: 11%; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; max-width: 780px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-banner-wrapper { background: var(--tj-color-theme-primary); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .h9-hero-banner-wrapper { padding: 60px 0 0; } } @media (max-width: 575px) { .h9-hero-banner-wrapper { padding: 50px 0 0; } } .h9-hero-banner img { position: relative; z-index: 2; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-hero-banner { inset-inline-end: -2%; max-width: 616px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-hero-banner { inset-inline-end: -2%; max-width: 513px; 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) { .h9-hero-banner { max-width: 480px; position: relative; width: 100%; inset-inline-end: 0; -webkit-transform: none; -ms-transform: none; transform: none; margin: 0 auto; } } @media (max-width: 575px) { .h9-hero-banner { max-width: 100%; } } .h9-hero-chart { position: relative; max-width: 270px; width: 100%; } .h9-hero-chart-wrapper { position: absolute; inset-inline-end: 0; bottom: 96px; -webkit-transform: translateX(26%) rotate(8deg); -ms-transform: translateX(26%) rotate(8deg); transform: translateX(26%) rotate(8deg); z-index: 4; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-hero-chart-wrapper { -webkit-transform: translateX(-42%) rotate(8deg); -ms-transform: translateX(-42%) rotate(8deg); transform: translateX(-42%) rotate(8deg); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-hero-chart-wrapper { -webkit-transform: translateX(-28%) rotate(8deg); -ms-transform: translateX(-28%) rotate(8deg); transform: translateX(-28%) rotate(8deg); bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-hero-chart-wrapper { -webkit-transform: translateX(5%) rotate(8deg); -ms-transform: translateX(5%) rotate(8deg); transform: translateX(5%) rotate(8deg); bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-hero-chart-wrapper { -webkit-transform: translateX(-28%) rotate(8deg); -ms-transform: translateX(-28%) rotate(8deg); transform: translateX(-28%) rotate(8deg); bottom: 50px; } } @media (max-width: 575px) { .h9-hero-chart-wrapper { -webkit-transform: translateX(-28%) rotate(8deg); -ms-transform: translateX(-28%) rotate(8deg); transform: translateX(-28%) rotate(8deg); bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .h9-hero-chart { max-width: 250px; } } @media (max-width: 575px) { .h9-hero-chart { max-width: 180px; } } .h9-hero-chart::after, .h9-hero-chart::before { content: ""; width: 100%; height: 100%; position: absolute; inset-inline-start: 9px; bottom: 9px; background-color: var(--tj-color-common-white); opacity: 0.3; z-index: -1; } .h9-hero-chart::after { inset-inline-start: 18px; bottom: 18px; opacity: 0.15; z-index: -2; } /* !END: Hero CSS */ /* START: H6 Marquee CSS */ .h9-hero-marquee { padding: 82px 0; } .h9-hero-marquee .marquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .h9-hero-marquee .marquee-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 33px; -webkit-padding-end: 33px; padding-inline-end: 33px; } .h9-hero-marquee .marquee-item .marquee-title .text { color: var(--tj-color-common-white); font-size: 162px; line-height: 1; font-weight: var(--tj-fw-bold); text-transform: uppercase; opacity: 0.14; } .h9-hero-marquee .marquee-item .marquee-icons { max-width: 51px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h9-hero-marquee .marquee-item .marquee-title .text { font-size: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-hero-marquee .marquee-item .marquee-title .text { font-size: 130px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-marquee .marquee-item { gap: 20px; -webkit-padding-end: 20px; padding-inline-end: 20px; } .h9-hero-marquee .marquee-item .marquee-title .text { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-hero-marquee { padding: 50px 0; } } /* !END: H6 Marquee CSS */ /* START: H9 Services CSS */ .h9-services-section { overflow: hidden; } .h9-services-section .sec-heading { max-width: 555px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } .h9-services-section .sec-heading .sec-title { letter-spacing: -0.025em; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-services-section .sec-heading { margin-bottom: 40px; } } .h9-services-slider .swiper_pagination { margin-top: 60px; } .h9-services-item-inner { position: relative; z-index: 1; background-color: var(--tj-color-theme-bg); overflow: hidden; padding: 30px; } .h9-services-item-inner .service-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: 80px; height: 80px; font-size: 62px; line-height: 1; border-radius: 50%; color: var(--tj-color-theme-primary); background-color: var(--tj-color-common-white); margin-bottom: 25px; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .h9-services-item-inner .service-icon i { -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .h9-services-item-inner .number { position: absolute; top: 30px; inset-inline-end: 30px; font-size: 16px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .h9-services-item-inner .service-content { position: relative; z-index: 1; } .h9-services-item-inner .service-content .title { max-width: 250px; margin: 0; line-height: 1.3; letter-spacing: -0.025em; margin-bottom: 20px; } .h9-services-item-inner .service-content .title a:hover { color: var(--tj-color-theme-primary); } .h9-services-item-inner .service-content .check-list-one { padding: 25px 0 6px; border-top: 1px solid var(--tj-color-border-2); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 390px) { .h9-services-item-inner { padding: 30px 20px; } } .h9-services-item .service-btn { background-color: var(--tj-color-theme-dark); width: 100%; padding: 17px 15px 20px; margin: 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .h9-services-item .service-btn .text-btn { color: var(--tj-color-common-white); } .h9-services-item .service-btn .text-btn::before { background-color: var(--tj-color-common-white); } .h9-services-item .service-btn:hover .text-btn::before { -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left; -webkit-transform: scaleX(1); -ms-transform: scaleX(1); transform: scaleX(1); } .h9-services-item:hover .h9-services-item-inner .service-icon { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .h9-services-item:hover .service-btn { background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-services-slider .swiper_pagination { margin-top: 40px; } } /* END: H9 Services CSS */ /* START: Process CSS */ .h9-process { overflow: hidden; } .h9-process-inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 30px; position: relative; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-process-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 80px; } } .h9-process-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; z-index: 1; width: 27%; background-color: var(--tj-color-theme-bg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-process-item { width: 29%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-process-item { width: 100%; } } .h9-process-item::before { display: none; } .h9-process-item .process-img { margin: 0; max-width: 220px; width: 100%; height: 250px; -ms-flex-negative: 0; flex-shrink: 0; -webkit-mask-image: url(../images/shapes/about-mark-2.svg); mask-image: url(../images/shapes/about-mark-2.svg); -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-common-white); position: relative; 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; margin-top: -1px; z-index: 1; -webkit-transition: all 0.4s; transition: all 0.4s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-process-item .process-img { max-width: 175px; height: 200px; } } .h9-process-item .process-img img { max-width: 202px; height: 203px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; margin-top: 27px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-process-item .process-img img { max-width: 160px; height: 161px; border-radius: 50%; margin-top: 22px; } } .h9-process-item .process-content { padding: 0 25px 44px; text-align: center; position: relative; z-index: 2; margin-top: -35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-process-item .process-content { padding: 0 20px 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-process-item .process-content { padding: 0 18px 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-process-item .process-content { padding: 0 20px 35px; } } .h9-process-item .process-content .step { width: 64px; height: 64px; background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border: 6px solid var(--tj-color-common-white); border-radius: 100%; font-size: 20px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 6px; margin-bottom: 20px; -webkit-transition: all 0.4s; transition: all 0.4s; } @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) { .h9-process-item .process-content .step { width: 62px; height: 62px; } } @media (max-width: 575px) { .h9-process-item .process-content .step { font-size: 17px; margin-bottom: 15px; } } .h9-process-item .process-content .title { margin-bottom: 16px; letter-spacing: -0.025em; } @media (max-width: 575px) { .h9-process-item .process-content .title { margin-bottom: 10px; } } .h9-process-item .process-content .desc { line-height: 1.5; } .h9-process-item .process-content .desc p:last-child { margin-bottom: 0; } .h9-process-item .step-text { -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--tj-color-border-2); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 48px; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; writing-mode: sideways-lr; line-height: 0.9; letter-spacing: -0.03em; position: absolute; top: 50%; right: -82px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-process-item .step-text { font-size: 44px; right: -75px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-process-item .step-text { font-size: 35px; right: -47px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-process-item .step-text { -webkit-writing-mode: unset; -ms-writing-mode: unset; writing-mode: unset; font-size: 40px; top: inherit; bottom: -60px; right: 50%; -webkit-transform: translate(50%, 0); -ms-transform: translate(50%, 0); transform: translate(50%, 0); } } /* !END: Process CSS */ /* START: About CSS */ .h9-about { position: relative; background-color: var(--tj-color-theme-bg); } .h9-about.section-space { padding-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-about.section-space { padding-bottom: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about.section-space { padding-bottom: 0; } } .h9-about .sec-heading.style-4 + .desc { margin-top: 16px; } .h9-about-wrapper { -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-about-wrapper { gap: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .h9-about .about-wrapper-four .about-images-group-three { max-width: 647px; } .h9-about .about-wrapper-four .about-images-group-three::after { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about .about-wrapper-four .about-images-group-three { width: 100%; max-width: 100%; } .h9-about .about-wrapper-four .about-images-group-three img { width: 100%; } } .h9-about-content { position: static; padding-top: 110px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-about-content { -webkit-margin-start: 30px; margin-inline-start: 30px; padding-top: 90px; margin-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-about-content { padding-top: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about-content { max-width: 100%; padding-top: 80px; } } .h9-about-content .btn-area { margin-top: 26px; } .h9-about-list { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px 20px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-top: 25px; } .h9-about-list-item { max-width: 240px; -webkit-padding-end: 20px; padding-inline-end: 20px; -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); color: var(--tj-color-common-black-2); } .h9-about-list-item:last-child { padding: 0; border: 0; } @media (max-width: 575px) { .h9-about-list-item { max-width: 100%; -webkit-padding-end: 0; padding-inline-end: 0; padding-bottom: 15px; -webkit-border-end: 0; border-inline-end: 0; border-bottom: 1px solid var(--tj-color-border-2); } } .h9-about-list-title { margin-bottom: 10px; } .h9-about-list-desc { margin-bottom: 0; } .h9-about-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-about-bottom { width: 100%; margin-top: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about-bottom { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-top: 30px; } } .h9-about-bottom-left { padding: 120px 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-about-bottom-left { padding: 100px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about-bottom-left { padding: 35px 0 40px; } } .h9-about-statistics { position: relative; -webkit-margin-start: auto; margin-inline-start: auto; } .h9-about-statistics > img { height: auto; -o-object-fit: cover; object-fit: cover; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-about-statistics { -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; } } @media (max-width: 575px) { .h9-about-statistics { width: 100%; text-align: end; } .h9-about-statistics > img { width: calc(100% - 69px); -webkit-margin-start: auto; margin-inline-start: auto; } } .h9-about-circle { inset-inline-end: auto; inset-inline-start: 0; } .h9-about-circle .circle-wrap { inset-inline-end: auto; inset-inline-start: 0; -webkit-transform: translateY(-50%) translateX(-50%); -ms-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); background-color: var(--tj-color-common-white); border: 9px solid var(--tj-color-theme-bg); -webkit-box-sizing: content-box; box-sizing: content-box; } @media (max-width: 575px) { .h9-about-circle .circle-wrap { -webkit-transform: translateY(-50%) translateX(0); -ms-transform: translateY(-50%) translateX(0); transform: translateY(-50%) translateX(0); } } /* !END: About CSS */ /* START: Counter CSS */ .h9-counter-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h9-counter-wrapper { gap: 16px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-counter-wrapper { gap: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-counter-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } } @media (max-width: 575px) { .h9-counter-wrapper { -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; gap: 30px; } } .h9-counter-item { position: relative; width: 100%; max-width: 224px; padding: 0; -webkit-padding-start: 20px; padding-inline-start: 20px; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h9-counter-item { -webkit-padding-start: 16px; padding-inline-start: 16px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-counter-item { -webkit-padding-start: 15px; padding-inline-start: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-counter-item { -webkit-padding-start: 15px; padding-inline-start: 15px; max-width: 224px; } } @media (max-width: 575px) { .h9-counter-item { -webkit-padding-start: 15px; padding-inline-start: 15px; max-width: 200px; } } .h9-counter-item::before { position: absolute; content: ""; width: 4px; height: 42%; top: 30%; inset-inline-start: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tj-color-theme-primary); z-index: 2; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-counter-item::before { height: 36%; top: 25%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-counter-item::before { height: 33%; top: 23%; } } .h9-counter-item .number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--tj-color-heading-primary); font-family: var(--tj-ff-heading); font-size: 70px; font-weight: var(--tj-fw-sbold); position: relative; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-counter-item .number { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-counter-item .number { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-counter-item .number { font-size: 44px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-counter-item .number { font-size: 40px; } } .h9-counter-item .number span { line-height: 1; font-family: inherit; } .h9-counter-item .sub-title { line-height: 1.5; display: block; -webkit-margin-start: 10px; margin-inline-start: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-counter-item .sub-title { -webkit-margin-start: 5px; margin-inline-start: 5px; } } /* !END: Counter CSS */ /* START: H9 Blog CSS */ .h9-blog-item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background-color: var(--tj-color-theme-bg); z-index: 1; } .h9-blog-item:not(:last-child) { margin-bottom: 30px; } .h9-blog-item .blog_content_wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; max-width: calc(100% - 512px); width: 100%; padding: 30px; gap: 30px; } .h9-blog-item .blog_content_wrap .blog_content { max-width: 500px; width: 100%; padding-top: 30px; } .h9-blog-item .blog_content_wrap .blog_content .blog_title { margin: 0; } .h9-blog-item .blog_content_wrap .blog_content .blog_title a:hover { color: var(--tj-color-theme-primary); } .h9-blog-item .blog_content_wrap .blog_content .excerpt { margin-top: 12px; } .h9-blog-item .blog_content_wrap .blog_content .blog-two-meta { margin-top: 40px; } .h9-blog-item .blog_img { max-width: 512px; width: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; } .h9-blog-item .blog-date { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); gap: 10px; padding: 22px 25px; } .h9-blog-item .blog-date .day { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 35px; line-height: 1; letter-spacing: -0.03em; } .h9-blog-item .blog-date .month { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 15px; text-transform: uppercase; line-height: 1; letter-spacing: 0.24em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-blog-item .blog_content_wrap { max-width: calc(100% - 470px); gap: 20px; } .h9-blog-item .blog_content_wrap .blog_content { max-width: 470px; } .h9-blog-item .blog_img { max-width: 470px; } .h9-blog-item .blog-date { padding: 20px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-blog-item .blog_content_wrap { max-width: calc(100% - 420px); gap: 20px; } .h9-blog-item .blog_content_wrap .blog_content { max-width: 100%; padding-top: 0; } .h9-blog-item .blog_img { max-width: 420px; } .h9-blog-item .blog-date { padding: 20px 20px; position: absolute; inset-inline-end: 15px; top: 15px; z-index: 2; } .h9-blog-item .blog-date .day { font-size: 28px; } .h9-blog-item .blog-date .month { letter-spacing: 0.14em; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-blog-item .blog_content_wrap { max-width: calc(100% - 320px); gap: 20px; } .h9-blog-item .blog_content_wrap .blog_content { max-width: 100%; padding-top: 0; } .h9-blog-item .blog_content_wrap .blog_content .blog_title { font-size: 21px; } .h9-blog-item .blog_content_wrap .blog_content .blog-two-meta { margin-top: 30px; } .h9-blog-item .blog_img { max-width: 320px; } .h9-blog-item .blog-date { padding: 15px 17px; position: absolute; inset-inline-end: 15px; top: 15px; z-index: 2; gap: 8px; } .h9-blog-item .blog-date .day { font-size: 25px; } .h9-blog-item .blog-date .month { letter-spacing: 0.14em; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-blog-item { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .h9-blog-item .blog_content_wrap { max-width: 100%; } .h9-blog-item .blog_content_wrap .blog_content { max-width: 100%; padding-top: 0; } .h9-blog-item .blog_content_wrap .blog_content .blog-two-meta { margin-top: 30px; } .h9-blog-item .blog_img { max-width: 100%; min-height: 300px; } .h9-blog-item .blog-date { padding: 15px 17px; position: absolute; inset-inline-end: 15px; top: 15px; z-index: 2; gap: 8px; } .h9-blog-item .blog-date .day { font-size: 25px; } .h9-blog-item .blog-date .month { letter-spacing: 0.14em; } } @media (max-width: 575px) { .h9-blog-item .blog_content_wrap .blog_content .blog_title { font-size: 20px; } .h9-blog-item .blog_content_wrap .blog_content .blog-two-meta { margin-top: 25px; } .h9-blog-item .blog_img { min-height: 275px; } } /* !END: H9 Blog CSS */ /* START: H9 Contact CSS */ .h9-contact-section { padding-top: 120px; margin-bottom: 68px; background-color: var(--tj-color-theme-primary); position: relative; z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; } .h9-contact-section::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: rgba(5, 18, 41, 0.6); z-index: -1; } .h9-contact-section .sec-heading { max-width: 534px; width: 100%; margin: 0; } .h9-contact-section .sec-heading .sub-title { color: var(--tj-color-theme-primary); } .h9-contact-section .sec-heading .sec-title { color: var(--tj-color-common-white); } .h9-contact-section .sec-heading .desc { max-width: 503px; width: 100%; color: var(--tj-color-common-white-2); } .h9-contact-section .sec-heading .video-btn-wrap { margin-bottom: 0; } .h9-contact-section .sec-heading .video-btn-wrap .video-btn { gap: 15px; } .h9-contact-section .sec-heading .video-btn-wrap .video-btn .play-btn { width: 70px; height: 70px; font-size: 25px; } .h9-contact-section .sec-heading .video-btn-wrap .video-btn .play-btn i, .h9-contact-section .sec-heading .video-btn-wrap .video-btn .play-btn svg { -webkit-margin-start: 0; margin-inline-start: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-contact-section .sec-heading { max-width: 100%; } .h9-contact-section .sec-heading .desc { max-width: 100%; } } .h9-contact-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .h9-contact-wrapper .h9-contact-form_wrap { max-width: 630px; margin-bottom: -68px; } .h9-contact-form_wrap { width: 100%; background-color: var(--tj-color-common-white); padding: 60px 0 0 0; } .h9-contact-form_wrap .form_title { max-width: 505px; width: 100%; margin-bottom: 40px; padding: 0 50px; } .h9-contact-form_wrap .form .form-group { margin-bottom: 30px; } .h9-contact-form_wrap .form .row { padding: 0 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-contact-section .sec-heading { max-width: 485px; } .h9-contact-wrapper .h9-contact-form_wrap { max-width: 590px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-contact-section { padding-top: 100px; } .h9-contact-section .sec-heading { max-width: 460px; } .h9-contact-wrapper .h9-contact-form_wrap { max-width: 445px; } .h9-contact-form_wrap { padding: 50px 0 0 0; } .h9-contact-form_wrap .form_title { padding: 0 30px; } .h9-contact-form_wrap .form .row { padding: 0 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-contact-section { padding-top: 80px; padding-bottom: 80px; margin-bottom: 0; } .h9-contact-wrapper { gap: 60px; } .h9-contact-wrapper .h9-contact-form_wrap { max-width: 100%; margin-bottom: 0; } .h9-contact-form_wrap { padding: 50px 0 0 0; } .h9-contact-form_wrap .form_title { padding: 0 30px; } .h9-contact-form_wrap .form .row { padding: 0 30px; } } @media (max-width: 575px) { .h9-contact-section .sec-heading .video-btn-wrap .video-btn .play-btn { width: 50px; height: 50px; font-size: 18px; } .h9-contact-section .sec-heading .video-btn-wrap .video-btn .play-btn i, .h9-contact-section .sec-heading .video-btn-wrap .video-btn .play-btn svg { -webkit-margin-start: 0; margin-inline-start: 0; } .h9-contact-wrapper { gap: 50px; } .h9-contact-form_wrap { padding: 40px 0 0 0; } .h9-contact-form_wrap .form_title { padding: 0 20px; } .h9-contact-form_wrap .form .row { padding: 0 2cqh; } } .video-btn-wrap.style-2 { margin: 0; } .video-btn-wrap.style-2 .video-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; gap: 15px; } .video-btn-wrap.style-2 .video-btn .play-btn { width: 70px; height: 70px; font-size: 25px; } .video-btn-wrap.style-2 .video-btn .play-btn i, .video-btn-wrap.style-2 .video-btn .play-btn svg { -webkit-margin-start: 0; margin-inline-start: 0; } @media (max-width: 575px) { .video-btn-wrap.style-2 .video-btn .play-btn { width: 50px; height: 50px; font-size: 18px; } .video-btn-wrap.style-2 .video-btn .play-btn i, .video-btn-wrap.style-2 .video-btn .play-btn svg { -webkit-margin-start: 0; margin-inline-start: 0; } } .form-group { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox]), .form-group textarea, .form-group .nice-select { width: 100%; border: 1px solid var(--tj-color-border-2); color: var(--tj-color-text-body); background-color: var(--tj-color-common-white); outline: none; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; padding: 10px 15px; border-radius: 0; -webkit-transition: 0.3s; transition: 0.3s; } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .form-group textarea::-webkit-input-placeholder, .form-group .nice-select::-webkit-input-placeholder { color: var(--tj-color-text-body); } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .form-group textarea::-moz-placeholder, .form-group .nice-select::-moz-placeholder { color: var(--tj-color-text-body); } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .form-group textarea:-ms-input-placeholder, .form-group .nice-select:-ms-input-placeholder { color: var(--tj-color-text-body); } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .form-group textarea::-ms-input-placeholder, .form-group .nice-select::-ms-input-placeholder { color: var(--tj-color-text-body); } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .form-group textarea::placeholder, .form-group .nice-select::placeholder { color: var(--tj-color-text-body); } .form-group input:not([type=submit]):not([type=radio]):not([type=checkbox]):focus, .form-group textarea:focus, .form-group .nice-select:focus { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-bg); } .form-group textarea { height: 215px; } .form-group .nice-select { height: 48px; line-height: 1.6; } .form-group .nice-select::after { display: none; } .form-group .nice-select::before { position: absolute; content: "\e91a"; font-family: "solvior-icons"; top: 17px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); inset-inline-end: 13px; font-size: 16px; line-height: 1; color: var(--tj-color-theme-dark); } .form-group .nice-select .list { width: 100%; border-radius: 0; } .form-group .nice-select.open::before { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .form-button button[type=submit], .form-button input[type=submit] { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; background-color: var(--tj-color-theme-primary); -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 20px; line-height: 1; letter-spacing: -0.025em; color: var(--tj-color-common-white); padding: 24px 20px; } .form-button button[type=submit] i, .form-button button[type=submit] svg, .form-button input[type=submit] i, .form-button input[type=submit] svg { font-size: 18px; -webkit-transition: 0.4s; transition: 0.4s; } .form-button button[type=submit]:hover i, .form-button button[type=submit]:hover svg, .form-button input[type=submit]:hover i, .form-button input[type=submit]:hover svg { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } @media only screen and (min-width: 576px) and (max-width: 767px) { .form-button button[type=submit], .form-button input[type=submit] { font-size: 18px; } .form-button button[type=submit] i, .form-button button[type=submit] svg, .form-button input[type=submit] i, .form-button input[type=submit] svg { font-size: 16px; } } @media (max-width: 575px) { .form-button button[type=submit], .form-button input[type=submit] { font-size: 16px; } .form-button button[type=submit] i, .form-button button[type=submit] svg, .form-button input[type=submit] i, .form-button input[type=submit] svg { font-size: 15px; } } /* !END: H9 Contact CSS */ /* START: H9 Team CSS */ .h9-team-section .sec-heading .more_team { margin-top: 30px; } .h9-team-item { background-color: var(--tj-color-theme-bg); } .h9-team-item .team_image img { width: 100%; } .h9-team-item .team_content { padding: 20px 30px 25px 30px; } .h9-team-item .team_content .name { margin: 0; } .h9-team-item .team_content .name a:hover { color: var(--tj-color-theme-primary); } .h9-team-item .team_content .designation { display: block; margin-top: 10px; font-size: 14px; line-height: 1.2; } .h9-team-item .team_content .socials { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; margin-top: 13px; } .h9-team-item .team_content .socials li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .h9-team-item .team_content .socials li 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; width: 24px; height: 24px; font-size: 14px; background-color: var(--tj-color-theme-dark); color: var(--tj-color-common-white); opacity: 0.4; border-radius: 50%; } .h9-team-item .team_content .socials li a i, .h9-team-item .team_content .socials li a svg { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .h9-team-item .team_content .socials li a:hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); opacity: 1; } .h9-team-item .team_content .socials li a:hover i, .h9-team-item .team_content .socials li a:hover svg { color: var(--tj-color-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-team-section .sec-heading { margin-bottom: 10px; } .h9-team-section .sec-heading .desc { margin-bottom: 0; } .h9-team-section .more_team { margin-top: 40px; } } /* !END: H9 Team CSS */ /* START: H9 Brands CSS */ .h9-brands { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--tj-color-border-2); -webkit-border-start: 1px solid var(--tj-color-border-2); border-inline-start: 1px solid var(--tj-color-border-2); } .h9-brands .brand_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 192px; background-color: var(--tj-color-common-white); -webkit-border-end: 1px solid var(--tj-color-border-2); border-inline-end: 1px solid var(--tj-color-border-2); border-bottom: 1px solid var(--tj-color-border-2); } .h9-brands .brand_item div { position: relative; } .h9-brands .brand_item div img { display: block; max-width: 100%; -o-object-fit: contain; object-fit: contain; -webkit-filter: opacity(0.4); filter: opacity(0.4); -webkit-transition: all 500ms ease; transition: all 500ms ease; } .h9-brands .brand_item div img:first-child { position: absolute; inset-inline-start: 0px; top: 0px; inset-inline-end: 0px; bottom: 0px; z-index: 1; -webkit-transform: translateX(50%) scaleX(1.5); -ms-transform: translateX(50%) scaleX(1.5); transform: translateX(50%) scaleX(1.5); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .h9-brands .brand_item a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h9-brands .brand_item a:hover div img { -webkit-filter: opacity(1); filter: opacity(1); } .h9-brands .brand_item a:hover div img:first-child { -webkit-transform: translateX(0) scaleX(1); -ms-transform: translateX(0) scaleX(1); transform: translateX(0) scaleX(1); opacity: 1; -webkit-filter: blur(0); filter: blur(0); } .h9-brands .brand_item a:hover div img:last-child { -webkit-transform: translateX(-50%) scaleX(1.5); -ms-transform: translateX(-50%) scaleX(1.5); transform: translateX(-50%) scaleX(1.5); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-brands { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .h9-brands .brand_item { height: 160px; } } @media (max-width: 575px) { .h9-brands { grid-template-columns: repeat(2, 1fr); } .h9-brands .brand_item { height: 150px; } } /* !END: H9 Brands CSS */ /* START: Home 9 Testimonial CSS */ .h9-testimonial-section { overflow: hidden; } .h9-testimonial-wrapper { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; } .h9-testimonial-wrapper .swiper_pagination { background-color: var(--tj-color-common-white); position: absolute; bottom: 0; margin: 0; padding-top: 50px; } .h9-testimonial-wrapper .client-thumb-wrap { background-color: var(--tj-color-theme-bg); border-top: 1px solid var(--tj-color-border-2); } .h9-testimonial-wrapper .client-thumb { max-width: 870px; margin: 0 auto; padding: 30px 15px 35px; } .h9-testimonial-wrapper .client-thumb .testimonial-author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; position: relative; padding: 10px; border-radius: 70px; opacity: 0.3; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-testimonial-wrapper .client-thumb .testimonial-author { max-width: 245px; width: 100%; } } .h9-testimonial-wrapper .client-thumb .testimonial-author .author-images { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; background-color: var(--tj-color-theme-bg); } .h9-testimonial-wrapper .client-thumb .testimonial-author .author-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; mix-blend-mode: luminosity; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-testimonial-wrapper .client-thumb .testimonial-author .author-images { width: 65px; height: 65px; } } .h9-testimonial-wrapper .client-thumb .testimonial-author .author-text .title { margin-bottom: 0; letter-spacing: -0.025em; } .h9-testimonial-wrapper .client-thumb .testimonial-author .author-text .designation { display: block; color: var(--tj-color-common-black-2); } .h9-testimonial-wrapper .client-thumb .swiper-slide-active .testimonial-author { background-color: var(--tj-color-common-white); opacity: 1; } .h9-testimonial-wrapper .testimonial-navigation { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 5; width: 100%; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-testimonial-wrapper .testimonial-navigation { display: none; } } .h9-testimonial-wrapper .navigation { width: 60px; height: 60px; margin-top: -60px; background-color: var(--tj-color-common-white); } .h9-testimonial-wrapper .slider-prev { -webkit-margin-start: -90px; margin-inline-start: -90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-testimonial-wrapper .slider-prev { -webkit-margin-start: -25px; margin-inline-start: -25px; } } .h9-testimonial-wrapper .slider-next { -webkit-margin-end: -90px; margin-inline-end: -90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-testimonial-wrapper .slider-next { -webkit-margin-end: -25px; margin-inline-end: -25px; } } .h9-testimonial-slider { background-color: var(--tj-color-theme-bg); padding-bottom: 80px; } .h9-testimonial-item { padding: 0 40px 25px; } .h9-testimonial-item .testimonial-content { max-width: 840px; margin: 0 auto; } .h9-testimonial-item .testimonial-quote { width: 120px; height: 136px; -webkit-mask-image: url(../images/shapes/h5-author-mask.svg); mask-image: url(../images/shapes/h5-author-mask.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; background-color: var(--tj-color-common-white); position: relative; 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; font-size: 72px; color: var(--tj-color-theme-primary); margin: -1px auto 20px; } .h9-testimonial-item .testimonial-quote i { margin-top: 25px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-testimonial-item .testimonial-quote { width: 110px; height: 126px; font-size: 60px; } } .h9-testimonial-item .desc { font-size: 24px; line-height: 1.667; text-align: center; letter-spacing: -0.04em; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); } .h9-testimonial-item .desc p { margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-testimonial-item .desc { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-testimonial-item .desc { font-size: 18px; } } @media (max-width: 575px) { .h9-testimonial-item { padding: 0 20px 25px; } } /* START: Home 9 Testimonial CSS */ /* START: Case Study CSS */ .h9-case-study { background-color: var(--tj-color-theme-dark); overflow: hidden; } .h9-case-study .sec-heading { margin: 0; max-width: 507px; } .h9-case-study .sec-heading-wrap { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media (max-width: 575px) { .h9-case-study .sec-heading-wrap { row-gap: 15px; } } .h9-case-study .sec-heading-wrap .sec-title { color: var(--tj-color-common-white); } .h9-case-study .sec-heading-wrap .desc { max-width: 300px; width: 100%; color: var(--tj-color-common-white-2); } .h9-case-study .sec-heading-wrap .tj-primary-btn { color: var(--tj-color-theme-dark); background-color: var(--tj-color-common-white); } @media (max-width: 575px) { .h9-case-study .sec-heading-wrap .tj-primary-btn { margin-top: 10px; } } .h9-case-study .sec-heading-wrap .tj-primary-btn .btn_text { color: var(--tj-color-theme-dark); } .h9-case-study .sec-heading-wrap .tj-primary-btn:hover .btn_text { color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-case-study .sec-heading-wrap { margin-bottom: 40px; } } .h9-case-study-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; padding: 0 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-case-study-inner { gap: 20px; padding: 0 8px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-case-study-inner { gap: 15px; padding: 0 3px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-case-study-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h9-case-study-item { width: 240px; height: 585px; -webkit-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } @media (min-width: 1921px) { .h9-case-study-item { width: 13%; height: 600px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-case-study-item { height: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-case-study-item { width: 100%; height: 100px; } } .h9-case-study-item-inner { z-index: 0; height: 100%; min-height: 100%; background-color: var(--tj-color-theme-dark); background-blend-mode: luminosity; } .h9-case-study-item-inner::after, .h9-case-study-item-inner::before { content: " "; width: 100%; height: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), to(#051229)); background: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 100%); position: absolute; inset-inline-start: 0; bottom: 0; -webkit-transition: all 0.4s 0.3s; transition: all 0.4s 0.3s; z-index: 1; } .h9-case-study-item-inner::before { height: 100%; background: rgba(5, 18, 41, 0.7); -webkit-transition-duration: 0; transition-duration: 0; opacity: 1; } .h9-case-study-item .case-study-content { background-color: transparent; padding: 30px 30px; max-width: 100%; z-index: 2; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-case-study-item .case-study-content { padding: 20px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h9-case-study-item .case-study-content { padding: 20px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-case-study-item .case-study-content { padding: 20px 10px; } } @media (max-width: 575px) { .h9-case-study-item .case-study-content { padding: 15px 15px; } } .h9-case-study-item .case-study-content .case-study-text { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; gap: 6px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-case-study-item .case-study-content .case-study-text { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 18px; } } .h9-case-study-item .case-study-content .case-study-text .title-area { max-width: calc(100% - 75px); } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-case-study-item .case-study-content .case-study-text .title-area { max-width: 100%; } } .h9-case-study-item .case-study-content .case-study-text .title { max-width: 100%; letter-spacing: -0.025em; } .h9-case-study-item .case-study-content .case-study-text .title:hover { letter-spacing: 0; } .h9-case-study-item .case-study-content .case-study-text .title a { color: var(--tj-color-common-white); margin-bottom: 15px; white-space: nowrap; } .h9-case-study-item .case-study-content .case-study-text .title a:hover { color: var(--tj-color-common-white); } .h9-case-study-item .case-study-content .category { margin-bottom: 0; } .h9-case-study-item .case-study-content .category li a { color: var(--tj-color-common-white); background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); border: 0; margin-bottom: 0 !important; } .h9-case-study-item .case-study-content .category li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .h9-case-study-item .case-study-content .icon-btn { background-color: transparent; border: 1px solid var(--tj-color-common-white); } .h9-case-study-item .case-study-content .icon-btn:hover { border-color: var(--tj-color-theme-primary); } .h9-case-study-item:hover .case-study-content { -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .h9-case-study-item.active { width: 780px; place-content: unset; } @media (min-width: 1921px) { .h9-case-study-item.active { width: 48%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-case-study-item.active { width: 100%; height: 300px; } } .h9-case-study-item.active .h9-case-study-item-inner { background-blend-mode: normal; } .h9-case-study-item.active .h9-case-study-item-inner::after { height: 100%; opacity: 0.8; } .h9-case-study-item.active .h9-case-study-item-inner::before { opacity: 0; } .h9-case-study-item.active .h9-case-study-item-inner .case-study-content, .h9-case-study-item.active .h9-case-study-item-inner:hover { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-case-study-item { width: 100%; height: 300px; } .h9-case-study-item .h9-case-study-item-inner { background-blend-mode: normal; } .h9-case-study-item .h9-case-study-item-inner::after { height: 100%; opacity: 0.8; } .h9-case-study-item .h9-case-study-item-inner::before { opacity: 0; } .h9-case-study-item .h9-case-study-item-inner .case-study-content, .h9-case-study-item .h9-case-study-item-inner:hover { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } /* !END: Case Study CSS */ /* START: Home 9 CTA CSS */ .h9-cta-section { position: relative; overflow: hidden; } .h9-cta-inner { padding: 43px 0 44px; } .h9-cta-inner::after { content: ""; width: 100%; height: 100%; position: absolute; top: 0; inset-inline-start: 0; background-color: var(--tj-color-theme-primary); mix-blend-mode: multiply; } .h9-cta-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 45px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-padding-start: 0; padding-inline-start: 0; z-index: 2; position: relative; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-cta-wrapper { gap: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h9-cta-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-cta-wrapper { -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; gap: 20px; } } .h9-cta-wrapper .newsletter-title { max-width: 370px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h9-cta-wrapper .newsletter-title { max-width: 280px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h9-cta-wrapper .newsletter-title { max-width: 303px; } } .h9-cta-wrapper .newsletter-title .title { font-size: 32px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h9-cta-wrapper .newsletter-title .title { text-align: center; } } .h9-cta-wrapper .newsletter-form { max-width: 400px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h9-cta-wrapper .newsletter-form { max-width: 370px; } } .h9-cta-wrapper .newsletter-form .form-input { position: relative; z-index: 2; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]), .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email] { color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-regular); font-size: 16px; padding: 18px 80px 18px 25px; background: var(--tj-color-common-white); border-radius: 70px; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-webkit-input-placeholder, .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email]::-webkit-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-moz-placeholder, .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email]::-moz-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):-ms-input-placeholder, .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email]:-ms-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email]::-ms-input-placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email]::placeholder { color: var(--tj-color-common-black-2); font-weight: var(--tj-fw-regular); font-size: 16px; } .h9-cta-wrapper .newsletter-form .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):focus, .h9-cta-wrapper .newsletter-form .form-input .footer-widget .newsletter-form .form-input input[type=email]:focus { border-color: var(--tj-color-theme-primary); color: var(--tj-color-theme-primary); } @media (max-width: 575px) { .h9-cta-wrapper .newsletter-form { max-width: 100%; } } .h9-cta-wrapper .newsletter-form .tj-primary-btn { position: absolute; inset-inline-end: 4px; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .h9-cta-wrapper .newsletter-form .tj-primary-btn .btn_inner { padding: 15px 43px 15px 20px; } .h9-cta-wrapper .newsletter-form .tj-primary-btn .btn_inner::before { width: 100%; background-color: var(--tj-color-theme-dark); } .h9-cta-wrapper .newsletter-form .tj-primary-btn .btn_icon { inset-inline-start: auto; inset-inline-end: 0; height: 40px; } /* START: Header CSS */ .tj-header-area.header-10.header-absolute .header-wrapper { padding: 0px 24px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-10.header-absolute .header-wrapper { padding: 10px 15px; } } .tj-header-area.header-10 .mainmenu > ul { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-10 .mainmenu > ul { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } .tj-header-area.header-10 .mainmenu > ul > li > a { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-10 .mainmenu > ul > li > a { -webkit-column-gap: 12px; -moz-column-gap: 12px; column-gap: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-10 .mainmenu > ul > li > a { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .tj-header-area.header-10 .mainmenu > ul > li > a::after { display: none; } .tj-header-area.header-10 .mainmenu > ul > li > a::before { content: ""; width: 4px; height: 4px; border-radius: 100%; background: rgba(247, 247, 247, 0.1); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-header-area.header-10 .mainmenu > ul > li > a:hover { color: var(--tj-color-theme-primary); } .tj-header-area.header-10 .mainmenu > ul > li.current-menu-ancestor > a, .tj-header-area.header-10 .mainmenu > ul > li.current-menu-item > a, .tj-header-area.header-10 .mainmenu > ul > li:hover > a { color: var(--tj-color-common-white); } .tj-header-area.header-10 .mainmenu > ul > li.current-menu-ancestor > a::before, .tj-header-area.header-10 .mainmenu > ul > li.current-menu-item > a::before, .tj-header-area.header-10 .mainmenu > ul > li:hover > a::before { background: rgb(247, 247, 247); } .tj-header-area.header-10 .header_btn.tj-primary-btn { background-color: var(--tj-color-common-white); } .tj-header-area.header-10 .header_btn.tj-primary-btn .btn_text { color: var(--tj-color-theme-dark); } .tj-header-area.header-10 .header_btn.tj-primary-btn:hover .btn_text { color: var(--tj-color-common-white); } .tj-header-area .header-10-topbar { background-color: var(--tj-color-common-white); padding: 9px 24px; } @media only screen and (min-width: 1600px) and (max-width: 1799px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area .header-10-topbar { padding: 9px 24px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area .header-10-topbar { padding: 12px 15px; } } .tj-header-area .header-10-topbar .topbar_note { color: var(--tj-color-theme-dark); } .tj-header-area .header-10-topbar .topbar_note a > span::after { background-color: var(--tj-color-theme-dark); } .tj-header-area .header-10-topbar .topbar_note i { color: var(--tj-color-text-body); } .tj-header-area .header-10-topbar .topbar_infos .info_item { color: var(--tj-color-theme-dark); } .tj-header-area .header-10-topbar .topbar_infos .info_item i { color: var(--tj-color-text-body); } .tj-header-area .header-10-topbar .topbar_infos .info_item:has(a):hover a { color: var(--tj-color-theme-primary); } .tj-header-area .header-10-topbar .topbar_infos .info_item:has(a):hover i { color: var(--tj-color-theme-primary); } /* !END: Header CSS */ /* START: Footer CSS */ .h10-footer::after { content: url("../images/shapes/h10-footer-shape.png"); position: absolute; top: 0; inset-inline-end: 0; } .h10-footer-top { padding-top: 105px; padding-bottom: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-footer-top { padding-top: 65px; padding-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-top { padding: 80px 0; } } .h10-footer.footer-2.style-2 .footer-top-area .line::before { inset-inline-start: 34.2%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-footer.footer-2.style-2 .footer-top-area .line::before { display: block; inset-inline-start: 34.5%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-footer.footer-2.style-2 .footer-top-area .line::before { display: block; inset-inline-start: 51.5%; } } .h10-footer-newsletter-form { margin-top: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-newsletter-form { margin-top: 0; } } .h10-footer-newsletter-form .newsletter-form { max-width: 350px; } .h10-footer-cta { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; padding-bottom: 145px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-footer-cta { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-footer-cta { padding-bottom: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-cta { padding-bottom: 70px; } } .h10-footer-cta-title { color: var(--tj-color-common-white); margin-bottom: 0; } .h10-footer-cta-title:hover { letter-spacing: -0.01em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-footer-cta-title { font-size: 63px; } } @media (max-width: 575px) { .h10-footer-cta-title { font-size: 30px; } } .h10-footer-cta-btn { width: 70px; height: 70px; background-color: var(--tj-color-theme-primary); font-size: 28px; -ms-flex-negative: 0; flex-shrink: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h10-footer-cta-btn { width: 60px; height: 60px; font-size: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-cta-btn { width: 50px; height: 50px; font-size: 22px; } } .h10-footer-cta-btn i { text-shadow: -50px 0 0; } .h10-footer-cta-btn:hover i { -webkit-transform: rotate(-45deg) translateX(50px); -ms-transform: rotate(-45deg) translateX(50px); transform: rotate(-45deg) translateX(50px); } .h10-footer-widget .desc { font-size: 18px; line-height: 1.5; margin-bottom: 26px; } .h10-footer-widget-wrapper { -webkit-padding-start: 60px; padding-inline-start: 60px; position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-footer-widget-wrapper { -webkit-padding-start: 25px; padding-inline-start: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-widget-wrapper { -webkit-padding-start: 20px; padding-inline-start: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-widget-wrapper { -webkit-padding-start: 0; padding-inline-start: 0; } } .h10-footer-widget-wrapper::before { position: absolute; content: ""; width: 200%; height: 1px; top: 44%; inset-inline-start: 0; background: var(--tj-color-border-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-footer-widget-wrapper::before { top: 29%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-widget-wrapper::before { top: 26%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-widget-wrapper::before { top: 19%; width: 100%; } } .h10-footer-widget-wrapper .footer-contact-infos-2 { -webkit-padding-start: 41px; padding-inline-start: 41px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-widget-wrapper .footer-contact-infos-2 { -webkit-padding-start: 0; padding-inline-start: 0; } } .h10-footer-widget-wrapper .footer-social { margin-top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-footer-widget-wrapper .footer-social { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } /* !END: Footer CSS */ /* START: About CSS */ .h10-about-section { position: relative; background-color: var(--tj-color-theme-bg); } .h10-about-content-wrap { -webkit-padding-start: 80px; padding-inline-start: 80px; } .h10-about-content-wrap .sec-heading { margin-bottom: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-about-content-wrap { -webkit-padding-start: 30px; padding-inline-start: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-about-content-wrap { -webkit-padding-start: 10px; padding-inline-start: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-about-content-wrap { max-width: 100%; -webkit-padding-start: 0; padding-inline-start: 0; padding-bottom: 40px; } } .h10-about-content-wrap .btn-area { margin-top: 25px; } .h6-insight_accordion.h10-about-accordion { -webkit-border-start: 0; border-inline-start: 0; -webkit-border-end: 0; border-inline-end: 0; margin-bottom: 0; } .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_title { padding: 20px 40px 20px 0; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; } .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_title::before { content: "\e91e"; font-family: "solvior-icons" !important; font-style: normal; font-weight: normal; font-size: 19px; position: absolute; top: 50%; inset-inline-end: 0; width: 25px; height: 25px; border: 0; border-radius: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: var(--tj-color-heading-primary); } .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_title:not(.collapsed)::before { content: "\e91e"; -webkit-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_title:not(.collapsed) .subtitle { color: var(--tj-color-theme-primary); } .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_title .subtitle { font-size: 20px; color: var(--tj-color-common-black-2); margin-bottom: 0; } @media (max-width: 575px) { .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_title .subtitle { font-size: 17px; } } .h6-insight_accordion.h10-about-accordion .accordion_item .accordion_desc .accordion-body { padding: 0 20px 22px 0; } /* !END: About CSS */ /* START: Counter CSS */ .h10-counter-section { background-color: var(--tj-color-theme-dark); overflow: hidden; } .h10-counter-section .counter-wrapper { background-color: var(--tj-color-theme-dark); } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-counter-section .counter-wrapper { max-width: 100%; } } .counter-item.style-2 { max-width: 25%; border-color: var(--tj-color-border-1); padding: 54px 80px 60px 80px; } .counter-item.style-2 .counter-item-inner { max-width: 190px; margin: 0 auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter-item.style-2 .counter-item-inner { max-width: 130px; } } .counter-item.style-2::before { border: 3px solid var(--tj-color-theme-dark); background-color: var(--tj-color-theme-primary); } .counter-item.style-2::after { background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter-item.style-2::after { width: 16px; height: 16px; inset-inline-end: -8px; } } .counter-item.style-2 .number { color: var(--tj-color-common-white); } .counter-item.style-2 .sub-title { color: var(--tj-color-common-white-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .counter-item.style-2 { padding: 50px 60px 60px 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter-item.style-2 { padding: 50px 20px 60px 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter-item.style-2 { padding: 40px 20px 50px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter-item.style-2 { max-width: 50%; padding: 30px 20px 35px; } } @media (max-width: 575px) { .counter-item.style-2 { max-width: 50%; padding: 30px 15px; } } /* !END: Counter CSS */ /* START: H10 Services CSS */ .h10-service-item { padding: 50px 30px; border: 1px solid var(--tj-color-border-2); border-bottom: 0; position: relative; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .h10-service-item .service-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; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 90px; height: 90px; line-height: 1; font-size: 70px; color: var(--tj-color-theme-primary); background: var(--tj-color-theme-bg); border-radius: 50%; position: relative; z-index: 2; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-item .service-icon { font-size: 50px; width: 70px; height: 70px; } } .h10-service-item:hover { background-color: var(--tj-color-theme-bg); } .h10-service-item:hover .service-icon { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .h10-service-item { padding: 40px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-item { padding: 30px 20px; } } .h10-service-item:first-child .service-reveal-bg { margin-top: 20px; } .h10-service-item:last-child { border-bottom: 1px solid var(--tj-color-border-2); } .h10-service-item:last-child .service-reveal-bg { margin-top: -20px; } .h10-service-item:hover .service-reveal-bg { opacity: 1; -webkit-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); } .service-content-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 2; } .service-content-wrap .service-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: wrap; -ms-flex: wrap; flex: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 370px; width: 100%; gap: 20px; } .service-content-wrap .service-title .title { margin-bottom: 0; } .service-content-wrap .service-title .title a:hover { color: var(--tj-color-theme-primary); } .service-content-wrap .service-content .desc { max-width: 330px; width: 100%; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-content-wrap .service-content .desc { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-content-wrap .service-content { margin-top: 20px; -webkit-padding-start: 90px; padding-inline-start: 90px; } } .service-content-wrap .service-btn { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-content-wrap .service-btn { margin-top: 30px; -webkit-padding-start: 90px; padding-inline-start: 90px; } } .service-reveal-bg { position: absolute; top: 50%; inset-inline-start: 43%; width: 290px; height: 290px; opacity: 0; overflow: hidden; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; -webkit-transform: translate(-50%, -50%) scale(0.7); -ms-transform: translate(-50%, -50%) scale(0.7); transform: translate(-50%, -50%) scale(0.7); transition: opacity 0.6s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 5; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service-reveal-bg { width: 250px; height: 250px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-reveal-bg { display: none; } } .service-btn-area { margin-top: 60px; } /* END: H10 Services CSS */ /* Growth css */ .tj-video-section { position: relative; overflow: hidden; z-index: 1; } .tj-video-section .tj-video-bg { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; z-index: -1; height: 130%; /* Slightly bigger for parallax depth */ background-size: cover; background-position: center; will-change: transform; } .tj-video-section .tj-video-bg::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-dark); opacity: 0.5; z-index: 1; } .tj-video-section .video-btn-wrap { 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; min-height: 777px; margin: 0; } @media xl { .tj-video-section .video-btn-wrap { min-height: 650px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-video-section .video-btn-wrap { min-height: 550px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-video-section .video-btn-wrap { min-height: 400px; } } .tj-video-section .video-btn-wrap .video-btn { max-width: 112px; } .tj-video-section .video-btn-wrap .video-btn .play-btn { background-color: rgba(247, 247, 247, 0.1); color: var(--tj-color-common-white); width: 112px; height: 112px; border-radius: 50%; font-size: 20px; position: relative; -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); -webkit-animation: pulse-two 2s infinite; animation: pulse-two 2s infinite; z-index: 5; } .tj-video-section .video-btn-wrap .video-btn .play-btn i { line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-margin-start: 2px; margin-inline-start: 2px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-video-section .video-btn-wrap .video-btn .play-btn { width: 90px; height: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-video-section .video-btn-wrap .video-btn .play-btn { font-size: 16px; width: 70px; height: 70px; } } .tj-video-section .video-btn-wrap .video-btn:hover { -webkit-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-video-section .video-btn-wrap .video-btn { gap: 10px; } } /* START: Hero CSS */ .h10-hero { position: relative; overflow: hidden; padding: 0 0 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero { padding: 0 0 60px; } } .h10-hero-inner { overflow: visible; } .h10-hero-inner::before { display: none; } .h10-hero-content { min-height: 90vh; max-width: 812px; width: 100%; padding-top: 0; position: relative; 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; height: 100%; z-index: 1; padding: 232px 0 80px 12px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-hero-content { max-width: 100%; min-height: 787px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-content { max-width: 100%; min-height: auto; padding: 70px 0 70px 12px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-content { min-height: 690px; padding: 200px 0 70px 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-content { max-width: 100%; min-height: 675px; padding: 110px 0 70px; } } @media (max-width: 575px) { .h10-hero-content { max-width: 100%; min-height: 761px; padding: 140px 0 70px; } } .h10-hero-content .hero-title { color: var(--tj-color-common-white); font-size: 110px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 20px; } .h10-hero-content .hero-title span { color: var(--tj-color-theme-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-hero-content .hero-title { font-size: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-hero-content .hero-title { font-size: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-content .hero-title { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-content .hero-title { font-size: 68px; text-align: center; } } @media (max-width: 575px) { .h10-hero-content .hero-title { font-size: 50px; text-align: center; } } .h10-hero-content .desc { font-size: 18px; color: var(--tj-color-common-white-2); font-weight: var(--tj-fw-regular); max-width: 524px; width: 100%; line-height: 1.5; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-hero-content .desc { max-width: 433px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-content .desc { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-content .desc { text-align: center; } } .h10-hero-content .desc p:last-child { margin-bottom: 0; } .h10-hero-sroll-down { position: absolute; inset-inline-start: 24px; bottom: 9%; max-width: 365px; color: var(--tj-color-common-white-2); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-hero-sroll-down { inset-inline-start: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-hero-sroll-down { inset-inline-start: 12px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-sroll-down { max-width: 361px; inset-inline-start: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-sroll-down { position: static; text-align: center; margin: 30px auto 0; } } .h10-hero-sroll-down-icon { -webkit-animation: bounce2 2s infinite; animation: bounce2 2s infinite; } .h10-hero-stat { position: absolute; inset-inline-end: 0; bottom: -60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-hero-stat { inset-inline-end: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-hero-stat { inset-inline-end: 12px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-stat { inset-inline-end: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-stat { inset-inline-end: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); max-width: 410px; width: 100%; bottom: -57px; } } @media (max-width: 575px) { .h10-hero-stat { inset-inline-end: 50%; -webkit-transform: translateX(50%); -ms-transform: translateX(50%); transform: translateX(50%); width: 100%; max-width: 100%; bottom: -54px; } } .h10-hero-stat-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 30px 20px 40px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-stat-inner { padding: 20px 10px 30px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-stat-inner { padding: 20px 10px 30px 15px; } } @media (max-width: 575px) { .h10-hero-stat-inner { text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 15px; } } .h10-hero-stat-chart { width: 185px; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-stat-chart { width: 157px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-stat-chart { width: 157px; } } .h10-hero-stat-chart-text { position: absolute; inset-inline-start: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white-2); margin: 3px 0 0; line-height: 1; } .h10-hero-stat .h10-hero-counter-item .number { color: var(--tj-color-common-white); } @media (max-width: 575px) { .h10-hero-stat .h10-hero-counter-item .number { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; } } .h10-hero-stat .h10-hero-counter-item .number sup { font-size: 0.53em; top: -0.8em; } .h10-hero-stat .h10-hero-counter-item .sub-title { color: var(--tj-color-common-white-2); } .h10-hero-stat-action .tj-primary-btn { background-color: var(--tj-color-theme-primary); width: 100%; border-radius: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; text-align: start; font-size: 18px; font-weight: var(--tj-fw-sbold); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-stat-action .tj-primary-btn { font-size: 16px; text-align: start; } } .h10-hero-stat-action .tj-primary-btn .btn_inner { padding: 15px 43px 15px 24px; text-align: start; } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-stat-action .tj-primary-btn .btn_inner { padding: 15px 33px 15px 19px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-stat-action .tj-primary-btn .btn_inner { padding: 15px 33px 15px 19px; text-align: start; } } .h10-hero-stat-action .tj-primary-btn .btn_inner::before { width: 100%; background-color: var(--tj-color-theme-primary); } .h10-hero-stat-action .tj-primary-btn .btn_icon { inset-inline-start: auto; inset-inline-end: 10px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-stat-action .tj-primary-btn .btn_icon { inset-inline-end: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-stat-action .tj-primary-btn .btn_icon { inset-inline-end: 5px; } } .h10-hero-counter-item { position: relative; width: 100%; max-width: 228px; padding: 0; z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-counter-item { max-width: 228px; } } @media (max-width: 575px) { .h10-hero-counter-item { max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } } .h10-hero-counter-item .number { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--tj-color-heading-primary); font-family: var(--tj-ff-heading); font-size: 88px; font-weight: var(--tj-fw-sbold); position: relative; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-hero-counter-item .number { font-size: 78px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-hero-counter-item .number { font-size: 58px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-hero-counter-item .number { font-size: 58px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-counter-item .number { font-size: 48px; } } .h10-hero-counter-item .number span { line-height: 1; font-family: inherit; } .h10-hero-counter-item .sub-title { line-height: 1.5; display: block; -webkit-margin-start: 10px; margin-inline-start: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-counter-item .sub-title { -webkit-margin-start: 5px; margin-inline-start: 5px; } } @media (max-width: 575px) { .h10-hero-counter-item .sub-title { text-align: start; -webkit-margin-start: 15px; margin-inline-start: 15px; } } /* !END: Hero CSS */ /* START: Feature CSS */ .h10-feature .container { --bs-gutter-x: 30px; } .h10-feature .container .row { --bs-gutter-x: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-feature .container .row { --bs-gutter-x: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-feature .container .rg-30 { row-gap: 20px; } } .h10-feature .sec-heading { max-width: 820px; } .h10-feature .sec-heading .sec-title img, .h10-feature .sec-heading .sec-title svg { width: 44px; height: 44px; border-radius: 100%; } .h10-feature .sec-heading .sec-title span { color: var(--tj-color-common-white-2); } .h10-feature-item { border: 0; background-color: var(--tj-color-theme-bg); height: 100%; padding: 40px 30px 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .h10-feature-item { padding: 35px 15px; } } .h10-feature-item-2 { background-color: var(--tj-color-theme-primary); padding: 0; 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 only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-feature-item-2 { padding: 0; } } .h10-feature-item-2 .feature-content { padding: 40px 30px 16px; } .h10-feature-item-2 .feature-content .title { color: var(--tj-color-common-white); } .h10-feature-item-2 .feature-content .desc { color: var(--tj-color-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .h10-feature-item-2 .feature-content { padding: 35px 15px; } } .h10-feature-item-2 .feature-chart-img img { width: 100%; } .h10-feature-img-item { position: relative; height: 100%; } .h10-feature-img-item .feature-img { height: 100%; width: 100%; } .h10-feature-img-item .feature-img img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } .h10-feature-img-item .feature-content { position: absolute; inset-inline-start: 15px; inset-inline-end: 15px; bottom: 15px; padding: 10px 20px; border-radius: 30px; background: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); z-index: 1; } .h10-feature-img-item .feature-content .title { margin-bottom: 0; line-height: 1; color: var(--tj-color-common-white); } .h10-feature-img-item-2 .feature-content { background: var(--tj-color-theme-dark); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } /* START: Home 6 Testimonial CSS */ .h10-testimonial { background-color: var(--tj-color-theme-bg); overflow: hidden; position: relative; z-index: 2; } .h10-testimonial .sec-heading .desc { margin-bottom: 0; max-width: 400px; } .h10-testimonial .sec-title { max-width: 550px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h10-testimonial .sec-text .swiper_navigations { width: 180px; } } .h10-testimonial .h6-testimonial-slider { -webkit-margin-end: 0; margin-inline-end: 0; -webkit-margin-start: 0; margin-inline-start: 0; } .h10-testimonial-item.style-6 { padding: 22px 30px 30px; } @media (max-width: 575px) { .h10-testimonial-item.style-6 { padding: 22px 20px 30px; } } .h10-testimonial-item.style-6 .testimonial-content .tj-testimonial-author { width: 100%; padding-bottom: 22px; border-bottom: 1px dashed var(--tj-color-border-2); margin-top: 0; gap: 14px; } @media (max-width: 575px) { .h10-testimonial-item.style-6 .testimonial-content .tj-testimonial-author { margin-bottom: 10px; } } .h10-testimonial-item.style-6 .testimonial-content .author-images { -webkit-mask-image: url(../images/shapes/test-shapes.svg); mask-image: url(../images/shapes/test-shapes.svg); height: 90px; width: 110px; margin-bottom: 0; -webkit-margin-start: -33.5px; margin-inline-start: -33.5px; } @media (max-width: 575px) { .h10-testimonial-item.style-6 .testimonial-content .author-images { -webkit-margin-start: -23.5px; margin-inline-start: -23.5px; } } .h10-testimonial-item.style-6 .testimonial-content .author-images img { top: 8px; inset-inline-end: 11px; } .h10-testimonial-item.style-6 .testimonial-content .desc { padding-bottom: 0; border-bottom: 0; } /* START: Home 6 Testimonial CSS */ /* START: H10 Projects CSS */ .h10-projects-section { overflow: hidden; } .h10-projects-section .sec-heading { max-width: 550px; width: 100%; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: auto; margin-inline-end: auto; margin-bottom: 60px; } .h10-projects_wrap .h10-projects_item:not(:last-child) { margin-bottom: 30px; } .h10-projects_item { position: relative; height: 670px; z-index: 1; } .h10-projects_item .h10-project-img { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: -1; } .h10-projects_item::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, #051229)); background-image: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 84%); z-index: 1; } .h10-projects_item .project_content { max-width: 460px; width: 100%; background-color: rgba(247, 247, 247, 0.15); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); padding: 35px 30px; position: absolute; inset-inline-end: 60px; bottom: 70px; z-index: 2; } .h10-projects_item .project_content .category { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; gap: 11px; margin-bottom: 12px; } .h10-projects_item .project_content .category li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .h10-projects_item .project_content .category li 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: transparent; border: 1px solid rgba(247, 247, 247, 0.15); border-radius: 40px; font-family: Lato; font-size: 14px; line-height: 1; color: var(--tj-color-common-white); padding: 5px 9px; } .h10-projects_item .project_content .category li a:hover { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); } .h10-projects_item .project_content .project_title { letter-spacing: -0.025em; color: var(--tj-color-common-white); margin: 0; } .h10-projects_item .project_content .project_title a:hover { letter-spacing: 0; } .h10-projects_item .project_content .desc { color: var(--tj-color-common-white-2); margin-top: 15px; } .h10-projects_item .project_content .project_button { background-color: var(--tj-color-common-white); margin-top: 25px; } .h10-projects_item .project_content .project_button .btn_inner .btn_text { color: var(--tj-color-heading-primary); } .h10-projects_item .project_content .project_button:hover .btn_inner .btn_text { color: var(--tj-color-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-projects_item { height: 600px; } .h10-projects_item .project_content { inset-inline-end: 50px; bottom: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-projects-section .sec-heading { margin-bottom: 50px; } .h10-projects_item { height: 550px; } .h10-projects_item .project_content { inset-inline-end: 40px; bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-projects-section .sec-heading { margin-bottom: 40px; } .h10-projects_item { height: 550px; } .h10-projects_item .project_content { max-width: 445px; inset-inline-end: 30px; bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-projects-section .sec-heading { margin-bottom: 40px; } .h10-projects_item { height: 550px; } .h10-projects_item .project_content { max-width: 420px; padding: 30px 25px; inset-inline-end: 30px; bottom: 30px; } } @media (max-width: 575px) { .h10-projects-section .sec-heading { margin-bottom: 40px; } .h10-projects_item { height: 500px; } .h10-projects_item .project_content { max-width: 360px; padding: 30px 25px; inset-inline-end: 0; bottom: 0; } } /* !END: H10 Projects CSS */ /* START: H10 Blog CSS */ .h10-blog_wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(33.333% - 20px), 1fr)); grid-column-gap: 30px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .h10-blog_wrap .h10-blog_item:first-child, .h10-blog_wrap .h10-blog_item:nth-child(2) { grid-row: 1/4; } .h10-blog_item { position: relative; z-index: 1; } .h10-blog_item .blog_image { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; } .h10-blog_item .blog_image::after { content: ""; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; height: 75%; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 18, 41, 0)), color-stop(84%, #051229)); background-image: linear-gradient(180deg, rgba(5, 18, 41, 0) 0%, #051229 84%); z-index: -1; } .h10-blog_item .blog-date { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: rgba(247, 247, 247, 0.1); -webkit-backdrop-filter: blur(35px); backdrop-filter: blur(35px); color: var(--tj-color-common-white); gap: 10px; padding: 17px 21px; position: absolute; top: 15px; inset-inline-start: 15px; z-index: 2; } .h10-blog_item .blog-date .day { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); font-size: 32px; line-height: 1; letter-spacing: -0.03em; } .h10-blog_item .blog-date .month { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 14px; color: var(--tj-color-common-white-2); text-transform: uppercase; line-height: 1; letter-spacing: 0.24em; } .h10-blog_item .blog_content { padding-top: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--tj-color-border-2); } .h10-blog_item .blog_content .blog-two-meta { margin-bottom: 18px; } .h10-blog_item .blog_content .blog_title { margin: 0; letter-spacing: -0.025em; } .h10-blog_item .blog_content .blog_title a:hover { color: var(--tj-color-theme-primary); } .h10-blog_item .blog_content .blog_btn { margin-top: 20px; } .h10-blog_item:nth-child(1) { min-height: 435px; } .h10-blog_item:nth-child(1) .blog_content { border: none; padding: 40px 25px; position: absolute; inset-inline-start: 0; bottom: 0; width: 100%; z-index: 2; } .h10-blog_item:nth-child(1) .blog_content .blog-two-meta ul li { color: var(--tj-color-common-white-2); } .h10-blog_item:nth-child(1) .blog_content .blog-two-meta ul li .meta-link { color: var(--tj-color-common-white-2); border-color: var(--tj-color-border-1); } .h10-blog_item:nth-child(1) .blog_content .blog_title { color: var(--tj-color-common-white); } .h10-blog_item:nth-child(1) .blog_content .blog_title a:hover { color: var(--tj-color-common-white); letter-spacing: -0.015em; } .h10-blog_item:nth-child(2) .blog_thumb { height: 290px; margin-bottom: -5px; position: relative; z-index: 1; } .h10-blog_item:nth-child(2) .blog_thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .h10-blog_item:nth-child(2) .blog_content { border: 1px solid var(--tj-color-border-2); padding: 30px 25px; } .h10-blog_item:nth-child(3) .blog_content { border-top: 1px solid var(--tj-color-border-2); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .h10-blog_wrap { grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr)); } .h10-blog_wrap .h10-blog_item:first-child, .h10-blog_wrap .h10-blog_item:nth-child(2) { grid-row: auto; } .h10-blog_item .blog-date .day { font-size: 28px; } .h10-blog_item .blog-date .month { letter-spacing: 0.14em; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-blog_item .blog-date { padding: 15px 17px; gap: 8px; } .h10-blog_item .blog-date .day { font-size: 25px; } .h10-blog_item .blog-date .month { letter-spacing: 0.14em; } .h10-blog_item:nth-child(2) .blog_thumb { height: 240px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-blog_wrap { grid-template-columns: repeat(auto-fill, minmax(100%, 1fr)); } .h10-blog_wrap .h10-blog_item:first-child, .h10-blog_wrap .h10-blog_item:nth-child(2) { grid-row: auto; } .h10-blog_item .blog-date { padding: 15px 17px; gap: 8px; } .h10-blog_item .blog-date .day { font-size: 25px; } .h10-blog_item .blog-date .month { letter-spacing: 0.14em; } .h10-blog_item:nth-child(1) { margin-bottom: 30px; } .h10-blog_item:nth-child(2) .blog_thumb { height: 240px; } } /* !END: H10 blog CSS */ /* START: H10 Brands CSS */ .h10-brands { display: grid; grid-template-columns: repeat(7, 1fr); } .h10-brands .brand_item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 192px; background-color: var(--tj-color-theme-bg); -webkit-border-end: 2px solid var(--tj-color-common-white); border-inline-end: 2px solid var(--tj-color-common-white); z-index: 1; background-size: cover; background-position: center; background-repeat: no-repeat; } .h10-brands .brand_item:last-child { border: 0; } .h10-brands .brand_item::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-bg); z-index: -1; -webkit-transition: 0.4s; transition: 0.4s; } .h10-brands .brand_item div { position: relative; } .h10-brands .brand_item div img { display: block; max-width: 100%; -o-object-fit: contain; object-fit: contain; -webkit-transition: all 500ms ease; transition: all 500ms ease; } .h10-brands .brand_item div img:first-child { position: absolute; inset-inline-start: 0px; top: 0px; inset-inline-end: 0px; bottom: 0px; z-index: 1; -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .h10-brands .brand_item a { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .h10-brands .brand_item:hover div img:first-child { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; -webkit-filter: blur(0) invert(1); filter: blur(0) invert(1); } .h10-brands .brand_item:hover div img:last-child { -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); opacity: 0; -webkit-filter: blur(10px); filter: blur(10px); } .h10-brands .brand_item:hover::after { background-color: rgba(0, 117, 255, 0.5); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-brands { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .h10-brands .brand_item { height: 160px; } } @media (max-width: 575px) { .h10-brands { grid-template-columns: repeat(2, 1fr); } .h10-brands .brand_item { height: 150px; } } /* !END: H10 Brands CSS */ /* START: Home 10 team CSS */ .h10-team-section { position: relative; overflow: hidden; z-index: 2; border-bottom: 1px solid var(--tj-color-border-2); } .h10-team-section .sec-heading { margin: 0; max-width: 550px; } .h10-team-section .sec-heading-wrap { margin-bottom: 60px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-section .sec-heading-wrap { margin-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-section .teams_btn { margin-top: 40px; } } .h10-team-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-wrapper { gap: 20px; } } .h10-team-item { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: var(--tj-color-theme-bg); width: 195px; height: 380px; -webkit-transition: width 0.3s ease-in; transition: width 0.3s ease-in; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-team-item { width: 175px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-team-item { width: 140px; height: 350px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item { width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item { height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .h10-team-item .team-images { width: 195px; position: relative; -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .h10-team-item .team-images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-team-item .team-images { width: 175px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-team-item .team-images { width: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-team-item .team-images { width: 305px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item .team-images { width: 100%; } } .h10-team-item .team-content { position: relative; overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .h10-team-item .team-content-inner { position: relative; top: 0; inset-inline-start: 0; width: 277px; height: 100%; -webkit-transform: translateX(-105%); -ms-transform: translateX(-105%); transform: translateX(-105%); -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; opacity: 0; visibility: hidden; padding-bottom: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-team-item .team-content-inner { width: 245px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-team-item .team-content-inner { width: 230px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item .team-content-inner { width: 100%; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } } .h10-team-item .team-content .team-text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 16px; } .h10-team-item .team-content .team-text .title { line-height: 1.2; margin-bottom: 4px; } .h10-team-item .team-content .team-text .title a:hover { color: var(--tj-color-theme-primary); } .h10-team-item .team-content .team-text .sub-title { font-size: 14px; color: var(--tj-color-common-black-2); } .h10-team-item .team-content .team-share { position: absolute; inset-inline-start: auto; bottom: 0; z-index: 2; } .h10-team-item .team-content .team-share .sub-title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-color-common-black-2); font-size: 14px; line-height: 1; margin-bottom: 15px; } .h10-team-item .team-content .team-share ul { list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; } .h10-team-item .team-content .team-share ul li a { width: 26px; height: 26px; font-size: 15px; color: var(--tj-color-theme-bg); background: var(--tj-color-theme-dark); opacity: 0.4; 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: 50%; line-height: 1; } .h10-team-item .team-content .team-share ul li a:hover { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); opacity: 1; -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); } @media only screen and (min-width: 768px) and (max-width: 991px) { .h10-team-item .team-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 30px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item .team-content { padding: 30px 20px; } } .h10-team-item.active { width: 640px; } .h10-team-item.active .team-images { width: 305px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-team-item.active .team-images { width: 245px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-team-item.active .team-images { width: 220px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item.active .team-images { width: 100%; } } .h10-team-item.active .team-content { padding: 48px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-team-item.active .team-content { padding: 48px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-team-item.active .team-content { padding: 35px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item.active .team-content { padding: 30px 20px; } } .h10-team-item.active .team-content-inner { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); opacity: 1; visibility: visible; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-team-item.active { width: 530px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .h10-team-item.active { width: 480px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-team-item.active { width: 100%; } } .blog-style-2 .blog-images img{ height: 300px } /* END: Home 10 team CSS *//*# sourceMappingURL=main.css.map */ /* ========================================================================== TÙY CHỈNH CSS CHO PHÂN TRANG FACETWP ========================================================================== */ /* Canh giữa và tạo khoảng cách cho toàn bộ khối phân trang */ .facetwp-pager { display: flex; justify-content: center; align-items: center; gap: 8px; /* Khoảng cách giữa các nút */ margin-top: 50px; /* Khoảng cách với nội dung bên trên */ } /* Kiểu dáng cho từng nút phân trang (số và mũi tên) */ .facetwp-pager .facetwp-page { display: inline-flex; /* Sử dụng flex để căn giữa nội dung */ justify-content: center; align-items: center; width: 48px; /* Chiều rộng */ height: 48px; /* Chiều cao */ line-height: 48px; /* Căn giữa văn bản theo chiều dọc */ border: 1px solid var(--tj-color-border-2); /* Viền từ theme của bạn */ border-radius: 50%; /* Tạo thành hình tròn */ font-weight: var(--tj-fw-sbold); /* Độ đậm phông chữ từ theme */ font-size: 18px; /* Kích thước phông chữ */ color: var(--tj-color-heading-primary); /* Màu chữ mặc định */ background-color: var(--tj-color-common-white); /* Nền mặc định */ text-decoration: none; /* Bỏ gạch chân */ transition: all 0.3s ease-in-out; } /* Kiểu dáng cho nút đang được chọn (active) và khi di chuột (hover) */ .facetwp-pager .facetwp-page.active, .facetwp-pager .facetwp-page:hover { background-color: var(--tj-color-theme-primary); /* Nền màu xanh chính */ color: var(--tj-color-common-white); /* Chữ màu trắng */ border-color: var(--tj-color-theme-primary); /* Viền màu xanh chính */ } /* Đảm bảo chữ của trang active luôn là màu trắng */ .facetwp-pager .facetwp-page.active { color: var(--tj-color-common-white) !important; } /* Tùy chỉnh cho các nút đặc biệt nếu cần (ví dụ: first, last, prev, next) */ .facetwp-pager .facetwp-page.next, .facetwp-pager .facetwp-page.prev { font-size: 22px; /* Tăng kích thước mũi tên một chút */ } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-slider-area{ margin: 40px 0 40px 0; } .site-logo .logo { max-width: 100px; } } .blog-style-2 .title a , .blog-style-2 .desc, .sidebar-recent-post .title-link a, .service-style-4 .service-content .title a, .blog-content .blog-title a, .blog-wrapper .blog-item:first-child .blog-content .desc, .blog-wrapper .blog-item:last-child .blog-content .desc { display: -webkit-box; -webkit-line-clamp: 2; /* Giới hạn 2 dòng */ -webkit-box-orient: vertical; /* Bắt buộc để hoạt động */ overflow: hidden; /* Ẩn phần dư */ text-overflow: ellipsis; /* Hiển thị dấu ... */ line-height: 1.4; /* Có thể chỉnh để cân đối */ min-height: calc(1.4em * 2); /* Giữ chiều cao đồng đều cho các ô */ } .logo-sticky-img{ width: 140px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .logo-sticky-img{ width: 100px; } } /* --- Tùy chỉnh WPML Language Switcher --- */ /* Ẩn list item của ngôn ngữ đang hoạt động */ .wpml-ls-item.wpml-ls-current-language { display: none !important; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { /* Hiển thị cả ngôn ngữ hiện tại và ngôn ngữ khác */ .wpml-ls-item.wpml-ls-current-language { display: inline-block !important; /* Thay 'block' thành 'inline-block' */ } /* Đảm bảo ngôn ngữ không hiện tại cũng là inline-block */ .wpml-ls-legacy-list-horizontal .wpml-ls-item { display: inline-block !important; /* Đảm bảo tất cả các mục nằm ngang */ vertical-align: middle; /* Căn chỉnh các cờ theo chiều dọc (tùy chọn) */ } .wpml-ls-legacy-list-horizontal ul { display: inline-flex; /* Giúp căn giữa dễ hơn nếu dùng text-align: center */ gap: 8px; /* Khoảng cách giữa các cờ */ } } /* --- Giữ nguyên CSS ẩn ngôn ngữ hiện tại trên desktop --- */ @media (min-width: 768px) { /* Áp dụng cho màn hình lớn hơn mobile */ .wpml-ls-item.wpml-ls-current-language { display: none !important; } } /* Định dạng thẻ link thành block để chứa ảnh nền */ .wpml-ls-legacy-list-horizontal .wpml-ls-item .wpml-ls-link { display: block; width: 32px; /* Chiều rộng mong muốn của cờ */ height: 20px; /* Chiều cao mong muốn của cờ */ overflow: hidden; /* Ẩn chữ bị tràn ra */ text-indent: -9999px; /* Đẩy chữ ra khỏi màn hình */ background-size: contain; /* Hiển thị toàn bộ cờ */ background-repeat: no-repeat; background-position: center; border-radius: 5%; /* Bo góc nhẹ (tùy chọn) */ box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Đổ bóng nhẹ (tùy chọn) */ } /* Ẩn hoàn toàn thẻ span chứa tên ngôn ngữ (phương án thay thế text-indent) */ .wpml-ls-legacy-list-horizontal .wpml-ls-item .wpml-ls-native { font-size: 0; /* Hoặc display: none; */ color: transparent; } /* Đặt ảnh nền cờ Tiếng Anh cho link EN */ .wpml-ls-item-en .wpml-ls-link { /* Thay đổi đường dẫn nếu cần */ background-image: url('/wp-content/plugins/sitepress-multilingual-cms/res/flags/gb.png'); /* WPML thường dùng gb.png cho English */ } /* Đặt ảnh nền cờ Tiếng Việt cho link VI */ .wpml-ls-item-vi .wpml-ls-link { /* Thay đổi đường dẫn nếu cần */ background-image: url('/wp-content/plugins/sitepress-multilingual-cms/res/flags/vi.png'); } /* (Tùy chọn) Căn chỉnh vị trí của cả khối */ .wpml-ls-statics-shortcode_actions { line-height: 1; /* Đảm bảo không có khoảng trống thừa */ } .wpml-ls-legacy-list-horizontal ul { list-style: none; padding: 0; margin: 0; } .wpml-ls-legacy-list-horizontal li { margin: 0; padding: 0; }