:root { /** @Font-Family Declaration */ --tj-ff-body: 'Roboto', sans-serif; --tj-ff-heading: 'Plus Jakarta Sans', sans-serif; --tj-ff-fontawesome: "Font Awesome 6 Pro"; --tj-ff-ranko-icons: "ranko-icons"; /** @Font-weight Declaration */ --tj-fw-normal: normal; --tj-fw-thin: 100; --tj-fw-elight: 200; --tj-fw-light: 300; --tj-fw-regular: 400; --tj-fw-medium: 500; --tj-fw-sbold: 600; --tj-fw-bold: 700; --tj-fw-ebold: 800; --tj-fw-black: 900; /** @Font-Size Declaration */ --tj-fs-body: 16px; --tj-fs-h1: 70px; --tj-fs-h2: 48px; --tj-fs-h3: 32px; --tj-fs-h4: 24px; --tj-fs-h5: 20px; --tj-fs-h6: 18px; --tj-fs-h7: 16px; --tj-fs-h8: 14px; --tj-fs-p1: 22px; --tj-fs-p2: 18x; --tj-fs-p3: 16px; --tj-fs-p4: 14px; --tj-fs-btn: 16px; --tj-fs-link: 16px; --tj-fs-subtitle: 14px; /** @Line Height Declaration */ --tj-lh-body: 1.625; --tj-lh-h1: 1.114; --tj-lh-h2: 1.208; --tj-lh-h3: 1.25; --tj-lh-h4: 1.333; --tj-lh-h5: 1.4; --tj-lh-h6: 1.444; --tj-lh-h7: 1.5; --tj-lh-h8: 1.571; --tj-lh-p1: 1.455; --tj-lh-p2: 1.556; --tj-lh-p3: 1.625; --tj-lh-p4: 1.571; --tj-lh-btn: 1.625; --tj-lh-link: 1.625; --tj-lh-subtitle: 1.571; /** @Color Declaration */ --tj-color-common-white: #ffffff; --tj-color-common-white2: #c0c6d1; --tj-color-common-white3: rgba(255, 255, 255, 0.9490196078); --tj-color-common-white4: rgba(255, 255, 255, 0.8); --tj-color-common-white5: rgba(255, 255, 255, 0.7019607843); --tj-color-common-black: #000000; --tj-color-heading-primary: #05173d; --tj-color-text-body: #3d4a66; --tj-color-theme-primary: #f44454; --tj-color-theme-secondary: #054ce0; --tj-color-theme-supportive: #ffd639; --tj-color-theme-bg1: #edf1fa; --tj-color-theme-bg2: #faedef; --tj-color-theme-bg3: rgba(244, 68, 84, 0.2); --tj-color-theme-bg4: rgba(255, 255, 255, 0.1019607843); --tj-color-theme-bg5: #e2daf2; --tj-color-theme-bg6: #daf2ec; --tj-color-theme-bg7: #dae5f2; --tj-color-theme-bg8: rgba(255, 255, 255, 0.1490196078); --tj-color-theme-bg9: rgba(5, 76, 224, 0.1490196078); --tj-color-theme-bg10: rgba(5, 76, 224, 0.2); --tj-color-theme-dark: #05173d; --tj-color-theme-dark2: #596580; --tj-color-theme-dark3: rgba(5, 23, 61, 0.6); --tj-color-theme-dark4: rgba(5, 23, 61, 0.6); --tj-color-theme-dark5: rgba(57, 25, 82, 0.1019607843); --tj-color-green-1: #21b754; --tj-color-blue-1: #0f9af1; --tj-color-grey-1: #c5c5c5; --tj-color-border-1: #dadfe7; --tj-color-border-2: #1d3152; --tj-color-border-3: #e8dadb; --tj-color-border-4: rgba(255, 255, 255, 0.1019607843); --tj-color-border-5: rgba(255, 255, 255, 0.1490196078); --tj-color-border-6: rgba(255, 255, 255, 0.4); --tj-color-border-7: rgba(255, 255, 255, 0.3019607843); --tj-color-border-9: rgba(255, 255, 255, 0.2); --tj-color-border-10: rgba(218, 223, 231, 0.5019607843); --tj-color-border-11: rgba(29, 49, 82, 0.1215686275); /** @Gradient Declaration */ --tj-gradient-theme-primary: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%); /** @Shadows Declaration */ --tj-shadow-theme-primary: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843); /** @Border Radius Declaration */ --tj-br-sm: 4px; --tj-br-md: 8px; --tj-br-lg: 10px; --tj-br-xl: 16px; --tj-br-xxl: 24px; /** @Transition Declaration */ --tj-td-standard: 0.3s; } /**---------------------------------------- START: back to top CSS ----------------------------------------*/ .tj-anim-pulse { animation: pulse2 1.5s infinite; } .tj-anim-pulse-1 { animation: pulse1 1.5s infinite; } .tj-anim-move-var { animation-name: moveVar; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } .tj-anim-move-var-lg { animation-name: moveVarLg; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .tj-anim-move-hor { animation-name: moveHor; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } .tj-anim-move-hor-lg { animation-name: moveHorLg; animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; } .tj-anim-spinner { animation: spinner 3s 0s infinite alternate none running; } .tj-anim-spinner-2 { animation: spinner-2 3s linear infinite; } .start-img { opacity: 0.5; animation: startImageFadeIn 3s alternate ease-in-out infinite; } .start-img:nth-child(2) { animation-duration: 3.5s; } .start-img:nth-child(3) { animation-duration: 4s; } .start-img:nth-child(2) { animation-duration: 4.5s; } .tj-zoom-in-out { animation: tjZoomInOut 2s alternate ease-in-out infinite; } @keyframes pulse2 { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes pulse1 { 0% { box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6); } 70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes moveHor { 0% { transform: translateX(0); } 100% { transform: translateX(50px); } } @keyframes moveHor2 { 0% { transform: translate(56%, -50%); } 100% { transform: translate(75%, -50%); } } @keyframes moveHorLg { 0% { transform: translateX(0); } 100% { transform: translateX(100%); } } @keyframes moveVar { 0% { transform: translateY(0); } 100% { transform: translateY(30px); } } @keyframes moveVarLg { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } } @keyframes spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinner-2 { to { transform: translate(50%, -50%) rotate(360deg); } } @keyframes jump-arrow { 0%, 20%, 55%, 80%, 100% { transform: translate3d(-50%, 0, 0) rotate(-90deg); } 40% { transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 70% { transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 90% { transform: translate3d(-50%, -5px, 0) rotate(-90deg); } } @keyframes shakeAnimation { 0% { transform: rotate(-20deg); } 25% { transform: rotate(20deg); } 50% { transform: rotate(-20deg); } 75% { transform: rotate(20deg); } 100% { transform: rotate(0); } } @keyframes startImageFadeIn { 0% { opacity: 0.5; transform: scale(0.68) rotate(0); } 100% { opacity: 1; transform: scale(1) rotate(360deg); } } @keyframes tjZoomInOut { 0% { transform: scale(0.8); } 100% { transform: scale(1); } } @keyframes textHover { 0% { letter-spacing: -0.02em; } 100% { letter-spacing: 1px; } } @keyframes pulseAnimation { 0% { opacity: 0; transform: scale(0) translateY(50px); } 80% { opacity: 1; transform: scale(1) translateY(0); } 90% { transform: scale(1) rotate(0); } 92% { transform: scale(1) rotate(-10deg); } 94% { transform: scale(1) rotate(10deg); } 96% { transform: scale(1) rotate(-10deg); } 98% { transform: scale(1) rotate(10deg); } 100% { transform: scale(1) rotate(0); } } @keyframes linehover { 0% { width: 100%; } 50% { width: 0; right: 0; } 100% { width: 100%; left: 0; } } @keyframes linehover2 { 0% { width: 100%; } 50% { width: 0; right: 26px; } 100% { width: calc(100% - 26px); left: 0; } } @keyframes texthover { 0% { letter-spacing: -0.02em; } 30% { letter-spacing: -0.03em; } 60% { letter-spacing: -0.05em; } 100% { letter-spacing: -0.02em; } } @keyframes shake { 0%, 100% { transform: rotate(0) scale(1); } 10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg) scale(1.1); } 20%, 40%, 60%, 80% { transform: rotate(10deg) scale(1.1); } } .cd-words-wrapper { display: inline-block; position: relative; text-align: left; } .cd-words-wrapper b { display: inline-block; position: absolute; white-space: nowrap; left: 0; top: 0; font-weight: inherit; } .cd-words-wrapper b.is-visible { position: relative; } .no-js .cd-words-wrapper b { opacity: 0; line-height: 1; } .no-js .cd-words-wrapper b.is-visible { opacity: 1; } .cd-headline.clip span { display: inline-block; transition: none; } .cd-headline.clip .cd-words-wrapper { overflow: hidden; vertical-align: middle; padding-bottom: 5px; } .cd-headline.clip .cd-words-wrapper::after { top: 16%; right: 0; width: 3px; content: ""; height: 80%; position: absolute; background-color: #3b3b3b; } .cd-headline.clip b { opacity: 0; } .cd-headline.clip b.is-visible { opacity: 1; } /************ TABLE OF CONTENTS *************** 01. Theme Default CSS 02. Buttons CSS 03. Input CSS 04. Socials CSS 05. Progress Bar CSS 06. Tab switcher CSS 07. Section Headign CSS 08. Header CSS 09. Hamburger CSS 10. Mainmenu CSS 11. Footer CSS 12. Back to top CSS 13. Preloader CSS 14. Rating CSS 15. Shape CSS 16. Text Marquee CSS 17. Pagintions CSS 18. Hero CSS 19. Contact CSS 20. Brand Marrquee CSS 21. About CSS 22. Funfact CSS 23. Service CSS 34. Portfolio CSS 25. Faq CSS 26. Process CSS 27. Testimonials CSS 28. Blog CSS 29. Service Marquee CSS 30. Service Marquee CSS 31. Team CSS 32. Team Details CSS 33. Package CSS 34. Award CSS 35. Blog Details CSS **********************************************/ /**---------------------------------------- START: Theme Default CSS ----------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; } /** Typography CSS */ body { font-family: var(--tj-ff-body); font-size: var(--tj-fs-body); font-weight: normal; color: var(--tj-color-text-body); line-height: var(--tj-lh-body); } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--tj-ff-heading); color: var(--tj-color-heading-primary); margin-top: 0px; font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; line-height: 1.2; } h1 { font-size: var(--tj-fs-h1); line-height: var(--tj-lh-h1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { h1 { font-size: 65px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { h1 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { h1 { font-size: 56px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h1 { font-size: 50px; } } @media (max-width: 575px) { h1 { font-size: 40px; } } h2 { font-size: var(--tj-fs-h2); line-height: var(--tj-lh-h2); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { h2 { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { h2 { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h2 { font-size: 34px; } } @media (max-width: 575px) { h2 { font-size: 32px; } } h3 { font-size: var(--tj-fs-h3); line-height: var(--tj-lh-h3); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { h3 { font-size: 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { h3 { font-size: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { h3 { font-size: 26px; } } @media (max-width: 575px) { h3 { font-size: 24px; } } h4 { font-size: var(--tj-fs-h4); line-height: var(--tj-lh-h4); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { h4 { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h4 { font-size: 20px; } } h5 { font-size: var(--tj-fs-h5); line-height: var(--tj-lh-h5); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h5 { font-size: 18px; } } h6 { font-size: var(--tj-fs-h6); line-height: var(--tj-lh-h6); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { h6 { font-size: 16px; } } .blog-text .wp-block-site-title :where(a), :where(h1, h2, h3, h4, h5, h6) a { font-size: inherit; color: inherit; font-weight: inherit; line-height: inherit; display: inline; } h1:hover a, h2:hover a, h3:hover a, h4:hover a, h5:hover a, h6:hover a { font-size: inherit; color: inherit; font-weight: inherit; } ul { margin: 0px; padding: 0px; list-style-type: none; } span, input { display: inline-block; } a, .btn, button, span, p, input, select, textarea, li, img, svg path, *::after, *::before, h1, h2, h3, h4, h5, h6 { -webkit-transition: all var(--tj-td-standard) ease-in-out 0s; -moz-transition: all var(--tj-td-standard) ease-in-out 0s; -ms-transition: all var(--tj-td-standard) ease-in-out 0s; -o-transition: all var(--tj-td-standard) ease-in-out 0s; transition: all var(--tj-td-standard) ease-in-out 0s; } textarea { resize: none; } i { -webkit-transition: transform var(--tj-td-standard) ease-in-out 0s; -moz-transition: transform var(--tj-td-standard) ease-in-out 0s; -ms-transition: transform var(--tj-td-standard) ease-in-out 0s; -o-transition: transform var(--tj-td-standard) ease-in-out 0s; transition: transform var(--tj-td-standard) ease-in-out 0s; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; } a, button { color: inherit; outline: none; border: none; background: transparent; } a:focus, a:focus-visible, button:focus, button:focus-visible { outline: 0; box-shadow: 0 0 0; } button:hover { cursor: pointer; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } * { scrollbar-width: thin; scrollbar-color: var(--tj-color-theme-primary) var(--tj-color-grey-1); } ::-webkit-scrollbar { height: 4px; width: 6px; } ::-webkit-scrollbar-thumb { background: var(--tj-color-theme-primary); -webkit-border-radius: 1ex; -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.75); } ::-webkit-scrollbar-corner { background: transparent; } *::-moz-selection { background: var(--tj-color-common-black); color: var(--tj-color-common-white); text-shadow: none; } ::-moz-selection { background: var(--tj-color-common-black); color: var(--tj-color-common-white); text-shadow: none; } ::selection { background: var(--tj-color-common-black); color: var(--tj-color-common-white); text-shadow: none; } *::-webkit-input-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *:-moz-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *::-moz-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *:-ms-input-placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } *::placeholder { color: var(--tj-color-common-black); font-size: var(--tj-fs-body); opacity: 1; } /** Common Classes CSS */ img { max-width: 100%; } .w-img img { width: 100%; } .m-img img { max-width: 100%; } .fix { overflow: hidden; } .container { --bs-gutter-x: 30px; } @media only screen and (min-width: 1781px), only screen and (min-width: 1601px) and (max-width: 1780px), only screen and (min-width: 1400px) and (max-width: 1600px) { .container { --bs-gutter-x: 0; } } .container-fluid { --bs-gutter-x: 30px; } .row { --bs-gutter-x: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .row { --bs-gutter-x: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .row { --bs-gutter-x: 20px; } } .gap-30-0 { gap: 30px 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .gap-30-0 { gap: 20px 0; } } .section-inner--lg { margin: 0 35px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-inner--lg { margin: 0; } } .section-gap { padding: 120px 0; } .section-gap-top { padding-top: 120px; } .section-gap-bottom { padding-bottom: 120px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .section-gap { padding: 100px 0; } .section-gap-top { padding-top: 100px; } .section-gap-bottom { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .section-gap { padding: 80px 0; } .section-gap-top { padding-top: 80px; } .section-gap-bottom { padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-gap { padding: 60px 0; } .section-gap-top { padding-top: 60px; } .section-gap-bottom { padding-bottom: 60px; } } .swiper { padding-bottom: 70px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .swiper { padding-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .swiper { padding-bottom: 40px; } } .swiper-pagination-bullet { height: 10px; width: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .swiper-pagination-bullet { height: 8px; width: 8px; } } .swiper-pagination-bullet-active, .swiper-pagination-bullet:hover { width: 35px; border-radius: 10px; background-color: var(--tj-color-theme-secondary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .swiper-pagination-bullet-active, .swiper-pagination-bullet:hover { width: 30px; } } .swiper-button-prev, .swiper-button-next { width: 50px; height: 50px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-common-white); border-radius: 100%; opacity: 0; visibility: hidden; transition: all 0.3s; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .swiper-button-prev, .swiper-button-next { display: none; } } .swiper-button-prev::after, .swiper-button-next::after { font-family: "ranko-icons"; color: var(--tj-color-theme-dark); font-size: 14px; } .swiper-button-prev { left: 10px; transform: translateX(-50%); } .swiper-button-prev::after { content: "\e908"; } .swiper-button-next { right: 10px; transform: translateX(50%); } .swiper-button-next::after { content: "\e906"; } .swiper-button-prev:hover, .swiper-button-next:hover { border-color: var(--tj-color-theme-primary); background: var(--tj-color-theme-primary); } .swiper-button-prev:hover::after, .swiper-button-prev:hover::after, .swiper-button-next:hover::after, .swiper-button-next:hover::after { color: var(--tj-color-common-white); } .swiper-button-disabled { opacity: 0; cursor: not-allowed; } .swiper:hover .swiper-button-prev, .swiper:hover .swiper-button-next { opacity: 1; visibility: visible; } .swiper:hover .swiper-button-prev { left: 0; } .swiper:hover .swiper-button-next { right: 0; } .swiper:hover .swiper-button-disabled { opacity: 0; cursor: not-allowed; } .swiper:has(.swiper-pagination-bullet) .swiper-button-prev, .swiper:has(.swiper-pagination-bullet) .swiper-button-next { top: calc(50% - 35px); } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } .tj-split-text-1 { opacity: 0; visibility: hidden; } .tj-split-text-1.animation-initialized { visibility: visible; opacity: 1; } .elementor-editor-active .tj-split-text-1 { opacity: 1; visibility: visible; } #wp-admin-bar-elementor_edit_page .elementor-edit-link-title { display: unset; } .line { position: relative; background-clip: text; color: transparent; --highlight-offset: 0%; background-image: linear-gradient(90deg, var(--tj-color-heading-primary) var(--highlight-offset), rgba(5, 23, 61, 0.35) var(--highlight-offset)); } .tj-sticky-panel, .tj-sticky-panel-2, .sidebar-sticky, .tj-progress-wrapper { will-change: transform; } .pt-15 { padding-top: 15px; } .pb-30 { padding-bottom: 30px; } @media (max-width: 575px) { .pb-30 { padding-bottom: 20px; } } .rg-30 { row-gap: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .rg-30 { row-gap: 20px; } } .rg-40 { row-gap: 40px; } .rg-50 { row-gap: 50px; } .rg-60 { row-gap: 60px; } .rg-70 { row-gap: 70px; } .rg-80 { row-gap: 80px; } .elementor .sec-gap-x { padding-left: 30px; padding-right: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .elementor .sec-gap-x { padding-left: 15px; padding-right: 15px; } } .gap-20-0 { gap: 20px 0; } /* !END: Theme Default CSS */ /**---------------------------------------- START: Buttons CSS ----------------------------------------*/ .tj-btn { display: inline-flex; align-items: center; gap: 8px; font-size: var(--tj-fs-btn); color: var(--tj-color-common-white); position: relative; padding: 19px 30px; border-radius: var(--tj-br-md); font-weight: var(--tj-fw-medium); line-height: 1; border: 1px solid var(--tj-color-theme-primary); overflow: hidden; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-btn { padding: 16px 24px; } } .tj-btn i { color: var(--tj-color-common-white); display: inline-block; font-size: 12px; padding-top: 1px; line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-btn i { font-size: 11px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .tj-btn { padding: 15px 20px; } } .tj-btn::after { content: ""; width: calc(100% + 5px); height: calc(100% + 5px); border-radius: 8px; background-color: var(--tj-color-theme-primary); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s ease; z-index: -1; } .tj-btn:focus, .tj-btn:hover { color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .tj-btn:focus::after, .tj-btn:hover::after { transform: translate(-50%, -50%) scale(0); } .tj-btn:focus i, .tj-btn:hover i { transform: translateX(2px); color: var(--tj-color-theme-primary); } .tj-btn--underline { padding: 0; padding-bottom: 5px; border: 0; border-radius: 0; line-height: 1; color: var(--tj-color-common-white); } .tj-btn--underline::after { display: none; } .tj-btn--underline::before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 1px; background-color: currentColor; } .tj-btn--underline:focus, .tj-btn--underline:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-common-white); } .tj-btn--underline:focus i, .tj-btn--underline:hover i { color: var(--tj-color-common-white); } .tj-btn--underline:focus::before, .tj-btn--underline:hover::before { animation: linehover 0.8s linear; } .tj-btn--underline-2 { color: var(--tj-color-theme-dark); font-weight: var(--tj-fw-sbold); gap: 2px; padding-bottom: 1px; } .tj-btn--underline-2 i { color: var(--tj-color-theme-dark); font-size: 20px; font-weight: var(--tj-fw-sbold); transform: translateY(-1px); } .tj-btn--underline-2::before { background-color: currentColor; right: 7px; } .tj-btn--underline-2:focus, .tj-btn--underline-2:hover { color: var(--tj-color-theme-dark); } .tj-btn--underline-2:focus i, .tj-btn--underline-2:hover i { transform: translateY(-1px); color: var(--tj-color-theme-dark); } .tj-btn--underline-dark { color: var(--tj-color-theme-dark); border-color: var(--tj-color-theme-dark); } .tj-btn--underline-dark i { color: var(--tj-color-theme-dark); } .tj-btn--underline-dark:focus, .tj-btn--underline-dark:hover { color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .tj-btn--underline-dark:focus i, .tj-btn--underline-dark:hover i { color: var(--tj-color-theme-primary); } .tj-btn--md { padding: 16px 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .tj-btn--md { padding: 16px 20px; } } .tj-btn--sm { padding: 14px 20px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .tj-btn--sm { padding: 11px 20px; } } .tj-btn--bordered { border: 1px solid var(--tj-color-theme-dark); color: var(--tj-color-theme-dark); z-index: 0; } .tj-btn--bordered::after { transform: translate(-50%, -50%) scale(0); z-index: -1; background-color: var(--tj-color-theme-dark); } .tj-btn--bordered i { color: var(--tj-color-theme-dark); } .tj-btn--bordered:focus, .tj-btn--bordered:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-theme-dark); } .tj-btn--bordered:focus i, .tj-btn--bordered:hover i { color: var(--tj-color-common-white); } .tj-btn--bordered:focus:after, .tj-btn--bordered:hover:after { transform: scale(1); transform: translate(-50%, -50%) scale(1); } .tj-btn--bordered.tj-btn--sm { padding: 14px 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .tj-btn--bordered.tj-btn--sm { padding: 13px 25px; } } .tj-btn-2 { display: inline-block; font-size: 16px; font-weight: var(--tj-fw-medium); color: var(--tj-color-heading-primary); } .tj-btn-2 i { transform: rotate(-45deg); font-size: 14px; color: var(--tj-color-heading-primary); margin-left: 4px; display: inline-block; } .tj-btn-2:focus, .tj-btn-2:hover { color: var(--tj-color-theme-primary); } .tj-btn-2:focus i, .tj-btn-2:hover i { transform: rotate(0); color: var(--tj-color-theme-primary); } .tj-btn-2--underline { text-decoration: underline; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .tj-btn-2--underline i { font-size: 12px; } } .tj-btn--full { width: 100%; display: flex; align-items: center; justify-content: center; } .tj-btn--popup { background-color: transparent; border: 1px solid var(--tj-color-common-white); border-radius: 100%; padding: 0; width: 54px; height: 54px; justify-content: center; } .tj-btn--popup i { font-size: 16px; color: var(--tj-color-common-white); } .tj-btn--popup::after { display: none; } .tj-btn--popup-2 { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border: 0; } .tj-btn--popup-2:focus { color: var(--tj-color-common-white); } .tj-btn--popup-2:focus i { color: var(--tj-color-common-white); } .tj-btn-3 { padding: 0; gap: 0; position: relative; overflow: visible; border: 0; border-radius: 0; background-color: transparent; width: -moz-fit-content; width: fit-content; } .tj-btn-3::after { display: none; } .tj-btn-3 .btn-text { padding: 19px 30px; gap: 15px; border-radius: 70px; text-shadow: 2px; background-color: var(--tj-color-theme-primary); display: inline-flex; align-items: center; } .tj-btn-3 .btn-text-inner { text-shadow: 0 16px 0 currentColor; overflow: hidden; } .tj-btn-3 .btn-text-inner span { transform: translateY(0); } .tj-btn-3 .btn-icon { width: 54px; height: 54px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; background-color: var(--tj-color-theme-primary); transition: all var(--tj-td-standard) ease-in-out 0s; transform-origin: center; border-radius: 50%; position: relative; z-index: 1; } .tj-btn-3 .btn-icon i { color: var(--tj-color-common-white); font-size: 16px; transform: rotate(-45deg); } .tj-btn-3 > :nth-child(1) { margin-inline-end: -54px; transform: scale3d(0.5, 0.5, 1); opacity: 0; } .tj-btn-3 > :nth-child(3) { margin-inline-start: 0; transform: scale3d(1, 1, 1); opacity: 1; } .tj-btn-3:hover { color: var(--tj-color-common-white); } .tj-btn-3:hover > :nth-child(1) { margin-inline-end: 0; transform: scale3d(1, 1, 1); opacity: 1; } .tj-btn-3:hover > :nth-child(3) { margin-inline-start: -54px; transform: scale3d(0.5, 0.5, 1); opacity: 0; } .tj-btn-h4 { padding: 8px 8px 8px 30px; gap: 15px; border-radius: 70px; } .tj-btn-h4::after { left: auto; right: 0; border-radius: 60px; top: 0; width: 100%; height: 100%; transform: none; transition: all var(--tj-td-standard) ease-in-out 0s; } .tj-btn-h4 .btn-icon { width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; background-color: var(--tj-color-common-white); transition: all var(--tj-td-standard) ease-in-out 0s; transform: rotate(-45deg); border-radius: 50%; will-change: transform; } .tj-btn-h4 .btn-icon i { color: var(--tj-color-heading-primary); font-size: 16px; } .tj-btn-h4:hover::after { width: 40px; height: 40px; border-radius: 50%; transform: scale(1); right: 8px; top: 8px; } .tj-btn-h4:hover .btn-icon { transform: rotate(0deg); background-color: transparent; } .tj-btn-h4:hover .btn-icon i { transform: none; color: var(--tj-color-common-white); } .tj-btn--2 { padding: 8px 8px 8px 30px; gap: 15px; border-radius: 70px; } .tj-btn--2::after { left: auto; right: 0; border-radius: 60px; transform: translate(0, 0) scale(1.2); top: 0; width: 100%; height: 100%; } .tj-btn--2 .tj-btn__icon { width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; background-color: var(--tj-color-common-white); transition: all var(--tj-td-standard) ease-in-out 0s; transform: rotate(-45deg); border-radius: 50%; will-change: transform; } .tj-btn--2 .tj-btn__icon svg, .tj-btn--2 .tj-btn__icon i { display: inline-flex; line-height: 1; } .tj-btn--2 .tj-btn__icon i { color: var(--tj-color-heading-primary); font-size: 16px; } .tj-btn--2 .tj-btn__icon svg { max-width: 16px; height: auto; } .tj-btn--2 .tj-btn__icon:first-child { transform: scale3d(0, 0, 1) rotate(-45deg); margin-inline-end: -50px; opacity: 0; } .tj-btn--2 .tj-btn__icon:last-child { transform: scale3d(1, 1, 1) rotate(-45deg); margin-inline-start: 0; opacity: 1; } .tj-btn--2:hover { padding: 8px 30px 8px 8px; color: var(--tj-color-common-white); } .tj-btn--2:hover::after { transform: scale(1.2); } .tj-btn--2:hover .tj-btn__text { color: var(--tj-color-common-white); } .tj-btn--2:hover .tj-btn__icon:first-child { transform: scale3d(1, 1, 1) rotate(-45deg); margin-inline-end: 0; opacity: 1; } .tj-btn--2:hover .tj-btn__icon:last-child { transform: scale3d(0, 0, 1) rotate(-45deg); margin-inline-start: -50px; opacity: 0; } .tj-btn--2:hover .tj-btn__icon i { transform: none; } .tj-btn--3 { padding: 0; gap: 0; position: relative; overflow: visible; border: 0; border-radius: 0; background-color: transparent; width: -moz-fit-content; width: fit-content; } .tj-btn--3::after { display: none; } .tj-btn--3 .tj-btn__text { padding: 19px 30px; gap: 15px; border-radius: 70px; background-color: var(--tj-color-theme-primary); } .tj-btn--3 .tj-btn__icon { width: 54px; height: 54px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; background-color: var(--tj-color-theme-primary); transition: all var(--tj-td-standard) ease-in-out 0s; transform-origin: center; border-radius: 50%; position: relative; z-index: 1; } .tj-btn--3 .tj-btn__icon i { color: var(--tj-color-common-white); font-size: 16px; transform: rotate(-45deg); } .tj-btn--3 > :nth-child(1) { margin-inline-end: -54px; transform: scale3d(0.5, 0.5, 1); opacity: 0; } .tj-btn--3 > :nth-child(3) { margin-inline-start: 0; transform: scale3d(1, 1, 1); opacity: 1; } .tj-btn--3:hover { color: var(--tj-color-common-white); } .tj-btn--3:hover > :nth-child(1) { margin-inline-end: 0; transform: scale3d(1, 1, 1); opacity: 1; } .tj-btn--3:hover > :nth-child(3) { margin-inline-start: -54px; transform: scale3d(0.5, 0.5, 1); opacity: 0; } .tj-btn--4 { padding: 8px 30px 8px 8px; gap: 10px; } .tj-btn--4 .tj-btn__icon:first-child { transform: scale3d(1, 1, 1) rotate(-45deg); margin-inline-end: 0; opacity: 1; } .tj-btn--4 .tj-btn__icon:last-child { transform: scale3d(0, 0, 1) rotate(-45deg); margin-inline-start: -50px; opacity: 0; } .tj-btn--4::after { left: 0; } .tj-btn--4:hover { padding: 8px 8px 8px 30px; } .tj-btn--4:hover .tj-btn__icon:first-child { transform: scale3d(0, 0, 1) rotate(-45deg); margin-inline-end: -50px; opacity: 0; } .tj-btn--4:hover .tj-btn__icon:last-child { transform: scale3d(1, 1, 1) rotate(-45deg); margin-inline-start: 0; opacity: 1; } .tj-btn--4:hover::after { left: 0; top: 0; width: 100%; height: 100%; border-radius: 50px; } /* !END: Buttons CSS */ /**---------------------------------------- START: Input CSS ----------------------------------------*/ input::-ms-clear { display: none; } input::-webkit-search-cancel-button { display: none; } .tj-input { display: inline-flex; align-items: center; padding: 16px 18px; color: var(--tj-color-body-text); background-color: var(--tj-color-common-white); flex-grow: 1; transition: all 0.3s; font-size: var(--tj-fs-body); position: relative; z-index: 0; outline: none; border: 0; border-radius: var(--tj-br-md); box-sizing: border-box; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-input { padding: 16px 16px 12px; } } .tj-input::placeholder { opacity: 0.8; } .tj-input:focus { outline: none; border: 0; } .tj-input:focus::placeholder { opacity: 0.8; } .tj-input__wrapper { background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); border-radius: var(--tj-br-lg); display: inline-flex; justify-content: space-between; align-items: center; max-width: 100%; width: 460px; padding-right: 4px; gap: 10px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-input__wrapper { max-width: 100%; width: 410px; } } @media (max-width: 575px) { .tj-input__wrapper { width: 100%; } } .tj-input__wrapper:has(.tj-input:not(.tj-nice-select):focus) { border-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-input__wrapper .tj-input { width: 40%; } } .tj-input__wrapper--lg { padding: 5px 5px 5px 0; width: 100%; max-width: 557px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-input__wrapper--lg { padding: 0; padding-right: 5px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-input__wrapper--lg { padding: 0; padding-right: 2.5px; width: 100%; } } @media (max-width: 575px) { .tj-input__wrapper--lg { padding: 0px; padding-right: 2.5px; width: 100%; } } .tj-input::placeholder { color: var(--tj-color-body-text); } .tj-input.tj-nice-select { padding: 22px 30px; } .tj-nice-select { height: auto; z-index: 99; } .tj-nice-select span { line-height: 1; } .tj-nice-select .list { width: 100%; border: 0; } .subscribe-form .tj-input { width: 100%; } .style-2 .footer__top .tj-input__wrapper { width: 100%; padding: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--1 .tj-input { margin: 3px 0; } } /* !END: Input CSS */ /**---------------------------------------- START: Socials CSS ----------------------------------------*/ .tj-socials ul { display: flex; flex-wrap: wrap; gap: 6px; align-content: center; line-height: 1; } .tj-socials ul li { line-height: 1; } .tj-socials ul li a { display: inline-flex; align-items: center; justify-content: center; opacity: 0.4; transform: translateY(0); } .tj-socials ul li a i { color: var(--tj-color-theme-dark); font-size: 32px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-socials ul li a i { font-size: 24px; } } .tj-socials ul li a:hover { opacity: 1; transform: translateY(-2px); } .tj-socials ul li a:hover i { color: var(--tj-color-theme-secondary); } /* !END: Socials CSS */ /**---------------------------------------- START: Progress Bar CSS ----------------------------------------*/ .tj-progress { padding: 0; margin: 0; width: 100%; height: 8px; background: var(--tj-color-theme-bg1); position: relative; border-radius: 30px; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress { height: 6px; } } .tj-progress__list { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; list-style: none; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__list { margin-top: 20px; gap: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__list { margin-top: 20px; gap: 16px; } } .tj-progress__title { font-size: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__title { font-size: 14px; } } .tj-progress__bar { width: 0; height: 100%; background: var(--tj-color-theme-primary); position: relative; z-index: 1; border-radius: 30px; } .tj-progress__bar::after { content: ""; width: 18px; height: 18px; border: 4px solid var(--tj-color-theme-primary); border-radius: 100%; position: absolute; right: 0; top: 50%; transform: translate(3px, -50%); background: var(--tj-color-common-white); z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__bar::after { width: 16px; height: 16px; border-width: 3px; } } .tj-progress__perchant { font-size: 12px; padding: 5px 7px 4px; line-height: 1; height: auto; position: absolute; right: 0; bottom: 100%; transform: translate(11px, -13px); color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__perchant { font-size: 10px; padding: 4px 3px 4px 5px; transform: translate(9px, -11px); } } .tj-progress__perchant::after { content: ""; width: 0; height: 0; border: 5px solid transparent; border-top-color: var(--tj-color-theme-primary); position: absolute; top: 100%; left: 50%; transform: translateX(-50%); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress__perchant::after { border-width: 4px; } } /* !END: Progress Bar CSS */ /**---------------------------------------- START: Tab switcher CSS ----------------------------------------*/ .tj-tab-switcher .form-switch { padding: 0; margin: 0; } .tj-tab-switcher .form-check .form-check-input { display: none; } .tj-tab-switcher .form-check:has(.form-check-input) .form-check-label { display: inline-flex; align-items: center; gap: 8px; position: relative; cursor: pointer; background-color: var(--tj-color-theme-primary); float: none; height: 36px; width: 75px; margin: 0; box-shadow: none; border: 0; border-radius: 50px; } .tj-tab-switcher .form-switch:has(.form-check-input) .form-check-label::after { content: ""; height: 20px; width: 20px; border: 0; background: linear-gradient(149.04deg, rgba(244, 68, 84, 0.3) 15%, rgba(255, 250, 250, 0) 78.75%); border-radius: 37px; top: 50%; transform: translateY(-50%); position: absolute; left: 8.5px; z-index: 2; cursor: pointer; } .tj-tab-switcher .form-switch:has(.form-check-input) .form-check-label::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 28.5px; height: 28.5px; background-color: var(--tj-color-common-white); z-index: 1; border-radius: 100%; border: 0; transition: all 0.3s; } .tj-tab-switcher .form-check:has(.form-check-input:checked) .form-check-label::before { background-color: var(--tj-color-common-white); } .tj-tab-switcher .ms-input .form-check-input:checked { box-shadow: none; background-color: var(--tj-color-theme-primary); } .tj-tab-switcher .form-switch:has(.form-check-input:checked) .form-check-label::after { left: 45.5px; } .tj-tab-switcher .form-switch:has(.form-check-input:checked) .form-check-label::before { left: 42px; } /* !END: Tab switcher CSS */ /**---------------------------------------- START: Section Headign CSS ----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-heading { overflow: hidden; } } .section-heading--centered { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; } .section-heading--centered .section-heading__title { max-width: 575px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .section-heading--centered .section-heading__title { max-width: 448px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-heading--centered .section-heading__title { max-width: 374px; } } .section-heading--spacing { margin-bottom: 50px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .section-heading--spacing { margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-heading--spacing { margin-bottom: 35px; } } .section-heading__sub-title { font-family: var(--tj-ff-body); display: inline-flex; gap: 5px; justify-content: center; align-items: center; padding: 5px 10px 3px; background-color: var(--tj-color-theme-bg2); color: var(--tj-color-theme-primary); font-weight: var(--tj-fw-medium); font-size: 14px; text-transform: uppercase; line-height: 1; vertical-align: middle; letter-spacing: 2%; border-radius: 6px; margin-bottom: 16px; } .section-heading__sub-title::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; border-radius: 100%; background: var(--tj-color-theme-primary); margin-bottom: 1.5px; } .section-heading__sub-title--2 { background-color: transparent; border: 1px solid var(--tj-color-theme-primary); } .section-heading__sub-title--2::before { display: none; } .section-heading__sub-title.style-3 { background-color: transparent; padding: 0; } .section-heading__title { margin-bottom: 24px; font-size: 48px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .section-heading__title { font-size: 40px; margin-bottom: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .section-heading__title { font-size: 36px; margin-bottom: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-heading__title { font-size: 32px; margin-bottom: 12px; max-width: 450px; } } @media (max-width: 575px) { .section-heading__title { max-width: 100%; } } /* !END: Section Headign CSS */ /**---------------------------------------- START: Header CSS ----------------------------------------*/ .header { box-shadow: var(--tj-shadow-theme-primary); max-width: 100%; margin: 0 auto; background-color: var(--tj-color-common-white); border-bottom-right-radius: var(--tj-br-xl); border-bottom-left-radius: var(--tj-br-xl); position: relative; z-index: 998; } .header.wp-header { box-shadow: none; } .header--absolute { position: absolute; left: 50px; right: 50px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .header--absolute { left: 15px; right: 15px; } } .header-duplicate { position: fixed; top: -300px; left: 50px; right: 50px; transition: top 0.3s ease-in-out; } .header-duplicate.sticky { top: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px) { .header-duplicate { left: 15px; right: 15px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .header { padding: 10px 0; max-width: 100%; } } .header__logo img { width: 133px; margin-left: -5px; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .header__logo img { width: 120px; } } @media (max-width: 575px) { .header__logo img { width: 110px; } } .header__wrapper { display: flex; gap: 20px; align-items: center; justify-content: space-between; } .header__wrapper > div:last-child { margin-left: auto; } .header__right { display: flex; align-items: center; gap: 12px; } .header__right .tj-socials ul li a i { font-size: 28px; } .header__mobile-toggler { width: 46px; height: 46px; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; border: 1px solid var(--tj-color-border-1); padding: 0 11px; border-radius: var(--tj-br-md); } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .header__mobile-toggler { width: 40px; height: 38px; padding: 0 8px; } } .header__mobile-toggler span { width: 100%; height: 2px; background-color: var(--tj-color-theme-dark); flex-shrink: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .header__mobile-toggler span { height: 2px; } } .header__mobile-toggler span:nth-child(2) { width: 80%; } .header__mobile-toggler span:last-child { width: 60%; } .header__mobile-toggler.active span:nth-child(2), .header__mobile-toggler:hover span:nth-child(2) { width: 100%; } .header__mobile-toggler.active span:last-child, .header__mobile-toggler:hover span:last-child { width: 100%; } .header__mobile-toggler.active span:first-child { transform: translateY(5px) rotate(45deg); } .header__mobile-toggler.active span:nth-child(2) { opacity: 0; visibility: hidden; } .header__mobile-toggler.active span:last-child { transform: translateY(-7px) rotate(-45deg); } .header__others { position: relative; height: 100%; } .header__others__dropdown { display: none; position: absolute; top: 120%; left: auto; right: 0; width: 350px; z-index: 99; text-align: left; background-color: var(--tj-color-common-white); -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); gap: 0; padding: 24px; border-radius: var(--tj-br-lg); } .header__others:hover .header__mobile-toggler span:nth-child(2) { width: 100%; } .header__others:hover .header__mobile-toggler span:last-child { width: 100%; } .header__title { color: var(--tj-color-theme-dark); font-size: 25px; margin-bottom: 20px; position: relative; z-index: 1; } .header__info { margin-bottom: 30px; } .header__info .contact-item { margin-bottom: 10px; } .header__info .contact-item .contact-text .text { color: var(--tj-color-text-body); font-size: 18px; } .header__info .contact-item .contact-text .text a:hover { color: var(--tj-color-theme-primary); } .header__info .contact-item .contact-text .text:last-child { margin-bottom: 0; } .header__search { position: relative; margin-bottom: 35px; } .header__search button { position: absolute; top: 50%; inset-inline-start: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tj-color-theme-dark); } .header__search input:not([type=submit]):not([type=radio]):not([type=checkbox]), .header__search .hamburger_search input { width: 100%; height: 40px; line-height: 40px; padding: 0 0 0 25px; background: transparent; border: none; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; outline: none; font-size: 16px; border-bottom: 1px solid var(--tj-color-border-1); color: var(--tj-color-theme-dark); } .header__search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .header__search .hamburger_search input::-ms-input-placeholder { opacity: 0.8; font-size: 18px; } .header__search input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .header__search .hamburger_search input::placeholder { opacity: 0.8; font-size: 18px; } .header--2 .header__wrapper { padding-left: 30px; padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--2 .header__wrapper { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .header--2 .header__wrapper { padding-left: 15px; padding-right: 15px; } } .header--2 .header__logo { width: 305px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--2 .header__logo { width: auto; } } .header--3 { margin-top: 30px; border-radius: var(--tj-br-xl); } @media (max-width: 575px) { .header--3 { margin-top: 15px; } } .header--3.header-duplicate { top: -120px; } .header--3.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; } .header--3 .header__wrapper { justify-content: space-between; padding-left: 20px; padding-right: 20px; } @media (max-width: 575px) { .header--3 .header__wrapper { padding-left: 15px; padding-right: 15px; } } .header--3 .header__wrapper > div:last-child { margin-left: 0; } .header--3 .header__logo { width: 133px; } .header--3 .header__right .tj-btn--sm:not(.tj-btn--bordered) { padding-left: 30px; padding-right: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--3 .header__right .tj-btn--sm:not(.tj-btn--bordered) { padding-left: 25px; padding-right: 25px; } } @media (min-width: 1025px) { .header__logo { padding: 20px 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .elementor-widget .header { margin: 0px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .elementor-widget .header--absolute, .elementor-widget .header-duplicate { left: 15px; right: 15px; } } .elementor-widget .header--3 { margin-top: 30px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .elementor-widget .header--3 { margin-top: 15px; } } /* !END: Header CSS */ /**---------------------------------------- START: Hamburger CSS ----------------------------------------*/ .hamburger-area { position: fixed; right: -490px; top: 0; width: 450px; height: 100%; background-color: var(--tj-color-common-white); box-shadow: var(--tj-shadow-theme-primary); transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); transition-duration: 1s; z-index: 99999; -ms-overflow-style: none; scrollbar-width: none; overflow-y: scroll; border-radius: 12px 0 0 12px; } .hamburger-area::-webkit-scrollbar { display: none; } .hamburger-area.opened { right: 0px; } @media (max-width: 575px) { .hamburger-area { width: 320px; } } .hamburger_bg { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: -1; backdrop-filter: blur(37px); } .hamburger_wrapper { position: relative; padding: 45px 45px 90px 45px; overflow: auto; height: 100%; } @media (max-width: 575px) { .hamburger_wrapper { padding: 40px 20px 60px 20px; } } .hamburger_top { margin-bottom: 40px; } .hamburger_close_btn { width: 40px; height: 38px; padding: 0 8px; display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 4px; border: 1px solid var(--tj-color-border-1); padding: 0 11px; border-radius: var(--tj-br-md); } .hamburger_close_btn i { font-size: 20px; font-weight: 500; display: inline-block; } .hamburger_close_btn:hover i { transform: rotate(90deg); } .hamburger_search { position: relative; margin-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hamburger_search { display: none; } .hamburger_search_wrapper { display: none; } } .hamburger_search select, .hamburger_search .nice-select, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox]), .hamburger_search input { width: 100%; line-height: 40px; padding: 10px 18px; background: transparent; border: none; outline: none; font-size: 18px; border: 1px solid var(--tj-color-border-1); border-radius: 8px; color: var(--tj-color-theme-dark); background-color: var(--tj-color-theme-bg1); } .hamburger_search select::-ms-input-placeholder, .hamburger_search .nice-select::-ms-input-placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::-ms-input-placeholder, .hamburger_search input::-ms-input-placeholder { opacity: 0.8; font-size: 18px; } .hamburger_search select::placeholder, .hamburger_search .nice-select::placeholder, .hamburger_search input:not([type=submit]):not([type=radio]):not([type=checkbox])::placeholder, .hamburger_search input::placeholder { opacity: 0.8; font-size: 18px; } .hamburger_search button { position: absolute; top: 50%; inset-inline-end: 18px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tj-color-theme-dark); } .hamburger_menu .mean-container .mean-bar { background: transparent; box-sizing: border-box; margin-bottom: 30px; } .hamburger_menu .mean-container .mean-bar * { box-sizing: border-box; } .hamburger_menu .mean-nav { background: transparent; margin-top: 0; overflow: hidden; } .hamburger_menu .mean-nav > ul { display: block !important; } .hamburger_menu .mean-nav > ul > li:first-child > a { border-top: none; } .hamburger_menu .mean-nav ul li { position: relative; } .hamburger_menu .mean-nav ul li a { color: var(--tj-color-theme-dark); width: 100%; padding: 16px 0; border-top: none; border-bottom: 1px solid var(--tj-color-border-1); font-family: var(--tj-ff-body); font-weight: var(--tj-fw-medium); font-size: 16px; line-height: 1; letter-spacing: 1px; transition: all 0.4s ease-in-out 0s; text-transform: capitalize; } .hamburger_menu .mean-nav ul li a:hover { color: var(--tj-color-theme-secondary); } .hamburger_menu .mean-nav ul li a.mean-expand { display: inline-flex; justify-content: center; align-items: center; padding: 0; width: 30px; height: 30px; text-align: center; position: absolute; right: 0; top: 10px; transition: all 0.4s ease-in-out 0s; } .hamburger_menu .mean-nav ul li a.mean-expand:hover { color: var(--tj-color-theme-dark); } .hamburger_menu .mean-nav ul li a.mean-expand i { font-size: 5px; display: inline-block; } .hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked { color: var(--tj-color-theme-primary); } .hamburger_menu .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(180deg); } .hamburger_menu .mean-nav ul li:has(.header__mega-menu) { padding: 0; } .hamburger_menu .mean-nav ul li:has(.header__mega-menu) .row { --bs-gutter-x: 0; } .hamburger_menu .mean-nav ul li:has(.header__mega-menu) .sub-menu li { padding: 0; } .hamburger_menu .mean-nav ul li .header__mega-menu { width: 100%; padding: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hamburger_menu .mean-nav ul li .header__mega-menu { padding: 0; } } .hamburger_menu .mean-nav ul li .header__mega-menu > ul { padding: 20px 0 15px; display: grid; gap: 15px; } .hamburger_menu .mean-nav ul li .header__mega-menu > ul li a { display: flex; flex-direction: column; gap: 20px; align-items: center; background: var(--tj-color-theme-bg1); padding: 20px; border-radius: 12px; border: 0; } .hamburger_menu .mean-nav ul li .header__mega-menu > ul li a span { border-radius: 8px; overflow: hidden; } .hamburger_menu .mean-nav ul li .header__mega-menu > ul li a:hover img { transform: scale(1.1); } .hamburger_menu .mean-nav ul li .sub-menu li { padding-left: 25px; position: relative; } .hamburger_menu .mean-nav ul li .sub-menu li a { width: 100%; padding: 18px 0; text-transform: capitalize; } .hamburger_menu .mean-nav ul li .sub-menu li a.mean-expand { padding: 0; width: 30px; } .hamburger_menu .mean-nav ul li.dropdown-opened > a { color: var(--tj-color-theme-primary); } @media (min-width: 992px) { .hamburger-area--2 .hamburger_wrapper { padding: 45px 45px 45px; display: flex; flex-direction: column; } .hamburger-area--2 .hamburger_top { margin-bottom: 22px; margin-inline-start: -6px; } .hamburger-area--2 .hamburger_desc { margin-bottom: 30px; } .hamburger-area--2 .hamburger_search { margin-bottom: 35px; } .hamburger-area--2 .hamburger-infos { margin-bottom: 30px; } .hamburger-area--2 .contact-title { font-size: 16px; margin-bottom: 0; } .hamburger-area--2 .tj-socials { margin-top: auto; } } .tj-offcanvas-area .hamburger_menu .mean-nav ul li a { color: var(--tj-color-grey-1); font-size: 72px; border-bottom: none; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-offcanvas-area .hamburger_menu .mean-nav ul li a { font-size: 40px; } } .tj-offcanvas-area .hamburger_menu .mean-nav ul li .sub-menu li { padding-left: 0; } .tj-offcanvas-area .hamburger_menu .mean-nav ul li .sub-menu li a { font-size: 22px; padding: 10px 0; } .tj-offcanvas-area .hamburger_menu .mean-nav ul li.dropdown-opened > a { color: var(--tj-color-theme-dark); } .hamburger-title { color: var(--tj-color-theme-dark); font-size: 24px; margin-bottom: 16px; position: relative; z-index: 1; } .hamburger-infos { margin-bottom: 50px; } .hamburger-infos .contact-item { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-bottom: 10px; } .hamburger-infos .contact-item:last-child { margin-bottom: 0; } .hamburger-infos .contact-item .contact-icon { position: relative; max-width: 40px; height: 55px; width: 100%; background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%); z-index: 1; } .hamburger-infos .contact-item .contact-icon span { position: absolute; top: 60%; left: 50%; line-height: 1; transform: translate(-50%, -50%); color: var(--tj-color-theme-dark); font-size: 18px; z-index: 2; } .hamburger-infos .contact-item .contact-text .text { color: var(--tj-color-body-text); font-size: 18px; } .hamburger-infos .contact-item .contact-text .text a:hover { color: var(--tj-color-theme-primary); } .hamburger-socials ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 15px; } .hamburger-socials ul li a { display: inline-flex; align-items: center; justify-content: center; width: 35px; height: 35px; border-radius: 50%; color: var(--tj-color-theme-dark); background: transparent; font-size: 14px; line-height: 1; border: 1.5px solid var(--tj-color-theme-dark); } .hamburger-socials ul li a i { color: var(--tj-color-theme-dark); } .hamburger-socials ul li a:hover { background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); color: var(--tj-color-theme-dark); } .hamburger-socials ul li a:hover i { color: var(--tj-color-theme-dark); } .hamburger_logo .mobile_logo { display: inline-block; max-width: 120px; width: 100%; } .menu-bar button { height: 25px; display: flex; flex-direction: column; justify-content: space-between; position: relative; transform-origin: center center; transform: rotate(0deg); cursor: pointer; transition: transform 300ms ease; } .menu-bar button span { height: 3px; width: 35px; display: block; background: var(--tj-color-theme-dark); cursor: pointer; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; margin-left: auto; } .menu-bar button span:nth-child(2) { width: 40px; transition-delay: 200ms; } .menu-bar button span:nth-child(3) { width: 30px; } .menu-bar button span:nth-child(4) { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); display: block; width: 3px; height: 0; transition: height 400ms; } .menu-bar.style-2 button span { background: var(--tj-color-heading-primary); } .menu-bar.menu-bar-toggeled button { transform: rotate(45deg); transition-delay: 400ms; } .menu-bar.menu-bar-toggeled button span:nth-child(1) { width: 0; } .menu-bar.menu-bar-toggeled button span:nth-child(3) { width: 0; } .menu-bar.menu-bar-toggeled button span:nth-child(4) { height: 40px; transition: height 200ms ease; transition-delay: 200ms; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .menu-bar { margin-left: 0; } } .body-overlay { height: 100%; width: 100%; position: fixed; top: 0; z-index: 9999; left: 0; opacity: 0; visibility: hidden; transition: all 0.3s ease-out 0s; backdrop-filter: blur(10px); } .body-overlay.opened { opacity: 1; visibility: visible; } /* !END: Hamburger CSS */ /**---------------------------------------- START: Mainmenu CSS ----------------------------------------*/ .mainmenu ul { display: flex; align-items: center; gap: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .mainmenu ul { gap: 30px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .mainmenu ul { gap: 20px; } } .mainmenu ul > li { position: relative; z-index: 1; } .mainmenu ul > li > a { padding: 30px 0px; font-size: var(--tj-fs-btn); color: var(--tj-color-theme-dark); display: inline-flex; align-items: center; font-weight: var(--tj-fw-medium); gap: 5px; } .mainmenu ul > li > a:hover { color: var(--tj-color-theme-primary); } .mainmenu ul > li.current-menu-ancestor > a { color: var(--tj-color-theme-primary); } .mainmenu ul > li.menu-item-has-children > a::after, .mainmenu ul > li.has-dropdown > a::after { font-size: 12px; content: "\e931"; font-family: "ranko-icons"; opacity: 0.7; color: var(--tj-color-theme-dark); line-height: 1; margin: 1px 0 0 1px; } .mainmenu ul > li > .sub-menu { display: block; position: absolute; top: 100%; left: 0; width: 220px; top: 100%; left: 0; z-index: 99; text-align: left; background-color: var(--tj-color-common-white); transform: scaleY(0); transform-origin: top; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; gap: 0; padding: 10px 0; pointer-events: none; transition: 0.4s; border-radius: 12px; } .mainmenu ul > li > .sub-menu > li { display: block; width: 100%; } .mainmenu ul > li > .sub-menu > li > a { position: relative; padding: 8px 20px; display: block; transform: translateX(0); color: var(--tj-color-text-body); } .mainmenu ul > li > .sub-menu > li > a::before { display: none; } .mainmenu ul > li > .sub-menu > li:last-child { padding-bottom: 0; } .mainmenu ul > li > .sub-menu > li.menu-item-has-children > a::after, .mainmenu ul > li > .sub-menu > li.has-dropdown > a::after { content: "\e931"; font-family: "ranko-icons"; position: absolute; top: 35%; right: 15px; color: var(--tj-color-text-body); } .mainmenu ul > li > .sub-menu > li.current-menu-item > a, .mainmenu ul > li > .sub-menu > li:hover > a { color: var(--tj-color-theme-primary); transform: translateX(2px); } .mainmenu ul > li > .sub-menu > li.current-menu-item > a::before, .mainmenu ul > li > .sub-menu > li:hover > a::before { opacity: 1; visibility: visible; width: 14px; } .mainmenu ul > li > .sub-menu > li.current-menu-item > a::after, .mainmenu ul > li > .sub-menu > li:hover > a::after { color: var(--tj-color-theme-primary); } .mainmenu ul > li > .sub-menu > li > .sub-menu { left: 100%; top: 0; border-top-right-radius: 12px; } .mainmenu ul > li.has-mega-menu { position: static; } .mainmenu ul > li.has-mega-menu:hover .mega-menu { transform: translateX(-50%) scaleY(1); } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .mainmenu ul > li.has-mega-menu:hover .mega-menu { transform: translateX(0) scaleY(1); } } .mainmenu ul > li .mega-menu { width: 100%; left: 50%; transform: translateX(-50%) scaleY(0); padding: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .mainmenu ul > li .mega-menu { width: auto; padding: 20px; left: 0; right: 0; transform: translateX(0) scaleY(0); } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .mainmenu ul > li .mega-menu { padding: 20px; } } .mainmenu ul > li .mega-menu .demo-page { row-gap: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .mainmenu ul > li .mega-menu .demo-page { row-gap: 20px; } } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo { display: flex; flex-direction: column; align-items: center; background: transparent; padding: 15px; font-size: var(--tj-fs-btn); color: var(--tj-color-theme-dark); font-weight: var(--tj-fw-medium); } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo span { overflow: hidden; } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo:hover { color: var(--tj-color-theme-primary); } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo:hover img { transform: scale(1.1); } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo.comming-soon { pointer-events: none; } .mainmenu ul > li.current-menu-ancestor > a { color: var(--tj-color-theme-primary); } .mainmenu ul > li.current-menu-ancestor > a::before { opacity: 1; visibility: visible; width: 14px; } .mainmenu ul > li.current-menu-ancestor > a::after { color: var(--tj-color-theme-primary); } .mainmenu ul > li:hover > a { color: var(--tj-color-theme-primary); } .mainmenu ul > li:hover > a::after { transform: rotate(-180deg); color: var(--tj-color-theme-primary); opacity: 1; } .mainmenu ul > li:hover > .sub-menu { opacity: 1; visibility: visible; transform: scaleY(1); transition: all 0.5s ease; pointer-events: inherit; } .hamburger_menu .mean-nav ul li .sub-menu.mega-menu li { padding-left: 0; } .hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page { padding-top: 20px; padding-bottom: 20px; flex-direction: column; gap: 15px; border-bottom: 1px solid var(--tj-color-border-1); } .hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo { display: flex; flex-direction: column; align-items: center; gap: 15px; background: transparent; padding: 15px; border-radius: 10px; border: 1px solid var(--tj-color-border-1); } .hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo span { border-radius: 8px; overflow: hidden; } .hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo:hover img { transform: scale(1.1); } .hamburger_menu .mean-nav ul li .sub-menu.mega-menu .demo-page .demo-page-item .demo.comming-soon { pointer-events: none; } .mainmenu ul > li .mega-menu { box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1); border-radius: 14px; border: 0; } .mainmenu ul > li .mega-menu .col-lg-3 { width: 20%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .mainmenu ul > li .mega-menu .col-lg-3 { width: 25%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .mainmenu ul > li .mega-menu .col-lg-3 { width: 100%; } } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo { gap: 15px; padding: 15px; border-radius: 10px; background: transparent; border: 1px solid var(--tj-color-border-1); } .mainmenu ul > li .mega-menu .demo-page .demo-page-item .demo span { border-radius: 8px; } /* !END: Mainmenu CSS */ /**---------------------------------------- START: Footer CSS ----------------------------------------*/ .footer__inner { position: relative; background-repeat: no-repeat; background-position: center; background-size: cover; margin-bottom: 30px; overflow: hidden; padding-top: 100px; border-radius: 16px; position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer__inner { padding: 0 30px; padding-top: 80px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer__inner { padding: 0 20px; padding-top: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__inner { padding: 0 5px; padding-top: 50px; margin-bottom: 15px; } } .footer__inner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-bg1); border-radius: 16px; opacity: 0.95; z-index: -1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer__inner::after { border-radius: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer__inner::after { border-radius: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__inner::after { border-radius: 16px; } } .footer__title { color: var(--tj-color-heading-primary); margin-bottom: 24px; margin-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__title { margin-bottom: 20px; margin-top: 0px; } } .footer__widget.widget_nav_menu ul { margin: 0; padding: 0; list-style: none; } .footer__widget.widget_nav_menu ul li { color: var(--tj-color-text-body); margin-bottom: 14px; } .footer__widget.widget_nav_menu ul li:last-child { margin-bottom: 0; } .footer__widget.widget_nav_menu ul li a { color: var(--tj-color-text-body); padding-left: 0; } .footer__widget.widget_nav_menu ul li a:hover { color: var(--tj-color-theme-primary); padding-left: 4px; } .footer__widget.footer__info .footer__info__address { max-width: 211px; margin-bottom: 18px; } @media (max-width: 575px) { .footer__widget.footer__info .footer__info__address { margin-bottom: 13px; } } .footer__widget.footer__info .footer__info__list ul { margin: 0; padding: 0; list-style: none; margin-bottom: 20px; } @media (max-width: 575px) { .footer__widget.footer__info .footer__info__list ul { margin-bottom: 15px; } } .footer__widget.footer__info .footer__info__list ul li { position: relative; margin-bottom: 0; } .footer__widget.footer__info .footer__info__list ul li .link { color: var(--tj-color-heading-primary); font-size: 18px; font-weight: var(--tj-fw-bold); font-family: var(--tj-ff-heading); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__widget.footer__info .footer__info__list ul li .link { font-size: 16px; } } .footer__widget.footer__info .footer__info__list ul li:hover .link { color: var(--tj-color-theme-primary); } .footer__widget.footer__info .footer__info__list ul span { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; line-height: 1; font-size: 10px; background: transparent; color: var(--tj-color-theme-primary); border: 1px solid var(--tj-color-theme-primary); border-radius: 50%; position: absolute; left: 0; top: 0; } .footer__widget.footer__info .footer__info__active-hours ul li { display: flex; gap: 10px; align-items: center; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-heading); } .footer__widget.footer__info .footer__info__active-hours ul li i { font-size: 19px; color: var(--tj-color-theme-primary); } .footer__widget--company { padding-left: 23px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer__widget--company { padding-left: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__widget--company { padding-left: 0px; } } .footer__widget--services { margin-left: -53px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__widget--services { margin-left: 0; padding-left: 0px; } } .footer__widget__subscription { padding: 24px 30px 30px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 16px; position: relative; z-index: 0; text-align: center; flex-grow: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__widget__subscription { padding: 20px; } } .footer__widget__subscription::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-secondary); opacity: 0.9; border-radius: 16px; z-index: -1; } .footer__widget__subscription__pattern { position: absolute; top: 20px; right: 20px; z-index: 1; } .footer__widget__subscription__pattern img { width: 93px; } .footer__widget__subscription__title { font-size: 32px; color: var(--tj-color-common-white); max-width: 330px; margin-bottom: 24px; text-align: left; position: relative; z-index: 2; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .footer__widget__subscription__title { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__widget__subscription__title { font-size: 24px; margin-bottom: 20px; } } .footer__widget__subscription .tj-input { padding-top: 14px; padding-bottom: 14px; border: 1px solid var(--tj-color-border-1); } .footer__widget__subscription .tj-input:focus { border-color: var(--tj-color-theme-primary); } .footer__widget__subscription .tj-input__wrapper { margin-bottom: 15px; background: transparent; border: 0; padding-right: 0; } .footer__widget__subscription__submit { margin-bottom: 15px; } .footer__widget__subscription__submit .tj-btn:hover { border-color: var(--tj-color-common-white); color: var(--tj-color-common-white); } .footer__widget__subscription__submit .tj-btn:hover i { color: var(--tj-color-common-white); } .footer__widget__subscription__security { display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--tj-color-common-white2); line-height: 1; margin-bottom: 0; } .footer__widget__subscription__security i { font-size: 20px; color: var(--tj-color-theme-primary); } .footer__widget__subscription__security span { margin-top: 1px; } .footer__widget__subscription .wpcf7 form .wpcf7-response-output { margin-top: 10px; color: var(--tj-color-common-white2); } .footer__widget__subscription .wpcf7-not-valid-tip { text-align: start; } .footer__contact { display: flex; gap: 30px; align-items: stretch; justify-content: flex-end; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__contact { justify-content: flex-start; flex-wrap: wrap; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__contact { gap: 20px; } } @media (max-width: 575px) { .footer__contact__single { width: 100%; } } .footer__contact__single a { display: flex; padding: 12.5px 30px; border: 2px solid var(--tj-color-border-9); background: transparent; border-radius: 10px; gap: 10px; align-items: center; height: 100%; min-height: 79px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-medium); font-family: var(--tj-ff-heading); letter-spacing: -0.02em; white-space: nowrap; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__contact__single a { padding: 12.5px 24px; } } @media (max-width: 575px) { .footer__contact__single a { justify-content: center; } } .footer__contact__single a i { font-size: 26px; } .footer__contact__single a:hover { background: var(--tj-color-border-9); } .footer__contact__ratings { display: inline-flex; gap: 22px; padding: 12.5px 30px; border: 2px solid var(--tj-color-border-9); border-radius: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__contact__ratings { padding: 12.5px 24px; } } @media (max-width: 575px) { .footer__contact__ratings { width: 100%; justify-content: center; } } .footer__contact__ratings__single--clutch img { margin-bottom: 4px; } .footer__contact__ratings .testimonials__rating { margin-bottom: 0; } .footer__contact__ratings .star-ratings { font-size: 18px; } .footer__contact__ratings .star-ratings .fill-ratings { color: var(--tj-color-common-white); } .footer__contact__ratings .star-ratings .empty-ratings { color: var(--tj-color-common-white); } .footer__contact__ratings__divider { flex-shrink: 0; width: 2px; height: 50px; background: var(--tj-color-border-9); } .footer__copyright__wrapper { display: flex; flex-wrap: wrap; column-gap: 12px; row-gap: 12px; align-items: center; justify-content: space-between; border-top: 1px solid var(--tj-color-common-black-2); border-bottom: 1px solid var(--tj-color-common-black-2); padding-top: 24px; padding-bottom: 24px; margin-top: 50px; border-top: 1px solid var(--tj-color-border-1); gap: 10px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer__copyright__wrapper { margin-top: 10px; row-gap: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__copyright__wrapper { margin-top: 0px; justify-content: center; flex-direction: column; row-gap: 15px; padding-bottom: 8px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer__copyright { padding: 20px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__copyright { padding: 10px 0 20px; } } .footer__copyright__text { color: var(--tj-color-text-body); } .footer__copyright__text a { font-weight: 500; color: var(--tj-color-theme-dark); } .footer__copyright__text a:hover { color: var(--tj-color-theme-primary); } .footer__copyright__menu ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; } .footer__copyright__menu ul li { position: relative; color: var(--tj-color-text-body); line-height: 1; z-index: 1; } .footer__copyright__menu ul li::before { position: absolute; content: ""; width: 1px; height: 100%; right: 0; top: 0; background: var(--tj-color-common-black-2); } .footer__copyright__menu ul li:last-child { padding-right: 0; margin-right: 0; } .footer__copyright__menu ul li:last-child::before { display: none; } .footer__copyright__menu ul li > a { color: var(--tj-color-text-body); } .footer__copyright__menu ul li > a:hover { color: var(--tj-color-theme-primary); } .footer__copyright__menu ul li > a { position: relative; } .footer__copyright__menu ul li > a::before { content: ""; width: 4px; height: 4px; background-color: var(--tj-color-text-body); border-radius: 100%; position: absolute; top: 50%; left: -14px; transform: translateY(-50%); } .footer__copyright__menu ul li > a::before:hover::before { background: var(--tj-color-theme-primary); } .footer__copyright__menu ul li:first-child a::before { display: none; } .footer__top__title { font-size: 48px; color: var(--tj-color-common-white); line-height: 1.208; margin: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__top__title { font-size: 40px; } } @media (max-width: 575px) { .footer__top__title { font-size: 26px; } } .footer__top__title__batch { padding: 6px 10px; background-color: var(--tj-color-theme-supportive); color: var(--tj-color-heading-primary); position: relative; line-height: 1; border-radius: 9px; } .footer__top__title__batch img { position: absolute; top: 0; right: 0; transform: translate(50%, -50%); } @media (max-width: 575px) { .footer__top__title__batch img { width: 30px; } } .footer__top .tj-input__wrapper { width: 100%; position: relative; display: block; padding: 0; background: transparent; border: 0; } .footer__top .tj-input__wrapper span, .footer__top .tj-input__wrapper .tj-input { width: 100%; } .footer__top .tj-input__wrapper .tj-input { min-height: 60px; padding-inline-end: 180px; border: 1px solid var(--tj-color-border-1); } .footer__top .tj-input__wrapper .tj-input:focus { border-color: var(--tj-color-theme-primary); } @media (max-width: 575px) { .footer__top .tj-input__wrapper .tj-input { padding-inline-end: 70px; } } .footer__top .tj-input__wrapper .tj-btn { padding: 14px 15px; height: auto; position: absolute; top: 5px; right: 5px; } .footer__top .tj-input__wrapper .tj-btn i { font-size: 18px; } .footer__top .wpcf7 form .wpcf7-response-output { color: var(--tj-color-common-white2); } .footer__top__list { display: flex; gap: 2px 30px; align-items: center; } @media (max-width: 575px) { .footer__top__list { flex-direction: column; align-items: flex-start; } } .footer__top__list li { display: flex; gap: 8px; align-items: center; color: var(--tj-color-common-white); } .footer--2 .footer__inner { padding-top: 240px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer--2 .footer__inner { padding-top: 230px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--2 .footer__inner { padding-top: 210px; } } .footer--2 .footer__logo { margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--2 .footer__logo { margin-bottom: 16px; } } .footer--2 .footer__title { margin-top: 0; } .footer--2 .footer__desc { margin-bottom: 40px; max-width: 308px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--2 .footer__desc { margin-bottom: 20px; } } .footer--3 .footer__inner::after { background-color: var(--tj-color-theme-secondary); } .footer--3 .footer__inner__pattern img { position: absolute; top: 80px; left: 60px; width: 134px; z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .footer--3 .footer__inner__pattern img { top: 40px; left: 40px; width: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__inner__pattern img { top: 20px; left: 20px; width: 60px; } } .footer--3 .footer__inner__pattern img:last-child { top: auto; left: auto; bottom: 60px; right: 60px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer--3 .footer__inner__pattern img:last-child { width: 50px; bottom: 20px; right: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__inner__pattern img:last-child { width: 40px; bottom: 20px; right: 35px; } } .footer--3 .footer__top__inner { margin-bottom: 0; padding: 0; outline: none; margin-bottom: 80px; background: transparent; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--3 .footer__top__inner { padding: 0; border-radius: 0; margin-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__top__inner { padding: 0; border-radius: 0; margin: 0; margin-bottom: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__top__inner { padding: 0; border-radius: 0; margin: 0; margin-bottom: 60px; } } .footer--3 .footer__top__inner:after { display: none; } .footer--3 .footer__top__title { font-size: 70px; color: var(--tj-color-common-white); line-height: 1.11; font-weight: var(--tj-fw-sbold); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer--3 .footer__top__title { font-size: 62px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--3 .footer__top__title { font-size: 58px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .footer--3 .footer__top__title { font-size: 50px; } } @media (max-width: 575px) { .footer--3 .footer__top__title { font-size: 42px; } } .footer--3 .footer__top__list { width: 100%; max-width: 557px; margin-left: auto; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .footer--3 .footer__top__list { width: 100%; margin-left: 0; } } @media (max-width: 575px) { .footer--3 .footer__top__list { width: 100%; margin-left: 0; } } .footer--3 .footer__copyright__wrapper { border-color: var(--tj-color-border-4); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__copyright__wrapper { justify-content: center; } } .footer--3 .footer__copyright__text p { color: var(--tj-color-common-white); } .footer--3 .footer__copyright__text p a { color: var(--tj-color-common-white); } .footer--3 .footer__copyright__text p a:hover { color: var(--tj-color-theme-primary); } .footer--3 .footer__copyright__menu ul { gap: 10px 34px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--3 .footer__copyright__menu ul { gap: 10px 28px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__copyright__menu ul { gap: 10px 24px; } } .footer--3 .footer__copyright__menu ul li a { color: var(--tj-color-common-white); } .footer--3 .footer__copyright__menu ul li a:hover { color: var(--tj-color-theme-primary); } .footer--3 .footer__copyright__menu ul li a::before { background-color: var(--tj-color-common-white); left: -19px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--3 .footer__copyright__menu ul li a::before { left: -16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--3 .footer__copyright__menu ul li a::before { left: -14px; } } .footer--3 .footer__copyright__menu ul li:first-child a::before { display: none; } .footer--3 .footer__copyright .tj-socials ul li a i { color: var(--tj-color-common-white); } .footer--3 .footer__copyright .tj-socials ul li a:hover i { color: var(--tj-color-theme-primary); } .footer--3 .hero__subscription { display: flex; justify-content: flex-end; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .footer--3 .hero__subscription { justify-content: flex-start; } } /* defaul footer css */ .tj-footer-section { background-color: var(--tj-color-theme-bg1); border-radius: 16px; margin: 0 50px; margin-bottom: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-section { margin: 0 15px; margin-bottom: 15px; } } .tj-footer-section .tj-widget-area { padding-top: 100px; padding-bottom: 90px; border-bottom: 1px solid var(--tj-color-border-1); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-footer-section .tj-widget-area { padding-top: 80px; padding-bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tj-footer-section .tj-widget-area { padding-top: 60px; padding-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-section .tj-widget-area { padding-top: 50px; padding-bottom: 50px; } } .tj-footer-section .copyright-content-area { padding: 24px 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-section .copyright-content-area { padding: 20px 0; } } .tj-footer-section .copyright-content-area p { margin: 0; } .tj-footer-section .copyright-content-area p a { color: var(--tj-color-theme-dark); } .tj-footer-section .copyright-content-area p a:hover { color: var(--tj-color-theme-primary); } .footer-contact-info { max-width: 240px; width: 100%; } .footer-contact-info .contact-item { margin-bottom: 18px; } .footer-contact-info .contact-item:last-child { margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-contact-info .contact-item { margin-bottom: 10px; } } .footer-contact-info .contact-item span { font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); color: var(--tj-color-text-body); display: inline-flex; align-items: center; gap: 8px; } .footer-contact-info .contact-item span i { font-size: 18px; color: var(--tj-color-theme-primary); display: inline-flex; line-height: 1; } .footer-contact-info .contact-item a { color: var(--tj-color-heading-primary); font-size: 18px; font-weight: var(--tj-fw-bold); font-family: var(--tj-ff-heading); display: block; } .footer-contact-info .contact-item a:last-child { margin-bottom: 0; } .footer-contact-info .contact-item a:hover { color: var(--tj-color-theme-primary); } .footer-widget .title { margin-bottom: 24px; } .editor_text .footer__copyright__text a { font-weight: 500; color: var(--tj-color-theme-dark); } .editor_text .footer__copyright__text a:focus, .editor_text .footer__copyright__text a:hover { color: var(--tj-color-theme-primary); } /* !END: Footer CSS */ /**---------------------------------------- START: Back to top CSS ----------------------------------------*/ .back-to-top-wrapper { position: fixed; right: 0; bottom: 0; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; transition: 0.6s; cursor: pointer; } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 68px; right: 88px; } @media only screen and (min-width: 1601px) and (max-width: 1780px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .back-to-top-wrapper.back-to-top-btn-show { right: 35px; bottom: 50px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .back-to-top-wrapper.back-to-top-btn-show { right: 35px; bottom: 110px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .back-to-top-wrapper.back-to-top-btn-show { right: 40px; bottom: 125px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .back-to-top-wrapper.back-to-top-btn-show { right: 40px; bottom: 95px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .back-to-top-wrapper.back-to-top-btn-show { bottom: 30px; right: 30px; } } @media (max-width: 575px) { .back-to-top-wrapper.back-to-top-btn-show { bottom: 30px; right: 30px; } } .back-to-top-btn { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; line-height: 1; font-size: 18px; background: var(--tj-color-theme-primary); color: var(--tj-color-heading-primary); border-radius: 50%; animation: pulse1 1.5s infinite; -webkit-transition: all, 0.3s; -moz-transition: all, 0.3s; -ms-transition: all, 0.3s; -o-transition: all, 0.3s; transition: all, 0.3s; } .back-to-top-btn i { display: inline-flex; color: var(--tj-color-common-white); line-height: 1; } .back-to-top-btn:hover { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .back-to-top-btn { width: 45px; height: 45px; font-size: 16px; } } /* !END: Back to top CSS */ /**---------------------------------------- START: Preloader CSS ----------------------------------------*/ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; background-color: var(--tj-color-common-white); display: flex; align-items: center; justify-content: center; } .preloader .loading-container, .preloader .loading { height: 100px; position: relative; width: 100px; border-radius: 100%; } .preloader .loading { border: 1px solid transparent; border-color: transparent var(--tj-color-theme-secondary) transparent var(--tj-color-theme-secondary); animation: rotate-loading 1.5s linear 0s infinite normal; transform-origin: 50% 50%; } .loading-container { margin: 40px auto; } .loading-container:hover .loading, .loading-container .loading { transition: all 0.5s ease-in-out; } #loading-icon { position: absolute; top: 50%; left: 50%; max-width: 66px; transform: translate(-50%, -50%); } @keyframes rotate-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* !END: Preloader CSS */ /**---------------------------------------- START: Rating CSS ----------------------------------------*/ .star-ratings { unicode-bidi: bidi-override; font-size: 24px; letter-spacing: 1px; line-height: 1; position: relative; margin: 0; padding: 0; } .star-ratings .fill-ratings { color: var(--tj-color-theme-primary); padding: 0; position: absolute; z-index: 1; display: block; top: 0; left: 0; overflow: hidden; } .star-ratings .fill-ratings span { display: inline-block; } .star-ratings .empty-ratings { padding: 0; display: block; z-index: 0; color: var(--tj-color-theme-primary); opacity: 0.5; } /* !END: Rating CSS */ /**---------------------------------------- START: Shape CSS ----------------------------------------*/ .tj-u-shape { position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 30px; height: 60px; background-color: var(--tj-color-theme-bg1); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-u-shape { width: 20px; height: 50px; } } .tj-u-shape::after, .tj-u-shape::before { content: ""; position: absolute; left: 0; top: -58%; width: 100%; height: 100%; z-index: 1; background: var(--tj-color-common-white); border-radius: 30px; } .tj-u-shape::after { top: 58%; } /* !END: Shape CSS */ /**---------------------------------------- START: Text Marquee CSS ----------------------------------------*/ .text-marquee-slider { padding-bottom: 0; } .text-marquee-slider__wrap { width: 100%; height: 100%; overflow: hidden; transform: rotate(90deg); z-index: -1; } .text-marquee-slider__wrapper { transition-timing-function: linear; } .text-marquee-slider__item { display: flex; gap: 20px; width: auto; } .text-marquee-slider__title, .text-marquee-slider__dot { font-size: 130px; font-family: var(--tj-ff-heading); letter-spacing: -0.03em; white-space: nowrap; color: var(--tj-color-common-white); opacity: 0.7; line-height: 1.3; padding: 0; margin: 0; } .style-2 .text-marquee-slider__title, .style-2 .text-marquee-slider__dot { opacity: 0.1; } .text-marquee.elementor-widget.elementor-widget-tj-marquee { height: 100%; } /* !END: Text Marquee CSS */ /**---------------------------------------- START: Client Thumbs CSS ----------------------------------------*/ .client__thumbs { border: 1px solid var(--tj-color-border-1); border-radius: 10px; box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843); background-color: var(--tj-color-common-white); padding: 20px 18px 10px; } .client__thumbs__inner { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; margin-bottom: 12px; } .client__thumbs__inner li { position: relative; max-width: 52px; width: 100%; background-color: var(--tj-color-common-white); border-radius: 50%; margin-inline-start: -18px; z-index: 2; } .client__thumbs__inner li:first-child { margin-inline-start: 0; } .client__thumbs__inner li img { height: 52px; object-fit: cover; border-radius: 50%; padding: 2px; } .client__thumbs__inner li.plus { background-color: var(--tj-color-common-white); padding: 2px; width: 100%; } .client__thumbs__inner li.plus h6 { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; font-size: 14px; line-height: 1; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white); background: var(--tj-color-theme-dark); border-radius: 50%; margin-bottom: 0; } .client__thumbs__title { max-width: 162px; padding: 0 2px; } /* !END: Client Thumbs CSS */ /**---------------------------------------- START: Pagintions CSS ----------------------------------------*/ .tj-pagination { margin-top: 30px; justify-content: start; } .tj-pagination.center { justify-content: center; } .tj-pagination ul { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .tj-pagination ul li .page-numbers { display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center; border: 1px solid var(--tj-color-border-1); font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); border-radius: 7.2px; } .tj-pagination ul li .page-numbers i { line-height: 1; color: var(--tj-color-heading-primary); } .tj-pagination ul li .page-numbers:hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border-color: var(--tj-color-theme-primary); } .tj-pagination ul li .page-numbers:hover i { color: var(--tj-color-common-white); } .tj-pagination ul li .page-numbers.dots { line-height: 42px; } .tj-pagination ul li .page-numbers.current { background-color: var(--tj-color-theme-dark); color: var(--tj-color-common-white); border-color: var(--tj-color-common-black); } .tj-pagination ul li .page-numbers.current i { color: var(--tj-color-common-white); } /* !END: Pagintions CSS */ .page-header { width: 100%; background: var(--tj-color-theme-bg1); background-position: center; background-repeat: no-repeat; background-size: cover; overflow: hidden; position: relative; z-index: 0; } .page-header::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background-image: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%); } .page-header__inner { position: relative; z-index: 3; text-align: center; padding-top: 240px; padding-bottom: 165px; } .page-header__inner.wp-spacer { padding-top: 105px; padding-bottom: 120px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .page-header__inner.wp-spacer { padding-top: 85px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__inner.wp-spacer { padding-top: 65px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__inner.wp-spacer { padding-top: 45px; padding-bottom: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__inner { padding-top: 150px; padding-bottom: 95px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__inner { padding-top: 120px; padding-bottom: 65px; } } .page-header__title { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__title { font-size: 48px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__title { font-size: 36px; } } .page-header__nav { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 25px; color: var(--tj-color-theme-dark3); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__nav { margin-top: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__nav { margin-top: 16px; } } .page-header__nav > span a { display: inline-flex; align-items: center; gap: 6px; color: var(--tj-color-theme-dark3); } .page-header__nav > span a:hover { color: var(--tj-color-theme-secondary); } .page-header__nav > span a span { color: inherit; } .page-header__nav > span span { color: var(--tj-color-theme-secondary); } .page-header__nav > span:first-child a::before { content: "\f015"; font-family: var(--tj-ff-fontawesome); font-size: 16px; flex-shrink: 0; line-height: 1; margin-bottom: 1px; } .page-header__nav i { font-size: 12px; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__icons { display: none; } } .page-header__icons img { position: absolute; top: 30%; left: 20%; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__icons img { top: 25%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__icons img { max-width: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__icons img { max-width: 30px; } } .page-header__icons img:nth-last-child(1) { top: 85%; left: 71%; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__icons img:nth-last-child(1) { max-width: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__icons img:nth-last-child(1) { max-width: 25px; } } .page-header__icons img:nth-last-child(2) { top: 28%; left: 82%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__icons img:nth-last-child(2) { top: 20%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__icons img:nth-last-child(2) { max-width: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__icons img:nth-last-child(2) { max-width: 40px; } } .page-header__icons img:nth-last-child(3) { top: 70%; left: 5%; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .page-header__icons img:nth-last-child(3) { max-width: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .page-header__icons img:nth-last-child(3) { max-width: 10px; } } /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .hero__inner { min-height: 900px; padding-top: 86px; position: relative; z-index: 0; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__inner { min-height: 815px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero__inner { min-height: 668px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__inner { min-height: auto; padding-top: 105px; } } .hero .hero__title div { display: inline-block !important; } .hero .hero__title div img { margin-left: 5px; } .hero--1 .section-heading__sub-title { background-color: var(--tj-color-common-white); } .hero__bg { position: absolute; top: 0; left: 0; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__bg { max-width: 61%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__bg { max-width: 84%; } } .hero__bg--right { top: auto; left: auto; right: 0; bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__bg--right { max-width: 95%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__bg--right { max-width: 92%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__bg--right { max-width: 53%; left: 50%; transform: translateX(-50%); } } .hero__title { margin-bottom: 20px; font-size: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero__title { font-size: 48px; margin-bottom: 15px; max-width: 398px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero__title { font-size: 60px; margin-bottom: 15px; max-width: 480px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__title { font-size: 56px; margin-bottom: 15px; max-width: 464px; } } @media (max-width: 575px) { .hero__title { font-size: 40px; margin-bottom: 12px; } } .hero__title span { color: var(--tj-color-theme-secondary); } .hero__title .image img { width: 65px; height: 65px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__title .image img { width: 50px; height: 50px; } } @media (max-width: 575px) { .hero__title .image img { width: 40px; height: 40px; } } .hero__desc { font-size: 18px; margin-bottom: 40px; max-width: 500px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__desc { margin-bottom: 30px; max-width: 398px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__desc { max-width: 350px; margin-bottom: 18px; } } .hero__subscription { margin-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__subscription { margin-bottom: 16px; } } .hero__action { font-weight: var(--tj-fw-medium); display: inline-flex; gap: 6px; align-items: center; margin-bottom: 0; } .hero__action i { color: var(--tj-color-theme-primary); font-size: 23px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__action i { font-size: 18px; } } .hero__right { min-height: 815px; position: relative; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__right { min-height: 729px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__right { min-height: 582px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__right { min-height: auto; margin-top: -15px; } } .hero__banner-img { position: absolute; bottom: 0; right: -14%; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero__banner-img { right: 0%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__banner-img { right: -2%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__banner-img { position: static; text-align: center; } } .hero__banner-img.main-image img { max-width: 876px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__banner-img.main-image img { max-width: 782px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__banner-img.main-image img { max-width: 654px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__banner-img.main-image img { max-width: 80%; } } @media (max-width: 575px) { .hero__banner-img.main-image img { max-width: 100%; } } .hero__banner-img > img { max-width: 876px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__banner-img > img { max-width: 782px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__banner-img > img { max-width: 654px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero__banner-img > img { max-width: 80%; } } @media (max-width: 575px) { .hero__banner-img > img { max-width: 100%; } } .hero__pulse-img { position: absolute; top: 30%; left: 31%; animation: pulseAnimation 2s ease-out 0.5s; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__pulse-img { left: 30.5%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__pulse-img { top: 30%; left: 31%; max-width: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero__pulse-img { top: 30%; left: 34.5%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero__pulse-img { top: 27%; left: 33.5%; } } @media (max-width: 575px) { .hero__pulse-img { top: 26%; left: 28.5%; } } .hero__charts__img__inner { position: absolute; top: 8%; right: -10%; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero__charts__img__inner { right: 5%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__charts__img__inner { right: 0%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__charts__img__inner { max-width: 150px; top: 5%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__charts__img__inner { right: 9%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__charts__img__inner { right: 1%; max-width: 100px; } } .hero__charts__img .hero__charts__img__inner img { width: 100%; border: 1px solid var(--tj-color-border-1); border-radius: var(--tj-br-xl); box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843); } .hero__charts__img img { width: 100%; border: 1px solid var(--tj-color-border-1); border-radius: var(--tj-br-xl); box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843); } .hero__charts__img--2 .hero__charts__img__inner { top: auto; right: auto; left: -12%; bottom: 14%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__charts__img--2 .hero__charts__img__inner { left: -3%; bottom: 4%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__charts__img--2 .hero__charts__img__inner { left: -8%; max-width: 140px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__charts__img--2 .hero__charts__img__inner { left: 17%; bottom: 13%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__charts__img--2 .hero__charts__img__inner { left: 9%; bottom: 3%; max-width: 100px; } } .hero__reviews { position: absolute; left: -50px; bottom: 50%; z-index: 2; transform: translateY(50%) rotate(-90deg); font-size: 16px; color: var(--tj-color-common-white); text-decoration: none; font-weight: var(--tj-fw-medium); font-family: var(--tj-ff-body); text-transform: uppercase; line-height: 1; } .hero__reviews__inner { display: inline-flex; gap: 4px; align-items: center; } .hero__reviews span { padding: 2px 6px 0; border-radius: 10px; background-color: var(--tj-color-theme-supportive); color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); display: inline-block; line-height: 1; } .hero__reviews--2 { color: var(--tj-color-heading-primary); padding: 5px 8px 5px 5px; border-radius: 50px; background-color: var(--tj-color-common-white); position: static; transform: none; margin-bottom: 15px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__reviews--2 { font-size: 14px; } } .hero__scroll { position: absolute; left: 10px; bottom: 80px; z-index: 2; line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero__scroll { left: -30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__scroll { display: none; } } .hero__scroll__link { display: inline-flex; align-items: center; justify-content: center; gap: 16px; transform: rotate(-90deg); font-size: 16px; color: var(--tj-color-common-white); text-decoration: none; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-body); line-height: 1; } .hero__scroll__link:hover { color: var(--tj-color-common-white); } .hero__scroll__link span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 30px; border: 2px solid var(--tj-color-common-white); transform: rotate(-90deg); position: relative; border-radius: 50px; } .hero__scroll__link span::before { position: absolute; content: ""; width: 7px; height: 2px; bottom: 8px; left: 50%; transform: translateX(-50%); background-color: var(--tj-color-common-white); animation: jump-arrow 2.5s infinite; } .hero__scroll--dark .hero__scroll__link { color: var(--tj-color-theme-dark); } .hero__scroll--dark .hero__scroll__link span { border-color: var(--tj-color-theme-dark); } .hero__scroll--dark .hero__scroll__link span::before { background-color: var(--tj-color-theme-dark); } .hero__scroll--dark .hero__scroll__link:hover { color: var(--tj-color-theme-primary); } .hero__scroll--dark .hero__scroll__link:hover span { border-color: var(--tj-color-theme-primary); } .hero__scroll--dark .hero__scroll__link:hover span::before { background-color: var(--tj-color-theme-primary); } .hero__logo { width: 100px; height: 100px; background-color: var(--tj-color-theme-secondary); outline: 14px solid var(--tj-color-theme-bg9); border-radius: 100%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 30px; margin-top: 74px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__logo { width: 95px; height: 95px; outline-width: 13px; margin-top: 65px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero__logo { width: 90px; height: 90px; outline-width: 12px; margin-top: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero__logo { width: 85px; height: 85px; outline-width: 11px; margin-top: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__logo { width: 80px; height: 80px; outline-width: 10px; margin-bottom: 25px; margin-top: 50px; } } .hero__logo img { width: 60px; height: 60px; object-fit: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__logo img { width: 55px; height: 55px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero__logo img { width: 50px; height: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero__logo img { width: 45px; height: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__logo img { width: 40px; height: 40px; } } .hero--2 .hero__inner { background-position: center; background-repeat: no-repeat; background-size: cover; position: relative; min-height: 940px; padding-top: 125px; z-index: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__inner { min-height: 560px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__inner { padding-top: 110px; } } .hero--2 .hero__inner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-secondary); opacity: 0.95; z-index: -1; } .hero--2 .hero__left { position: relative; margin-top: 65px; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--2 .hero__left { margin-top: 35px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--2 .hero__left { margin-top: 0px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__left { margin-top: 0px; } } .hero--2 .hero__title { color: var(--tj-color-common-white); } .hero--2 .hero__desc { color: var(--tj-color-common-white); } .hero--2 .hero__action__wrapper { display: flex; gap: 30px; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__action__wrapper { gap: 20px; } } .hero--2 .hero__action__wrapper .tj-btn:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-common-white); } .hero--2 .hero__action__wrapper .tj-btn:hover i { color: var(--tj-color-common-white); } .hero--2 .hero__action__wrapper .tj-btn--popup i { padding-left: 2px; } .hero--2 .hero__ratings { display: inline-flex; align-items: center; padding: 15px 27px; border: 1px solid var(--tj-color-border-9); border-radius: 10px; margin-top: 180px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--2 .hero__ratings { margin-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__ratings { margin-top: 20px; padding: 15px 20px; } } .hero--2 .hero__right { position: unset; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__right { position: relative; } } .hero--2 .hero__banner-img { right: 0; width: 50%; height: 80%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--2 .hero__banner-img { bottom: -36px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--2 .hero__banner-img { bottom: -25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__banner-img { width: 100%; height: auto; } } .hero--2 .hero__banner-img > img { max-width: 100%; width: 100%; height: 100%; object-fit: cover; border: 15px solid var(--tj-color-border-6); border-right: 0; border-bottom: 0; border-top-left-radius: 50px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__banner-img > img { margin-top: 70px; border-top-left-radius: 30px; border-top-right-radius: 30px; border: 15px solid var(--tj-color-border-6); border-bottom: 0; } } .hero--2 .hero__bg { z-index: 1; } .hero--2 .hero__bg--shape { opacity: 0.1; top: 14%; left: 7%; } .hero--2 .hero__bg--pattern { top: 71%; left: 39%; } .hero--2 .hero__right { z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--2 .hero__right { min-height: 550px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--2 .hero__right { min-height: 467px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__right { min-height: 100px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--2 .hero__reviews { left: -76px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--2 .hero__reviews { left: -88px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__reviews { position: static; transform: none; margin-bottom: 10px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--2 .hero__scroll { left: -15px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--2 .hero__scroll { left: -30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--2 .hero__scroll { display: none; } } .hero--3 .hero__inner { padding-top: 236px; min-height: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--3 .hero__inner { padding-top: 180px; min-height: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__inner { padding-top: 160px; min-height: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--3 .hero__inner { padding-top: 140px; min-height: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--3 .hero__inner { padding-top: 140px; min-height: 0; } } @media (max-width: 575px) { .hero--3 .hero__inner { padding-top: 120px; min-height: 0; } } .hero--3 .hero__inner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; background-image: linear-gradient(180deg, rgba(5, 76, 224, 0.24) 0%, rgba(255, 255, 255, 0) 91.26%); } .hero--3 .hero__inner .hero__bg__shap__img { position: absolute; width: 32.2%; z-index: -1; } .hero--3 .hero__inner .hero__bg__shap__img:first-child { top: 0; right: 0; transform: translate(30%, -30%); } .hero--3 .hero__inner .hero__bg__shap__img:last-child { top: 25%; left: 0; transform: translate(-50%, 0); } .hero--3 .hero__heading { text-align: center; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 0; margin-bottom: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--3 .hero__heading { margin-bottom: 60px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--3 .hero__heading { margin-bottom: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--3 .hero__heading { margin-bottom: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__heading { margin-bottom: 45px; } } .hero--3 .hero__reviews { color: var(--tj-color-heading-primary); padding: 5px 8px 5px 5px; border-radius: 50px; background-color: var(--tj-color-common-white); position: static; transform: none; margin-bottom: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__reviews { font-size: 12px; } } .hero--3 .hero__title { max-width: 100%; } .hero--3 .hero__title .image { display: inline-flex; align-items: center; color: var(--tj-color-heading-primary); gap: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__title .image { gap: 0px; } } .hero--3 .hero__title .image img { width: 61px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__title .image img { margin-left: 0 !important; margin-right: -5px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--3 .hero__title .image img { width: 50px; height: 50px; } } @media (max-width: 575px) { .hero--3 .hero__title .image img { width: 40px; height: 40px; } } .hero--3 .hero .hero__desc { font-size: 18px; margin-bottom: 0; max-width: 100%; } .hero--3 .hero__action__wrapper { display: flex; align-items: center; gap: 20px; } .hero--3 .hero__google__ads__rating { display: flex; align-items: center; gap: 8px; } .hero--3 .hero__google__ads__rating .testimonials__rating { margin-bottom: 0; } .hero--3 .hero__google__ads__rating .star-ratings { font-size: 18px; } .hero--3 .hero__google__ads__rating .fill-ratings { color: var(--tj-color-heading-primary); } .hero--3 .hero__google__ads__rating .empty-ratings { color: var(--tj-color-heading-primary); opacity: 0.5; } .hero--3 .hero__curv-line { position: absolute; bottom: -45px; left: 65%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__curv-line { left: 82%; bottom: 0px; } } @media (max-width: 575px) { .hero--3 .hero__curv-line { left: 53%; bottom: -43px; width: 60px; } } .hero--3 .hero__curv-line img { width: 97px; } .hero--3 .hero__analytics { padding: 0 15px; display: flex; gap: 30px; align-items: flex-end; flex-wrap: nowrap; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics { gap: 20px; flex-wrap: wrap; justify-content: center; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics { gap: 20px; flex-wrap: wrap; padding: 0; justify-content: center; } } .hero--3 .hero__analytics__seo { max-width: 100%; padding: 22px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__seo { border-radius: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__seo { border-radius: 12px; } } .hero--3 .hero__analytics__seo::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-secondary); border-radius: 20px; opacity: 0.95; z-index: -1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__seo::after { border-radius: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--3 .hero__analytics__seo::after { border-radius: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__seo::after { border-radius: 12px; } } .hero--3 .hero__analytics__seo__inner { padding: 24px 30px 30px; background: var(--tj-color-theme-bg4); border-radius: 20px; position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__seo__inner { border-radius: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__seo__inner { padding: 20px 24px 24px; border-radius: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__seo__inner { padding: 20px 15px 15px; border-radius: 12px; } } .hero--3 .hero__analytics__seo__title { margin-bottom: 120px; color: var(--tj-color-common-white); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--3 .hero__analytics__seo__title { margin-bottom: 100px; } } @media (max-width: 575px) { .hero--3 .hero__analytics__seo__title { margin-bottom: 90px; } } .hero--3 .hero__analytics__seo__desc { margin-bottom: 170px; color: var(--tj-color-common-white); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--3 .hero__analytics__seo__desc { margin-bottom: 125px; } } @media (max-width: 575px) { .hero--3 .hero__analytics__seo__desc { margin-bottom: 100px; } } .hero--3 .hero__analytics__seo .tj-btn-2--underline { color: var(--tj-color-common-white); width: 100%; display: flex; align-items: center; justify-content: space-between; text-decoration: none; position: relative; } .hero--3 .hero__analytics__seo .tj-btn-2--underline::before { content: ""; position: absolute; bottom: -1px; right: 0; width: 100%; height: 1px; background-color: var(--tj-color-common-white); } .hero--3 .hero__analytics__seo .tj-btn-2--underline i { color: var(--tj-color-common-white); } .hero--3 .hero__analytics__seo .tj-btn-2--underline:hover::before { animation: linehover 0.8s linear; } .hero--3 .hero__analytics__seo__bg-img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; opacity: 0.1; z-index: -1; } .hero--3 .hero__analytics__seo__bg-img img { width: 50%; } .hero--3 .hero__analytics__slider { max-width: 100%; padding: 22px; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; position: relative; z-index: 0; height: 571px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__slider { border-radius: 16px; height: 571px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__slider { height: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__slider { border-radius: 12px; } } .hero--3 .hero__analytics__slider::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-secondary); border-radius: 20px; opacity: 0.95; z-index: -1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__slider::after { border-radius: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--3 .hero__analytics__slider::after { border-radius: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__slider::after { border-radius: 12px; } } .hero--3 .hero__analytics__slider__main { mask-image: linear-gradient(180deg, rgb(255, 255, 255) 2.91%, #ffffff 30.6%, #ffffff 40.51%, rgba(255, 255, 255, 0) 97.03%); mask-repeat: no-repeat; mask-size: contain; height: 100%; } .hero--3 .hero__analytics__slider .swiper { padding-bottom: 0; } .hero--3 .hero__analytics__slider .swiper-slide { height: auto; } .hero--3 .hero__analytics__slider .testimonials__slider__item { padding: 24px 30px 30px; background: var(--tj-color-theme-bg4); border-radius: 20px; position: relative; z-index: 0; border: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__slider .testimonials__slider__item { border-radius: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__slider .testimonials__slider__item { padding: 20px 24px 24px; border-radius: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__slider .testimonials__slider__item { padding: 20px 15px 15px; border-radius: 12px; } } .hero--3 .hero__analytics__slider .testimonials__slider__item .empty-ratings { color: var(--tj-color-common-white); } .hero--3 .hero__analytics__slider .testimonials__desc { color: var(--tj-color-common-white); margin-bottom: 0; padding-bottom: 0; border: 0; font-size: 18px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--3 .hero__analytics__slider .testimonials__desc { font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--3 .hero__analytics__slider .testimonials__desc { font-size: 14px; } } .hero--3 .hero__analytics__slider .testimonials__author__name { color: var(--tj-color-common-white); } .hero--3 .hero__analytics__slider .testimonials__author__desig { color: var(--tj-color-common-white); } .hero--3 .hero__analytics__slider .star-ratings { font-size: 16px; } .hero--3 .hero__analytics__slider .star-ratings .fill-ratings { color: var(--tj-color-common-white); } .hero--4 .hero__inner { padding-top: 120px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--4 .hero__inner { padding-top: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--4 .hero__inner { padding-top: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--4 .hero-breadcrumb__icons { display: none; } } .hero--4 .hero-breadcrumb__icons img { top: 5%; left: 20%; position: absolute; } .hero--4 .hero-breadcrumb__icons img:nth-last-child(1) { top: 85%; left: 71%; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--4 .hero-breadcrumb__icons img:nth-last-child(1) { top: 95%; left: 80%; } } .hero--4 .hero-breadcrumb__icons img:nth-last-child(2) { top: 15%; left: 82%; } .hero--4 .hero-breadcrumb__icons img:nth-last-child(3) { top: 63%; left: 5%; } .hero--4 .hero__title { max-width: 900px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--4 .hero__title { max-width: 700px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--4 .hero__title { max-width: 600px; } } @media (max-width: 575px) { .hero--4 .hero__title { font-size: 36px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--4 .hero__desc { max-width: 630px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .elementor.elementor-60 .rnk-el-image.elementor-widget-image img { height: 410px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .elementor-1089 .elementor-element.elementor-element-e3123dd .tj-el-title { font-size: 60px; } } /* !END: Hero CSS */ /**---------------------------------------- START: Contact CSS ----------------------------------------*/ .tj-nice-select::after { display: none; } .tj-nice-select::before { content: "\e92f"; font-family: var(--tj-ff-ranko-icons); position: absolute; z-index: 1; right: 16px; top: 50%; transform: translateY(-50%); font-size: 5.5px; } .tj-nice-select.open::before { transform: translateY(-50%) rotate(-180deg); } .contact { overflow: hidden; } .contact__inner { background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 24px; padding: 120px 0; position: relative; z-index: 0; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .contact__inner { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .contact__inner { padding: 100px 30px; border-radius: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .contact__inner { padding: 80px 20px; border-radius: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__inner { padding: 60px 5px; border-radius: 16px; } } .contact__inner::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-secondary); border-radius: 24px; opacity: 0.95; z-index: -2; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .contact__inner::after { border-radius: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .contact__inner::after { border-radius: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__inner::after { border-radius: 16px; } } .contact__inner__pattern img { position: absolute; top: 80px; left: 60px; width: 134px; z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .contact__inner__pattern img { top: 40px; left: 40px; width: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__inner__pattern img { top: 20px; left: 20px; width: 60px; } } .contact__inner__pattern img:last-child { top: auto; left: auto; bottom: 60px; right: 50%; transform: translateX(50%); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .contact__inner__pattern img:last-child { width: 50px; bottom: 20px; right: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__inner__pattern img:last-child { width: 40px; bottom: 20px; right: 35px; } } .contact__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 550px; margin-top: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form form { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form form { grid-template-columns: 1fr; gap: 16px; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form form { grid-template-columns: 1fr; gap: 16px; } } .contact__form .tj-input { background: var(--tj-color-theme-bg8); border: 1px solid var(--tj-color-border-5); color: var(--tj-color-common-white); width: 100%; padding-top: 11px; padding-bottom: 11px; font-size: 16px; } .contact__form .tj-input:focus { border-color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form .tj-input { font-size: 14px; padding: 14px 16px 10px; } } .contact__form .tj-input.tj-nice-select { padding: 16px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form .tj-input.tj-nice-select { padding: 14.3725px 16px; } } .contact__form .tj-input.tj-nice-select .list { background: var(--tj-color-theme-bg8); backdrop-filter: blur(7px); width: 100%; } .contact__form .tj-input.tj-nice-select .option { min-height: 34px; line-height: 34px; } .contact__form .tj-input.tj-nice-select .option.selected.focus, .contact__form .tj-input.tj-nice-select .option:hover { background: var(--tj-color-theme-bg8); backdrop-filter: blur(20px); } .contact__form .tj-input::placeholder { color: var(--tj-color-common-white); opacity: 1; } .contact__form .tj-input__wrapper { width: 100%; border: 0; background-color: transparent; padding-right: 0; transition: all 0.3s; } .contact__form .tj-input__wrapper--message { grid-column: 1/3; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form .tj-input__wrapper--message { grid-column: 1/2; } } .contact__form .tj-input__wrapper span { display: block; width: 100%; } .contact__form textarea.tj-input { height: 160px; } .contact__form .tj-btn:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-common-white); } .contact__form .wpcf7 form .wpcf7-response-output { color: var(--tj-color-common-white2); } .contact__banner { width: 100%; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__banner { text-align: center; margin-bottom: -55px; } } @media (max-width: 575px) { .contact__banner { margin-top: 10px; margin-bottom: -30px; } } .contact__banner__wrapper { position: relative; height: 100%; } .contact__chart { position: absolute; top: 16%; left: 19%; transform: translate(-50%, -50%) rotate(-30deg); width: 206px; max-width: 100%; z-index: 2; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .contact__chart { top: 18%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__chart { width: 180px; top: 25%; } } @media (max-width: 575px) { .contact__chart { width: 120px; } } .contact__chart__inner { position: relative; } .contact__chart__inner::before { content: ""; position: absolute; top: -2px; left: -2px; right: -2px; bottom: -2px; border-radius: 12px; background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, rgba(244, 68, 84, 0.3) 100%); z-index: -1; pointer-events: none; } .contact__chart img { border-radius: 12px !important; } .contact-team-details__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form form { grid-template-columns: 1fr; gap: 16px; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form form { grid-template-columns: 1fr; gap: 16px; } } .contact-team-details__form .tj-input { border: 1px solid transparent; width: 100%; padding-top: 15px; padding-bottom: 15px; font-size: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form .tj-input { font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 768px) and (max-width: 1024px) and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) and (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 576px) and (max-width: 767px) and (max-width: 575px), only screen and (max-width: 575px) and (min-width: 768px) and (max-width: 1024px), only screen and (max-width: 575px) and (min-width: 576px) and (max-width: 767px), (max-width: 575px) and (max-width: 575px) { .contact-team-details__form .tj-input { padding: 15px 16px 12px; } } .contact-team-details__form .tj-input:focus { border-color: var(--tj-color-theme-secondary); } .contact-team-details__form .tj-input .option { color: var(--tj-color-text-body); } .contact-team-details__form .tj-input__wrapper { background-color: transparent; width: 100%; border: 0; padding-right: 0; } .contact-team-details__form .tj-input__wrapper--message { grid-column: 1/3; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form .tj-input__wrapper--message { grid-column: 1/2; } } .contact-team-details__form .tj-input__wrapper--message textarea { height: 160px; } .contact-team-details__form .tj-input__wrapper span { display: block; width: 100%; } .contact-team-details__form .tj-input.tj-nice-select { padding: 20px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-team-details__form .tj-input.tj-nice-select { padding: 16px 16px; } } .contact__main__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__main__form form { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__main__form form { grid-template-columns: 1fr; gap: 16px; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__main__form form { grid-template-columns: 1fr; gap: 16px; } } .contact__main__form .nice-select::before { right: 0; } .contact__main__form .tj-input { width: 100%; padding-top: 15px; padding-bottom: 15px; padding: 15px 0; font-size: 16px; border-bottom: 1px solid var(--tj-color-border-1); border-radius: 0; } .contact__main__form .tj-input:focus { border-color: var(--tj-color-common-black); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__main__form .tj-input { font-size: 14px; padding: 12px 0; } } .contact__main__form .tj-input__wrapper { width: 100%; border: 0; border-radius: 0; } .contact__main__form .tj-input__wrapper--message { grid-column: 1/3; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__main__form .tj-input__wrapper--message { grid-column: 1/2; } } .contact__main__form .tj-input__wrapper--message textarea { height: 160px; } .contact__main__form .tj-input__wrapper span { display: block; width: 100%; } .contact__main__form .tj-input.tj-nice-select { padding: 20px 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__main__form .tj-input.tj-nice-select { padding: 16px 0; } } .tj-el-form .wpcf7 form .wpcf7-response-output { grid-column: span 2; margin-top: 5px; margin-bottom: 0; } .contact-item.style-2 { padding: 40px; border: 1px solid var(--tj-color-border-1); text-align: center; border-radius: 16px; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .contact-item.style-2 { padding: 25px; border-radius: 12px; } } .contact-item.style-2 p { margin-bottom: 0; max-width: 224px; margin: 0 auto; } .contact-item.style-2:hover .contact-icon { background: var(--tj-color-theme-secondary); } .contact-item.style-2:hover .contact-icon i { color: var(--tj-color-common-white); transform: scaleX(-1); } .contact-item.style-2 .contact-icon { width: 88px; height: 88px; display: inline-flex; justify-content: center; align-items: center; background: var(--tj-color-theme-bg1); border-radius: 50%; margin-bottom: 30px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .contact-item.style-2 .contact-icon i { font-size: 32px; color: var(--tj-color-theme-secondary); } .contact-item.style-2 .contact-title { font-size: 24px; text-transform: capitalize; margin-bottom: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px) { .contact-item.style-2 .contact-title { font-size: 20px; } } .contact-item.style-2 .contact-list { list-style: none; } .contact-item.style-2 .contact-list li a { color: var(--tj-color-text-body); } .contact-item.style-2 .contact-list li a:hover { color: var(--tj-color-theme-primary); } .contact-item.style-2 .contact-list li.active a { text-transform: capitalize; font-weight: var(--tj-fw-sbold); color: var(--tj-color-theme-primary); } .map-area { max-width: 587px; width: 100%; position: relative; } .map-area iframe { width: 100%; min-height: 387px; -webkit-filter: grayscale(1); filter: grayscale(1); display: block; } .map-area .contact-info { background-color: var(--tj-color-common-black); position: absolute; max-width: 211px; width: 100%; bottom: 0; left: 0; padding: 10px 20px 10px 20px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .map-area { max-width: 100%; margin-bottom: 40px; } } .map-area.map-2 { max-width: 100%; height: 100%; border-radius: 16px; overflow: hidden; } .map-area.map-2 iframe { height: 100%; } .contact-form.style-2 { max-width: 100%; background-color: transparent; background-blend-mode: luminosity; padding: 50px 50px 60px; border: 1px solid var(--tj-color-border-1); border-radius: 16px; } .contact-form.style-2 .title { margin-bottom: 30px; line-height: 1.25; max-width: 450px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-form.style-2 .title { margin-bottom: 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-form.style-2 { margin-inline-end: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-form.style-2 { padding: 35px 20px 40px; } } /* !END: Contact CSS */ /**---------------------------------------- START: Brand Marrquee CSS ----------------------------------------*/ .brand-marquee__heading { padding-bottom: 34px; margin-bottom: 16px; border-bottom: 1px solid var(--tj-color-border-4); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee__heading { padding-bottom: 24px; margin-bottom: 12px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee__heading { padding-right: 15px; padding-left: 15px; } } .brand-marquee__title { color: var(--tj-color-common-white); text-align: center; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee__title { font-size: 16px; } } .brand-marquee__title span { padding: 2px 6.5px 4px; background-color: var(--tj-color-theme-primary); border-radius: 45px; line-height: 1; } .brand-marquee__slider { padding-bottom: 0; } .brand-marquee__slider .swiper-wrapper { transition-timing-function: linear; } .brand-marquee__slider__wrapper { mask-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 2.91%, var(--tj-color-common-white) 30.6%, var(--tj-color-common-white) 69.51%, rgba(255, 255, 255, 0) 97.03%); } .brand-marquee__item.swiper-slide { width: auto; } .brand-marquee__item img { width: 200px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .brand-marquee__item img { width: 150px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee__item img { width: 130px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee__item img { width: 120px; } } .brand-marquee--float { position: relative; z-index: 1; margin-bottom: -138px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .brand-marquee--float { margin-bottom: -102px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .brand-marquee--float { margin-bottom: -86px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee--float { margin-bottom: -74px; } } @media (max-width: 575px) { .brand-marquee--float { margin-left: 15px; margin-right: 15px; } } .brand-marquee--float .brand-marquee__inner { border-radius: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .brand-marquee--float .brand-marquee__inner { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee--float .brand-marquee__inner { border-radius: 12px; } } .brand-marquee--float .brand-marquee__inner::after { border-radius: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .brand-marquee--float .brand-marquee__inner::after { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand-marquee--float .brand-marquee__inner::after { border-radius: 12px; } } .brand-marquee--2 .brand-marquee__inner { background: transparent; } .brand-marquee--2 .brand-marquee__inner::after { display: none; } .brand-marquee--2 .brand-marquee__heading { border-color: var(--tj-color-border-1); } .brand-marquee--2 .brand-marquee__title { color: var(--tj-color-heading-primary); } .brand-marquee--2 .brand-marquee__title span { color: var(--tj-color-common-white); } .brand-marquee--2 .brand-marquee__item img { filter: invert(1); } /* !END: Brand Marrquee CSS */ /**---------------------------------------- START: About CSS ----------------------------------------*/ .about__banner { position: relative; z-index: 0; display: inline-block; } .about__banner > img { width: 533px; border-radius: 20px; } .about__banner .main-image img { border-radius: 20px; } .about__banner__bg { position: absolute; right: -30px; top: -30px; z-index: -1; } .about__banner__bg img { width: 533px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__banner__bg { right: -12px; top: -12px; width: 350px; } } .about__banner .about__banner__bg img, .about__banner .about__banner__charts__img img { border-radius: var(--tj-br-xl); } .about__banner .about__banner__charts__img img { border: 1px solid var(--tj-color-border-1); box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843); overflow: hidden; } .about__banner__charts__img { position: absolute; z-index: 1; } .about__banner__charts__img--right { left: 100%; top: 50%; transform: translate(-50%, -50%); width: 213px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .about__banner__charts__img--right { left: 91%; top: 24%; width: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__banner__charts__img--right { left: 85%; top: 24%; width: 120px; } } @media (max-width: 575px) { .about__banner__charts__img--right { left: 83%; } } .about__banner__charts__img--bottom { bottom: -50px; left: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__banner__charts__img--bottom { bottom: -20px; left: 20px; } } .about__banner__charts__img--bottom img { width: 190px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__banner__charts__img--bottom img { width: 130px; } } .about__banner::after { content: ""; max-width: 316px; width: 100%; height: 190px; position: absolute; right: -25px; bottom: -25px; border: 1px dashed var(--tj-color-border-1); border-top: 0; border-left: 0; border-bottom-right-radius: 8px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__banner::after { display: none; } } .about__content { padding-left: 45px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about__content { padding-left: 0px; margin-bottom: 65px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__content { padding-left: 0px; margin-bottom: 40px; } } .about .section-heading { margin-bottom: 0; } .about__features ul { display: grid; grid-template-columns: 1fr; gap: 12px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .about__features ul { gap: 8px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__features ul { gap: 4px; } } @media (max-width: 575px) { .about__features ul { grid-template-columns: 100%; } } .about__features ul li { display: flex; align-items: center; gap: 8px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__features ul li { gap: 6px; } } .about__features ul li a, .about__features ul li .text { font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); } .about__features ul li a:hover { color: var(--tj-color-theme-primary); } .about__features ul li .icon { color: var(--tj-color-theme-secondary); font-size: 18px; line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__features ul li .icon { font-size: 16px; } } .about__action .tj-btn-2 { text-decoration: underline; } .about__action .tj-btn-2 i { color: var(--tj-color-theme-secondary); } .about__action .tj-btn-2:hover { text-decoration: none; } .about__action .tj-btn-2:hover i { color: var(--tj-color-theme-primary); } .about--3 .about__content { padding-left: 0; } .about--3 .about__banner > img { width: 581px; border-radius: 24px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--3 .about__banner > img { border-radius: 16px; } } .about--3 .about__banner::after { display: none; } .about--4 .text-marquee-slider__title { opacity: 0.7; } .about--4 .text-marquee-slider__dot { opacity: 0.7; } .about--4 .about__banner { display: inline-flex; gap: 30px; align-items: flex-start; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .about--4 .about__banner { margin-right: -30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner { margin-right: -30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner { gap: 20px; margin-right: -20px; } } @media (max-width: 575px) { .about--4 .about__banner { gap: 10px; margin-right: -10px; } } .about--4 .about__banner > img { width: 390px; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner > img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner > img { border-radius: 10px; width: 300px; } } @media (max-width: 575px) { .about--4 .about__banner > img { width: 210px; } } .about--4 .about__banner::after { display: none; } .about--4 .about__banner__related__img { padding: 21px 65.5px; background-color: var(--tj-color-theme-secondary); border-radius: 16px; display: flex; flex-direction: column; flex-shrink: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about--4 .about__banner__related__img { padding: 21px 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner__related__img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__related__img { border-radius: 10px; padding: 21px 30px; } } @media (max-width: 575px) { .about--4 .about__banner__related__img { border-radius: 10px; padding: 16px 16px; } } .about--4 .about__banner__related__img img { width: 55px; height: 55px; border-radius: 100%; box-sizing: content-box; border: 4px solid var(--tj-color-common-white); margin-top: -27px; object-fit: cover; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner__related__img img { width: 40px; height: 40px; border-width: 3px; margin-top: -16px; } } @media (max-width: 575px) { .about--4 .about__banner__related__img img { width: 30px; height: 30px; border-width: 2px; margin-top: -14px; } } .about--4 .about__banner__related__img img:first-child { margin-top: 0; } .about--4 .about__banner__charts__img--bottom { padding: 19px 23px 0 0; border-top-right-radius: 16px; bottom: 0; left: 0; background: var(--tj-color-theme-bg1); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner__charts__img--bottom { border-top-right-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner__charts__img--bottom { border-top-right-radius: 10px; } } @media (max-width: 575px) { .about--4 .about__banner__charts__img--bottom { padding: 10px 10px 0 0; } } .about--4 .about__banner__charts__img--bottom img { width: 258px; border: none; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner__charts__img--bottom img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner__charts__img--bottom img { border-radius: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__charts__img--bottom img { width: 190px; } } @media (max-width: 575px) { .about--4 .about__banner__charts__img--bottom img { width: 134px; } } .about--4 .about__banner__charts__img--bottom::before, .about--4 .about__banner__charts__img--bottom::after { content: ""; background: var(--tj-color-theme-bg1); mask-image: url('data:image/svg+xml,'); position: absolute; width: 16px; height: 16px; transform: rotate(-90deg); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner__charts__img--bottom::before, .about--4 .about__banner__charts__img--bottom::after { width: 12px; height: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner__charts__img--bottom::before, .about--4 .about__banner__charts__img--bottom::after { width: 10px; height: 10px; } } .about--4 .about__banner__charts__img--bottom::after { right: 41px; top: -16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about--4 .about__banner__charts__img--bottom::after { right: 112px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner__charts__img--bottom::after { top: -12px; right: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__charts__img--bottom::after { top: -9px; right: 77px; } } @media (max-width: 575px) { .about--4 .about__banner__charts__img--bottom::after { top: -9px; right: 58px; } } .about--4 .about__banner__charts__img--bottom::before { left: 100%; bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__banner__charts__img--bottom::before { left: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner__charts__img--bottom::before { left: 100%; } } .about--4 .about__banner__video { display: flex; gap: 15px; align-items: center; padding: 20px; background: var(--tj-color-common-white); border-radius: 12px; position: absolute; bottom: 50px; right: 50px; max-width: 293px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about--4 .about__banner__video { border-radius: 10px; padding: 16px; max-width: 233px; right: 12px; bottom: 42px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__video { border-radius: 8px; padding: 16px; bottom: 45px; right: 31px; max-width: 191px; gap: 8px; } } @media (max-width: 575px) { .about--4 .about__banner__video { border-radius: 6px; padding: 8px; bottom: 37px; right: 15px; max-width: 130px; gap: 3px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__banner__video { animation: none; } } .about--4 .about__banner__video .tj-btn--popup { width: 42px; height: 42px; gap: 0; } @media (max-width: 575px) { .about--4 .about__banner__video .tj-btn--popup { width: 35px; height: 35px; } } @media (max-width: 575px) { .about--4 .about__banner__video .tj-btn--popup { width: 25px; height: 25px; } } .about--4 .about__banner__video .tj-btn--popup i { font-size: 12.6px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__video .tj-btn--popup i { font-size: 10px; } } @media (max-width: 575px) { .about--4 .about__banner__video .tj-btn--popup i { font-size: 7px; padding-left: 2px; padding-bottom: 1px; } } .about--4 .about__banner__video .tj-btn--popup:hover i { color: var(--tj-color-common-white); } .about--4 .about__banner__video h6 { margin-bottom: 0; font-size: 18px; line-height: 1.2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about--4 .about__banner__video h6 { font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__video h6 { font-size: 12px; } } @media (max-width: 575px) { .about--4 .about__banner__video h6 { font-size: 10px; } } .about--4 .about__banner__video p { margin-bottom: 0; font-size: 14px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .about--4 .about__banner__video p { font-size: 10px; } } @media (max-width: 575px) { .about--4 .about__banner__video p { font-size: 8px; } } .about--4 .about__content { padding: 40px 30px; border-radius: 16px; background: var(--tj-color-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about--4 .about__content { border-radius: 12px; padding: 25px 25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__content { border-radius: 12px; padding: 35px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__content { border-radius: 10px; padding: 30px 20px; } } .about--4 .about__content__list { display: flex; flex-direction: column; gap: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__content__list { gap: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__content__list { gap: 15px; } } .about--4 .about__content__list__item { display: flex; gap: 15px; padding-bottom: 18px; border-bottom: 1px dashed var(--tj-color-border-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__content__list__item { padding-bottom: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__content__list__item { gap: 12px; padding-bottom: 16px; } } .about--4 .about__content__list__item:last-child { padding-bottom: 0; border-bottom: 0; } .about--4 .about__content__list__sl { width: 32px; height: 32px; border-radius: 100%; background-color: var(--tj-color-theme-bg1); font-size: 16px; font-weight: var(--tj-fw-medium); color: var(--tj-color-theme-secondary); display: flex; justify-content: center; align-items: center; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__content__list__sl { width: 30px; height: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__content__list__sl { width: 28px; height: 28px; font-size: 14px; } } .about--4 .about__content__list__title { font-size: 24px; margin-bottom: 16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .about--4 .about__content__list__title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--4 .about__content__list__title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { @keyframes pulse1 { 0% { box-shadow: 0 0 0 0 rgba(244, 68, 84, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } } /* !END: About CSS */ /**---------------------------------------- START: Funfact CSS ----------------------------------------*/ .funfact { position: relative; } .funfact__dart-board { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); border: 19px solid var(--tj-color-common-white); border-radius: 100%; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact__dart-board { outline-width: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact__dart-board { outline-width: 10px; } } .funfact__dart-board img { width: 86px; height: 86px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact__dart-board img { width: 76px; height: 76px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact__dart-board img { width: 66px; height: 66px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact__dart-board img { width: 40px; height: 40px; } } .funfact .section-heading { position: relative; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact .section-heading { margin-bottom: 0; padding-bottom: 30px; } } .funfact .section-heading__sub-title { background-color: var(--tj-color-common-white); } .funfact__tab-controller { display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 16px; } .funfact__tab-controller li { font-size: 16px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); line-height: 1; } .funfact__curve__line { position: absolute; left: 57%; bottom: -22px; z-index: 2; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact__curve__line { left: 63%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact__curve__line { left: 69%; bottom: 7px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact__curve__line { width: 40px; left: 70%; bottom: 6px; } } .funfact--2 .funfact__single { display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact--2 .funfact__single { gap: 20px; } } @media (max-width: 575px) { .funfact--2 .funfact__single .tj-u-shape { left: 50%; top: 100%; transform: translateX(-50%) translateY(-15px) rotate(90deg); } } .funfact--2 .funfact__single > .tj-u-shape { background: var(--tj-color-theme-bg2); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact--2 .funfact__single > .tj-u-shape { left: 50%; top: 100%; transform: translateX(-50%) translateY(-15px) rotate(90deg); } } .funfact--2 .funfact-area.style-2 { margin-top: 0; } .funfact--2 .funfact-area.style-2 .funfact-item { background: transparent; } .funfact--2 .funfact-area.style-2 .funfact-item::after { background-color: var(--tj-color-theme-bg1); } .funfact--2 .funfact-area.style-2 .funfact-item .number { color: var(--tj-color-theme-secondary); } .funfact--2 .funfact-area.style-2 .funfact-item .text { color: var(--tj-color-text-body); } .funfact--2 .funfact-area.style-2 .funfact-item .tj-u-shape { background: var(--tj-color-theme-bg1); } .funfact--2 .testimonials__slider__item { background-color: var(--tj-color-theme-bg2); padding: 40px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact--2 .testimonials__slider__item { padding: 30px; } } @media (max-width: 575px) { .funfact--2 .testimonials__slider__item { padding: 20px; } } .funfact--2 .testimonials__desc { font-size: 20px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .funfact--2 .testimonials__desc { font-size: 18px; } } @media (max-width: 575px) { .funfact--2 .testimonials__desc { font-size: 16px; } } .funfact--3 { overflow: hidden; } .funfact--3 .funfact__single { border: 1px solid var(--tj-color-border-3); background: var(--tj-color-theme-bg2); border-radius: 16px; padding: 45px 30px; height: 100%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact--3 .funfact__single { padding: 40px 25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact--3 .funfact__single { padding: 35px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact--3 .funfact__single { padding: 30px 20px; } } .funfact--3 .funfact__single__title { margin-bottom: 0; font-size: 48px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact--3 .funfact__single__title { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact--3 .funfact__single__title { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact--3 .funfact__single__title { font-size: 30px; } } .funfact--3 .funfact__single--middle { border: 0; background: transparent; border-radius: 0; padding: 0; } .funfact--3 .funfact__single .about__features ul { grid-template-columns: 1fr; max-width: 100%; gap: 12px; } .funfact--3 .funfact__traffic { position: relative; z-index: 0; } .funfact--3 .funfact__traffic__list ul { display: flex; flex-direction: column; gap: 6px; } .funfact--3 .funfact__traffic__list li { display: flex; gap: 8px; align-items: center; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-sbold); } .funfact--3 .funfact__traffic__list li::before { content: " "; width: 10px; height: 10px; border-radius: 100%; background-color: var(--tj-color-theme-primary); } .funfact--3 .funfact__traffic__list li:last-child::before { background-color: var(--tj-color-theme-secondary); } .funfact--3 .funfact__traffic__chart { width: 143px; position: relative; z-index: 0; } .funfact--3 .funfact__traffic__num { position: absolute; top: 0; left: 0; height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; z-index: 1; margin-bottom: 0; } .funfact--3 .funfact__traffic__bg { position: absolute; bottom: 0; right: 0; z-index: -1; } .funfact--3 .funfact-area.style-2 .funfact-item { padding: 35px 30px; text-align: left; display: flex; flex-direction: column; justify-content: center; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact--3 .funfact-area.style-2 .funfact-item { padding: 30px 25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact--3 .funfact-area.style-2 .funfact-item { padding: 25px 20px; width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact--3 .funfact-area.style-2 .funfact-item { padding: 25px 20px; } } .funfact--3 .funfact-area.style-2 .funfact-item .number { justify-content: start; color: var(--tj-color-heading-primary); } .funfact--3 .funfact-area.style-2 .funfact-item .text { line-height: 1.625; margin-top: 15px; } .funfact-area.style-2 .funfact-item { padding: 36px 40px 45px; align-self: stretch; background: url("../images/shape/funfact-item-bg.png") no-repeat center; background-size: cover; border-radius: 16px; position: relative; z-index: 0; text-align: center; line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact-area.style-2 .funfact-item { padding: 30px 24px 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item { padding: 30px 24px 36px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item { border-radius: 12px; } } .funfact-area.style-2 .funfact-item::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-secondary); opacity: 0.9; border-radius: 16px; z-index: -1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item::after { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item::after { border-radius: 12px; } } .funfact-area.style-2 .funfact-item .text { color: var(--tj-color-common-white); line-height: 1; display: inline-flex; gap: 4px; align-items: center; margin-top: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .text { margin-top: 10px; font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .text { margin-top: 10px; font-size: 14px; } } .funfact-area.style-2 .funfact-item .text--traffic i { color: var(--tj-color-green-1); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .text--traffic i { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .text--traffic i { font-size: 12px; } } .funfact-area.style-2 .funfact-item .text--speed span { background: var(--tj-color-theme-supportive); padding: 3px 5px 2px 6px; font-size: 12px; border-radius: 10px; color: var(--tj-color-theme-dark); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .text--speed span { font-size: 10px; padding: 2px 4px 1px 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .text--speed span { font-size: 10px; padding: 2px 4px 1px 5px; } } .funfact-area.style-2 .funfact-item .text--bonus i { color: var(--tj-color-theme-supportive); font-size: 17px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .text--bonus i { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .text--bonus i { font-size: 12px; } } .funfact-area.style-2 .funfact-item .text--conversation i { font-size: 16px; color: var(--tj-color-theme-primary); margin-left: -3px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .text--conversation i { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .text--conversation i { font-size: 12px; } } .funfact-area.style-2.style-4 { height: auto; } .funfact-area.style-2.style-4 .funfact-item { background: var(--tj-color-theme-bg1); border: 1px solid var(--tj-color-border-1); } .funfact-area.style-2.style-4 .funfact-item::after { display: none; } .funfact-area.style-2.style-4 .funfact-item .number { color: var(--tj-color-heading-primary); } .funfact-area.style-2.style-4 .funfact-item .text { color: var(--tj-color-text-body); margin-top: 15px; } .funfact-area.style-2 .funfact-item { width: 100%; } .funfact-area.style-2 .funfact-item .number { font-size: 70px; font-weight: var(--tj-fw-bold); color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); display: flex; align-items: center; justify-content: center; line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .number { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .number { font-size: 36px; } } .funfact-area.style-2 .funfact-item .number small { font-size: 34px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-2 .funfact-item .number small { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-2 .funfact-item .number small { font-size: 24px; } } .funfact-area.style-2 .funfact-item .number span { line-height: 1; } .funfact-area.style-2 .funfact-item .number sub { bottom: unset; } .funfact-area.style-2 .funfact-item .funfact-icon { display: inline-flex; font-size: 32px; line-height: 1; color: var(--tj-theme-primary); margin-bottom: 15px; } .funfact-area.style-2 .funfact-item .funfact-icon i { display: inline-flex; line-height: 1; } .funfact-area.style-2 .funfact-item .funfact-icon img, .funfact-area.style-2 .funfact-item .funfact-icon svg { display: inline-flex; max-width: 32px; width: 100%; } /* !END: Funfact CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .service__title { margin-bottom: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .service__title { font-size: 22px; margin-bottom: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__title { font-size: 20px; margin-bottom: 12px; } } .service__icon { font-size: 41px; line-height: 1; width: 80px; height: 80px; background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); border-radius: 100%; margin-bottom: 30px; display: inline-flex; justify-content: center; align-items: center; } .service__icon i { color: var(--tj-color-theme-secondary); } .service__card { padding: 40px 30px; border-radius: 16px; border: 1.5px solid var(--tj-color-border-1); position: relative; z-index: 0; -webkit-transition: all var(--tj-td-standard) ease-in-out 0s; -moz-transition: all var(--tj-td-standard) ease-in-out 0s; -ms-transition: all var(--tj-td-standard) ease-in-out 0s; -o-transition: all var(--tj-td-standard) ease-in-out 0s; transition: all var(--tj-td-standard) ease-in-out 0s; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .service__card { padding: 30px 20px; border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__card { padding: 30px 20px; border-radius: 12px; } } .service__card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tj-color-theme-bg1); opacity: 0.9; border-radius: 16px; z-index: -1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .service__card::after { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__card::after { border-radius: 12px; } } .service__card__pattern { position: absolute; top: 30px; right: 30px; opacity: 0; z-index: 1; -webkit-transition: all var(--tj-td-standard) ease-in-out 0s; -moz-transition: all var(--tj-td-standard) ease-in-out 0s; -ms-transition: all var(--tj-td-standard) ease-in-out 0s; -o-transition: all var(--tj-td-standard) ease-in-out 0s; transition: all var(--tj-td-standard) ease-in-out 0s; } .service__card__pattern img { width: 134px; } .service__card .tj-btn-2 i { color: var(--tj-color-heading-primary); } .service__card .tj-btn-2:hover i { color: var(--tj-color-common-white); transform: rotate(0deg); } .service__card:hover { background: url("../images/shape/service-card-bg.png") no-repeat center; background-size: cover; } .service__card:hover::after { background-color: var(--tj-color-theme-secondary); } .service__card:hover .service__card__pattern { opacity: 1; } .service__card:hover .service__title { color: var(--tj-color-common-white); } .service__card:hover .service__title a { color: var(--tj-color-common-white); } .service__card:hover .service__desc { color: var(--tj-color-common-white); } .service__card:hover .service__icon { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .service__card:hover .service__icon i { color: var(--tj-color-common-white); transform: scaleX(-1); } .service__card:hover .tj-btn-2 { color: var(--tj-color-common-white); } .service__card:hover .tj-btn-2 i { color: var(--tj-color-common-white); } .service__card.style-2::after { background-color: var(--tj-color-common-white); } .service__card.style-2:hover::after { background-color: var(--tj-color-theme-secondary); } /* !END: Service CSS */ /**---------------------------------------- START: Portfolio CSS ----------------------------------------*/ .portfolio__single { border-radius: 16px; position: relative; overflow: hidden; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__single { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__single { border-radius: 12px; } } .portfolio__single::after { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--tj-color-theme-dark); opacity: 0; z-index: 1; } .portfolio__single__action a { position: absolute; top: 30px; right: 30px; width: 60px; height: 60px; display: inline-flex; justify-content: center; align-items: center; background-color: transparent; transform: translateX(100%); opacity: 0; border: 1px solid var(--tj-color-common-white); border-radius: 100%; line-height: 1; z-index: 2; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__single__action a { top: 20px; right: 20px; width: 40px; height: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__single__action a { top: 20px; right: 20px; width: 40px; height: 40px; } } .portfolio__single__action a i { display: inline-block; font-size: 16px; color: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__single__action a i { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__single__action a i { font-size: 13px; } } .portfolio__single__action a:hover { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); transform: translateX(0) rotate(360deg) !important; } .portfolio__single__action a:hover i { color: var(--tj-color-common-white); } .portfolio__single__img { overflow: hidden; } .portfolio__single__img img { width: 100%; } .portfolio__single__content { position: absolute; padding: 30px 30px 24px; left: 0; right: 0; bottom: 0; transform: translateX(-100%); opacity: 0; -webkit-transition: all var(--tj-td-standard) ease-in-out 0s; -moz-transition: all var(--tj-td-standard) ease-in-out 0s; -ms-transition: all var(--tj-td-standard) ease-in-out 0s; -o-transition: all var(--tj-td-standard) ease-in-out 0s; transition: all var(--tj-td-standard) ease-in-out 0s; z-index: 2; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__single__content { padding: 20px; } } .portfolio__single__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 3px 6px 3px; background-color: transparent; border: 1px solid var(--tj-color-border-5); color: var(--tj-color-common-white); font-size: 16px; line-height: 1; letter-spacing: 2%; border-radius: 6px; margin-bottom: 16px; overflow: hidden; text-shadow: 0 23px 0 var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__single__tag { font-size: 14px; border-radius: 4px; margin-bottom: 12px; } } .portfolio__single__tag span { transition: all 0.3s ease-in-out; } .portfolio__single__tag:hover { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .portfolio__single__tag:hover span { transform: translateY(-24px); } .portfolio__single__title { color: var(--tj-color-common-white); } .portfolio__single__title a { display: inline; line-height: inherit; background-size: 0 1px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__single__title { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__single__title { font-size: 18px; } } .portfolio__single__title:hover a { letter-spacing: 0.3px; } .portfolio__single:hover::after { opacity: 0.5; } .portfolio__single:hover .portfolio__single__img img { transform: scale(1.2); } .portfolio__single:hover .portfolio__single__action a { transform: translateX(0) rotate(315deg); opacity: 1; } .portfolio__single:hover .portfolio__single__content { transform: translateX(0); opacity: 1; } .portfolio__single:hover .portfolio__single__tag { color: var(--tj-color-common-white); } .portfolio .section-heading__sub-title { background-color: var(--tj-color-common-white); } .portfolio--2 .portfolio__single { display: flex; gap: 30px; margin-bottom: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single { gap: 20px; margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single { flex-direction: column; align-items: center; } .portfolio--2 .portfolio__single .tj-u-shape { left: 50%; top: 100%; transform: translateX(-50%) translateY(-15px) rotate(90deg); } } .portfolio--2 .portfolio__single:last-child { margin-bottom: 0; } .portfolio--2 .portfolio__single::after { display: none; } .portfolio--2 .portfolio__single:hover .portfolio__single__img img { transform: scale(1); } .portfolio--2 .portfolio__single:hover .portfolio__single__title a { letter-spacing: inherit; color: var(--tj-color-theme-primary); } .portfolio--2 .portfolio__single:hover .portfolio__single__tag { color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); } .portfolio--2 .portfolio__single__img { overflow: hidden; border-radius: 10px; height: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio--2 .portfolio__single__img { max-width: 330px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio--2 .portfolio__single__img { max-width: 300px; } } .portfolio--2 .portfolio__single__img img { width: 100%; height: 100%; object-fit: cover; } .portfolio--2 .portfolio__single__content { padding: 0; position: static; transform: none; padding: 30px; padding-right: 13px; opacity: 1; visibility: visible; } @media (max-width: 575px) { .portfolio--2 .portfolio__single__content { padding: 30px 5px 15px; } } .portfolio--2 .portfolio__single__content__wrapper { display: grid; grid-template-columns: 52.3% 47.7%; align-items: center; position: relative; padding: 15px; background-color: var(--tj-color-common-white); border-radius: 16px; } @media (max-width: 575px) { .portfolio--2 .portfolio__single__content__wrapper { grid-template-columns: 100%; } } .portfolio--2 .portfolio__single__content__wrapper .tj-u-shape { background-color: var(--tj-color-common-white); } .portfolio--2 .portfolio__single__content__wrapper .tj-u-shape::before, .portfolio--2 .portfolio__single__content__wrapper .tj-u-shape::after { background-color: var(--tj-color-theme-bg1); } .portfolio--2 .portfolio__single__content__wrapper:hover .portfolio__single__img img { transform: scale(1.2); } .portfolio--2 .portfolio__single__tag { color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-bg1); border: 0; } .portfolio--2 .portfolio__single__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); } .portfolio--2 .portfolio__single__title { color: var(--tj-color-heading-primary); margin-bottom: 18px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio--2 .portfolio__single__title { font-size: 22px; margin-bottom: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single__title { font-size: 20px; margin-bottom: 12px; } } .portfolio--2 .portfolio__single__desc { margin-bottom: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio--2 .portfolio__single__desc { margin-bottom: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single__desc { margin-bottom: 12px; } } .portfolio--2 .portfolio__single__counter { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; max-width: 485px; width: 100%; background-color: var(--tj-color-common-white); border-radius: 16px; gap: 16px; text-align: center; padding: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio--2 .portfolio__single__counter { padding: 20px; gap: 12px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single__counter { justify-content: stretch; padding: 15px; gap: 12px; } } @media (max-width: 575px) { .portfolio--2 .portfolio__single__counter { justify-content: stretch; padding: 12px; gap: 8px; } } .portfolio--2 .portfolio__single__counter__item { flex: 0 1 calc(33% - 11px); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .portfolio--2 .portfolio__single__counter__item { flex: 0 1 calc(33% - 6.5px); } } @media (max-width: 575px) { .portfolio--2 .portfolio__single__counter__item { flex: 0 1 calc(33% - 4.5px); } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single__counter__item:has(.number) .text { font-size: 14px; } } @media (max-width: 575px) { .portfolio--2 .portfolio__single__counter__item:has(.number) .text { font-size: 12px; } } .portfolio--2 .portfolio__single__counter .number { padding: 30px 20px; background: var(--tj-color-theme-bg5); color: var(--tj-color-theme-dark); display: flex; align-content: center; justify-content: center; border-radius: 10px; margin-bottom: 24px; font-size: 32px; font-weight: var(--tj-fw-bold); position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--2 .portfolio__single__counter .number { padding: 20px 15px; font-size: 20px; margin-bottom: 18px; } } .portfolio--2 .portfolio__single__counter .number::after { content: " "; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; border: 8px solid transparent; border-top-color: var(--tj-color-theme-bg5); z-index: 1; } .portfolio--2 .portfolio__single__counter .number span { line-height: 1; } .portfolio--2 .portfolio__single__counter .number .odometer-symbol { transform: translateY(3px); } .portfolio--2 .portfolio__single:nth-child(2n) .portfolio__single__counter .number { background: var(--tj-color-theme-bg2); } .portfolio--2 .portfolio__single:nth-child(2n) .portfolio__single__counter .number::after { border-top-color: var(--tj-color-theme-bg2); } .portfolio--2 .portfolio__single:nth-child(3n) .portfolio__single__counter .number { background: var(--tj-color-theme-bg6); } .portfolio--2 .portfolio__single:nth-child(3n) .portfolio__single__counter .number::after { border-top-color: var(--tj-color-theme-bg6); } .portfolio--2 .portfolio__single:nth-child(4n) .portfolio__single__counter .number { background: var(--tj-color-theme-bg7); } .portfolio--2 .portfolio__single:nth-child(4n) .portfolio__single__counter .number::after { border-top-color: var(--tj-color-theme-bg7); } .portfolio--2 .portfolio__single:nth-child(5n) .portfolio__single__counter .number { background: var(--tj-color-theme-bg5); } .portfolio--2 .portfolio__single:nth-child(5n) .portfolio__single__counter .number::after { border-top-color: var(--tj-color-theme-bg5); } .portfolio--3 .portfolio__slider__3 { overflow: inherit; } .portfolio--3 .portfolio__single { padding: 20px; background: var(--tj-color-common-white); } .portfolio--3 .portfolio__single__img { border-radius: 16px; overflow: hidden; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio--3 .portfolio__single__img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--3 .portfolio__single__img { border-radius: 10px; } } .portfolio--3 .portfolio__single__img img { width: 100%; height: 100%; object-fit: cover; } .portfolio--3 .portfolio__single__content { position: static; transform: none; opacity: 1; visibility: visible; padding: 0; padding-top: 20px; display: flex; gap: 10px; justify-content: space-between; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--3 .portfolio__single__content { padding: 0; padding-top: 20px; } } @media (max-width: 575px) { .portfolio--3 .portfolio__single__content { flex-wrap: wrap; justify-content: space-between; } } .portfolio--3 .portfolio__single__tag { border-radius: 50px; border-color: var(--tj-color-border-1); color: var(--tj-color-heading-primary); font-size: 14px; } .portfolio--3 .portfolio__single__tag:hover { border-color: var(--tj-color-theme-primary) !important; color: var(--tj-color-common-white) !important; } .portfolio--3 .portfolio__single__title { color: var(--tj-color-heading-primary); max-width: 350px; } .portfolio--3 .portfolio__single__title:hover a { letter-spacing: inherit; color: var(--tj-color-theme-primary); } .portfolio--3 .portfolio__single::after { display: none; } .portfolio--3 .portfolio__single__action a { visibility: visible; opacity: 1; position: static; transform: none; border-color: var(--tj-color-border-1); color: var(--tj-color-heading-primary); transform: rotate(-45deg); } .portfolio--3 .portfolio__single__action a i { color: var(--tj-color-heading-primary); } .portfolio--3 .portfolio__single__action a:hover { border-color: transparent; } .portfolio--3 .portfolio__single__action a:hover i { color: var(--tj-color-common-white); } .portfolio--3 .portfolio__single:hover .portfolio__single__tag { border-color: var(--tj-color-border-1); color: var(--tj-color-heading-primary); } .portfolio--3 .portfolio__single:hover .portfolio__single__action a { background: var(--tj-color-theme-primary); transform: rotate(315deg); } .portfolio--3 .portfolio__single:hover .portfolio__single__action a i { color: var(--tj-color-common-white); } .portfolio--4 .portfolio__single { background-color: var(--tj-color-theme-bg1); } .portfolio--4 .portfolio__single__content { align-items: flex-end; } .portfolio--4 .portfolio__single__title { margin-bottom: 0; } .portfolio--4 .portfolio__single__title a:hover { color: var(--tj-color-theme-primary); } .portfolio--4 .portfolio__single__tag { border-radius: 6px; color: var(--tj-color-theme-secondary); background-color: var(--tj-color-common-white); } .portfolio--4 .portfolio__single__tag:hover { border-color: var(--tj-color-theme-secondary) !important; background-color: var(--tj-color-theme-secondary) !important; color: var(--tj-color-common-white) !important; } .portfolio--4 .portfolio__single:hover .portfolio__single__tag { color: var(--tj-color-theme-secondary); } /* !END: Portfolio CSS */ /* Circle Number Badge */ .card-circle { width: 50px; height: 50px; background: #0d6efd; color: white; border-radius: 50%; text-align: center; font-weight: bold; display: flex; justify-content: center; align-items: center; position: absolute; top: -20px; left: 20px; font-size: 16px; } /* Card Title */ .card-title { font-weight: bold; margin-top: 40px; color: #0c1c39; } /* Card Text */ .card-text { color: #60697b; font-size: 14px; } /* Left and Right Cutout Effect */ .custom-card::before, .custom-card::after { content: ""; position: absolute; top: 50%; width: 40px; height: 40px; background: #f8f9fa; border-radius: 50%; transform: translateY(-50%); } .custom-card::before { left: -20px; } .custom-card::after { right: -20px; } /* !END: Portfolio CSS */ /**---------------------------------------- START: Faq CSS ----------------------------------------*/ .tj-faq .accordion { width: 100%; margin: 0 auto; } .tj-faq .accordion-item { position: relative; z-index: 2; box-shadow: none; margin-bottom: 20px; background: transparent; border: 1px solid var(--tj-color-border-1); border-radius: 15px; color: var(--tj-color-text-body); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-faq .accordion-item { margin-bottom: 15px; border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-faq .accordion-item { margin-bottom: 12px; border-radius: 10px; } } @media (max-width: 575px) { .tj-faq .accordion-item { font-size: 14px; } } .tj-faq .accordion-item .faq-title { font-size: 20px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); padding: 20px 55px 20px 30px; background-color: transparent; position: relative; color: var(--tj-color-heading-primary); width: 100%; text-align: left; letter-spacing: -0.02em; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-faq .accordion-item .faq-title { font-size: 18px; padding: 15px 36px 15px 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-faq .accordion-item .faq-title { font-size: 16px; padding: 14px 36px 14px 16px; } } @media (max-width: 575px) { .tj-faq .accordion-item .faq-title { font-size: 18px; } } .tj-faq .accordion-item .faq-title::before { content: "\e932"; position: absolute; top: 35px; right: 22px; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); font-family: var(--tj-ff-ranko-icons); font-size: 27px; color: var(--tj-white); font-weight: var(--tj-fw-medium); line-height: 1; transition: all 0.3s ease-in-out 0s; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-faq .accordion-item .faq-title::before { top: 30px; right: 24px; font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-faq .accordion-item .faq-title::before { font-size: 25px; top: 24px; right: 16px; } } @media (max-width: 575px) { .tj-faq .accordion-item .faq-title::before { font-size: 22px; top: 30px; right: 10px; } } .tj-faq .accordion-item.active { background: var(--tj-color-theme-bg1); } .tj-faq .accordion-item.active .faq-title { color: var(--tj-color-theme-secondary); } .tj-faq .accordion-item.active .faq-title::before { content: "\e933"; } .tj-faq .accordion-item.active .accordion-body { border-color: var(--tj-color-border-1); } .tj-faq .accordion-item:last-child { margin-bottom: 0; } .tj-faq .accordion-body { padding: 20px 0 23px; margin: 0 30px; border-top: 1px solid transparent; } .tj-faq .accordion-body P { margin-bottom: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-faq .accordion-body { padding: 18px 0 20px; margin: 0 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-faq .accordion-body { padding: 14px 0 16px; margin: 0 16px; } } .tj-faq-2 .accordion-item { background-color: var(--tj-color-common-white); } .tj-faq-2 .accordion-item.active { background: var(--tj-color-common-white); } /* !END: Faq CSS */ /**---------------------------------------- START: Process CSS ----------------------------------------*/ .process__single { padding: 40px; border-radius: 16px; display: flex; justify-content: space-between; align-items: center; background-color: var(--tj-color-theme-bg4); margin-bottom: 30px; position: relative; z-index: 2; overflow: hidden; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__single { padding: 30px; border-radius: 12px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__single { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__single { display: grid; grid-template-rows: auto auto auto; padding: 30px 24px 24px; border-radius: 10px; } } @media (max-width: 575px) { .process__single { padding: 30px 15px 15px; } } .process__single:last-child { margin-bottom: 0; } .process__sl { font-size: 70px; color: transparent; -webkit-text-stroke: 1px var(--tj-color-common-white); letter-spacing: -2.5%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__sl { font-size: 36px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .process__sl { font-size: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__sl { font-size: 40px; margin-bottom: 18px; } } .process__img { width: 301px; transform: translateY(40px); max-height: 135.2px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__img { width: 250px; max-height: 112.3px; transform: translateY(30px); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .process__img { max-width: 200px; transform: translateY(37px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .process__img { width: 100%; margin-top: 10px; transform: translateY(21px); text-align: center; } } @media (max-width: 575px) { .process__img { width: 100%; margin-top: 10px; transform: translateY(15px); text-align: center; } } .process__img--excution img { transform: translateY(-37px); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__img--excution img { transform: translateY(-31px); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .process__img--excution img { transform: translateY(-7px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__img--excution img { transform: translateY(-15px); grid-row: 3/4; } } .process__content { max-width: 366px; color: var(--tj-color-border-1); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__content { max-width: 320px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .process__content { max-width: 233px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__content { grid-row: 2/3; max-width: 100%; } } .process__title { color: var(--tj-color-common-white); margin-bottom: 16px; font-size: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__title { font-size: 20px; margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__title { font-size: 24px; margin-bottom: 8px; } } .process__desc { margin-bottom: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__desc { font-size: 14px; } } .process-2__inner { display: flex; flex-wrap: wrap; gap: 20px 106px; align-items: center; justify-content: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process-2__inner { gap: 20px 50px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__inner { gap: 20px 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__inner { gap: 20px; } } .process-2__index { width: 57.6px; height: 57.6px; background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border-radius: 50%; text-align: center; font-weight: bold; display: flex; justify-content: center; align-items: center; outline: 7px solid var(--tj-color-common-white); margin-bottom: 27px; transition: all 0.3s linear; } .process-2__title { margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process-2__title { font-size: 20px; margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__title { font-size: 18px; margin-bottom: 8px; } } .process-2__desc { margin-bottom: 0px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process-2__desc { font-size: 14px; margin-bottom: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__desc { font-size: 14px; margin-bottom: 0px; } } .process-2__single { flex: 0 1 calc(33.3333% - 70.668px); background: var(--tj-color-theme-bg1); border-radius: 16px; padding: 44px 40px 40px; position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process-2__single { flex: 0 1 calc(33.3333% - 33.34px); } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single { flex: 0 1 calc(33.3333% - 20px); } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single { flex: 0 1 calc(33.3333% - 13.5px); padding: 30px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single { flex: 0 1 100%; } } .process-2__single__shape::before, .process-2__single__shape::after { content: ""; position: absolute; top: 50%; width: 25px; height: 80px; background: var(--tj-color-common-white); transform: translateY(-50%); mask-image: url("../images/icons/shape.svg"); mask-size: contain; mask-repeat: no-repeat; mask-position: right; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single__shape::before, .process-2__single__shape::after { width: 18px; height: 42px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single__shape::before, .process-2__single__shape::after { left: 50%; right: auto; transform: translateX(-50%) translateY(0) rotate(90deg); } } .process-2__single__shape::before { left: 0; transform: translateY(-50%) scale(-1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single__shape::before { top: 0; right: auto; left: 50%; transform: translateX(-50%) translateY(-12px) rotate(-90deg); } } .process-2__single__shape::after { right: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single__shape::after { right: auto; top: auto; bottom: 0; transform: translateX(-50%) translateY(12px) rotate(90deg); } } .process-2__single::after { content: "\e901"; font-family: var(--tj-ff-ranko-icons); position: absolute; left: 100%; top: 50%; transform: translate(56%, -50%); color: var(--tj-color-theme-dark); font-size: 12px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process-2__single::after { transform: translate(26%, -50%); font-size: 9px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process-2__single::after { transform: translate(3%, -50%); font-size: 7px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single::after { transform: translate(-5%, -50%); font-size: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__single::after { left: 50%; top: 100%; transform: translate(-47%, 60%) rotate(90deg); } } .process-2__single:last-child::after { display: none; } .process-2__single:nth-child(2) .process-2__index { background: var(--tj-color-theme-secondary); } .process-2__single:nth-child(3) .process-2__index { background: var(--tj-color-theme-dark); } .process-2__single:hover .process-2__index { animation: shakeAnimation 0.2s ease-out; } @keyframes fadeInBottomMobile { 0% { opacity: 0; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); transform: translateY(0); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-2__inner .fadeInLeft { -webkit-animation-name: fadeInBottomMobile; animation-name: fadeInBottomMobile; } } /* !END: Process CSS */ /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .testimonials__slider .swiper-wrapper { padding-top: 30px; } .testimonials__slider__item { padding: 100px 40px 50px; background-color: var(--tj-color-theme-bg1); border: 1px solid var(--tj-color-border-1); border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__slider__item { padding: 60px 30px 30px; } } @media (max-width: 575px) { .testimonials__slider__item { padding: 60px 20px 24px; } } .testimonials__slider__item:hover .testimonials__qoute i { transform: scaleX(-1) translateY(-10px); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__slider__item:hover .testimonials__qoute i { transform: scaleX(-1) translateY(0px); } } .testimonials__qoute { width: 100px; height: 100px; background-color: var(--tj-color-common-white); color: var(--tj-color-theme-secondary); border: 1px solid var(--tj-color-border-1); border-radius: 100%; font-size: 55px; line-height: 1; display: inline-flex; justify-content: center; align-items: center; position: absolute; left: 40px; top: -30px; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials__qoute { width: 80px; height: 80px; font-size: 40px; top: -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__qoute { width: 75px; height: 75px; font-size: 40px; top: -40px; } } @media (max-width: 575px) { .testimonials__qoute { top: -30px; } } .testimonials__qoute i { position: relative; z-index: 2; transform: translateY(-10px); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__qoute i { transform: translateY(-2px); } } @media (max-width: 575px) { .testimonials__qoute i { transform: translateY(-1px); } } .testimonials__qoute::after { content: ""; position: absolute; left: -2px; top: -2px; width: 105%; height: 30px; background-color: var(--tj-color-common-white); z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__qoute::after { top: 8px; } } @media (max-width: 575px) { .testimonials__qoute::after { left: -1px; top: -2px; } } .testimonials__rating { margin-bottom: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__rating { margin-bottom: 8px; } } .testimonials__desc { font-size: 22px; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--tj-color-border-1); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__desc { font-size: 18px; } } @media (max-width: 575px) { .testimonials__desc { font-size: 16px; padding-bottom: 18px; margin-bottom: 14px; } } .testimonials__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .testimonials__footer__logo { width: 80px; } @media (max-width: 575px) { .testimonials__footer__logo { width: 60px; } } .testimonials__author { display: flex; align-items: center; gap: 10px; } @media (max-width: 575px) { .testimonials__author { gap: 8px; } } .testimonials__author__avatar { max-width: 54px; border-radius: 8px; border: 2px solid var(--tj-color-common-white); overflow: hidden; } @media (max-width: 575px) { .testimonials__author__avatar { max-width: 44px; border-radius: 6px; } } .testimonials__author__avatar img { width: 100%; } .testimonials__author__name { font-size: 20px; margin-bottom: 4px; } @media (max-width: 575px) { .testimonials__author__name { font-size: 16px; margin-bottom: 2px; } } .testimonials__author__desig { font-size: 14px; margin-bottom: 0; } @media (max-width: 575px) { .testimonials__author__desig { font-size: 12px; } } .testimonials--3 .brand-marquee__inner { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .testimonials--3 .swiper { padding-bottom: 0; height: 100%; } .testimonials--3 .swiper-wrapper { height: 100%; } .testimonials--3 .swiper-slide { height: 100%; } .testimonials--3 .swiper-pagination { bottom: 50px; right: 30px; left: auto; text-align: right; } .testimonials--3 .testimonials__slider__3 { border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__slider__3 { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__slider__3 { border-radius: 10px; } } .testimonials--3 .testimonials__slider__wrapper { display: flex; gap: 30px; overflow: hidden; flex-wrap: nowrap; padding: 0 30px 45px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .testimonials--3 .testimonials__slider__wrapper { padding: 0 30px 45px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__slider__wrapper { padding: 0 20px 35px; flex-direction: column; align-items: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__slider__wrapper { padding: 0 15px 25px; flex-direction: column; align-items: center; } } .testimonials--3 .testimonials__slider__item { border: 0; background-color: var(--tj-color-common-white); padding: 50px 30px 50px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__slider__item { padding: 30px; } } @media (max-width: 575px) { .testimonials--3 .testimonials__slider__item { padding: 30px 15px; } } .testimonials--3 .testimonials__slider:hover .testimonials__qoute i { transform: unset; } .testimonials--3 .testimonials__left { max-width: 390px; width: 100%; height: 100%; border-radius: 16px; border-bottom-right-radius: 0; overflow: hidden; flex-shrink: 0; position: relative; height: 100%; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__left { border-radius: 12px; border-bottom-right-radius: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__left { border-radius: 10px; border-bottom-right-radius: 0; } } .testimonials--3 .testimonials__left img { border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__left img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__left img { border-radius: 10px; } } .testimonials--3 .testimonials__right { width: calc(100% - 420px); overflow: hidden; position: relative; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__right { width: 100%; } } .testimonials--3 .testimonials__navigation { position: absolute; right: 0; bottom: 0; display: flex; gap: 12px; border-top-left-radius: 16px; align-items: center; padding: 20px 0 0 18px; background-color: var(--tj-color-theme-bg1); z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__navigation { border-top-left-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__navigation { border-top-left-radius: 10px; } } .testimonials--3 .testimonials__navigation::before, .testimonials--3 .testimonials__navigation::after { content: ""; background: var(--tj-color-theme-bg1); mask-image: url('data:image/svg+xml,'); position: absolute; width: 16px; height: 16px; transform: scale(-1); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__navigation::before, .testimonials--3 .testimonials__navigation::after { width: 12px; height: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__navigation::before, .testimonials--3 .testimonials__navigation::after { width: 10px; height: 10px; } } .testimonials--3 .testimonials__navigation::after { right: 0; top: -16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__navigation::after { top: -12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__navigation::after { top: -10px; } } .testimonials--3 .testimonials__navigation::before { left: -16px; bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__navigation::before { left: -12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__navigation::before { left: -10px; } } .testimonials--3 .testimonials-nav-prev, .testimonials--3 .testimonials-nav-next { width: 40px; height: 40px; display: inline-flex; justify-content: center; align-items: center; background: var(--tj-color-common-white); border-radius: 4px; } .testimonials--3 .testimonials-nav-prev:hover, .testimonials--3 .testimonials-nav-next:hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .testimonials--3 .testimonials__qoute { border: 0; color: var(--tj-color-theme-bg1); background: transparent; width: 244px; height: 244px; font-size: 300px; line-height: 1; top: 5%; left: 50%; transform: translateX(-50%) rotate(180deg); z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--3 .testimonials__qoute { width: 200px; height: 200px; font-size: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--3 .testimonials__qoute { width: 150px; height: 150px; font-size: 150px; } } .testimonials--3 .testimonials__qoute i { transform: unset; } .testimonials--3 .testimonials__qoute::after { display: none; } .testimonials--3 .testimonials__qoute img { width: 100%; } .testimonials--3 .testimonials__desc { font-size: 28px; color: var(--tj-color-heading-primary); text-align: justify; hyphens: auto; overflow-wrap: break-word; line-height: 1.5; font-family: var(--tj-ff-heading); letter-spacing: -0.02em; font-weight: var(--tj-fw-medium); padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .testimonials--3 .testimonials__desc { font-size: 26px; padding-right: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonials--3 .testimonials__desc { font-size: 24px; padding-right: 0px; } } @media (max-width: 575px) { .testimonials--3 .testimonials__desc { font-size: 20px; padding-right: 0px; } } .testimonials--4 { padding: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .testimonials--4 { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials--4 { padding: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials--4 { padding: 0; } } .testimonials--4 .testimonials__slider__item { background-color: var(--tj-color-common-white); border: 0; } .testimonials--4 .testimonials__qoute { background-color: var(--tj-color-theme-bg1); border: 0; } .testimonials--4 .testimonials__qoute::after { background-color: transparent; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ranko-bg-shape.elementor-element { background-position: -101px -214px !important; } } /* !END: Testimonials CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .blog .row { gap: 30px 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog .row { gap: 20px 0; } } .blog__single { border-radius: 16px; position: relative; overflow: hidden; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single { border-radius: 10px; } } .blog__single__banner { position: relative; overflow: hidden; } .blog__single__date { width: 80px; height: 80px; border-radius: 8px; text-align: center; overflow: hidden; position: absolute; left: 15px; top: 15px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__date { width: 70px; height: 70px; border-radius: 6px; } } .blog__single__date__day { font-size: 32px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-secondary); margin-bottom: 0; padding: 10px 0 12px; line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__date__day { font-size: 24px; padding: 11px 0 11px; } } .blog__single__date__month { padding: 6px 0 4px; margin-bottom: 0; background-color: var(--tj-color-common-white); line-height: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__date__month { font-size: 14px; padding: 5px 0 5px; } } .blog__single__content { padding: 24px 24px 30px 30px; background-color: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__content { padding: 20px 20px 24px 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__content { padding: 16px 16px 20px 20px; } } .blog__single__title { margin-bottom: 18px; font-size: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__title { font-size: 20px; margin-bottom: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__title { font-size: 20px; margin-bottom: 12px; } } .blog__single__title:hover a { color: var(--tj-color-theme-primary); } .blog__single__desc { margin-bottom: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__desc { margin-bottom: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__desc { margin-bottom: 12px; } } .blog__single:hover .blog__single__banner img { transform: scale(1.2); } .blog-2 .blog__single { background-color: var(--tj-color-theme-bg1); } .blog-2 .blog__single__wrapper { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr)); justify-content: center; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-2 .blog__single__wrapper { grid-template-columns: 100%; } } .blog-2 .blog__single__banner { border-radius: 10px; margin: 15px; } @media (max-width: 575px) { .blog-2 .blog__single__banner { max-height: 208px; margin-bottom: 0; } .blog-2 .blog__single__banner a { height: 100%; } .blog-2 .blog__single__banner a img { height: 100%; object-fit: cover; } } .blog-2 .blog__single__title { margin-bottom: 20px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-2 .blog__single__title { margin-bottom: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-2 .blog__single__title { margin-bottom: 16px; } } .blog-2 .blog__single__content { background: transparent; padding-top: 20px; } .blog-2 .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-2 .blog__single__content__list { margin-bottom: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-2 .blog__single__content__list { margin-bottom: 12px; } } .blog-2 .blog__single__content__list li { position: relative; } .blog-2 .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } .blog-2 .blog__single__content__list li:last-child::after { display: none; } .blog-2 .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 3px 6px 3px; background-color: transparent; border: 1px solid var(--tj-color-border-5); color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-bg9); font-size: 16px; line-height: 1; letter-spacing: 2%; border-radius: 6px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-2 .blog__single__content__tag { font-size: 14px; border-radius: 4px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-2 .blog__single__content__tag { font-size: 14px; border-radius: 4px; } } .blog-2 .blog__single__content__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); } .blog-2 .blog__single__content__date { color: var(--tj-color-text-body); font-size: 14px; } .blog-2 .blog__single:first-child { grid-row: 1/3; } .blog-2 .blog__single:first-child .blog__single__banner { margin-bottom: 0; } .blog-2 .blog__single:first-child .blog__single__title { font-size: 32px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog-2 .blog__single:first-child .blog__single__title { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .blog-2 .blog__single:first-child .blog__single__title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-2 .blog__single:first-child .blog__single__title { font-size: 16px; } } .blog-2 .blog__single:not(:first-child) { display: flex; grid-template-columns: 1fr 1fr; align-items: center; } @media (max-width: 575px) { .blog-2 .blog__single:not(:first-child) { flex-direction: column; align-items: flex-start; } } .blog-2 .blog__single:not(:first-child) .blog__single__banner { max-width: 323px; width: 100%; } @media (max-width: 575px) { .blog-2 .blog__single:not(:first-child) .blog__single__banner { max-width: calc(100% - 30px); } } .blog-2 .blog__single:not(:first-child) .blog__single__banner a { height: 100%; } .blog-2 .blog__single:not(:first-child) .blog__single__banner a img { height: 100%; object-fit: cover; } @media (max-width: 575px) { .blog-2 .blog__single:not(:first-child) .blog__single__content { padding: 20px; padding-right: 16px; } } .blog-3 .blog__single { border-radius: 0; overflow: visible; } .blog-3 .blog__single__banner { border-radius: 16px; position: relative; overflow: hidden; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-3 .blog__single__banner { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-3 .blog__single__banner { border-radius: 10px; } } .blog-3 .blog__single__content { box-shadow: var(--tj-shadow-theme-primary); border-radius: 16px; position: relative; margin: -50px 30px 0; z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-3 .blog__single__content { border-radius: 12px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .blog-3 .blog__single__content { margin: -40px 20px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-3 .blog__single__content { border-radius: 10px; margin: -40px 20px 0; } } .blog-3 .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-3 .blog__single__content__list { margin-bottom: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-3 .blog__single__content__list { margin-bottom: 12px; } } .blog-3 .blog__single__content__list li { position: relative; } .blog-3 .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } .blog-3 .blog__single__content__list li a:not(.blog__single__content__tag) { color: var(--tj-color-text-body); font-size: 14px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-3 .blog__single__content__list li a:not(.blog__single__content__tag) { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-3 .blog__single__content__list li a:not(.blog__single__content__tag) { font-size: 12px; } } .blog-3 .blog__single__content__list li a:not(.blog__single__content__tag):hover { color: var(--tj-color-theme-primary); } .blog-3 .blog__single__content__list li:last-child::after { display: none; } .blog-3 .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 4px 6px 2px; background-color: transparent; border: 1px solid var(--tj-color-border-5); color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-bg9); font-size: 16px; line-height: 1; letter-spacing: 2%; border-radius: 6px; font-size: 14px; font-weight: var(--tj-fw-medium); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-3 .blog__single__content__tag { font-size: 14px; border-radius: 4px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-3 .blog__single__content__tag { font-size: 14px; border-radius: 4px; } } .blog-3 .blog__single__content__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); } .blog-3 .blog__single__content__date { color: var(--tj-color-text-body); font-size: 14px; } .tj-post-container.blog__single__wrapper { display: flex; flex-direction: column; gap: 30px; } .tj-post-container .blog__single { background-color: transparent; border-radius: 16px; overflow: hidden; } @media (max-width: 575px) { .tj-post-container .blog__single { border-radius: 12px; } } .tj-post-container .blog__single:has(.blog__single__banner) .blog__single__content { border-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; } .tj-post-container .blog__single__title { margin-bottom: 20px; font-size: 32px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-post-container .blog__single__title { font-size: 28px; margin-bottom: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-container .blog__single__title { font-size: 25px; margin-bottom: 16px; } } .tj-post-container .blog__single__desc { margin-bottom: 24px; } .tj-post-container .blog__single__content { background: transparent; padding: 30px; border: 1px solid var(--tj-color-border-1); border-radius: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-container .blog__single__content { padding: 20px; } } @media (max-width: 575px) { .tj-post-container .blog__single__content { border-radius: 12px; } } .tj-post-container .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-post-container .blog__single__content__list { margin-bottom: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-container .blog__single__content__list { margin-bottom: 12px; } } .tj-post-container .blog__single__content__list li { position: relative; } .tj-post-container .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } .tj-post-container .blog__single__content__list li a:not(.blog__single__content__tag) { color: var(--tj-color-text-body); font-size: 14px; } .tj-post-container .blog__single__content__list li a:not(.blog__single__content__tag):hover { color: var(--tj-color-theme-primary); } .tj-post-container .blog__single__content__list li:last-child::after { display: none; } .tj-post-container .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 3px 6px 3px; background-color: transparent; border: 1px solid var(--tj-color-border-5); color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-bg9); font-size: 16px; font-weight: var(--tj-fw-medium); line-height: 1; letter-spacing: 2%; border-radius: 6px; } .tj-post-container .blog__single__content__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); } .blog-gallery-slider.swiper { padding: 0; } .elementor-widget .blog__single__banner { position: relative; overflow: hidden; height: 275px; } .elementor-widget .blog__single__banner img { width: 100%; height: 100%; object-fit: cover; } .elementor-widget .blog-2 .blog__single:first-child .blog__single__banner { height: 368px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .elementor-widget .blog-2 .blog__single:first-child .blog__single__banner { height: 300px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .elementor-widget .blog-2 .blog__single:first-child .blog__single__banner { height: 250px; } } @media (max-width: 575px) { .elementor-widget .blog-2 .blog__single:first-child .blog__single__banner { height: auto; } } .elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner { height: calc(100% - 30px); } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner { margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner { height: 275px; } } @media (max-width: 575px) { .elementor-widget .blog-2 .blog__single:not(:first-child) .blog__single__banner { height: auto; } } /* !END: Blog CSS */ /**---------------------------------------- START: Service Marquee CSS ----------------------------------------*/ .service-marquee { position: relative; } .service-marquee__slider { padding-bottom: 0; } .service-marquee__slider .swiper-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .service-marquee__item { display: flex; align-items: center; gap: 50px; } .service-marquee__item.swiper-slide { width: auto; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service-marquee__item { gap: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service-marquee__item { gap: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-marquee__item { gap: 20px; } } .service-marquee__item .service-marquee__title { font-size: 130px; color: var(--tj-color-heading-primary); letter-spacing: -0.03em; margin-bottom: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service-marquee__item .service-marquee__title { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service-marquee__item .service-marquee__title { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-marquee__item .service-marquee__title { font-size: 60px; } } .service-marquee__item .service-marquee__img { width: 68px; animation: rotateImg2 6s infinite linear; } .service-marquee__item .service-marquee__img img { width: 100%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service-marquee__item .service-marquee__img { width: 58px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service-marquee__item .service-marquee__img { width: 48px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-marquee__item .service-marquee__img { width: 38px; } } .service-marquee__item:nth-child(2n) .service-marquee__title { color: transparent; -webkit-text-stroke: 1px var(--tj-color-heading-primary); text-stroke: 1px var(--tj-color-heading-primary); opacity: 0.4; } @keyframes rotateImg2 { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } @keyframes rotateImg3 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* !END: Service Marquee CSS */ /**---------------------------------------- START: Strategy CSS ----------------------------------------*/ .strategy__tab__content__single { position: relative; z-index: 0; } .strategy__tab__slider { padding-bottom: 0; position: static; } .strategy__tab__slider__wrapper { padding: 15px 20px; border: 1px solid var(--tj-color-border-1); border-radius: 24px; position: relative; } .strategy__tab__slider__item button { width: 100%; padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 22.5px; justify-content: center; color: var(--tj-color-theme-dark3); border-radius: 16px; } @media (max-width: 575px) { .strategy__tab__slider__item button { padding: 16px 6px; } } .strategy__tab__slider__item button i { font-size: 42px; margin-bottom: 6px; } @media (max-width: 575px) { .strategy__tab__slider__item button span { font-size: 13px; } } .strategy__tab__slider__item button .current-index { z-index: 1; position: relative; z-index: 0; } .strategy__tab__slider__item button .current-index, .strategy__tab__slider__item button .current-index::before { content: ""; width: 100%; height: 6px; border-radius: 6px; background-color: var(--tj-color-theme-bg1); } .strategy__tab__slider__item button .current-index::before { width: 0; position: absolute; bottom: 0; left: 0; z-index: 2; transition: all 0.3s; background-color: var(--tj-color-theme-secondary); } .strategy__tab__slider__item button:hover, .strategy__tab__slider__item button.active { color: var(--tj-color-theme-dark); background-color: var(--tj-color-theme-bg1); } .strategy__tab__slider__item button:hover i, .strategy__tab__slider__item button.active i { color: var(--tj-color-theme-secondary); } .strategy__tab__slider__item button:hover .current-index::before, .strategy__tab__slider__item button.active .current-index::before { width: 100%; } .strategy .swiper-button-prev, .strategy .swiper-button-next { width: 50px; height: 50px; border: 1px solid var(--tj-color-border-1); background: var(--tj-color-common-white); border-radius: 100%; opacity: 0; visibility: hidden; transition: all 0.3s; } .strategy .swiper-button-prev::after, .strategy .swiper-button-next::after { font-family: "ranko-icons"; color: var(--tj-color-theme-dark); font-size: 14px; } .strategy .swiper-button-prev { left: 10px; transform: translateX(-50%); } .strategy .swiper-button-prev::after { content: "\e908"; } .strategy .swiper-button-next { right: 10px; transform: translateX(50%); } .strategy .swiper-button-next::after { content: "\e906"; } .strategy .swiper-button-prev:hover, .strategy .swiper-button-next:hover { border-color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-secondary); } .strategy .swiper-button-prev:hover::after, .strategy .swiper-button-prev:hover::after, .strategy .swiper-button-next:hover::after, .strategy .swiper-button-next:hover::after { color: var(--tj-color-common-white); } .strategy .swiper-button-disabled { opacity: 0; cursor: not-allowed; } .strategy .swiper:hover .swiper-button-prev, .strategy .swiper:hover .swiper-button-next { opacity: 1; visibility: visible; } .strategy .swiper:hover .swiper-button-prev { left: 0; } .strategy .swiper:hover .swiper-button-next { right: 0; } .strategy .swiper:hover .swiper-button-disabled { opacity: 0; cursor: not-allowed; } .strategy__about { position: absolute; top: -40%; left: 50%; width: 100%; transform: translate(-50%, -40%); padding: 30px; border-radius: 24px; background-color: var(--tj-color-theme-bg1); z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .strategy__about { border-radius: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .strategy__about { padding: 80px 20px; border-radius: 16px; position: static; transform: translate(0); margin-top: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy__about { padding: 60px 15px; border-radius: 12px; position: static; transform: translate(0); margin-top: 15px; } } .strategy__about::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url("../images/about/bg-2.png") no-repeat bottom right; border-radius: 24px; z-index: -1; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .strategy__about::after { border-radius: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .strategy__about::after { border-radius: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy__about::after { border-radius: 16px; } } .strategy__about__wrapper { position: relative; z-index: 1; } .strategy__about__wrapper .about__banner { padding-right: 13px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy__about__wrapper .about__banner { width: 100%; display: flex; flex-direction: column; align-items: center; padding-right: 0px; } } .strategy__about__wrapper .about__banner > img { border-radius: 0px; } @media (max-width: 575px) { .strategy__about__wrapper .about__banner > img { border-radius: 5px; } } .strategy__about__wrapper .about__banner::after { display: none; } .strategy__about__wrapper .about__banner__charts__img--bottom { bottom: 50px; left: 20px; } .strategy__about__wrapper .about__banner__charts__img--bottom img { width: 244px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy__about__wrapper .about__banner__charts__img--bottom img { width: 180px; } } .strategy__about__wrapper .about__content { padding-left: 0; max-width: 460px; margin-left: -12px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy__about__wrapper .about__content { margin-left: 0px; } } .strategy__about__wrapper .about__features ul { grid-template-columns: 1fr; } .strategy__services { padding-top: 475px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .strategy__services { padding-top: 370px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .strategy__services { padding-top: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .strategy__services { padding-top: 60px; } } .strategy__services .section-heading__title { color: var(--tj-color-common-white); margin-bottom: 0; } .strategy__services .section-heading__desc { color: var(--tj-color-common-white2); } .strategy .service__card { background: transparent; border: 1px solid var(--tj-color-border-7); } .strategy .service__card::after { background: transparent; } .strategy .service__card__pattern { display: none; } .strategy .service__card:hover .service__desc { color: var(--tj-color-common-white2); } .strategy .service__title { color: var(--tj-color-common-white); } .strategy .service__title a:hover { color: var(--tj-color-theme-primary); } .strategy .service__desc { color: var(--tj-color-common-white2); margin-bottom: 0; } /* !END: Strategy CSS */ /**---------------------------------------- START: Team CSS ----------------------------------------*/ .team .section-heading__sub-title { background: var(--tj-color-theme-bg3); } .team .section-heading__title { color: var(--tj-color-common-white); } .team .swiper-pagination-bullet { background-color: var(--tj-color-common-white); } .team .swiper-pagination-bullet:hover { opacity: 1; } .team__socials { position: absolute; top: 7px; left: 7px; bottom: 7px; right: 7px; background-color: var(--tj-color-theme-dark3); border-radius: 16px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s; } .team__socials .tj-socials--sm { transform: translateY(-40px); transition: all 0.3s; } .team__socials .tj-socials--sm ul { gap: 8px; } .team__socials .tj-socials--sm ul li a { width: 24px; height: 24px; background: var(--tj-color-common-white); border-radius: 100%; display: inline-flex; justify-content: center; align-items: center; } .team__socials .tj-socials--sm ul li a i { font-size: 14px; color: var(--tj-color-heading-primary); } .team__socials .tj-socials--sm ul li a:hover { background: var(--tj-color-theme-primary); } .team__socials .tj-socials--sm ul li a:hover i { color: var(--tj-color-common-white); } .team__single__img { margin-bottom: 20px; position: relative; z-index: 0; } .team__single__img .tj-el-image img { border-radius: 16px; width: 100%; } .team__single__title { font-size: 20px; text-align: center; } .team__single__title a { color: var(--tj-color-common-white); } .team__single__title a:hover { color: var(--tj-color-theme-primary); } .team__single__desig { font-size: 14px; color: var(--tj-color-common-white2); text-align: center; margin-bottom: 0; } .team__single:hover .team__socials { opacity: 1; visibility: visible; } .team__single:hover .team__socials .tj-socials--sm { transform: translateY(0); } .team--main .team__single__title a { color: var(--tj-color-heading-primary); } .team--main .team__single__title a:hover { color: var(--tj-color-theme-primary); } .team--main .team__single__desig { color: var(--tj-color-text-body); } /* !END: Team CSS */ /**---------------------------------------- START: Team Details CSS ----------------------------------------*/ .team-details__contact-info p { color: var(--tj-color-theme-dark3); margin-bottom: 0; } .team-details__contact-info a { font-size: 20px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-sbold); margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__contact-info a { font-size: 14px; } } .team-details__contact-info a:hover { color: var(--tj-color-theme-primary); } .team-details__experience__list ul { display: flex; border: 1px solid var(--tj-color-border-1); flex-wrap: wrap; margin: 25px 0; border-radius: var(--tj-br-md); } .team-details__experience__list ul li { flex: 1 1 50%; padding: 25px; display: flex; gap: 8px; border: 1px solid var(--tj-color-border-1); border-top: 0; border-left: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team-details__experience__list ul li { padding: 16px; } } .team-details__experience__list ul li p { margin-bottom: 0; } .team-details__experience__list ul li i { color: var(--tj-color-theme-secondary); position: relative; margin-top: 6px; } .team-details__experience__list ul li:last-child { border-right: 0; } .team-details__experience__list ul li:nth-child(2n) { border-right: 0; } /* !END: Team Details CSS */ /**---------------------------------------- START: Package CSS ----------------------------------------*/ .package__tab__controllers { flex-wrap: nowrap; padding: 6px; background: var(--tj-color-theme-bg1); border: 1px solid var(--tj-color-border1); border-radius: 100px; gap: 0px; position: relative; overflow: hidden; z-index: 2; max-width: max-content; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__tab__controllers { padding: 5px; } } .package__tab__controllers .active-bg { position: absolute; background-color: var(--tj-color-theme-secondary); z-index: -1; border-radius: 50px; transition: all 0.5s ease; } .package__tab__controller { background: transparent; color: var(--tj-color-heading-primary); font-size: 16px; padding: 16px 20px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; font-weight: var(--tj-fw-sbold); line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__tab__controller { font-size: 14px; padding: 10px 15px; } } .package__tab__controller.active { background: transparent; color: var(--tj-color-common-white); } .package__single { padding: 30px; background: var(--tj-color-theme-bg1); border: 1px solid var(--tj-color-border-1); border-radius: 16px; overflow: hidden; position: relative; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__single { padding: 25px; border-radius: 12px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__single { padding: 20px; border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__single { padding: 20px 15px; border-radius: 10px; } } .package__badge { position: absolute; top: 27px; right: -90px; padding: 6px 90px 5px; background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); transform: rotate(45deg); border: 1px solid var(--tj-color-common-white); border-left: 0; border-right: 0; font-size: 14px; font-weight: var(--tj-fw-medium); line-height: 1; } .package__name { font-size: 24px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); margin-bottom: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__name { font-size: 22px; margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__name { font-size: 22px; margin-bottom: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__name { font-size: 22px; margin-bottom: 16px; } } .package__price { font-size: 64px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); padding-bottom: 24px; border-bottom: 1px solid var(--tj-color-border-10); margin-bottom: 24px; line-height: 1; display: flex; align-items: flex-end; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .package__price { font-size: 54px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__price { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__price { font-size: 56px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__price { font-size: 48px; } } .package__price__type { display: inline-flex; font-size: 16px; line-height: 1; color: var(--tj-color-theme-dark3); margin-bottom: 6px; font-weight: var(--tj-fw-regular); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__price__type { font-size: 14px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__price__type { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__price__type { font-size: 14px; } } .package__price__type span { padding: 4px 5px 3px; background-color: var(--tj-color-theme-supportive); color: var(--tj-color-heading-primary); font-size: 12px; font-weight: var(--tj-fw-medium); line-height: 1; border-radius: 20px; margin-bottom: 3px; margin-left: 4px; } .package__price__disc { padding: 4px 5px 3px; background-color: var(--tj-color-theme-supportive); color: var(--tj-color-heading-primary); font-size: 12px; font-weight: var(--tj-fw-medium); line-height: 1; border-radius: 20px; margin-bottom: 3px; margin-left: 4px; } .package__desc { font-size: 16px; margin-bottom: 24px; } .package__btn { margin-bottom: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__btn { margin-bottom: 25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__btn { margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__btn { margin-bottom: 20px; } } .package .tj-btn--full { border-color: var(--tj-color-theme-dark); } .package .tj-btn--full::after { background: var(--tj-color-theme-dark); } .package .tj-btn--full:hover { color: var(--tj-color-theme-dark); border-color: var(--tj-color-theme-dark); } .package .tj-btn--full:hover i { color: var(--tj-color-theme-dark); } .package__features { padding: 30px; border-radius: 16px; background: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__features { padding: 25px; border-radius: 12px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__features { padding: 20px; border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__features { padding: 20px 15px; border-radius: 10px; } } .package__features__title { font-size: 18px; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); margin-bottom: 30px; line-height: 1; } .package__features ul { display: flex; flex-direction: column; gap: 20px; font-family: var(--tj-ff-heading); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .package__features ul { gap: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .package__features ul { gap: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__features ul { margin-bottom: 20px; } } .package__features ul li { font-size: 16px; line-height: 1; display: flex; align-items: center; gap: 8px; font-weight: var(--tj-fw-medium); } .package__features ul li i { font-size: 14px; color: var(--tj-color-theme-dark3); } .package__single--recommended { background: var(--tj-color-theme-secondary); border: 1px solid var(--tj-color-border-secondary); } .package__single--recommended .package__name { color: var(--tj-color-common-white); } .package__single--recommended .package__price { color: var(--tj-color-common-white); border-color: var(--tj-color-border-4); } .package__single--recommended .package__price__type { color: var(--tj-color-common-white); } .package__single--recommended .package__desc { color: var(--tj-color-common-white); margin-bottom: 24px; } .package__single--recommended .package__features { background: var(--tj-color-theme-bg4); } .package__single--recommended .package__features__title { color: var(--tj-color-common-white); } .package__single--recommended .package__features ul li { color: var(--tj-color-common-white); } .package__single--recommended .package__features ul li i { color: var(--tj-color-common-white); } .package__single--recommended .tj-btn--full { border-color: var(--tj-color-theme-primary); } .package__single--recommended .tj-btn--full::after { background: var(--tj-color-theme-primary); } .package__single--recommended .tj-btn--full:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-common-white); } .package__single--recommended .tj-btn--full:hover i { color: var(--tj-color-common-white); } .package--2 .package__tab__controllers { background-color: var(--tj-color-common-white); } .package--2 .package__single { background-color: var(--tj-color-common-white); } .package--2 .package__features { background-color: var(--tj-color-theme-bg1); } .package--2 .package__single--recommended { background: var(--tj-color-theme-secondary); } .package--2 .package__single--recommended .package__features { background: var(--tj-color-theme-bg4); } .package__single--2.package__single--recommended { background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%); } .package__single--2.package__single--recommended .tj-btn--full { border-color: var(--tj-color-theme-dark); } .package__single--2.package__single--recommended .tj-btn--full::after { background-color: var(--tj-color-theme-dark); } .package__single--2.package__single--recommended .tj-btn--full:hover { border-color: var(--tj-color-common-white); } .package__single--2.package__single--enterprise { background-color: var(--tj-color-theme-bg2); } .package__single--2 .package__badge { background-color: var(--tj-color-theme-secondary); } /* !END: Package CSS */ /**---------------------------------------- START: Award CSS ----------------------------------------*/ .award { padding: 120px 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .award { padding: 100px 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .award { padding: 80px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award { padding: 60px 0; } } .award__banner { overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .award__banner { margin-top: 50px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__banner { margin-top: 40px; text-align: center; } } .award__banner img { border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .award__banner img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__banner img { border-radius: 10px; } } .award__content__list { display: flex; flex-direction: column; gap: 32px; padding-left: 48px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .award__content__list { gap: 24px; padding-left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .award__content__list { gap: 28px; padding-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__content__list { gap: 24px; padding-left: 0; } } .award__content__list__item { display: flex; gap: 15px; padding-bottom: 7px; position: relative; transition: all 0.3s; } .award__content__list__item::after, .award__content__list__item::before { content: ""; position: absolute; bottom: 0; right: 0; width: 100%; height: 1px; background-color: var(--tj-color-border-1); } .award__content__list__item::after { background-color: transparent; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .award__content__list__item { padding-bottom: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__content__list__item { gap: 12px; padding-bottom: 5px; } } .award__content__list__item:hover::after { background-color: var(--tj-color-theme-dark); animation: linehover 0.8s linear; } .award__content__list__item:hover .award__content__list__title, .award__content__list__item:hover .award__content__list__sl { letter-spacing: 0.03em; } .award__content__list__item__right { flex-grow: 1; } .award__content__list__sl { font-size: 16px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-common-white2); margin-top: 5px; line-height: 1; transition: all 0.3s ease; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .award__content__list__sl { font-size: 14px; margin-top: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__content__list__sl { font-size: 12px; } } .award__content__list__title { font-size: 20px; margin-bottom: 16px; display: flex; justify-content: space-between; gap: 10px; align-items: center; line-height: 1.4; transition: all 0.3s ease; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .award__content__list__title { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__content__list__title { font-size: 16px; } } .award__content__list__title__year { font-size: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .award__content__list__title__year { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__content__list__title__year { font-size: 18px; } } /* !END: Award CSS */ /**---------------------------------------- START: Blog Details CSS ----------------------------------------*/ .tj-blog-section { padding: 120px 0; position: relative; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-blog-section { padding: 100px 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tj-blog-section { padding: 80px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-section { padding: 60px 0; } } .tj-blog-section .faq { padding: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-blog-section .faq { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tj-blog-section .faq { padding: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-section .faq { padding: 0; } } .post-details-wrapper .blog-images { margin-bottom: 20px; } .post-details-wrapper .blog-images img { border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .post-details-wrapper .blog-images img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .post-details-wrapper .blog-images img { border-radius: 10px; } } .post-details-wrapper .title { text-transform: capitalize; line-height: 1.2; margin-bottom: 25px; } .post-details-wrapper p:not(:last-child) { margin-bottom: 30px; } .post-details-wrapper p:last-child { margin-bottom: 0; } .post-details-wrapper .images-wrap { margin-bottom: 10px; } .post-details-wrapper .image-box { margin-bottom: 25px; border-radius: 16px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .post-details-wrapper .image-box { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .post-details-wrapper .image-box { border-radius: 10px; } } .post-details-wrapper .image-box img { width: 100%; } .post-details-wrapper .blog-text h3 { margin-bottom: 25px; } .post-details-wrapper .blog-text .tj-blog-list { margin-bottom: 50px; padding: 0; } .post-details-wrapper .blog-text .tj-blog-list li { padding: 0; } @media (max-width: 575px) { .post-details-wrapper .blog-text .tj-blog-list { margin-bottom: 30px; } } .post-details-wrapper .blog-text .blog-video { position: relative; z-index: 1; margin-top: 60px; margin-bottom: 50px; border-radius: 16px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .post-details-wrapper .blog-text .blog-video { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .post-details-wrapper .blog-text .blog-video { border-radius: 10px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .post-details-wrapper .blog-text .blog-video { margin-top: 40px; margin-bottom: 40px; } } .tj-blog-list { padding: 0; list-style: none; columns: 2; } .tj-blog-list li { padding: 0; display: flex; align-items: start; column-gap: 10px; color: var(--tj-color-heading-primary); margin-bottom: 16px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); } .tj-blog-list li:last-child { margin-bottom: 0; } .tj-blog-list li span { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 auto; line-height: 1; font-size: 8px; margin-top: 3px; color: var(--tj-color-common-white); background: var(--tj-color-theme-secondary); border-radius: 50%; } @media (max-width: 575px) { .tj-blog-list { columns: 1; } } .tj-video-btn { display: inline-flex; align-items: center; justify-content: center; width: 90px; height: 90px; line-height: 1; color: var(--tj-color-heading-primary); background: var(--tj-color-common-white); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .tj-video-btn span { font-size: 20px; } .tj-video-btn::before { position: absolute; content: ""; left: 50%; top: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); background-color: rgba(255, 255, 255, 0.2); animation: pulse-2 2s linear infinite; z-index: -1; border-radius: 50%; } .blog-category-two { display: flex; flex-wrap: wrap; align-items: center; border: 1px solid var(--tj-color-border-1); background-color: var(--tj-color-theme-bg1); margin-bottom: 33px; border-radius: 10px; } .blog-category-two .category-item { display: flex; align-items: center; flex-wrap: wrap; border-right: 1px solid var(--tj-color-border-1); padding: 25px 30px; gap: 10px; width: 33.33%; } .blog-category-two .category-item:last-child { border-right: none; } .blog-category-two .category-item .cate-images { width: 52px; height: 52px; } .blog-category-two .category-item .cate-images img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-category-two .category-item .cate-images { width: 45px; height: 45px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog-category-two .category-item .cate-images { width: 35px; height: 35px; } } .blog-category-two .category-item .cate-text .degination { display: block; color: var(--tj-color-text-body); font-size: 14px; line-height: 1; margin-bottom: 6px; } .blog-category-two .category-item .cate-text .title { text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-category-two .category-item .cate-text .title { font-size: 16px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog-category-two .category-item .cate-text .title { font-size: 14px; } } .blog-category-two .category-item .cate-icons { display: inline-flex; align-items: center; justify-content: center; font-size: 24px; width: 52px; height: 52px; line-height: 1; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-secondary); border-radius: 50%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-category-two .category-item .cate-icons { width: 45px; height: 45px; font-size: 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog-category-two .category-item .cate-icons { width: 35px; height: 35px; font-size: 18px; } } .blog-category-two .category-item .text { line-height: 1; text-transform: uppercase; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-category-two .category-item .text { font-size: 16px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog-category-two .category-item .text { font-size: 14px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog-category-two .category-item { padding: 25px 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog-category-two .category-item { padding: 20px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-category-two .category-item { width: 100%; padding: 0; border: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-category-two { padding: 20px; gap: 20px; } } blockquote.wp-block-quote, blockquote { position: relative; padding: 35px 30px; background: var(--tj-color-theme-bg1); background-blend-mode: luminosity; border: 2px solid var(--tj-color-theme-secondary); margin-top: 35px; margin-bottom: 50px; z-index: 2; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { blockquote.wp-block-quote, blockquote { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { blockquote.wp-block-quote, blockquote { border-radius: 10px; } } blockquote.wp-block-quote::before, blockquote::before { content: "\e91f"; font-size: 40px; color: var(--tj-color-theme-secondary); font-family: "ranko-icons"; display: inline-block; margin-bottom: 15px; line-height: 1; } blockquote.wp-block-quote p, blockquote p { color: var(--tj-color-heading-primary); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); font-size: 24px; margin-bottom: 20px !important; letter-spacing: -0.6px; line-height: 1.417; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { blockquote.wp-block-quote p, blockquote p { font-size: 20px; margin-bottom: 15px !important; } } blockquote.wp-block-quote p:last-child, blockquote p:last-child { margin: 0 !important; } blockquote.wp-block-quote p cite, blockquote.wp-block-quote cite, blockquote p cite, blockquote cite { font-size: var(--tj-fs-body); font-family: var(--tj-ff-body); font-weight: normal; color: var(--tj-color-heading-primary); display: block; text-align: end; font-style: normal; line-height: var(--tj-lh-body); letter-spacing: unset; position: relative; z-index: 1; } blockquote.wp-block-quote p cite::before, blockquote.wp-block-quote cite::before, blockquote p cite::before, blockquote cite::before { content: ""; display: inline-block; background: var(--tj-color-common-black); height: 1px; width: 40px; top: -4px; margin-right: 10px; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { blockquote.wp-block-quote, blockquote { padding: 25px 15px; margin-bottom: 40px; } } .tj-post-item blockquote { margin: 0; } .tj-post-item blockquote cite a { text-decoration: none; font-weight: normal; } .tj-tags-post { display: flex; flex-wrap: wrap; row-gap: 20px; column-gap: 30px; align-items: center; justify-content: space-between; border-top: 1px dashed var(--tj-color-border-1); border-bottom: 1px dashed var(--tj-color-border-1); padding: 22px 0; margin-top: 40px; margin-bottom: 30px; } .tj-tags-post .tagcloud { width: calc(100% - 224px); } .tj-tags-post .tagcloud a { background: var(--tj-color-theme-bg1); color: var(--tj-color-theme-secondary); } .tj-tags-post .tagcloud span { color: var(--tj-color-text-body); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-tags-post .tagcloud { width: 100%; } } .tj-tags-post .post-share > ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 10px; } .tj-tags-post .post-share > ul li { font-size: 16px; color: var(--tj-color-text-body); margin-bottom: 0; } .tj-tags-post .post-share > ul li a { display: flex; font-size: 16px; line-height: 1; color: var(--tj-color-common-white); width: 28px; height: 28px; align-items: center; justify-content: center; border-radius: 50%; background: rgba(5, 23, 61, 0.4); transform: translateY(0); } .tj-tags-post .post-share > ul li a i { display: inline-flex; line-height: 1; } .tj-tags-post .post-share > ul li a:hover { background: var(--tj-color-theme-secondary); transform: translateY(-5px); } .tj-tags-post.no_socials { width: 100%; } .tj-post-navigation { background-color: var(--tj-color-theme-bg1); background-blend-mode: luminosity; padding: 20px; display: flex; gap: 25px; align-items: center; justify-content: space-between; margin-bottom: 50px; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tj-post-navigation { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-post-navigation { border-radius: 10px; } } .tj-post-navigation .tj-post-nav a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-transform: capitalize; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-bold); } .tj-post-navigation .tj-post-nav a span { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--tj-color-heading-primary); font-size: 16px; line-height: 1; border-radius: 7px; -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; -ms-transition: all 0.3s ease-in-out 0s; -o-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-post-navigation .tj-post-nav a span i { color: var(--tj-color-common-white); } .tj-post-navigation .tj-post-nav a:hover span { background-color: var(--tj-color-theme-primary); } .tj-post-navigation .tj-post-nav a:hover span i { color: var(--tj-color-common-white); } .tj-post-navigation .tj-post-nav-divider { font-size: 40px; line-height: 1; color: var(--tj-color-common-black); } @media (max-width: 575px) { .tj-post-navigation { padding: 20px; } } .tj-comments-wrap { margin-bottom: 30px; } .tj-comments-wrap .comments-title { margin-bottom: 22px; } @media (max-width: 575px) { .tj-comments-wrap .comments-title { margin-bottom: 15px; } } .tj-latest-comments ul { margin: 0; padding: 0; list-style: none; } .tj-latest-comments ul .tj-comment { margin-bottom: 20px; } .tj-latest-comments ul .tj-comment:last-child { margin-bottom: 0; } .tj-latest-comments ul .tj-comment .comment-content { padding: 30px; border: 1px solid var(--tj-color-border-1); background-color: var(--tj-color-theme-bg1); position: relative; border-radius: 16px; } .tj-latest-comments ul .tj-comment .comment-content .comment-avatar { max-width: 64px; width: 100%; float: left; overflow: hidden; } @media (max-width: 575px) { .tj-latest-comments ul .tj-comment .comment-content .comment-avatar { float: none; margin-bottom: 15px; } } .tj-latest-comments ul .tj-comment .comment-content .comment-avatar img { width: 100%; border-radius: 100%; } .tj-latest-comments ul .tj-comment .comment-content:not(:has(.comment-avatar)) .comments-header { width: 100%; } .tj-latest-comments ul .tj-comment .comment-content .comments-header { margin-top: 10px; width: calc(100% - 80px); margin-inline-start: auto; } @media (max-width: 575px) { .tj-latest-comments ul .tj-comment .comment-content .comments-header { width: 100%; } } .tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title { font-size: 18px; margin-bottom: 6px; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .avatar-name .title a:hover { color: var(--tj-color-theme-primary); } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply { position: absolute; top: 35px; right: 30px; } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply a { font-size: 14px; text-transform: uppercase; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); color: var(--tj-color-theme-secondary); } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text .reply a:hover { color: var(--tj-color-theme-primary); } .tj-latest-comments ul .tj-comment .comment-content .comments-header .comment-text span { font-size: 14px; color: var(--tj-color-common-black-3); font-weight: var(--tj-fw-regular); } @media (max-width: 575px) { .tj-latest-comments ul .tj-comment .comment-content .comment-avatar { margin-inline-end: auto; } } .tj-latest-comments ul .tj-comment .desc { margin-top: 14px; } .tj-latest-comments ul .tj-comment .desc p:last-child { margin-bottom: 0; } .tj-latest-comments ul .tj-comment > .children { padding-left: 75px; } @media (max-width: 575px) { .tj-latest-comments ul .tj-comment > .children { padding-left: 35px; } } .tj-latest-comments ul .tj-comment:last-child .comment-content .comments-header { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .tj-comments-container { margin-top: 50px; } .tj-comments-container .row { --bs-gutter-x: 20px; } .comment-respond .comment-reply-title { text-transform: capitalize; margin-bottom: 18px; } .comment-respond p.logged-in-as { margin-bottom: 18px; } .comment-respond .form-input { margin-bottom: 20px; } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), .comment-respond .form-input textarea, .comment-respond .form-input input[type=email], .comment-respond .form-input input[type=text] { background: transparent; height: 60px; padding: 18px 20px; border: 2px solid var(--tj-color-border-1); width: 100%; border-radius: 10px; } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder, .comment-respond .form-input textarea::placeholder, .comment-respond .form-input input[type=email]::placeholder, .comment-respond .form-input input[type=text]::placeholder { color: var(--tj-color-text-body); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .comment-respond .form-input textarea::-ms-input-placeholder, .comment-respond .form-input input[type=email]::-ms-input-placeholder, .comment-respond .form-input input[type=text]::-ms-input-placeholder { color: var(--tj-color-text-body); } .comment-respond .form-input input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus, .comment-respond .form-input textarea:focus, .comment-respond .form-input input[type=email]:focus, .comment-respond .form-input input[type=text]:focus { border-color: var(--tj-color-theme-secondary); outline: transparent; background-color: var(--tj-color-theme-bg1); } .comment-respond .form-input textarea { min-height: 180px; resize: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .comment-respond .form-input { margin-bottom: 20px; } } .tj-main-sidebar { padding-left: 20px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-main-sidebar { padding-left: 0; } } .tj-sidebar-widget { background-color: var(--tj-color-theme-bg1); background-blend-mode: luminosity; margin-bottom: 30px; padding: 30px; position: relative; border-radius: 16px; } .tj-sidebar-widget:last-child { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .tj-sidebar-widget { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-sidebar-widget { border-radius: 10px; } } .tj-sidebar-widget:last-child { margin-bottom: 0; } .tj-sidebar-widget .widget-title { color: var(--tj-color-heading-primary); text-transform: capitalize; position: relative; margin-bottom: 25px; line-height: 1; z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) { .tj-sidebar-widget { padding: 25px 15px; } } .elementor-widget-wp-widget-tag_cloud h5, .elementor-widget-wp-widget-tj-category-widget h5, .elementor-widget-wp-widget-tj-recent-posts h5, .elementor-widget-wp-widget-search h5 { font-size: var(--tj-fs-h4); text-transform: capitalize; position: relative; margin-bottom: 25px; line-height: 1; z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .elementor-widget-wp-widget-tag_cloud h5, .elementor-widget-wp-widget-tj-category-widget h5, .elementor-widget-wp-widget-tj-recent-posts h5, .elementor-widget-wp-widget-search h5 { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .elementor-widget-wp-widget-tag_cloud h5, .elementor-widget-wp-widget-tj-category-widget h5, .elementor-widget-wp-widget-tj-recent-posts h5, .elementor-widget-wp-widget-search h5 { font-size: 20px; } } .tj-search .search-box form { position: relative; width: 100%; z-index: 1; } .tj-search .search-box form input { font-size: 16px; background: var(--tj-color-common-white); width: 100%; height: 60px; border: 1px solid var(--tj-color-theme-dark); padding: 18px 65px 18px 20px; line-height: 1; border-radius: 10px; } .tj-search .search-box form input::placeholder { color: var(--tj-color-text-body); } .tj-search .search-box form input::-ms-input-placeholder { color: var(--tj-color-text-body); } .tj-search .search-box form :focus { outline: none; box-shadow: 0 0 0; } .tj-search .search-box form button { font-size: 24px; color: var(--tj-color-heading-primary); width: 54px; height: 60px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); border-left: 1px solid var(--tj-color-heading-primary); -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } .tj-search .search-box form button i { display: inline-flex; padding-top: 8px; line-height: 1; } .elementor-widget-wp-widget-tj-recent-posts ul, .tj-recent-posts ul { margin: 0; padding: 0; list-style: none; } .elementor-widget-wp-widget-tj-recent-posts ul li, .tj-recent-posts ul li { display: flex; align-items: center; column-gap: 15px; margin-bottom: 15px; } .elementor-widget-wp-widget-tj-recent-posts ul li:last-child, .tj-recent-posts ul li:last-child { margin-bottom: 0; } .elementor-widget-wp-widget-tj-recent-posts ul li:hover .post-thumb img, .tj-recent-posts ul li:hover .post-thumb img { transform: scale(1.15); } .elementor-widget-wp-widget-tj-recent-posts .post-thumb, .tj-recent-posts .post-thumb { position: relative; max-width: 100px; width: 100%; overflow: hidden; border-radius: 10px; } .elementor-widget-wp-widget-tj-recent-posts .post-thumb a, .tj-recent-posts .post-thumb a { display: inline-block; width: 100%; } .elementor-widget-wp-widget-tj-recent-posts .post-thumb a img, .tj-recent-posts .post-thumb a img { width: 100%; height: 100px; object-fit: cover; transition: 0.6s; } .elementor-widget-wp-widget-tj-recent-posts .post-content .post-title, .tj-recent-posts .post-content .post-title { font-size: 16px; line-height: 1.5; text-transform: capitalize; margin-bottom: 10px; } .elementor-widget-wp-widget-tj-recent-posts .post-content .post-title a:hover, .tj-recent-posts .post-content .post-title a:hover { color: var(--tj-color-theme-primary); } .elementor-widget-wp-widget-tj-recent-posts .post-content .post-meta, .tj-recent-posts .post-content .post-meta { margin-bottom: 0; } .elementor-widget-wp-widget-tj-recent-posts .post-content .post-meta span, .tj-recent-posts .post-content .post-meta span { font-size: 14px; text-transform: uppercase; color: var(--tj-color-text-body); } .elementor-widget-wp-widget-tj-category-widget ul, .tj-widget-categories ul { margin: 0; padding: 0; list-style: none; } .elementor-widget-wp-widget-tj-category-widget ul li, .tj-widget-categories ul li { margin-bottom: 10px; } .elementor-widget-wp-widget-tj-category-widget ul li:last-child, .tj-widget-categories ul li:last-child { margin-bottom: 0; } .elementor-widget-wp-widget-tj-category-widget ul li a, .tj-widget-categories ul li a { display: flex; align-items: center; justify-content: space-between; font-weight: var(--tj-fw-sbold); text-transform: capitalize; color: var(--tj-color-heading-primary); background: var(--tj-color-common-white); padding: 20px 20px 17px 25px; border-radius: 10px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .elementor-widget-wp-widget-tj-category-widget ul li a, .tj-widget-categories ul li a { border-radius: 9px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .elementor-widget-wp-widget-tj-category-widget ul li a, .tj-widget-categories ul li a { border-radius: 8px; } } .elementor-widget-wp-widget-tj-category-widget ul li a span, .tj-widget-categories ul li a span { color: var(--tj-color-heading-primary); } .elementor-widget-wp-widget-tj-category-widget ul li a .icon, .tj-widget-categories ul li a .icon { font-size: 24px; line-height: 1; } .elementor-widget-wp-widget-tj-category-widget ul li a:hover, .elementor-widget-wp-widget-tj-category-widget ul li a.active, .tj-widget-categories ul li a:hover, .tj-widget-categories ul li a.active { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); } .elementor-widget-wp-widget-tj-category-widget ul li a:hover span, .elementor-widget-wp-widget-tj-category-widget ul li a.active span, .tj-widget-categories ul li a:hover span, .tj-widget-categories ul li a.active span { color: var(--tj-color-common-white); } .tj-footer-widget .wp-block-tag-cloud, .tj-sidebar-widget .wp-block-tag-cloud, .wp-block-tag-cloud, .tagcloud { display: flex; align-items: center; flex-wrap: wrap; column-gap: 10px; row-gap: 12px; } .tj-footer-widget .wp-block-tag-cloud a, .tj-sidebar-widget .wp-block-tag-cloud a, .wp-block-tag-cloud a, .tagcloud a { background-color: var(--tj-color-common-white); font-size: 16px !important; text-transform: capitalize; line-height: 1; color: var(--tj-color-heading-primary); font-weight: var(--tj-fw-medium); padding: 5px 10px; display: inline-flex; overflow: hidden; border-radius: 6px; text-decoration: none; } .tj-footer-widget .wp-block-tag-cloud a:hover, .tj-sidebar-widget .wp-block-tag-cloud a:hover, .wp-block-tag-cloud a:hover, .tagcloud a:hover { background-color: var(--tj-color-theme-secondary); color: var(--tj-color-common-white); } .wp-block-tag-cloud a { background: var(--tj-color-theme-bg1); color: var(--tj-color-theme-secondary); } .infos-item { display: flex; column-gap: 8px; padding: 17px 20px; background-color: var(--tj-color-common-white); align-items: center; margin-bottom: 10px; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .infos-item { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .infos-item { border-radius: 10px; } } .infos-item:last-child { margin-bottom: 0; } .infos-item .project-icons { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; font-size: 20px; color: var(--tj-color-common-white); background: var(--tj-color-theme-secondary); border-radius: 50%; position: relative; top: 2px; } .infos-item .project-text span { display: inline-block; font-size: 14px; line-height: 1; color: var(--tj-color-text-body); margin: 0; } .infos-item .project-text .title { line-height: 1.1; margin-bottom: 0; text-transform: capitalize; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .infos-item .project-text .title { font-size: 16px; } } .widget-feature-item { padding: 20px; } .widget-feature-item .feature-box { position: relative; background-size: cover; background-repeat: no-repeat; background-position: bottom right; overflow: hidden; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .widget-feature-item .feature-box { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .widget-feature-item .feature-box { border-radius: 10px; } } .widget-feature-item .feature-box .feature-content { padding: 35px 28px 0; } .widget-feature-item .feature-box .feature-content .title { font-size: 48px; text-transform: capitalize; color: var(--tj-color-common-white); margin-bottom: 30px; line-height: 1.2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .widget-feature-item .feature-box .feature-content .title { font-size: 42px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .widget-feature-item .feature-box .feature-content .title { font-size: 36px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .widget-feature-item .feature-box .feature-content .title { font-size: 40px; } } @media (max-width: 575px) { .widget-feature-item .feature-box .feature-content .title { font-size: 40px; margin-bottom: 20px; } } .widget-feature-item .feature-box .feature-content span { display: block; font-size: 20px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); color: var(--tj-color-common-white); text-transform: uppercase; line-height: 1; margin-bottom: 30px; } @media (max-width: 575px) { .widget-feature-item .feature-box .feature-content span { margin-bottom: 20px; } } .widget-feature-item .feature-box .feature-content .feature-contact { background-color: var(--tj-color-theme-primary); padding: 10px 12px 10px; border-radius: 50px; line-height: 1; margin: 0; } .widget-feature-item .feature-box .feature-content .feature-contact span { color: var(--tj-color-common-white); font-size: 18px; font-weight: var(--tj-fw-regular); margin: 0; text-shadow: 0 30px 0 var(--tj-color-common-white); } .widget-feature-item .feature-box .feature-content .feature-contact i { color: var(--tj-color-common-white); font-size: 20px; text-shadow: 0 30px 0 var(--tj-color-common-white); margin-right: 6px; margin-left: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .widget-feature-item .feature-box .feature-content { padding: 30px 22px 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) { .widget-feature-item .feature-box .feature-content { padding: 30px 18px 0; } } @media (max-width: 575px) { .widget-feature-item .feature-box { max-width: 360px; margin: 0 auto; } } @media (max-width: 400px) { .widget-feature-item .feature-box { max-width: 320px; margin: 0 auto; } } .widget-feature-item .tj-btn { padding: 5px 10px; font-size: 18px; border-radius: 8px; } .widget-feature-item .tj-btn i { font-size: 20px; } .widget-feature-item .tj-btn:hover { border-color: var(--tj-color-common-white); color: var(--tj-color-common-white); } .widget-feature-item .tj-btn:hover i { color: var(--tj-color-common-white); } .widget-feature-item .feature-images { position: relative; left: 0; bottom: 0; width: 100%; height: 400px; z-index: 1; background-size: 164%; background-position: 41% 16%; background-repeat: no-repeat; clip-path: polygon(0 58%, 100% 0%, 100% 100%, 0% 100%); margin-top: -60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .widget-feature-item .feature-images { clip-path: polygon(0 58%, 100% 10%, 100% 100%, 0% 100%); } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .widget-feature-item .feature-images { clip-path: polygon(0 58%, 100% 17%, 100% 100%, 0% 100%); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .widget-feature-item .feature-images { clip-path: polygon(0 50%, 100% 0%, 100% 100%, 0% 100%); } } @media (max-width: 400px) { .widget-feature-item .feature-images { clip-path: polygon(0 60%, 100% 10%, 100% 100%, 0% 100%); } } @media (max-width: 575px) { .widget-feature-item { padding: 20px 15px; } } .details-content-box { display: flex; flex-wrap: wrap; column-gap: 15px; row-gap: 15px; align-items: center; margin-bottom: 50px; } .service-details-item { background-color: var(--tj-color-theme-bg1); background-blend-mode: luminosity; padding: 30px 20px 25px 20px; width: 100%; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service-details-item { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-details-item { border-radius: 10px; } } .service-details-item .number { display: inline-flex; align-items: center; justify-content: center; width: 33px; height: 33px; font-size: 16px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); color: var(--tj-color-common-white); background-color: var(--tj-color-theme-secondary); border-radius: 50%; margin-bottom: 22px; } .service-details-item .title { margin-bottom: 20px; line-height: 1.4; font-size: 20px; } .service-details-item .desc { margin-bottom: 0; } .service-details-item .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .service-details-item { padding: 30px 15px 15px 15px; } } .blog-text .tj-faq { margin-bottom: 40px; padding-top: 10px; } .images-wrap-gallary .image-box { overflow: hidden; } .images-wrap-gallary .image-box:hover img { position: relative; z-index: -1; transform: scale(1.2); } .tj-gallery { position: relative; display: block; overflow: hidden; border-radius: 16px; } .tj-gallery::before { content: "\e922"; font-family: "ranko-icons" !important; color: var(--tj-color-common-white); font-size: 30px; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; visibility: hidden; transition: all 0.3s; } .tj-gallery:hover::before { opacity: 1; visibility: visible; } /* !END: Blog Details CSS */ /**---------------------------------------- START: Error CSS ----------------------------------------*/ .error { padding: 206px 0 120px; position: relative; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .error { padding: 186px 0 100px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .error { padding: 142px 0 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .error { padding: 122px 0 60px; } } .error__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .error__subtitle { margin-bottom: 18px; } .error__img { margin-bottom: 35px; } @media (max-width: 575px) { .error__img { max-width: 280px; } } .error .section-heading__title { font-size: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .error .section-heading__title { font-size: 65px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .error .section-heading__title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .error .section-heading__title { font-size: 56px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .error .section-heading__title { font-size: 50px; } } @media (max-width: 575px) { .error .section-heading__title { font-size: 40px; } } .error .section-heading__desc { max-width: 600px; margin-bottom: 30px; } /* START: H4 Header CSS */ .header--4 .header__wrapper { justify-content: space-between; } .header--4 .header__wrapper > div:last-child { margin-left: 0; } .header--4 .header__logo { width: 133px; } .header--4.header .header__right .tj-btn { padding: 14px 30px; border-radius: 58px; } .header--4.header .header__right .tj-btn::after { border-radius: 58px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--4.header .header__right .tj-btn { padding: 11px 25px; } } .header--4.header .header__mobile-toggler { border-radius: 100%; } .header--4.header--absolute { border-radius: 0; background-color: transparent; box-shadow: none; margin-top: 25px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .header--4.header--absolute { margin-top: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header--4.header--absolute { margin-top: 5px; } } @media (max-width: 575px) { .header--4.header--absolute { margin-top: 0; } } .header--4.header--absolute .mainmenu { box-shadow: var(--tj-shadow-theme-primary); background-color: var(--tj-color-common-white); padding-left: 15px; padding-right: 15px; border-radius: 58px; } .header--4.header--absolute .mainmenu ul > li > a { padding: 10px 20px; } .header--4.header--absolute .mainmenu ul > li .sub-menu { border-radius: 12px; margin-top: 10px; z-index: 0; } .header--4.header--absolute .mainmenu ul > li .sub-menu::after { content: ""; position: absolute; left: 0; top: -11px; width: 100%; height: 100%; z-index: -1; } .header--4.header--absolute .header__mobile-toggler { border: 0; background-color: var(--tj-color-common-white); } .header--4.header--absolute .mainmenu ul { gap: 0; } .header--4.header-duplicate { top: -300px; left: 30px; right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--4.header-duplicate { left: 15px; right: 15px; max-width: calc(100% - 30px); margin: 0; } } .header--4.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; } .header--4.header-duplicate .header__wrapper { padding-left: 20px; padding-right: 20px; } @media (max-width: 575px) { .header--4.header-duplicate .header__wrapper { padding-left: 15px; padding-right: 15px; } } /* END: H4 Header CSS */ /* START: H4 footer CSS */ .footer-4-subscribe { max-width: 332px; width: 100%; } .footer-4-subscribe .subscribe-form { position: relative; } .footer-4-subscribe input[type=email] { height: 55px; padding: 11px 60px 11px 25px; border: 0; width: 100%; outline: 0; border-radius: 8px; border: 1px solid var(--tj-color-border-1); background-color: var(--tj-color-theme-bg1); } .footer-4-subscribe input[type=email]:focus { border-color: var(--tj-color-theme-primary); } .footer-4-subscribe input[type=checkbox] { position: relative; margin-inline-end: 8px; width: 18px; height: 18px; border: 1px solid var(--tj-color-border-1); border-radius: 3px; appearance: none; cursor: pointer; } .footer-4-subscribe input[type=checkbox]::before { content: "\e900"; font-size: 10px; line-height: 1; font-family: "ranko-icons" !important; color: var(--tj-color-common-white); position: absolute; width: 100%; text-align: center; line-height: 16px; transform: scale(0.5); opacity: 0; transition: all 0.3s ease-in-out; } .footer-4-subscribe input[type=checkbox]:checked { background-color: var(--tj-color-theme-dark); border-color: var(--tj-color-theme-dark); } .footer-4-subscribe input[type=checkbox]:checked::before { transform: scale(1); opacity: 1; } .footer-4-subscribe button { position: absolute; width: 51px; height: 55px; inset-inline-end: 0; top: 0; display: flex; align-items: center; justify-content: center; font-size: 23px; line-height: 1; outline: 0; color: var(--tj-color-theme-primary); } .footer-4-subscribe button i { line-height: 1; display: inline-flex; transition: all 0.3s linear; } .footer-4-subscribe button:hover i, .footer-4-subscribe button:focus i { animation: shake 0.6s ease-in-out; } .footer-4-subscribe button::before { content: ""; position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); height: 24px; border-inline-start: 1px solid var(--tj-color-border-1); } .footer-4-subscribe label { color: var(--tj-color-theme-dark); margin-top: 16px; display: inline-flex; align-items: center; } .footer-4-subscribe label a { color: var(--tj-color-theme-dark); margin-inline-start: 4px; } .footer-4-subscribe label a:hover { color: var(--tj-color-theme-primary); } /* END: H4 footer CSS */ /**---------------------------------------- START: H4 Hero CSS ----------------------------------------*/ .hero--5 .hero__inner { min-height: 840px; padding-top: 50px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__inner { min-height: 817px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--5 .hero__inner { padding-top: 150px; padding-bottom: 90px; } } @media (max-width: 575px) { .hero--5 .hero__inner { padding-top: 120px; padding-bottom: 90px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__left { padding-top: 100px; } } .hero--5 .hero__title { font-size: 82px; line-height: 1.09756; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__title { font-size: 65px; max-width: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__title { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__title { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--5 .hero__title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--5 .hero__title { font-size: 56px; } } @media (max-width: 575px) { .hero--5 .hero__title { font-size: 40px; } } .hero--5 .hero__title span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6px; } .hero--5 .hero__title span img { margin: 0; width: 67px; height: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--5 .hero__title span img { width: 55px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--5 .hero__title span img { width: 50px; } } @media (max-width: 575px) { .hero--5 .hero__title span img { width: 40px; } } .hero--5 .hero__desc { font-size: 20px; max-width: 472px; line-height: 1.5; letter-spacing: 0; margin-bottom: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--5 .hero__desc { font-size: 18px; margin-bottom: 24px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__desc { max-width: 100%; } } @media (max-width: 575px) { .hero--5 .hero__desc { margin-bottom: 20px; } } .hero--5 .hero__right { min-height: inherit; z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__right { margin-top: 10px; } } .hero--5 .hero__google__ads__rating { padding: 12px 15px 13px 12px; border-radius: 8px; box-shadow: 0px 11.54px 30.78px -1.92px rgba(57, 25, 82, 0.1019607843); background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); display: flex; gap: 6px; align-items: center; } .hero--5 .hero__google__ads__rating__wrapper { position: absolute; left: 0; top: 35%; transform: translate(-40%, -50%); } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--5 .hero__google__ads__rating__wrapper { transform: translate(0, -50%); } } @media (max-width: 575px) { .hero--5 .hero__google__ads__rating__wrapper { left: auto; right: 15px; transform: translate(0, 74%); } } .hero--5 .hero__google__ads__rating__img { border: 1px solid var(--tj-color-border-1); border-radius: 50%; max-width: 45px; } .hero--5 .hero__google__ads__rating .testimonials__rating { margin-bottom: 0; } .hero--5 .hero__google__ads__rating .testimonials__rating .star-ratings { font-size: 17px; letter-spacing: -1px; } .hero--5 .hero__ratings__title { font-size: 16px; margin-bottom: 0; font-weight: var(--tj-fw-sbold); margin-bottom: 5px; line-height: 1; } .hero--5 .hero__client__thumbs { position: absolute; display: inline-block; left: 0; bottom: 0; transform: translate(-60%, 30px); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__client__thumbs { transform: translate(0, 30px); left: 15px; } } .hero--5 .hero__banner-img { position: relative; bottom: auto; right: auto; margin-left: auto; max-width: 496px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__banner-img img { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__banner-img { margin-right: auto; } } .hero--5 .hero__dartboard { position: absolute; right: 0; top: 50%; transform: translate(60%, -40%); } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__dartboard { transform: translate(10%, -36%); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--5 .hero__dartboard { transform: translate(45%, -40%); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__dartboard { transform: translate(9%, -40%); } } @media (max-width: 575px) { .hero--5 .hero__dartboard { display: none; } } .hero--5 .hero__shape__img__wrapper { position: absolute; z-index: -1; } .hero--5 .hero__shape__img__wrapper:first-child { left: -73px; top: 40%; } .hero--5 .hero__shape__img__wrapper:nth-child(2) { left: 40%; bottom: 15%; transform-origin: left; } .hero--5 .hero__shape__img__wrapper:last-child { right: -30px; bottom: 20%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--5 .hero__scroll { left: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--5 .hero__scroll { display: none; } } /**---------------------------------------- START: About CSS ----------------------------------------*/ .about--5 .section-heading__title .text-indent { content: ""; padding-left: 114px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .about--5 .section-heading__title .text-indent { padding-left: 80px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--5 .section-heading__title .text-indent { padding-left: 0; } } /**---------------------------------------- START: Process CSS ----------------------------------------*/ .process-mockup { position: relative; z-index: 0; max-width: 263px; margin: 0 auto; } .process-mockup-wrapper { max-width: 533px; margin-inline-start: auto; background-position: center; background-repeat: no-repeat; background-size: cover; padding-top: 77px; height: 100%; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process-mockup-wrapper { margin-left: auto; margin-right: auto; margin-top: 40px; height: auto; padding-top: 50px; padding-bottom: 50px; } } .process-mockup-wrapper img { transition: none; } .process-mockup-items { position: absolute; top: 11px; right: 10.5px; bottom: 9.97px; left: 10px; border-radius: 34px; overflow: hidden; } .process-mockup-item { width: 100%; position: relative; z-index: 1; } .process__inner--2 { display: flex; flex-direction: column; max-width: 548px; gap: 30px; position: relative; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__inner--2 { gap: 120px; max-width: 533px; margin-left: auto; margin-right: auto; padding-top: 90px; } } .process__inner--2 .process-line { position: absolute; right: -127px; top: 0; transform: translateX(100%); width: 1px; height: 100%; background-color: var(--tj-color-border-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process__inner--2 .process-line { right: -115px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__inner--2 .process-line { right: -90px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__inner--2 .process-line { transform: translateX(50%); top: 10px; right: 50%; height: calc(100% - 10px); } } .process__inner--2 .process__index { width: 60px; height: 60px; background: var(--tj-color-theme-primary); color: var(--tj-color-common-white); border-radius: 50%; text-align: center; font-family: var(--tj-ff-heading); font-size: 24px; letter-spacing: -0.02em; font-weight: var(--tj-fw-bold); display: flex; justify-content: center; align-items: center; outline: 10px solid var(--tj-color-theme-bg3); transition: all 0.3s linear; position: absolute; right: -97px; top: 50%; transform: translate(100%, -50%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process__inner--2 .process__index { right: -85px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__inner--2 .process__index { right: -60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__inner--2 .process__index { top: -90px; right: 50%; transform: translateX(50%); } } .process__inner--2 .process__title { margin-bottom: 16px; color: var(--tj-color-heading-primary); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__inner--2 .process__title { font-size: 24px; margin-bottom: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__inner--2 .process__title { font-size: 22px; margin-bottom: 10px; } } .process__inner--2 .process__desc { margin-bottom: 0px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__inner--2 .process__desc { font-size: 16px; margin-bottom: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__inner--2 .process__desc { font-size: 16px; margin-bottom: 0px; } } .process__inner--2 .process__single { display: block; background: var(--tj-color-theme-bg1); border-radius: 12px; padding: 43px 45px; margin-bottom: 0; position: relative; overflow: visible; z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__inner--2 .process__single { padding: 30px 35px 33px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__inner--2 .process__single { padding: 35px 25px; } } .process__inner--2 .process__single.active .process__index { background-color: var(--tj-color-theme-secondary); outline-color: var(--tj-color-theme-bg10); } .process__inner--2 .process__single:hover .process__index { animation: none; } /**---------------------------------------- START: H4 Blog CSS ----------------------------------------*/ .blog__single--2 { border-radius: 0; overflow: visible; } .blog__single--2 .blog__single__banner { width: 100%; height: 506px; border-radius: 16px; position: relative; z-index: 0; overflow: hidden; z-index: 0; } @media (max-width: 575px) { .blog__single--2 .blog__single__banner { height: 400px; } } .blog__single--2 .blog__single__banner:after { content: ""; height: 100%; width: 100%; background: linear-gradient(180deg, rgba(5, 23, 61, 0) 36.56%, var(--tj-color-theme-dark) 100%); pointer-events: none; position: absolute; left: 0; top: 0; z-index: 1; } .blog__single--2 .blog__single__banner a { height: 100%; width: 100%; } .blog__single--2 .blog__single__banner a img { height: 100%; width: 100%; object-fit: cover; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single--2 .blog__single__banner { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single--2 .blog__single__banner { border-radius: 10px; } } .blog__single--2 .blog__single__content { position: absolute; left: 0; bottom: -40px; background-color: transparent; padding: 0 24px 24px 30px; width: 100%; z-index: 1; transition: all var(--tj-td-standard) ease-in-out 0s; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single--2 .blog__single__content { padding: 0 20px 24px 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single--2 .blog__single__content { padding: 0 16px 20px 20px; } } .blog__single--2 .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single--2 .blog__single__content__list { margin-bottom: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single--2 .blog__single__content__list { margin-bottom: 12px; } } .blog__single--2 .blog__single__content__list li { position: relative; } .blog__single--2 .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-common-white); border-radius: 100%; transform: translate(10px, -50%); } .blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag) { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); font-size: 14px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag) { font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag) { font-size: 12px; } } .blog__single--2 .blog__single__content__list li a:not(.blog__single__content__tag):hover { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .blog__single--2 .blog__single__content__list li:last-child::after { display: none; } .blog__single--2 .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 4px 6px 2px; background-color: transparent; border: 1px solid var(--tj-color-theme-primary); color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); font-size: 14px; line-height: 1; letter-spacing: 2%; border-radius: 3px; font-weight: var(--tj-fw-medium); } .blog__single--2 .blog__single__content__tag:hover { color: var(--tj-color-theme-dark) !important; background-color: var(--tj-color-common-white); border-color: var(--tj-color-common-white); } .blog__single--2 .blog__single__content__date { color: var(--tj-color-common-white); font-size: 14px; } .blog__single--2 .blog__single__title { font-size: 24px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single--2 .blog__single__title { font-size: 20px; } } .blog__single--2 .blog__single__title a { color: var(--tj-color-common-white); } .blog__single--2 .blog__single__title:hover { animation: texthover 0.3s linear; } .blog__single--2 .tj-btn-2 { color: var(--tj-color-common-white); font-size: 16px; opacity: 0; } .blog__single--2 .tj-btn-2 i { font-size: 16px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single--2 .tj-btn-2 { font-size: 14px; } .blog__single--2 .tj-btn-2 i { font-size: 14px; } } .blog__single--2 .tj-btn-2 i { color: var(--tj-color-common-white); } .blog__single--2:hover .blog__single__content { bottom: 0; } .blog__single--2:hover .tj-btn-2 { opacity: 1; } /* START: H5 Header CSS */ .header--5 { border-radius: 12px; } .header--5.header-duplicate { top: -300px; left: 30px; right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--5.header-duplicate { left: 15px; right: 15px; } } .header--5.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; } .header--5 .header__wrapper { padding-left: 20px; padding-right: 20px; justify-content: space-between; } .header--5 .header__wrapper > div:last-child { margin-left: 0; } @media (max-width: 575px) { .header--5 .header__wrapper { padding-left: 15px; padding-right: 15px; } } .header--5.header--absolute { margin-top: 30px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); } @media (max-width: 575px) { .header--5.header--absolute { margin-top: 15px; } } .header--5.header--absolute .mainmenu nav > ul > li > a { color: var(--tj-color-common-white); } .header--5.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after { color: var(--tj-color-common-white); } .header--5.header--absolute .header__mobile-toggler { border-color: var(--tj-color-border-4); } .header--5.header--absolute .header__mobile-toggler span { background-color: var(--tj-color-common-white); } .header--5.header--absolute .tj-btn:hover { border-color: var(--tj-color-common-white); color: var(--tj-color-common-white); } .header--5.header .header__right { gap: 14px; } @media (max-width: 575px) { .header--5.header .header__right { gap: 10px; } } .header--5.header .header__right .header__mobile-toggler { border-radius: 100%; } .header--5.header .header__right .tj-btn { padding: 14px 30px; border-radius: 58px; } .header--5.header .header__right .tj-btn::after { border-radius: 58px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--5.header .header__right .tj-btn { padding: 11px 25px; } } /* !END: Header CSS */ /* START: H5 Footer CSS */ .footer__widget.style-2.widget_nav_menu ul li { margin-bottom: 10px; } .footer__widget.style-2.widget_nav_menu ul li a { color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); font-size: var(--tj-fs-h5); line-height: var(--tj-lh-h5); font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; display: flex; align-items: center; gap: 8px; transform: translateX(0); } .footer__widget.style-2.widget_nav_menu ul li a i { font-size: 16px; transition: all var(--tj-td-standard) ease-in-out 0s; transform: rotate(-45deg) translateX(-10px); margin-left: -4px; opacity: 0; } .footer__widget.style-2.widget_nav_menu ul li a:hover { padding-left: 0; } .footer__widget.style-2.widget_nav_menu ul li a:hover i { transform: rotate(-45deg) translateX(0); opacity: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__widget.style-2.widget_nav_menu ul li a { font-size: 18px; } } .footer__widget.style-3.copyright ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; } .footer__widget.style-3.copyright ul li { position: relative; line-height: 1; z-index: 1; } .footer__widget.style-3.copyright ul li > a { position: relative; display: inline; color: var(--tj-color-common-white); } .footer__widget.style-3.copyright ul li > a:hover { color: var(--tj-color-theme-primary); } .footer__widget.style-3.copyright ul li > a::before { content: ""; width: 4px; height: 4px; background-color: var(--tj-color-common-white); border-radius: 100%; position: absolute; top: 50%; left: -14px; transform: translateY(-50%); } .footer__widget.style-3.copyright ul li > a:has(i):before { display: none; } .footer__widget.style-3.copyright ul li:first-child a::before { display: none; } .footer__top.style-5 .tj-input__wrapper .tj-input { padding: 20px 18px; padding-inline-end: 210px; color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(22px); border-color: var(--tj-color-border-5); } .footer__top.style-5 .tj-input__wrapper .tj-input:focus { border-color: var(--tj-color-theme-primary); } @media (max-width: 575px) { .footer__top.style-5 .tj-input__wrapper .tj-input { padding-inline-end: 70px; } } .footer__top.style-5 .tj-input__wrapper .tj-btn { padding: 19px 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .footer__top.style-5 .tj-input__wrapper .tj-btn { padding: 16px 24px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__top.style-5 .tj-input__wrapper .tj-btn { top: 8px; right: 8px; } } @media (max-width: 575px) { .footer__top.style-5 .tj-input__wrapper .tj-btn { padding: 16px 18px; } } .footer__top.style-5 .tj-input__wrapper .tj-btn i { font-size: 16px; } .footer__top.style-5 .tj-input__wrapper .tj-btn:hover { border-color: var(--tj-color-common-white); color: var(--tj-color-common-white); } .footer__top.style-5 .tj-input__wrapper .tj-btn:hover i { color: var(--tj-color-common-white); } .footer-5-bottom { margin: 0 -1.5% 0 -3%; } .tj-socials.style-2 ul li a i { color: var(--tj-color-common-white); position: relative; z-index: 0; } .tj-socials.style-2 ul li a i::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; background-color: transparent; border-radius: 100%; z-index: -1; } .tj-socials.style-2 ul li a:hover i { color: var(--tj-color-theme-secondary); } .tj-socials.style-2 ul li a:hover i::after { background-color: var(--tj-color-common-white); } .footer-contact-info.style-2 .contact-item { margin-bottom: 18px; } .footer-contact-info.style-2 .contact-item:last-child { margin-bottom: 0; } .footer-contact-info.style-2 .contact-item p { font-family: var(--tj-ff-heading); font-size: 18px; font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; line-height: 1.44; color: var(--tj-color-common-white); margin-bottom: 0; } .footer-contact-info.style-2 .contact-item span { font-family: var(--tj-ff-heading); font-size: 18px; font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; line-height: 1.44; color: var(--tj-color-common-white); } .footer-contact-info.style-2 .contact-item span i { color: var(--tj-color-common-white); } .footer-contact-info.style-2 .contact-item a { display: inline; letter-spacing: -0.02em; line-height: 1.44; color: var(--tj-color-common-white); background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; } .footer-contact-info.style-2 .contact-item a:hover { color: currentColor; background-size: 100% 1px; } /* !END: H5 Footer CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .hero--6 { position: relative; overflow: hidden; z-index: 0; background-position: center; background-repeat: no-repeat; background-size: cover; } .hero--6 .hero__inner { min-height: 911px; padding-top: 236px; overflow: visible; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--6 .hero__inner { min-height: 710px; padding-top: 176px; padding-bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--6 .hero__inner { min-height: 680px; padding-top: 176px; padding-bottom: 60px; } } @media (max-width: 575px) { .hero--6 .hero__inner { min-height: 670px; padding-top: 156px; padding-bottom: 40px; } } .hero--6 .hero__left { max-width: 877px; text-align: end; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--6 .hero__left { max-width: 706px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--6 .hero__left { max-width: 588px; margin-inline-start: auto; } } .hero--6 .hero__title { font-size: 110px; line-height: 1.05; letter-spacing: -0.025em; color: var(--tj-color-common-white); margin-top: -20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--6 .hero__title { font-size: 90px; max-width: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--6 .hero__title { font-size: 70px; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--6 .hero__title { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--6 .hero__title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--6 .hero__title { font-size: 66px; } } @media (max-width: 575px) { .hero--6 .hero__title { font-size: 44px; } } .hero--6 .hero__title span { color: var(--tj-color-common-white); } .hero--6 .hero__title .tj-image-slider { width: 200px; height: 92px; border-radius: 66px; position: relative; overflow: hidden; display: inline-block; margin-bottom: -4px; margin-inline-end: 5px; } .hero--6 .hero__title .tj-image-slider img { position: absolute; top: 0; inset-inline-start: 0; margin: 0; width: 100%; height: 100%; object-fit: cover; display: none; } .hero--6 .hero__title .tj-image-slider img.active { display: block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--6 .hero__title .tj-image-slider { width: 180px; height: 74px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--6 .hero__title .tj-image-slider { width: 130px; height: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--6 .hero__title .tj-image-slider { width: 120px; height: 55px; } } @media (max-width: 575px) { .hero--6 .hero__title .tj-image-slider { width: 80px; height: 35px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--6 .hero__client__thumbs { flex-shrink: 0; } } .hero--6 .hero__right { min-height: 580px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; z-index: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--6 .hero__right { margin-top: 40px; max-width: 100%; min-height: auto; flex-direction: row-reverse; justify-content: space-between; gap: 15px; } } @media (max-width: 575px) { .hero--6 .hero__right { flex-direction: column-reverse; align-items: flex-start; margin-top: 30px; gap: 30px; } } .hero--6 .hero__right .client__thumbs { border: 0; background-color: transparent; padding: 0; margin-right: 40px; box-shadow: none; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--6 .hero__right .client__thumbs { animation: none; margin-right: 0; } } .hero--6 .hero__right .client__thumbs .client__thumbs__title { color: var(--tj-color-common-white); } .hero--6 .hero__desc { max-width: 343px; font-size: 20px; letter-spacing: var(-0.02em); font-weight: var(--tj-fw-medium); margin-bottom: 0; color: var(--tj-color-common-white); } .hero--6 .hero__desc__start { font-size: 49px; line-height: 1; font-weight: 600; display: block; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--6 .hero__desc { max-width: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--6 .hero__desc { max-width: 380px; } } @media (max-width: 575px) { .hero--6 .hero__desc { max-width: 100%; font-size: 18px; } } .hero--6 .hero__shape { position: absolute; width: 616px; height: 616px; background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%); filter: blur(120px); border-radius: 50%; z-index: -1; } .hero--6 .hero__shape--1 { top: -8%; left: -27%; } .hero--6 .hero__shape--2 { width: 766px; height: 766px; bottom: -22%; right: 10%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--6 .hero__scroll { left: 10px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--6 .hero__scroll { display: none; } } /* !END: Hero CSS */ /**---------------------------------------- START: Client CSS ----------------------------------------*/ .tj-client-section .swiper { padding-bottom: 0; } .client-content { display: flex; align-items: center; justify-content: center; text-align: center; margin-bottom: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .client-content { margin-bottom: 40px; } } @media (max-width: 575px) { .client-content { margin-bottom: 30px; } } .client-content .sec-title { line-height: 1; margin-bottom: 0; font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; } @media (max-width: 575px) { .client-content .sec-title { font-size: 15px; } } .client-content .sec-title span { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); position: relative; line-height: 1; border-radius: 50px; padding: 3px 6px 4px 8px; display: inline-block; } .client-content .sec-title span img { position: absolute; right: 100%; bottom: 100%; transform: translate(5px, 5px); } .client-content span { display: inline-flex; } .client-content .client-text { color: var(--tj-color-text-body-3); position: relative; } .client-slider .swiper-wrapper { transition-timing-function: linear; } .client-item { width: auto; display: flex; flex-wrap: wrap; align-items: center; padding-inline-end: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .client-item { padding-inline-end: 20px; } } .client-item.swiper-slide { width: auto; } .client-logo { width: 284px; height: 120px; background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; z-index: 0; border-radius: 8px; } .client-logo > img:not(:first-child) { opacity: 0; visibility: hidden; width: 0; } .client-logo-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: all var(--tj-td-standard) ease-in-out 0s; z-index: -1; } .client-logo-bg img { width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .client-logo { width: 220px; height: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .client-logo { width: 190px; height: 70px; padding: 20px; } } .client-logo:hover > img:not(:first-child) { opacity: 1; visibility: visible; width: auto; } .client-logo:hover > img:first-child { opacity: 0; visibility: hidden; width: 0; } .client-logo:hover .client-logo-bg { opacity: 1; } /* !END: Client CSS */ /**---------------------------------------- START: Feature CSS ----------------------------------------*/ .service__card--2 { background: var(--tj-color-common-white); padding: 35px 30px; border: 0; } .service__card--2::after { display: none; } .service__card--2 .service__icon { background-color: var(--tj-color-theme-secondary); border: 0; margin-bottom: 24px; } .service__card--2 .service__icon i { color: var(--tj-color-common-white); font-size: 52px; } .service__card--2 .service__title { margin-bottom: 16px; color: var(--tj-color-heading-primary); } .service__card--2 .service__desc { margin-bottom: 0; } .service__card--2:hover { background: var(--tj-color-common-white); } .service__card--2:hover .service__icon { background-color: var(--tj-color-theme-primary); } .service__card--2:hover .service__title { color: var(--tj-color-heading-primary); } .service__card--2:hover .service__desc { color: var(--tj-color-text-body); } .service__card--3 { background: var(--tj-color-theme-bg1); padding: 35px 30px; border: 0; } .service__card--3::after { display: none; } .service__card--3 .service__icon { background-color: var(--tj-color-theme-secondary); border: 0; } .service__card--3 .service__icon i { color: var(--tj-color-common-white); } .service__card--3 .service__title { margin-bottom: 16px; color: var(--tj-color-heading-primary); } .service__card--3 .service__desc { margin-bottom: 0; } .service__card--3:hover { background: var(--tj-color-theme-bg2); } .service__card--3:hover .service__icon { background-color: var(--tj-color-theme-primary); } .service__card--3:hover .service__title { color: var(--tj-color-heading-primary); } .service__card--3:hover .service__desc { color: var(--tj-color-text-body); } /* !END: Feature CSS */ /**---------------------------------------- START: H5 Funfact CSS ----------------------------------------*/ .funfact-area.style-3 .funfact-item { padding: 0; text-align: left; display: flex; flex-direction: column; justify-content: flex-start; background: transparent; border-radius: 0; border: 0; } .funfact-area.style-3 .funfact-item::after { display: none; } .funfact-area.style-3 .funfact-item .number { font-size: 100px; color: var(--tj-color-heading-primary); text-align: start; justify-content: flex-start; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-3 .funfact-item .number { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-3 .funfact-item .number { font-size: 60px; } } .funfact-area.style-3 .funfact-item .text { line-height: 1.625; margin-top: 8px; color: var(--tj-color-text-body); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-3 .funfact-item .text { font-size: 16px; } } /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .testimonials__wrapper .testimonials__slider__2 { overflow: visible; } .testimonials__wrapper .testimonials__slider__item { background-color: var(--tj-color-theme-bg1); border: 1px solid var(--tj-color-border-1); padding: 40px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper .testimonials__slider__item { padding: 30px; } } @media (max-width: 575px) { .testimonials__wrapper .testimonials__slider__item { padding: 20px; } } .testimonials__wrapper .testimonials__author { margin-bottom: 24px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper .testimonials__author { margin-bottom: 24px; } } .testimonials__wrapper .testimonials__desc { font-size: 20px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .testimonials__wrapper .testimonials__desc { font-size: 18px; } } @media (max-width: 575px) { .testimonials__wrapper .testimonials__desc { font-size: 16px; } } .testimonials__wrapper .testimonials__rating { margin-bottom: 0; } .testimonials__wrapper--2 .swiper { padding-bottom: 0; } .testimonials__wrapper--2 .swiper .swiper-horizontal > .swiper-pagination-bullets, .testimonials__wrapper--2 .swiper .swiper-pagination-bullets.swiper-pagination-horizontal, .testimonials__wrapper--2 .swiper .swiper-pagination-custom, .testimonials__wrapper--2 .swiper .swiper-pagination-fraction { left: auto; right: 30px; bottom: 30px; width: auto; } .testimonials__wrapper--2 .swiper .swiper-pagination-bullet-active, .testimonials__wrapper--2 .swiper .swiper-pagination-bullet:hover { width: 10px; height: 10px; } .testimonials__wrapper--2 .testimonials__slider__2 { overflow: visible; } .testimonials__wrapper--2 .testimonials__slider__item { background-color: var(--tj-color-common-white); border: 0; padding: 35px 30px 30px; border-radius: 12px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper--2 .testimonials__slider__item { padding: 30px; } } @media (max-width: 575px) { .testimonials__wrapper--2 .testimonials__slider__item { padding: 20px; } } .testimonials__wrapper--2 .testimonials__footer__logo { margin-bottom: 30px; width: 115px; } .testimonials__wrapper--2 .testimonials__footer__logo img { mix-blend-mode: Difference; } .testimonials__wrapper--2 .testimonials__desc { padding-bottom: 0; margin-bottom: 30px; font-size: 20px; font-weight: var(--tj-fw-medium); font-family: var(--tj-ff-heading); line-height: 1.4; letter-spacing: -0.02em; border: 0; } .testimonials__wrapper--2 .testimonials__author { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper--2 .testimonials__author { margin-bottom: 0; } } .testimonials__wrapper--3 { position: relative; z-index: 0; } .testimonials__wrapper--3 .testimonials__slider__item { padding: 40px 30px; border: 0; border-radius: 12px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper--3 .testimonials__slider__item { padding: 30px 20; } } @media (max-width: 575px) { .testimonials__wrapper--3 .testimonials__slider__item { padding: 25px 20px; } } .testimonials__wrapper--3 .testimonials__desc { font-size: 18px; line-height: 1.55556; } .testimonials__wrapper--3:has(.swiper-pagination-bullet) .swiper-button-prev, .testimonials__wrapper--3:has(.swiper-pagination-bullet) .swiper-button-next { top: calc(50% - 35px); } .testimonials__wrapper--3:hover .swiper-button-prev, .testimonials__wrapper--3:hover .swiper-button-next { opacity: 1; visibility: visible; } .testimonials__wrapper--3:hover .swiper-button-prev { left: 0; } .testimonials__wrapper--3:hover .swiper-button-next { right: 0; } /* !END: Testimonials CSS */ /**---------------------------------------- START: H5 Service CSS ----------------------------------------*/ .service__wrapper { display: flex; gap: 30px; align-items: center; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .service__wrapper { gap: 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper { flex-wrap: wrap; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper { gap: 15px; } } .service__wrapper .service__card { display: flex; padding: 15px; background: var(--tj-color-common-white); width: 250px; height: 369px; align-items: center; position: relative; border: 0; overflow: hidden; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .service__wrapper .service__card { height: 400px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service__wrapper .service__card { flex-wrap: wrap; width: calc(50% - 10px); height: auto; flex-direction: column-reverse; gap: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card { width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper .service__card { align-items: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card { flex-wrap: wrap; height: auto; flex-direction: column-reverse; gap: 14px; } } .service__wrapper .service__card::after { display: none; } .service__wrapper .service__card .service__banner { width: 0; transition: all var(--tj-td-standard) ease-in-out 0s; height: 100%; flex-shrink: 0; position: relative; z-index: 1; border-radius: 10px; overflow: hidden; } .service__wrapper .service__card .service__banner a { height: 100%; display: inline-block; } .service__wrapper .service__card .service__banner img { height: 100%; width: 100%; object-fit: cover; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__banner { width: 100%; height: auto; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .service__wrapper .service__card .service__banner { width: 51.4%; flex-shrink: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__banner { width: 100%; height: auto; } } .service__wrapper .service__card .service__content { width: 100%; transition: all var(--tj-td-standard) ease-in-out 0s; padding-left: 10px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; flex-shrink: 0; overflow: hidden; } .service__wrapper .service__card .service__content--main { display: block; visibility: hidden; transform: translateX(110%); transition-delay: 0.05s; position: relative; z-index: 0; } .service__wrapper .service__card .service__content--main .service__index { display: none; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__content--main .service__index { display: block; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .service__wrapper .service__card .service__content { padding-left: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__content { height: auto; width: 100%; display: none; } .service__wrapper .service__card .service__content--main { display: block; visibility: visible; transform: translateX(0); transition-delay: 0; padding: 20px 10px 10px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper .service__card .service__content { display: none; flex-shrink: 1; padding-left: 15px; justify-content: center; } .service__wrapper .service__card .service__content--main { display: flex; visibility: visible; transform: translateX(0); transition-delay: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .service__wrapper .service__card .service__content:not(.service__wrapper .service__card .service__content--main) .service__icon { width: 60px; height: 60px; font-size: 36px; } .service__wrapper .service__card .service__content:not(.service__wrapper .service__card .service__content--main) .service__title { font-size: 20px; } } .service__wrapper .service__card .service__index { position: absolute; right: 20px; top: 20px; font-weight: var(--tj-fw-bold); font-style: Bold; font-size: 14px; letter-spacing: -0.02em; margin: 0; color: var(--tj-color-common-white2); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__index { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__index { right: 15px; top: 15px; } } .service__wrapper .service__card .service__icon { width: 72px; height: 72px; border: 0; background-color: var(--tj-color-theme-secondary); margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__icon { margin-bottom: 14px; } } .service__wrapper .service__card .service__icon i { font-size: 47px; color: var(--tj-color-common-white); } .service__wrapper .service__card .service__title { margin-bottom: 16px; max-width: 169px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__title { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__title { margin-bottom: 12px; } } .service__wrapper .service__card .service__desc { margin-bottom: 16px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card .service__desc { margin-bottom: 14px; } } .service__wrapper .service__card.active { width: 680px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) { .service__wrapper .service__card.active { width: calc(50% - 10px); } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card.active { width: 100%; } } .service__wrapper .service__card.active .service__banner { width: 51.4%; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card.active .service__banner { width: 100%; } } .service__wrapper .service__card.active .service__title { max-width: 100%; } .service__wrapper .service__card.active .service__content { padding-left: 15px; justify-content: center; display: none; flex-shrink: 1; } .service__wrapper .service__card.active .service__content--main { display: flex; visibility: visible; transform: translateX(0); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper .service__card.active .service__content { padding-left: 10px; } } .service__wrapper .service__card.active .service__icon { background-color: var(--tj-color-theme-primary); } .service__wrapper .service__card.active .service__title a { color: var(--tj-color-heading-primary); } .service__wrapper .service__card.active .service__title a:hover { color: var(--tj-color-theme-primary); } .service__wrapper .service__card.active .service__desc { color: var(--tj-color-text-body); } .service__wrapper .service__card.active .tj-btn-2 { color: var(--tj-color-heading-primary); } .service__wrapper .service__card.active .tj-btn-2 i { color: var(--tj-color-heading-primary); } .service__wrapper .service__card.active .tj-btn-2:hover { color: var(--tj-color-theme-primary); } .service__wrapper .service__card.active .tj-btn-2:hover i { color: var(--tj-color-theme-primary); } .service__wrapper__2 { display: flex; flex-direction: column; gap: 30px; } .service__wrapper__2 .service__card { display: flex; padding: 45px 30px; background: var(--tj-color-theme-bg1); align-items: center; justify-content: space-between; flex-wrap: wrap; position: relative; z-index: inherit; border: 0; border-radius: 10px; } .service__wrapper__2 .service__card::after { display: none; } .service__wrapper__2 .service__card .service__banner { background-size: inherit; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 330px; height: 334px; opacity: 0; margin: -180px 0 0 -180px; overflow: hidden; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 10px; transition: opacity 0.3s, transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1); z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__2 .service__card .service__banner { width: 250px; height: 254px; } } .service__wrapper__2 .service__card .service__title { max-width: 169px; margin-bottom: 0; } .service__wrapper__2 .service__card .service__title__wrapper { max-width: 225px; display: flex; align-items: center; gap: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__2 .service__card .service__title { margin-bottom: 12px; } } .service__wrapper__2 .service__card .service__icon { margin-bottom: 0; flex-shrink: 0; border: 0; background-color: var(--tj-color-theme-secondary); } .service__wrapper__2 .service__card .service__icon i { font-size: 47px; color: var(--tj-color-common-white); } .service__wrapper__2 .service__card .service__desc { max-width: 357px; margin-bottom: 0; } .service__wrapper__2 .service__card .service__link { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .service__wrapper__2 .service__card .tj-btn__icon { width: 54px; height: 54px; display: inline-flex; justify-content: center; align-items: center; line-height: 1; background-color: var(--tj-color-common-white); transition: all var(--tj-td-standard) ease-in-out 0s; border: 1px solid var(--tj-color-border-1); border-radius: 50%; will-change: transform; } .service__wrapper__2 .service__card .tj-btn__icon i { color: var(--tj-color-heading-primary); font-size: 16px; transform: rotate(-45deg); } .service__wrapper__2 .service__card:hover { background-color: var(--tj-color-theme-bg2); } .service__wrapper__2 .service__card:hover .service__banner { opacity: 1; } .service__wrapper__2 .service__card:hover .service__title { color: var(--tj-color-heading-primary); } .service__wrapper__2 .service__card:hover .service__desc { color: var(--tj-color-text-body); } .service__wrapper__2 .service__card:hover .service__icon { background-color: var(--tj-color-theme-primary); } .service__wrapper__2 .service__card:hover .tj-btn__icon { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .service__wrapper__2 .service__card:hover .tj-btn__icon i { color: var(--tj-color-common-white); transform: rotate(0deg); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__2 .service__card { padding: 30px 30px; } .service__wrapper__2 .service__card .service__desc { max-width: 250px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__2 .service__card { padding: 30px 30px; } .service__wrapper__2 .service__card .service__desc { margin-top: 16px; max-width: 355px; } } @media (max-width: 575px) { .service__wrapper__2 .service__card { padding: 30px 25px; } .service__wrapper__2 .service__card .service__desc { margin-top: 16px; margin-bottom: 16px; } } /**---------------------------------------- START: H5 Portfolio CSS ----------------------------------------*/ .portfolio__wrapper--2 .portfolio__single { display: flex; gap: 30px; margin-bottom: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single { gap: 20px; margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single { flex-direction: column; align-items: center; } .portfolio__wrapper--2 .portfolio__single .tj-u-shape { left: 50%; top: 100%; transform: translateX(-50%) translateY(-15px) rotate(90deg); } } .portfolio__wrapper--2 .portfolio__single:last-child { margin-bottom: 0; } .portfolio__wrapper--2 .portfolio__single::after { display: none; } .portfolio__wrapper--2 .portfolio__single:hover .portfolio__single__img img { transform: scale(1); } .portfolio__wrapper--2 .portfolio__single:hover .portfolio__single__title a { letter-spacing: inherit; } .portfolio__wrapper--2 .portfolio__single:hover .portfolio__single__tag { color: var(--tj-color-theme-secondary); } .portfolio__wrapper--2 .portfolio__single__img { overflow: hidden; border-radius: 16px; width: calc(50% - 15px); height: 540px; } .portfolio__wrapper--2 .portfolio__single__img img { height: 100%; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__img { width: 100%; height: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__img { border-radius: 12px; } } .portfolio__wrapper--2 .portfolio__single__content { padding: 0; width: calc(50% - 15px); max-width: 495px; position: static; transform: none; padding: 30px; padding-right: 0; opacity: 1; visibility: visible; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio__wrapper--2 .portfolio__single__content { padding: 30px 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__content { width: 100%; max-width: 100%; padding: 0 10px 20px; padding-top: 0; } } @media (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__content { padding: 0 10px 15px; } } .portfolio__wrapper--2 .portfolio__single__content__wrapper { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 30px; position: relative; padding: 30px; background-color: var(--tj-color-common-white); border-radius: 16px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__content__wrapper { flex-wrap: wrap; gap: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__content__wrapper { padding: 15px; } } .portfolio__wrapper--2 .portfolio__single__content__wrapper .tj-u-shape { background-color: var(--tj-color-common-white); } .portfolio__wrapper--2 .portfolio__single__content__wrapper .tj-u-shape::before, .portfolio__wrapper--2 .portfolio__single__content__wrapper .tj-u-shape::after { background-color: var(--tj-color-theme-bg1); } .portfolio__wrapper--2 .portfolio__single__content__wrapper:hover .portfolio__single__img img { transform: scale(1.2); } .portfolio__wrapper--2 .portfolio__single__tag { color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-bg1); border: 1px solid var(--tj-color-border-1); } .portfolio__wrapper--2 .portfolio__single__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); } .portfolio__wrapper--2 .portfolio__single__title { color: var(--tj-color-heading-primary); margin-bottom: 18px; font-size: var(--tj-fs-h3); line-height: var(--tj-lh-h3); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio__wrapper--2 .portfolio__single__title { font-size: 30px; margin-bottom: 18px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper--2 .portfolio__single__title { font-size: 28px; margin-bottom: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__wrapper--2 .portfolio__single__title { font-size: 26px; margin-bottom: 18px; } } @media (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__title { font-size: 24px; margin-bottom: 16px; } } .portfolio__wrapper--2 .portfolio__single__title:hover a { color: var(--tj-color-theme-primary); } .portfolio__wrapper--2 .portfolio__single__desc { margin-bottom: 24px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper--2 .portfolio__single__desc { margin-bottom: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__desc { margin-bottom: 16px; } } .portfolio__wrapper--2 .portfolio__single__info ul { display: flex; gap: 18px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__wrapper--2 .portfolio__single__info ul { margin-top: 40px; } } @media (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__info ul { margin-top: 30px; flex-wrap: wrap; } } .portfolio__wrapper--2 .portfolio__single__info ul li:not(:last-child) { padding-right: 18px; border-right: 1px solid var(--tj-color-border-1); line-height: 1; } @media (max-width: 575px) { .portfolio__wrapper--2 .portfolio__single__info ul li:not(:last-child) { padding-right: 0; border: 0; gap: 15px; padding-bottom: 15px; width: 100%; border-bottom: 1px solid var(--tj-color-border-1); } } .portfolio__wrapper--2 .portfolio__single__info ul li p { font-size: 12px; line-height: 1; margin-bottom: 8px; text-transform: uppercase; } .portfolio__wrapper--2 .portfolio__single__info ul li h6 { font-size: 16px; line-height: 1; font-weight: var(--tj-fw-sbold); margin: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio__wrapper--2 .portfolio__single__info ul li h6 { font-size: 14px; } } .portfolio__wrapper--3 { max-width: 757px; display: flex; flex-direction: column; gap: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--3 { gap: 20px; } } .portfolio__wrapper--3 .portfolio__single { padding: 30px; background: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); border-radius: 12px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--3 .portfolio__single { padding: 20px; } } .portfolio__wrapper--3 .portfolio__single__img { border-radius: 16px; overflow: hidden; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper--3 .portfolio__single__img { border-radius: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--3 .portfolio__single__img { border-radius: 10px; } } .portfolio__wrapper--3 .portfolio__single__img img { width: 100%; height: 100%; object-fit: cover; } .portfolio__wrapper--3 .portfolio__single__content { position: static; transform: none; opacity: 1; visibility: visible; padding: 0; padding-top: 20px; display: flex; gap: 10px; justify-content: space-between; align-items: flex-end; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper--3 .portfolio__single__content { padding: 0; padding-top: 20px; } } @media (max-width: 575px) { .portfolio__wrapper--3 .portfolio__single__content { flex-wrap: wrap; justify-content: space-between; } } .portfolio__wrapper--3 .portfolio__single__tag { border-radius: 50px; background-color: var(--tj-color-theme-bg1); border-color: var(--tj-color-border-1); color: var(--tj-color-theme-secondary); font-size: 14px; margin-bottom: 12px; } .portfolio__wrapper--3 .portfolio__single__tag:hover { border-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-primary); } .portfolio__wrapper--3 .portfolio__single__title { color: var(--tj-color-heading-primary); max-width: 350px; margin-bottom: 0; } .portfolio__wrapper--3 .portfolio__single__title:hover a { letter-spacing: inherit; color: var(--tj-color-theme-primary); } .portfolio__wrapper--3 .portfolio__single::after { display: none; } .portfolio__wrapper--3 .portfolio__single__action a { visibility: visible; opacity: 1; position: static; transform: none; border: 0; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); transform: rotate(-45deg); } .portfolio__wrapper--3 .portfolio__single__action a i { color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper--3 .portfolio__single__action a { width: 60px; height: 60px; } .portfolio__wrapper--3 .portfolio__single__action a i { font-size: 16px; } } .portfolio__wrapper--3 .portfolio__single__action a:hover { border-color: transparent; } .portfolio__wrapper--3 .portfolio__single__action a:hover i { color: var(--tj-color-common-white); } .portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__tag { border-color: var(--tj-color-border-1); color: var(--tj-color-theme-secondary); } .portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__action a { background: var(--tj-color-theme-primary); transform: rotate(315deg); } .portfolio__wrapper--3 .portfolio__single:hover .portfolio__single__action a i { color: var(--tj-color-common-white); } /**---------------------------------------- START: Cta CSS ----------------------------------------*/ .cta { position: relative; z-index: 0; overflow: hidden; } .cta__content { max-width: 502px; min-height: 368px; padding: 40px 30px 53px 37px; background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border-radius: 10; mask-image: url("../images/shape/cta-text-bg.svg"); mask-repeat: no-repeat; mask-size: contain; } .cta__content .section-heading__title { font-size: 70px; color: var(--tj-color-common-white); line-height: 1.114; font-weight: var(--tj-fw-bold); letter-spacing: -0.025em; margin-bottom: 33px; } .cta__video__btn { display: flex; gap: 27px; align-items: center; font-weight: var(--tj-fw-sbold); line-height: 1; } .cta__video__btn .tj-btn--popup { width: 82px; height: 82px; transition: all var(--tj-td-standard) ease-in-out 0s; } .cta__video__btn .tj-btn--popup i { font-size: 22px; } .cta__video__btn .tj-btn--popup:hover { border-color: var(--tj-color-common-white); } .cta__video__btn .tj-btn--popup:hover i { color: var(--tj-color-common-white); } .cta__video__btn .tj-btn__text { color: var(--tj-color-common-white); } .cta__video__btn:hover .tj-btn--popup i { transform: translateX(0) scale(1.1); } .cta__video__btn:hover .tj-btn__text { letter-spacing: 0.01em; } .cta__banner { width: 117.4%; position: relative; mask-image: linear-gradient(180deg, #ffffff 76.22%, rgba(255, 255, 255, 0) 100%); } .cta__action { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; text-align: center; gap: 7px; color: var(--tj-color-common-white); } .cta__action__wrapper { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); } .cta__action .tj-btn--underline { font-size: 20px; color: var(--tj-color-common-white); text-decoration: none; font-weight: var(--tj-fw-bold); margin-left: -3px; } .cta__action .tj-btn--underline i { font-size: 16px; color: var(--tj-color-common-white); transform: rotate(-45deg); } .cta__action .tj-btn--underline::before { bottom: 2px; right: 26px; } .cta__action .tj-btn--underline:hover::before { animation-name: linehover2; } .cta__action .tj-btn--underline:hover i { transform: rotate(0deg); } .cta__shape { position: absolute; width: 616px; height: 616px; background: linear-gradient(180deg, var(--tj-color-theme-primary) 0%, var(--tj-color-theme-secondary) 100%); filter: blur(120px); border-radius: 50%; z-index: -1; } .cta__shape--1 { top: -8%; left: -27%; } .cta__shape--2 { width: 1050px; height: 905px; bottom: -42%; right: 4%; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta__banner { width: 100%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__content { padding: 32px 30px 53px 37px; margin-bottom: 30px; } .cta__content .section-heading__title { font-size: 60px; } .cta__banner { margin-top: 70px; } .cta__action__wrapper { bottom: 80px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .cta__content { padding: 20px 15px 30px 20px; margin-bottom: 30px; } .cta__content .section-heading__title { font-size: 50px; margin-bottom: 25px; } .cta__video__btn { gap: 15px; } .cta__video__btn .tj-btn--popup { width: 72px; height: 72px; } .cta__video__btn .tj-btn--popup i { font-size: 20px; } .cta__banner { margin-top: 30px; } .cta__action__wrapper { bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .cta__banner { margin-top: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta__banner { margin-top: 10px; } .cta__action .tj-btn--underline { font-size: 18px; } } @media (max-width: 575px) { .cta__content { padding: 30px 15px 30px 20px; margin-bottom: 30px; min-height: 230px; } .cta__content .section-heading__title { font-size: 36px; margin-bottom: 18px; } .cta__video__btn { gap: 15px; } .cta__video__btn .tj-btn--popup { width: 62px; height: 62px; } .cta__video__btn .tj-btn--popup i { font-size: 18px; } .cta__banner { margin-top: -15px; width: 107%; } .cta__action { display: block; } .cta__action__wrapper { bottom: 30px; } .cta__action img { width: 25px; } .cta__action .tj-btn--underline { font-size: 18px; } } /* !END: Cta CSS */ /**---------------------------------------- START: H5 Blog CSS ----------------------------------------*/ .blog__single__wrapper__2 { display: grid; gap: 30px; grid-template-columns: repeat(auto-fill, minmax(calc(50% - 15px), 1fr)); justify-content: center; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2 { grid-template-columns: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2 { gap: 20px; } } .blog__single__wrapper__2 .blog__single { background-color: var(--tj-color-theme-bg1); display: flex; grid-template-columns: 1fr 1fr; border-radius: 12px; padding: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2 .blog__single { flex-direction: column; align-items: flex-start; } } .blog__single__wrapper__2 .blog__single__banner { border-radius: 10px; max-width: 290px; width: 100%; height: 360px; flex-shrink: 0; } .blog__single__wrapper__2 .blog__single__banner a { height: 100%; } .blog__single__wrapper__2 .blog__single__banner a img { height: 100%; object-fit: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__single__wrapper__2 .blog__single__banner { max-width: 230px; height: 330px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog__single__wrapper__2 .blog__single__banner { max-width: 200px; height: 300px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2 .blog__single__banner { max-height: 208px; margin-bottom: 0; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog__single__wrapper__2 .blog__single__banner { max-height: 240px; margin-bottom: 0; max-width: 100%; } } .blog__single__wrapper__2 .blog__single__title { margin-bottom: 20px; font-size: 32px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog__single__wrapper__2 .blog__single__title { font-size: 24px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper__2 .blog__single__title { font-size: 28px; margin-bottom: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog__single__wrapper__2 .blog__single__title { margin-bottom: 16px; font-size: 26px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2 .blog__single__title { margin-bottom: 16px; font-size: 24px; } } .blog__single__wrapper__2 .blog__single__content { background: transparent; padding: 33px 15px 33px 30px; display: flex; flex-direction: column; justify-content: space-between; height: 100%; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog__single__wrapper__2 .blog__single__content { padding: 33px 15px 33px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2 .blog__single__content { padding: 15px 10px; padding-right: 16px; } } .blog__single__wrapper__2 .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 15px; } .blog__single__wrapper__2 .blog__single__content__list li { position: relative; line-height: 1; } .blog__single__wrapper__2 .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark3); border-radius: 100%; transform: translate(10px, -50%); } .blog__single__wrapper__2 .blog__single__content__list li:last-child::after { display: none; } .blog__single__wrapper__2 .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 0; background-color: transparent; border: 0; color: var(--tj-color-theme-secondary); background: transparent; font-size: 14px; font-weight: var(--tj-fw-medium); line-height: 1; letter-spacing: 2%; border-radius: 0; } .blog__single__wrapper__2 .blog__single__content__tag:hover { color: var(--tj-color-theme-primary); } .blog__single__wrapper__2 .blog__single__content__date { color: var(--tj-color-theme-dark3); font-size: 14px; } .blog__single__wrapper__2 .blog__single__content .tj-btn-2 { font-weight: var(--tj-fw-sbold); } /**---------------------------------------- START: Faq CSS ----------------------------------------*/ .faq--3 { position: relative; z-index: 0; } .faq--3::after { content: ""; position: absolute; top: 0; height: 100%; width: 100%; visibility: hidden; opacity: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(9px); transition: all var(--tj-td-standard) ease-in-out 0.3s; z-index: 2; } .faq--3:has(.faq-title:not(.collapsed))::after { visibility: visible; opacity: 1; } .faq--3 .faq__inner { min-height: 825px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .faq--3 .section-heading__title { font-size: 70px; line-height: 1.114; font-weight: var(--tj-fw-bold); letter-spacing: -0.025em; margin-bottom: 33px; } .faq--3 .tj-btn { margin-top: 20px; position: relative; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .faq--3 .section-heading__title { font-size: 60px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .faq--3 { padding: 0; } .faq--3 .section-heading__title { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .faq--3 .faq__inner { min-height: 980px; } .faq--3 .section-heading { margin-top: 92px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq--3 .faq__inner { min-height: 820px; } .faq--3 .section-heading { margin-top: 97px; } .faq--3 .section-heading__title { font-size: 36px; } } @media (max-width: 575px) { .faq--3 .faq__inner { min-height: 1060px; } .faq--3 .section-heading { margin-top: -142px; } } .faq__banner { width: 461px; position: absolute; bottom: -72px; left: -57px; z-index: 1; } .faq__banner img { mask-image: url("../images/shape/faq-img-bg.svg"); mask-repeat: no-repeat; mask-size: cover; mask-position: center; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .faq__banner { width: 400px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq__banner { width: 300px; bottom: -52px; left: -37px; } } @media (max-width: 575px) { .faq__banner { width: 300px; bottom: -42px; left: 50%; transform: translateX(-50%); } } .tj-faq--2 { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .tj-faq--2 span { color: var(--tj-color-theme-secondary); } .tj-faq--2 .accordion-item { width: 100%; max-width: 350px; background-color: var(--tj-color-common-white); border: 0; border-radius: 8px; position: absolute; z-index: 2; transition: all var(--tj-td-standard) ease-in-out 0.3s; margin-bottom: 0; will-change: transform; } .tj-faq--2 .accordion-item:hover { z-index: 3; } .tj-faq--2 .accordion-item:first-child { top: 120px; left: 50%; transform: translateX(-50%); } .tj-faq--2 .accordion-item:nth-child(2) { top: 206px; left: 100%; transform: translateX(-100%); } .tj-faq--2 .accordion-item:nth-child(3) { top: 266px; left: 0; } .tj-faq--2 .accordion-item:nth-child(4) { top: calc(100% - 120px); left: 24.5%; transform: translateY(-100%); } .tj-faq--2 .accordion-item:nth-child(5) { top: calc(100% - 206px); left: 100%; transform: translate(-100%, -100%); } .tj-faq--2 .accordion-item .faq-title { padding: 23px 50px 23px 20px; display: flex; gap: 4px; line-height: 1.4; } .tj-faq--2 .accordion-item .faq-title::before { top: 25px; right: 20px; transform: translateY(0); } .tj-faq--2 .accordion-item__body { margin: 0 20px; } .tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) { background: var(--tj-color-common-white); z-index: 3; } @media (min-width: 992px) { .tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) { top: 50%; left: 50%; transform: translate(-50%, -50%); } } .tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) .faq-title { color: var(--tj-color-heading-primary); } .tj-faq--2 .accordion-item:has(.faq-title:not(.collapsed)) .faq-title::before { content: "\e932"; transform: translateY(0) rotate(45deg); color: var(--tj-color-heading-primary); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-faq--2 .accordion-item:first-child { top: 100px; } .tj-faq--2 .accordion-item:nth-child(2) { top: 196px; } .tj-faq--2 .accordion-item:nth-child(3) { top: 236px; } .tj-faq--2 .accordion-item:nth-child(4) { top: calc(100% - 100px); } .tj-faq--2 .accordion-item:nth-child(5) { top: calc(100% - 196px); } .tj-faq--2 .accordion-item .faq-title { padding: 15px 36px 15px 24px; } .tj-faq--2 .accordion-item .faq-title::before { top: 19px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-faq--2 .accordion-item:first-child { top: 80px; } .tj-faq--2 .accordion-item:first-child:has(.faq-title:not(.collapsed)) { top: 80px; transform: translateX(-50%); } .tj-faq--2 .accordion-item:nth-child(2) { top: 186px; left: auto; right: 0; transform: translate(0); } .tj-faq--2 .accordion-item:nth-child(3) { top: 290px; transform: translateY(0); } .tj-faq--2 .accordion-item:nth-child(4) { top: auto; bottom: 80px; transform: translate(0); } .tj-faq--2 .accordion-item:nth-child(5) { top: auto; left: auto; right: 0; bottom: 188px; transform: translate(0); } .tj-faq--2 .accordion-item .faq-title { padding: 15px 36px 15px 24px; } .tj-faq--2 .accordion-item .faq-title::before { top: 19px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-faq--2 .accordion-item { max-width: 300px; } .tj-faq--2 .accordion-item:first-child { top: 60px; } .tj-faq--2 .accordion-item:first-child:has(.faq-title:not(.collapsed)) { top: 60px; transform: translateX(-50%); } .tj-faq--2 .accordion-item:nth-child(2) { top: 156px; } .tj-faq--2 .accordion-item:nth-child(3) { top: 250px; } .tj-faq--2 .accordion-item:nth-child(4) { bottom: 60px; left: 34.5%; } .tj-faq--2 .accordion-item:nth-child(5) { bottom: 158px; } .tj-faq--2 .accordion-item .faq-title::before { top: 16px; font-size: 23px; } .tj-faq--2 .accordion-item__body { margin: 0 16px; } } @media (max-width: 575px) { .tj-faq--2 .accordion-item:nth-child(4) { bottom: 294px; left: 0; } .tj-faq--2 .accordion-item:nth-child(5) { bottom: 390px; } .tj-faq--2 .accordion-item .faq-title { padding: 15px 36px 15px 18px; } .tj-faq--2 .accordion-item .faq-title::before { right: 12px; } } /* !END: Faq CSS */ /**---------------------------------------- START: Theme Marquee CSS ----------------------------------------*/ .tj__marquee { position: relative; overflow: hidden; } .tj__marquee__inner { position: relative; background: var(--tj-color-theme-secondary); padding: 24px 0; z-index: 3; width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj__marquee__inner { padding: 20px 0; } } @media (max-width: 575px) { .tj__marquee__inner { padding: 16px 0; } } .tj__marquee__inner .tj__marquee__item { width: auto; display: inline-block; } .tj__marquee__inner .tj__marquee__item .tj__marquee__box { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .tj__marquee__inner .tj__marquee__item .tj__marquee__title { font-size: 24px; font-weight: var(--tj-fw-sbold); text-transform: capitalize; margin-bottom: 0; white-space: nowrap; color: var(--tj-color-common-white); } .tj__marquee__inner .tj__marquee__item .tj__marquee__icon { line-height: 1; width: 6px; height: 6px; border-radius: 100%; background: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj__marquee__inner .tj__marquee__item .tj__marquee__box { gap: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj__marquee__inner .tj__marquee__item .tj__marquee-box { gap: 30px; } .tj__marquee__inner .tj__marquee__item .tj__marquee__title { font-size: 20px; } } .tj__marquee__inner--2 { background: linear-gradient(-90deg, var(--tj-color-theme-primary) 1.37%, var(--tj-color-theme-secondary) 63.36%); padding: 19px 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj__marquee__inner--2 { padding: 18px 0; } } @media (max-width: 575px) { .tj__marquee__inner--2 { padding: 16px 0; } } .scroll-slider { --gap: 40px; position: relative; display: flex; overflow: hidden; user-select: none; gap: 5px; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px) { .scroll-slider { --gap: 35px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .scroll-slider { --gap: 30px; } } .scroll-wrapper { flex-shrink: 0; display: flex; gap: var(--gap); animation: scroll 50s linear infinite; } @keyframes pulseImg { 0% { transform: scale(1); } 100% { transform: scale(1.2); } } [dir=rtl] .scroll-wrapper { animation: scroll-rtl 50s linear infinite; } @keyframes scroll { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } } @keyframes scroll-rtl { from { transform: translateX(0); } to { transform: translateX(calc(100% + var(--gap))); } } /* !END: Theme Marquee CSS */ /**---------------------------------------- START: Header CSS ----------------------------------------*/ .header--6 { max-width: 100%; left: 30px; right: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--6 { left: 15px; right: 15px; margin-left: 0; margin-right: 0; } } .header--6 .mainmenu { margin-left: 0; } /* !END: Header CSS */ /**---------------------------------------- START: Footer CSS ----------------------------------------*/ .footer--6 .footer__top .tj-input__wrapper .tj-input { padding: 21px 18px; padding-inline-end: 205px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--6 .footer__top .tj-input__wrapper .tj-input { padding: 19px 18px; padding-inline-end: 185px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--6 .footer__top .tj-input__wrapper .tj-input { padding: 19px 18px; padding-inline-end: 190px; } } @media (max-width: 575px) { .footer--6 .footer__top .tj-input__wrapper .tj-input { padding-inline-end: 70px; } } .footer--6 .footer__top .tj-input__wrapper .tj-btn { padding: 17px 25px; top: 7px; right: 7px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--6 .footer__top .tj-input__wrapper .tj-btn { padding: 15px; } } /* !END: Footer CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .hero--7 .hero__inner { min-height: 840px; padding-top: 146px; padding-bottom: 30px; padding-inline-start: 15px; padding-inline-end: 15px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__inner { padding-inline-start: 0; padding-inline-end: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__inner { min-height: inherit; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__inner { padding-top: 140px; } } @media (max-width: 575px) { .hero--7 .hero__inner { padding-top: 120px; } } .hero--7 .hero__left { min-height: inherit; z-index: 1; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 20px; } @media only screen and (min-width: 1781px) { .hero--7 .hero__left { width: calc(100% + 20px); } } .hero--7 .hero__banner-img { position: relative; bottom: auto; right: auto; margin-inline-start: 130px; max-width: 605px; width: 100%; padding-top: 20px; } .hero--7 .hero__banner-img > img { max-width: 100%; } @media only screen and (min-width: 1701px) and (max-width: 1800px) { .hero--7 .hero__banner-img { margin-inline-start: 100px; max-width: 580px; } } @media only screen and (min-width: 1601px) and (max-width: 1780px), only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__banner-img { margin-inline-start: auto; margin-inline-end: auto; } } @media only screen and (min-width: 1601px) and (max-width: 1780px) { .hero--7 .hero__banner-img { max-width: 550px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--7 .hero__banner-img { max-width: 500px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__banner-img { max-width: 420px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__banner-img { max-width: 480px; } } @media (max-width: 575px) { .hero--7 .hero__banner-img { max-width: 90%; } } .hero--7 .hero__chart { position: absolute; left: -70px; top: 35%; } .hero--7 .hero__chart img { box-shadow: 0px 11px 30px -2px rgba(57, 25, 82, 0.1); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--7 .hero__chart { max-width: 220px; left: -50px; top: 40%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--7 .hero__chart { max-width: 200px; left: -15px; top: 42%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__chart { max-width: 170px; left: 0; top: 45%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--7 .hero__chart { max-width: 230px; top: 43%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__chart { max-width: 170px; left: 0; top: 45%; } } .hero--7 .hero__social { position: absolute; right: -73px; top: 40px; } @media only screen and (min-width: 1601px) and (max-width: 1780px) { .hero--7 .hero__social { max-width: 180px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--7 .hero__social { max-width: 150px; top: 60px; right: -50px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--7 .hero__social { max-width: 120px; top: 70px; right: -10px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__social { max-width: 100px; top: 100px; right: -10px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--7 .hero__social { max-width: 150px; top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__social { max-width: 130px; top: 70px; right: -20px; } } @media (max-width: 575px) { .hero--7 .hero__social { max-width: 100px; top: 60px; right: -10px; } } .hero--7 .hero__client { position: absolute; right: -115px; bottom: 135px; } .hero--7 .hero__client img { box-shadow: 0px 11px 30px -2px rgba(57, 25, 82, 0.1); } @media only screen and (min-width: 1601px) and (max-width: 1780px) { .hero--7 .hero__client { right: -85px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--7 .hero__client { right: -60px; bottom: 110px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--7 .hero__client { right: -15px; bottom: 110px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__client { max-width: 160px; right: 0; bottom: 100px; } } @media (max-width: 575px) { .hero--7 .hero__client { max-width: 140px; right: 0; bottom: 50px; } } .hero--7 .hero__right { max-width: 750px; width: 100%; min-height: inherit; z-index: 1; padding-inline-start: 80px; } @media only screen and (min-width: 1601px) and (max-width: 1780px) { .hero--7 .hero__right { padding-inline-start: 50px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--7 .hero__right { padding-inline-start: 30px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__right { padding-inline-start: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__right { padding-inline-start: 0; margin: 0 0 45px 0; } } .hero--7 .hero__reviews--2 { border: 1px solid var(--tj-color-border-1); } .hero--7 .hero__title { font-size: 81px; line-height: 1.11; font-weight: var(--tj-fw-bold); margin-bottom: 10px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--7 .hero__title { font-size: 76px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__title { font-size: 65px; max-width: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__title { font-size: 54px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--7 .hero__title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__title { font-size: 56px; } } @media (max-width: 575px) { .hero--7 .hero__title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__title { max-width: 100%; } } .hero--7 .hero__title img { width: 67px; height: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--7 .hero__title img { width: 55px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__title img { width: 50px; } } @media (max-width: 575px) { .hero--7 .hero__title img { width: 40px; } } .hero--7 .hero__desc { font-size: 20px; max-width: 450px; line-height: 1.5; letter-spacing: 0; margin-bottom: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__desc { font-size: 18px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--7 .hero__desc { max-width: 100%; } } .hero--7 .hero__shape__img { position: absolute; z-index: -1; right: 0; top: 0; max-width: 417px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--7 .hero__shape__img { max-width: 360px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--7 .hero__shape__img { max-width: 300px; } } @media (max-width: 575px) { .hero--7 .hero__shape__img { max-width: 260px; } } .hero--7 .btn-area { display: flex; align-items: center; gap: 20px; } /* !END: Hero CSS */ /**---------------------------------------- START: Client CSS ----------------------------------------*/ .client-slider-2 .client-logo img { opacity: 0.35; } .client-slider-2 .client-logo:hover img { opacity: 1; visibility: visible; width: auto; animation: gelatine 0.5s linear; } @keyframes gelatine { from, to { transform: scale(1, 1); } 25% { transform: scale(0.7, 1.1); } 50% { transform: scale(1.1, 0.7); } 75% { transform: scale(0.95, 1.05); } } /* !END: Client CSS */ /**---------------------------------------- START: About CSS ----------------------------------------*/ .about--7 .section-heading__title { font-weight: var(--tj-fw-sbold); line-height: 1.25; } .about--7 .about__area { background-repeat: no-repeat; background-position: center; background-size: cover; padding: 60px; border-radius: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .about--7 .about__area { padding: 60px 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--7 .about__area { padding: 40px 15px; } } .about--7 .about__content { max-width: 1160px; margin: 0 auto; text-align: center; padding-left: 0; } .about--7 .about__action { margin-top: 20px; justify-content: center; } @media (max-width: 575px) { .about--7 .about__action { flex-wrap: wrap; } } .about--7 .about-img { border-radius: 16px; overflow: hidden; height: 100%; } .about--7 .about-img img { width: 100%; height: 100%; object-fit: cover; } .about--7 .about-img:hover img { transform: scale(1.15); } .funfact-area.h6-about-funfact { background-color: var(--tj-color-theme-bg2); border-radius: 16px; padding: 60px 33px 44px 33px; gap: 40px; } .funfact-area.h6-about-funfact .funfact-item { width: calc(50% + 10px); padding-inline-end: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-about-funfact .funfact-item .number { margin-top: -15px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-about-funfact { padding: 40px 20px 34px 20px; gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.h6-about-funfact { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-about-funfact { gap: 30px; } } /* !END: About CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .h6-service .section-heading__title { color: var(--tj-color-common-white); } .h6-service .section-heading__right { display: inline-flex; gap: 10px; } .h6-service .section-heading__right .swiper-button-prev, .h6-service .section-heading__right .swiper-button-next { opacity: 1; visibility: visible; position: static; transform: none; margin: 0; } .h6-service .section-heading__right .swiper-button-prev:not(:hover), .h6-service .section-heading__right .swiper-button-next:not(:hover) { border: 1px solid rgba(255, 255, 255, 0.1); background-color: transparent; } .h6-service .section-heading__right .swiper-button-prev::after, .h6-service .section-heading__right .swiper-button-next::after { color: var(--tj-color-common-white); } .service__slider .service__card { border: 0; background: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border-radius: 10px; } .service__slider .service__card::after { display: none; } .service__slider .service__card .service__icon { background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); margin-bottom: 22px; } .service__slider .service__card .service__icon i { color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__slider .service__card .service__icon { width: 70px; height: 70px; font-size: 44px; } } .service__slider .service__card .service__title { color: var(--tj-color-common-white); margin-bottom: 18px; overflow: hidden; } .service__slider .service__card .service__title a { text-shadow: 0 35px 0; } .service__slider .service__card .service__title:hover a { transform: translateY(-35px); } .service__slider .service__card .service__desc { color: var(--tj-color-common-white2); margin-bottom: 26px; } .service__slider .service__card .tj-btn-2 { color: var(--tj-color-common-white); overflow: hidden; } .service__slider .service__card .tj-btn-2 span { text-shadow: 0 22px 0; } .service__slider .service__card .tj-btn-2 i { color: currentColor; } .service__slider .service__card .tj-btn-2:hover span { transform: translateY(-22px); } .service__slider .service__card:hover .service__icon { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .service__slider .swiper-pagination-bullet { background-color: var(--tj-color-common-white); } .service__slider .swiper-pagination-bullet:hover { opacity: 1; } .tj_swiper_navigation { gap: 10px; flex-wrap: wrap; } .tj_swiper_navigation .swiper-button-prev, .tj_swiper_navigation .swiper-button-next { width: 50px; height: 50px; border-radius: 100%; opacity: 1; visibility: visible; position: static; transform: none; margin: 0; color: var(--tj-color-common-white); } .tj_swiper_navigation .swiper-button-prev:not(:hover), .tj_swiper_navigation .swiper-button-next:not(:hover) { border: 1px solid rgba(255, 255, 255, 0.1); background-color: transparent; } .tj_swiper_navigation .swiper-button-prev::after, .tj_swiper_navigation .swiper-button-next::after { display: none; } /* !END: Service CSS */ /**---------------------------------------- START: Features CSS ----------------------------------------*/ .feature-img { max-width: 605px; width: 100%; border-radius: 16px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .feature-img { max-width: 100%; margin-top: 20px; } } .h6-features-wrap .service__card { padding: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-features-wrap .service__card { padding: 30px 16px; } } @media (max-width: 575px) { .h6-features-wrap .service__card { width: 100%; } } .h6-features-wrap .service__card:hover .service__icon { background-color: transparent; } .h6-features-wrap .service__card:hover .service__icon i { color: var(--tj-color-theme-primary); } .h6-features-wrap .service__icon { width: auto; height: auto; background-color: transparent; border-radius: 0; margin-bottom: 20px; } .h6-features-wrap .service__icon i { color: var(--tj-color-theme-secondary); } .elementor .footer-gap { padding-left: 30px; padding-right: 30px; padding-bottom: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .elementor .footer-gap { padding-left: 15px; padding-right: 15px; padding-bottom: 15px; } } /* !END: Features CSS */ /**---------------------------------------- START: Process CSS ----------------------------------------*/ .h6-process .section-heading__title { color: var(--tj-color-common-white); } .h6-process__wrapper { border-top: 1px solid var(--tj-color-border-5); display: flex; flex-wrap: wrap; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper { border-top: 0; border-left: 1px solid var(--tj-color-border-5); margin-inline-start: 15px; gap: 30px; } } .h6-process__wrapper .process__single { width: calc(33% - 15px); margin-top: 62px; margin-bottom: 0; overflow: visible; border-radius: 10px; display: block; background: none; padding: 0; } .h6-process__wrapper .process__single .process__inner { backdrop-filter: blur(10px); background: var(--tj-color-theme-bg4); padding: 40px 30px 42px 30px; border-radius: 10px; overflow: visible; transition: all 0.3s ease-in-out; } .h6-process__wrapper .process__single .process__inner::after { display: none; } .h6-process__wrapper .process__single .process__inner::before { content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 14px 14px 14px; border-color: transparent transparent var(--tj-color-theme-bg4) transparent; transform: rotate(0deg); position: absolute; top: -14px; left: 40px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper .process__single .process__inner::before { transform: rotate(-90deg); top: 46px; left: -21px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-process__wrapper .process__single .process__inner { padding: 40px 20px; } } @media (max-width: 575px) { .h6-process__wrapper .process__single .process__inner { padding: 40px 15px 30px 15px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-process__wrapper .process__single { width: calc(33% - 10px); } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper .process__single { width: calc(100% - 40px); margin-top: 0; margin-inline-start: auto; } } .h6-process__wrapper .process__single::before { content: ""; width: 18px; height: 18px; background-color: var(--tj-color-common-white); border-radius: 50%; position: absolute; top: -72px; left: 45px; box-shadow: 0 0 0 6px var(--tj-color-border-9); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper .process__single::before { top: 45px; left: -50px; } } .h6-process__wrapper .process__single .step-header { display: flex; justify-content: space-between; } .h6-process__wrapper .process__single .step-header .step { background-color: var(--tj-color-theme-secondary); color: var(--tj-color-common-white); line-height: 1; font-weight: var(--tj-fw-medium); display: inline-flex; border-radius: 56px; padding: 5px 8px; } .h6-process__wrapper .process__single .process__sl { font-size: 90px; font-weight: var(--tj-fw-bold); letter-spacing: -0.01em; line-height: 0.7; opacity: 0.3; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper .process__single .process__sl { font-size: 70px; margin-bottom: 6px; } } .h6-process__wrapper .process__single .process__content { max-width: 100%; padding-top: 70px; } @media (max-width: 575px) { .h6-process__wrapper .process__single .process__content { padding-top: 50px; } } .h6-process__wrapper .process__single .process__title { margin-bottom: 16px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper .process__single .process__title { font-size: 20px; margin-bottom: 12px; } } .h6-process__wrapper .process__single .process__desc { color: var(--tj-color-common-white2); font-size: 16px; } .h6-process__wrapper .process__single:hover::before { background-color: var(--tj-color-theme-primary); box-shadow: 0 0 0 6px var(--tj-color-theme-bg3); } .h6-process__wrapper .process__single:hover .process__inner { transform: translateY(-10px); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-process__wrapper .process__single:hover .process__inner { transform: translate(0); } } .h6-process__wrapper .process__single:hover .step { background-color: var(--tj-color-theme-primary); } .h6-process__wrapper .process__single:hover .process__sl { opacity: 1; -webkit-text-stroke-color: var(--tj-color-theme-primary); } /* !END: Process CSS */ /**---------------------------------------- START: Portfolio CSS ----------------------------------------*/ .h6-portfolio-item { display: flex; flex-wrap: wrap; padding: 15px; gap: 140px; background-color: var(--tj-color-theme-bg1); border-radius: 10px; transition: all var(--tj-td-standard) ease-in-out 0s; position: relative; } .h6-portfolio-item:not(:last-child) { margin-bottom: 30px; } .h6-portfolio-item .portfolio-content { max-width: 470px; width: 100%; margin-inline-start: auto; margin-top: 15px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-portfolio-item .portfolio-content { max-width: 425px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h6-portfolio-item .portfolio-content { max-width: 425px; margin-inline-start: 125px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-portfolio-item .portfolio-content { max-width: 100%; margin-top: 45px; } } .h6-portfolio-item .portfolio-sl { font-size: 24px; line-height: 1; color: var(--tj-color-theme-secondary); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); position: absolute; top: 36px; left: 30px; transition: all var(--tj-td-standard) ease-in-out 0s; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-portfolio-item .portfolio-sl { font-size: 22px; left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h6-portfolio-item .portfolio-sl { font-size: 22px; left: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-portfolio-item .portfolio-sl { font-size: 20px; top: 25px; left: auto; } } .h6-portfolio-item .portfolio-title { margin-bottom: 16px; } .h6-portfolio-item .portfolio-title a { background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 92%; display: inline; } .h6-portfolio-item .portfolio-title a:hover { background-size: 100% 2px; } @media (max-width: 575px) { .h6-portfolio-item .portfolio-title a { background-position: 0 95%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-portfolio-item .portfolio-title { margin-bottom: 12px; } } .h6-portfolio-item .portfolio-desc { margin-bottom: 23px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-portfolio-item .portfolio-desc { margin-bottom: 18px; } } .h6-portfolio-item .portfolio-img { max-width: 405px; width: 100%; min-height: 320px; border-radius: 12px; overflow: hidden; } .h6-portfolio-item .portfolio-img img { width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-portfolio-item .portfolio-img { max-width: 360px; min-height: 300px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h6-portfolio-item .portfolio-img { margin: 0 auto; margin-inline-start: 125px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-portfolio-item .portfolio-img { max-width: 100%; min-height: auto; } } .h6-portfolio-item:hover { background-color: var(--tj-color-theme-bg2); } .h6-portfolio-item:hover .portfolio-sl { color: var(--tj-color-theme-primary); } .h6-portfolio-item:hover .portfolio-img img { transform: scale(1.1); } .h6-portfolio-item:hover .tj-icon-btn { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-portfolio-item { gap: 80px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-portfolio-item { gap: 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h6-portfolio-item { gap: 25px; } } .tj-icon-btn { width: 56px; height: 56px; display: inline-flex; justify-content: center; align-items: center; background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); color: var(--tj-color-theme-dark); border-radius: 100%; line-height: 1; z-index: 2; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .tj-icon-btn { width: 50px; height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-icon-btn { width: 46px; height: 46px; } } .tj-icon-btn i { display: inline-block; font-size: 16px; transform: rotate(-45deg); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-icon-btn i { font-size: 14px; } } .tj-icon-btn:hover { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .tj-icon-btn:hover i { transform: rotate(0deg); } /* !END: Portfolio CSS */ /**---------------------------------------- START: Funfact CSS ----------------------------------------*/ .funfact-area.h6-funfact-area { gap: 30px; padding: 0; height: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area { gap: 70px; } } .funfact-area.h6-funfact-area .funfact-item { padding: 0 0 0 30px; background: transparent; border-radius: 0; text-align: start; position: relative; } .funfact-area.h6-funfact-area .funfact-item::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: calc(100% - 7px); background-color: var(--tj-color-border-5); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area .funfact-item::before { width: 100%; height: 1px; } } .funfact-area.h6-funfact-area .funfact-item::after { display: none; } .funfact-area.h6-funfact-area .funfact-item .text { color: var(--tj-color-common-white2); font-size: 18px; line-height: 1.556; max-width: 360px; margin-top: 5px; } .funfact-area.h6-funfact-area .funfact-item .text--traffic, .funfact-area.h6-funfact-area .funfact-item .text--speed, .funfact-area.h6-funfact-area .funfact-item .text--bonus, .funfact-area.h6-funfact-area .funfact-item .text--conversation { color: var(--tj-color-common-white2); font-size: 16px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); line-height: 1; letter-spacing: -0.02em; position: relative; padding-left: 16px; margin-top: 0; } .funfact-area.h6-funfact-area .funfact-item .text--traffic::before, .funfact-area.h6-funfact-area .funfact-item .text--speed::before, .funfact-area.h6-funfact-area .funfact-item .text--bonus::before, .funfact-area.h6-funfact-area .funfact-item .text--conversation::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background-color: var(--tj-color-theme-primary); position: absolute; left: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .funfact-area.h6-funfact-area .funfact-item .text { max-width: 300px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.h6-funfact-area .funfact-item .text { max-width: 265px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area .funfact-item .text { max-width: 100%; } } .funfact-area.h6-funfact-area .funfact-item .number { font-size: 100px; justify-content: start; margin-top: 86px; } .funfact-area.h6-funfact-area .funfact-item .number .odometer span { letter-spacing: -0.05em; } .funfact-area.h6-funfact-area .funfact-item .number small { font-size: 42px; margin-inline-start: 8px; } .funfact-area.h6-funfact-area .funfact-item .number small sub { transform: translateY(0); bottom: -0.6em; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area .funfact-item .number small sub { bottom: -0.45em; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area .funfact-item .number small { font-size: 34px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .funfact-area.h6-funfact-area .funfact-item .number { font-size: 90px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.h6-funfact-area .funfact-item .number { font-size: 80px; margin-top: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area .funfact-item .number { font-size: 70px; margin-top: 60px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.h6-funfact-area .funfact-item { padding: 0 0 0 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.h6-funfact-area .funfact-item { flex: 0 1 calc(50% - 15px); } .funfact-area.h6-funfact-area .funfact-item:last-child { margin-top: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.h6-funfact-area .funfact-item { flex: 100%; padding: 30px 0 0 0; } } .h6-funfact-marquee .service-marquee__title { color: var(--tj-color-common-white); margin-bottom: 15px; } .h6-funfact-marquee .service-marquee__item:nth-child(2n) .service-marquee__title { -webkit-text-stroke: 1px var(--tj-color-common-white); } .h6-funfact-marquee .service-marquee__img { animation: zoomEffect 2s linear infinite; } .zoomInOut { animation: zoomEffect 3s linear infinite; } @-webkit-keyframes zoomEffect { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @-moz-keyframes zoomEffect { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @-ms-keyframes zoomEffect { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } @keyframes zoomEffect { 0% { transform: scale(0.8); } 50% { transform: scale(1); } 100% { transform: scale(0.8); } } /* !END: Funfact CSS */ /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .h6-testimonials-wrapper { position: relative; z-index: 0; } .h6-testimonials-wrapper .testimonials__author { justify-content: center; text-align: center; } .h6-testimonials-wrapper .testimonials__author__slider { max-width: 250px; padding-bottom: 0; margin: 0 auto -44px; position: relative; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .h6-testimonials-wrapper .testimonials__author__slider { max-width: 220px; margin-bottom: -35px; } } @media (max-width: 575px) { .h6-testimonials-wrapper .testimonials__author__slider { max-width: 186px; margin-bottom: -30px; } } .h6-testimonials-wrapper .testimonials__author__avatar { max-width: 75px; border-width: 4px; border-radius: 10px; background-color: var(--tj-color-common-white); cursor: pointer; } .h6-testimonials-wrapper .testimonials__author__avatar img { opacity: 0.5; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .h6-testimonials-wrapper .testimonials__author__avatar { max-width: 65px; } } @media (max-width: 575px) { .h6-testimonials-wrapper .testimonials__author__avatar { max-width: 55px; } } .h6-testimonials-wrapper .testimonials__slider__6 { overflow: visible; } .h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-prev, .h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-next { left: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-prev, .h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-next { left: 125px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-prev, .h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-next { left: 98px; } } .h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-next, .h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-prev { right: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-next, .h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-prev { right: 125px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-testimonials-wrapper .testimonials__slider__6 .swiper-button-next, .h6-testimonials-wrapper .testimonials__slider__6 .swiper-rtl .swiper-button-prev { right: 98px; } } .h6-testimonials-wrapper .testimonials__slider__item { background-repeat: no-repeat; background-size: cover; padding: 54px 60px; border: 0; opacity: 0.2; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-testimonials-wrapper .testimonials__slider__item { padding: 40px 35px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .h6-testimonials-wrapper .testimonials__slider__item { padding: 40px 20px; } } @media (max-width: 575px) { .h6-testimonials-wrapper .testimonials__slider__item { padding: 25px 20px; } } .h6-testimonials-wrapper .testimonials__desc { font-size: 28px; line-height: 1.5; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); letter-spacing: -0.02em; text-align: center; padding-top: 35px; padding-bottom: 32px; margin-bottom: 0; border: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h6-testimonials-wrapper .testimonials__desc { font-size: 24px; padding-top: 30px; padding-bottom: 25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .h6-testimonials-wrapper .testimonials__desc { font-size: 22px; padding-top: 25px; padding-bottom: 20px; } } @media (max-width: 575px) { .h6-testimonials-wrapper .testimonials__desc { font-size: 20px; padding-top: 25px; padding-bottom: 15px; } } .h6-testimonials-wrapper .swiper-slide-active .testimonials__author__avatar img { opacity: 1; } .h6-testimonials-wrapper .swiper-slide-active .testimonials__slider__item { opacity: 1; } /* !END: Testimonials CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .blog--6 .blog__single--2 .blog__single__title { font-size: 32px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog--6 .blog__single--2 .blog__single__title { font-size: 24px; } } .blog--6 .blog__single--2 .blog__single__title a { background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 92%; display: inline; } .blog--6 .blog__single--2 .blog__single__title a:hover { background-size: 100% 2px; } @media (max-width: 575px) { .blog--6 .blog__single--2 .blog__single__title a { background-position: 0 95%; } } .blog--6 .blog__single--2 .blog__single__title:hover { animation: none; } .blog--6 .blog__single--2.h6-blog-single .blog__single__banner { height: 307px; border-radius: 10px; } .blog--6 .blog__single--2.h6-blog-single .blog__single__banner:after { display: none; } .blog--6 .blog__single--2.h6-blog-single .blog__single__content { position: unset; background-color: transparent; padding: 20px 0 0 0; } .blog--6 .blog__single--2.h6-blog-single .blog__single__content__list { margin-bottom: 14px; } .blog--6 .blog__single--2.h6-blog-single .blog__single__content__list li::after { background-color: var(--tj-color-theme-dark); } .blog--6 .blog__single--2.h6-blog-single .blog__single__content__tag:hover { color: var(--tj-color-theme-primary) !important; background-color: var(--tj-color-theme-bg2); border-color: var(--tj-color-theme-bg2); } .blog--6 .blog__single--2.h6-blog-single .blog__single__content__date { color: inherit; } .blog--6 .blog__single--2.h6-blog-single .blog__single__title { font-size: 24px; margin-bottom: 22px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog--6 .blog__single--2.h6-blog-single .blog__single__title { font-size: 20px; margin-bottom: 12px; } } .blog--6 .blog__single--2.h6-blog-single .blog__single__title a { color: inherit; } .blog--6 .blog__single--2.h6-blog-single .blog__single__title:hover { animation: none; } .blog--6 .blog__single--2.h6-blog-single .tj-btn-2 { color: inherit; opacity: 1; } .blog--6 .blog__single--2.h6-blog-single .tj-btn-2 i { color: inherit; } .blog--6 .blog__single--2.h6-blog-single .tj-btn-2:hover { color: var(--tj-color-theme-primary); } /* !END: Blog CSS */ /**---------------------------------------- START: Header CSS ----------------------------------------*/ .header--7 .header__wrapper { justify-content: space-between; } .header--7 .header__wrapper > div:last-child { margin-left: 0; } .header--7 .header__logo { width: 133px; } .header--7.header { max-width: calc(100% - 60px); left: 30px; right: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--7.header { max-width: calc(100% - 30px); left: 15px; right: 15px; } } @media (max-width: 575px) { .header--7.header { max-width: calc(100% - 20px); left: 10px; right: 10px; } } .header--7.header .header__right .header__mobile-toggler { border-radius: 100%; } .header--7.header .header__right .tj-btn { padding: 14px 30px; border-radius: 58px; } .header--7.header .header__right .tj-btn::after { border-radius: 58px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--7.header .header__right .tj-btn { padding: 11px 25px; } } .header--7.header--absolute { margin-top: 30px; border-radius: 0; background-color: transparent; box-shadow: none; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--7.header--absolute { margin-top: 10px; } } @media (max-width: 575px) { .header--7.header--absolute { margin-top: 0; } } .header--7.header--absolute .header__logo { padding: 0; } .header--7.header--absolute .mainmenu ul { gap: 0; } .header--7.header--absolute .mainmenu { background: rgba(255, 255, 255, 0.1); padding-left: 15px; padding-right: 15px; border-radius: 58px; } .header--7.header--absolute .mainmenu nav > ul > li > a { padding: 10px 20px; color: var(--tj-color-common-white); } .header--7.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after { color: var(--tj-color-common-white); } .header--7.header--absolute .mainmenu nav > ul > li .sub-menu { border-radius: 12px; margin-top: 10px; z-index: 0; } .header--7.header--absolute .mainmenu nav > ul > li .sub-menu::after { content: ""; position: absolute; left: 0; top: -11px; width: 100%; height: 100%; z-index: -1; } .header--7.header--absolute .tj-btn { color: var(--tj-color-theme-dark); border-color: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--7.header--absolute .tj-btn { padding: 11px 25px; } } .header--7.header--absolute .tj-btn::after { background-color: var(--tj-color-common-white); } .header--7.header--absolute .tj-btn:hover { border-color: var(--tj-color-common-white); color: var(--tj-color-common-white); } .header--7.header--absolute .header__right .header__mobile-toggler { border-color: var(--tj-color-common-white); background-color: transparent; } .header--7.header--absolute .header__right .header__mobile-toggler span { background-color: var(--tj-color-common-white); } .header--7.header-duplicate { top: -120px; /* Initially hidden */ } .header--7.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; /* Sticks to the top */ } .header--7.header-duplicate .header__wrapper { padding-left: 20px; padding-right: 20px; } @media (max-width: 575px) { .header--7.header-duplicate .header__wrapper { padding-left: 15px; padding-right: 15px; } } /* !END: Header CSS */ /**---------------------------------------- START: Footer CSS ----------------------------------------*/ .footer--7_widget__subscribe .footer__title { margin-top: 0; margin-bottom: 47px; font-size: 14px; font-family: var(--tj-ff-body); font-weight: var(--tj-fw-medium); letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; color: var(--tj-color-common-white); opacity: 0.5; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--7_widget__subscribe .footer__title { margin-bottom: 30px; } } .footer--7_widget__subscribe .hero__subscription { padding-top: 10px; margin-bottom: 0; } .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper { background: transparent; border: 0; padding: 0; width: 100%; max-width: 100%; position: relative; z-index: 1; } .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .wpcf7, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper form, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .wpcf7-form-control-wrap { width: 100%; } .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-input, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper input[type=email] { background: rgba(255, 255, 255, 0.02); backdrop-filter: blur(22px); border-radius: 100px; border: 1px solid var(--tj-color-border-5); color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); letter-spacing: -0.02em; width: 100%; padding: 21px 25px; padding-inline-end: 190px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-input, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper input[type=email] { padding: 16px 25px; padding-inline-end: 190px; } } @media (max-width: 575px) { .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-input, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper input[type=email] { padding: 16px 55px 16px 25px; } } .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-btn, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper button[type=submit] { border-radius: 100px; position: absolute; right: 5px; top: 50%; transform: translateY(-50%); z-index: 2; } .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-btn i, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper button[type=submit] i { font-size: 16px; } @media (max-width: 575px) { .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-btn, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper button[type=submit] { padding: 15px 16px; } .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper .tj-btn .subscription-text, .footer--7_widget__subscribe .hero__subscription .tj-input__wrapper button[type=submit] .subscription-text { display: none; } } .footer__title__large .tj-el-title { font-size: 80px; line-height: 1.175; color: var(--tj-color-common-white); max-width: 1224px; margin: 0 auto; text-align: center; text-transform: uppercase; mask-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.15) 100%); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer__title__large .tj-el-title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .footer__title__large .tj-el-title { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__title__large .tj-el-title { font-size: 24px; } } .footer__widget__wrapper--3 { background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); } .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe { max-width: 100%; padding: 0; margin-left: 0; } .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe::after, .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe::before { display: none; } .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn { border-radius: 100px; } .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .hero__subscription .tj-btn::after { border-radius: 100px; } @media (max-width: 575px) { .footer__widget__wrapper--3 .footer__widget.footer__widget__subscribe .tj-btn { padding: 15px 17px; } } /* !END: Footer CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .hero--8 { position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; } .hero--8 .hero__inner { min-height: 900px; padding-top: 194px; overflow: visible; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--8 .hero__inner { min-height: 710px; padding-top: 176px; padding-bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--8 .hero__inner { min-height: 680px; padding-top: 176px; padding-bottom: 40px; } } @media (max-width: 575px) { .hero--8 .hero__inner { min-height: 670px; padding-top: 128px; padding-bottom: 15px; } } .hero--8 .hero__left { max-width: 800px; position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--8 .hero__left { max-width: 612px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--8 .hero__left { max-width: 588px; } } .hero--8 .hero__title { font-size: 96px; font-weight: var(--tj-fw-bold); line-height: 1.114; letter-spacing: -0.02em; color: var(--tj-color-common-white); margin-top: -20px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--8 .hero__title { font-size: 85px; max-width: 100%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--8 .hero__title { font-size: 65px; max-width: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--8 .hero__title { font-size: 55px; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--8 .hero__title { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--8 .hero__title { font-size: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--8 .hero__title { font-size: 60px; } } @media (max-width: 575px) { .hero--8 .hero__title { font-size: 40px; } } .hero--8 .hero__box { width: 100%; border-radius: 10px; overflow: hidden; position: relative; z-index: 0; } .hero--8 .hero__box__wrapper { display: flex; flex-wrap: wrap; gap: 20px 30px; max-width: 786px; width: 100%; position: absolute; left: 90px; bottom: 60px; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--8 .hero__box__wrapper { left: 54px; bottom: 54px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--8 .hero__box__wrapper { position: relative; left: 0; bottom: 0; flex-direction: column-reverse; padding: 40px 0 50px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--8 .hero__box__wrapper { padding: 40px 0 34px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--8 .hero__box__wrapper { position: relative; left: 0; bottom: 0; padding: 30px 0 55px; flex-wrap: nowrap; } } @media (max-width: 575px) { .hero--8 .hero__box__wrapper { padding: 20px 0 25px; gap: 15px 30px; } } .hero--8 .hero__box--video { max-width: 372px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--8 .hero__box--video { max-width: 384px; } } .hero--8 .hero__box--video img { height: 100%; width: 100%; object-fit: cover; } .hero--8 .hero__box--video .tj-btn--popup { width: 49px; height: 49px; background-color: var(--tj-color-common-white); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border: 0; } .hero--8 .hero__box--video .tj-btn--popup i { font-size: 12px; color: var(--tj-color-theme-dark); } .hero--8 .hero__box--text { padding: 30px 30px 37px; max-width: 384px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); } .hero--8 .hero__desc { color: var(--tj-color-common-white); font-size: var(--tj-fs-h5); font-weight: var(--tj-fw-medium); margin-bottom: 24px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--8 .hero__desc { font-size: 18px; } } .hero--8 .hero__banner { position: absolute; right: 30px; bottom: 30px; width: 607px; z-index: 0; } .hero--8 .hero__banner img { border-radius: 16px; } .hero--8 .hero__banner__heart { position: absolute; right: -27px; top: 43px; left: -33px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero--8 .hero__banner { width: 502px; height: 759px; } .hero--8 .hero__banner__heart { top: 85px; } .hero--8 .hero__banner img { height: 100%; object-fit: cover; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--8 .hero__banner { margin-top: -10px; position: relative; right: auto; top: auto; bottom: auto; width: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--8 .hero__banner__heart { top: 26px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--8 .hero__banner { max-width: 100%; margin-inline-start: auto; margin-top: 0; } .hero--8 .hero__banner > img { width: 100%; } .hero--8 .hero__banner__heart { right: 98px; top: 120px; left: -14px; } } @media (max-width: 575px) { .hero--8 .hero__banner__heart { right: -14px; top: 24px; left: -11px; } } .hero--8 .hero__ring { position: absolute; z-index: 0; top: 30%; left: -50px; } .hero--8 .hero__ring--2 { width: 73px; top: auto; bottom: -40px; left: 55%; } .hero--8 .hero__ring--2 img { transform: scaleX(-1); } /* !END: Hero CSS */ /**---------------------------------------- START: Feature CSS ----------------------------------------*/ .quick__action { font-size: 16px; line-height: 1.375; letter-spacing: 0em; font-weight: var(--tj-fw-sbold); color: var(--tj-color-text-body); text-align: center; margin-top: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .quick__action { margin-top: 35px; } } .quick__action__btn { margin-bottom: 0; font-size: 16px; line-height: 1; font-weight: var(--tj-fw-sbold); padding: 6px 10px; border-radius: 48px; background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); display: inline-block; } .quick__action a { display: inline-block; color: var(--tj-color-theme-dark); display: inline; background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 calc(100% - 3px); background-repeat: no-repeat; background-size: 0 1px; } .quick__action a:hover { background-size: 100% 1px; } /* !END: Feature CSS */ /**---------------------------------------- START: Abour CSS ----------------------------------------*/ .about--8 .section-heading__sub-title { margin-top: 10px; padding: 0; background-color: transparent; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--8 .section-heading__sub-title { margin-top: 0; } } .about--8 .section-heading__title .line { background-image: linear-gradient(90deg, var(--tj-color-common-white) var(--highlight-offset), rgba(255, 255, 255, 0.35) var(--highlight-offset)); } .about--8 .tj-btn:hover { border-color: var(--tj-color-common-white); color: var(--tj-color-common-white); } .about--8 .tj-btn:hover i { color: var(--tj-color-theme-dark); } .about--8 .tj-btn:hover::after { background-color: var(--tj-color-common-white); } .about--8 .about__content { max-width: 870px; margin-left: auto; padding-left: 0; } .about--8 .about__action { margin-top: 30px; } @media (max-width: 575px) { .about--8 .about__action { flex-wrap: wrap; } } .about__box { width: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); border-radius: 10px; overflow: hidden; } .about__box__wrapper { display: flex; gap: 30px; margin-top: 100px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .about__box__wrapper { gap: 15px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__box__wrapper { gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__box__wrapper { flex-wrap: wrap; margin-top: 10px; } } .about__box__title { color: var(--tj-color-common-white); padding-left: 7px; position: relative; z-index: 2; } .about__box--1, .about__box--2 { display: flex; flex-direction: column; justify-content: space-between; min-height: 340px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__box--1, .about__box--2 { min-height: 374px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .about__box--1, .about__box--2 { min-height: 405px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__box--1, .about__box--2 { min-height: 380px; } } .about__box--1 { padding: 30px 23px 23px; } .about__box--2 { padding: 30px 0 0; } .about__box--2 .about__box__title { padding-inline-start: 30px; padding-inline-end: 23px; } .about__box--2 img { margin-top: 41px; } .about__capsule { display: inline-flex; padding: 21px 20px; border: 1px solid var(--tj-color-border-9); border-radius: 59px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-medium); line-height: 0; transition: none; box-sizing: content-box; pointer-events: none; } .about__capsule__wrapper { position: relative; pointer-events: none; height: 100%; } .about__capsule__wrapper__box { pointer-events: none; margin-top: -50px; height: 300px; } .about__capsule__wrapper > * { position: absolute; display: inline-block; margin-bottom: 0; left: 0; top: 0; user-select: none; pointer-events: auto; transition: none; opacity: 0; z-index: 1; } .about__capsule--2 { background-color: var(--tj-color-theme-secondary); border: 0; } .about__capsule--img { padding: 0; border: 0; border-radius: 0; } /* !END: About CSS */ /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .testimonials__item--2 { background-color: transparent; padding: 28px 30px 38px; border: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__item--2 { padding: 30px; } } @media (max-width: 575px) { .testimonials__item--2 { padding: 24px 20px 28px; } } .testimonials__item--2 .testimonials__rating { display: inline-flex; } .testimonials__item--2 .testimonials__desc { font-size: 20px; color: var(--tj-color-common-white); border-bottom-style: dashed; padding-bottom: 20px; margin-bottom: 27px; border-bottom-color: var(--tj-color-border-9); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .testimonials__item--2 .testimonials__desc { font-size: 18px; } .testimonials__item--2 .testimonials__desc__rating { margin-bottom: 20px; } } @media (max-width: 575px) { .testimonials__item--2 .testimonials__desc { font-size: 16px; } } .testimonials__item--2 .testimonials__author__name { color: var(--tj-color-common-white); } .testimonials__item--2 .testimonials__author__desig { color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .testimonials__item--2 .testimonials__desc { font-size: 18px; } .testimonials__item--2 .testimonials__rating { margin-bottom: 16px; } } @media (max-width: 575px) { .testimonials__item--2 .testimonials__desc { font-size: 16px; } .testimonials__item--2 .testimonials__rating { margin-bottom: 18px; } } .testimonials__3 { border-start-start-radius: 0; border-start-end-radius: 0; overflow: hidden; } .testimonials__wrapper--4 .testimonials__slider__item { background-color: var(--tj-color-common-white); border: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials__wrapper--4 .testimonials__slider__item { padding: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper--4 .testimonials__slider__item { padding: 35px 20px; } } .testimonials__wrapper--4 .testimonials__rating { margin-bottom: 24px; } .testimonials__wrapper--4 .testimonials__desc { margin-bottom: 30px; font-size: 22px; line-height: 1.455; letter-spacing: 0em; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__wrapper--4 .testimonials__desc { font-size: 18px; padding-bottom: 24px; } } .testimonials__wrapper--4 .testimonials__author { margin-bottom: 0; } .testimonials__wrapper--4 .testimonials__qoute__2 i { transform: scale(-1); display: inline-block; font-size: 44px; color: var(--tj-color-theme-secondary); } /* !END: Testimonials CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 1024px) { .service--5 .section-heading--2 .section-heading__left { max-width: 482px; } } .service__card--4 { background: var(--tj-color-theme-bg1); padding: 35px 30px 45px; border: 0; border-radius: 10px; } .service__card--4::after { display: none; } .service__card--4 .service__icon { background-color: var(--tj-color-theme-secondary); border: 0; border-radius: 10px; margin-bottom: 36px; } .service__card--4 .service__icon i { color: var(--tj-color-common-white); } .service__card--4 .service__title { margin-bottom: 16px; color: var(--tj-color-heading-primary); } .service__card--4 .service__desc { margin-bottom: 0; } .service__card--4 .tj-btn-2 { margin-top: 20px; color: var(--tj-color-heading-primary); } .service__card--4 .tj-btn-2 i { color: var(--tj-color-heading-primary); } .service__card--4:hover { background: var(--tj-color-theme-bg2); } .service__card--4:hover .service__icon { background-color: var(--tj-color-theme-primary); } .service__card--4:hover .service__title { color: var(--tj-color-heading-primary); } .service__card--4:hover .service__desc { color: var(--tj-color-text-body); } .service__card--4:hover .tj-btn-2 { color: var(--tj-color-heading-primary); } .service__card--4:hover .tj-btn-2 i { color: var(--tj-color-heading-primary); } .service__wrapper__3 { display: flex; flex-direction: column; gap: 30px; } .service__wrapper__3 .service__card { display: flex; align-items: center; justify-content: space-between; padding: 30px; background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; background: var(--tj-color-theme-bg1); border: 3px solid var(--tj-color-common-white); border-radius: 24px; transition: none; transform-origin: top; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card { flex-direction: column-reverse; gap: 30px; } } @media (max-width: 575px) { .service__wrapper__3 .service__card { padding: 30px 20px 20px; } } .service__wrapper__3 .service__card::after { display: none; } .service__wrapper__3 .service__card:hover .service__title a { color: var(--tj-color-theme-primary); } .service__wrapper__3 .service__card:hover .service__desc { color: var(--tj-color-text-body); } .service__wrapper__3 .service__card .service__banner { position: relative; z-index: 1; border-radius: 10px; overflow: hidden; width: 43%; position: relative; z-index: 0; } .service__wrapper__3 .service__card .service__banner a { width: 100%; height: 100%; } .service__wrapper__3 .service__card .service__banner img { height: 100%; width: 100%; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__3 .service__card .service__banner { height: 361px; width: 50%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__banner { width: 100%; } } .service__wrapper__3 .service__card .service__chart { max-width: 244px; width: 100%; position: absolute; left: 30px; bottom: 60px; border-radius: 12px; overflow: hidden; box-shadow: var(--tj-shadow-theme-primary); z-index: 1; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__3 .service__card .service__chart { max-width: 200px; left: 20px; bottom: 40px; } } @media (max-width: 575px) { .service__wrapper__3 .service__card .service__chart { max-width: 150px; left: 15px; bottom: 40px; } } .service__wrapper__3 .service__card .service__content { width: calc(57% - 95px); transition: all var(--tj-td-standard) ease-in-out 0s; display: flex; align-items: flex-start; flex-direction: column; justify-content: flex-end; flex-shrink: 0; overflow: hidden; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service__wrapper__3 .service__card .service__content { width: calc(57% - 50px); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__3 .service__card .service__content { width: calc(50% - 30px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__content { width: 100%; } } .service__wrapper__3 .service__card .service__index { position: absolute; right: 24px; top: 15px; font-size: 107px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); font-style: Bold; line-height: 1; letter-spacing: -0.025em; margin: 0; color: var(--tj-color-common-black); transition: none; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service__wrapper__3 .service__card .service__index { font-size: 80px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__3 .service__card .service__index { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__index { top: 23px; font-size: 50px; } } .service__wrapper__3 .service__card .service__icon { border: 0; background-color: var(--tj-color-theme-secondary); margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__icon { margin-bottom: 14px; } } .service__wrapper__3 .service__card .service__icon i { color: var(--tj-color-common-white); } .service__wrapper__3 .service__card .service__title { margin-bottom: 20px; max-width: 333px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__title { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__title { margin-bottom: 12px; } } .service__wrapper__3 .service__card .service__desc { margin-bottom: 24px; max-width: 335px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__3 .service__card .service__desc { margin-bottom: 14px; } } .service__wrapper__3 .service__card .tj-btn { width: auto; } /* !END: Service CSS */ /**---------------------------------------- START: Portfolio CSS ----------------------------------------*/ .portfolio--7 { padding-bottom: 148px; margin-bottom: 29px; position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio--7 { padding-bottom: 128px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio--7 { padding-bottom: 108px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio--7 { padding-bottom: 88px; } } .portfolio--7 .section-heading__sub-title { padding: 0; background-color: transparent; } .portfolio--7 .section-heading__title { color: var(--tj-color-common-white); } .portfolio--7 .portfolio__more { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); padding: 8px; background-color: var(--tj-color-common-white); border-radius: 70px; } .portfolio__wrapper__2 { display: flex; gap: 30px; padding: 0 15px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper__2 { gap: 20px 15px; padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper__2 { flex-wrap: wrap; } } .portfolio__wrapper__2 .portfolio__single { padding: 30px; background: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); max-width: 475px; width: 100%; transition: all var(--tj-td-standard) ease-in-out 0s; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper__2 .portfolio__single { padding: 15px 15px 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper__2 .portfolio__single { max-width: 100%; } } .portfolio__wrapper__2 .portfolio__single:hover .portfolio__single__img img { transform: scale(1); } .portfolio__wrapper__2 .portfolio__single__img { height: 385px; width: 100%; border-radius: 16px; overflow: hidden; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper__2 .portfolio__single__img { height: 350px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__wrapper__2 .portfolio__single__img { border-radius: 12px; height: 300px; } } @media (max-width: 575px) { .portfolio__wrapper__2 .portfolio__single__img { height: 250px; border-radius: 12px; } } .portfolio__wrapper__2 .portfolio__single__img a { height: 100%; width: 100%; } .portfolio__wrapper__2 .portfolio__single__img img { width: 100.3%; max-width: 100.3%; height: 100%; object-fit: cover; } .portfolio__wrapper__2 .portfolio__single__content { position: static; transform: none; opacity: 1; visibility: visible; padding: 0; padding-top: 20px; display: flex; gap: 10px; justify-content: space-between; align-items: flex-end; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper__2 .portfolio__single__content { padding: 0; padding-top: 20px; } } @media (max-width: 575px) { .portfolio__wrapper__2 .portfolio__single__content { flex-wrap: wrap; justify-content: space-between; } } .portfolio__wrapper__2 .portfolio__single__tag { border-radius: 50px; border-color: var(--tj-color-border-4); color: var(--tj-color-common-white); font-size: 14px; } .portfolio__wrapper__2 .portfolio__single__tag:hover { transform: translateY(-2px); } .portfolio__wrapper__2 .portfolio__single__title { color: var(--tj-color-common-white); max-width: 350px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper__2 .portfolio__single__title { font-size: 24px; } } .portfolio__wrapper__2 .portfolio__single::after { display: none; } .portfolio__wrapper__2 .portfolio__single__action { margin-bottom: 10px; } .portfolio__wrapper__2 .portfolio__single__action a { visibility: visible; position: static; transform: none; border: 0; background: var(--tj-color-theme-primary); transform: rotate(-45deg) scale(0.4); opacity: 0; } .portfolio__wrapper__2 .portfolio__single__action a i { color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper__2 .portfolio__single__action a { width: 60px; height: 60px; } .portfolio__wrapper__2 .portfolio__single__action a i { font-size: 16px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__wrapper__2 .portfolio__single__action a { opacity: 1; transform: rotate(-45deg) scale(1); } } .portfolio__wrapper__2 .portfolio__single:hover, .portfolio__wrapper__2 .portfolio__single.active { max-width: 790px; } .portfolio__wrapper__2 .portfolio__single:hover .portfolio__single__action a, .portfolio__wrapper__2 .portfolio__single.active .portfolio__single__action a { background: var(--tj-color-theme-primary); transform: rotate(-45deg) scale(1); opacity: 1; } .portfolio__wrapper__2 .portfolio__single:hover .portfolio__single__action a i, .portfolio__wrapper__2 .portfolio__single.active .portfolio__single__action a i { color: var(--tj-color-common-white); } /* !END: Portfolio CSS */ /**---------------------------------------- START: Team CSS ----------------------------------------*/ .team--2 .section-heading { max-width: 420px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team--2 .section-heading { max-width: 100%; } } .team--2 .section-heading__sub-title { padding: 0; background-color: transparent; color: var(--tj-color-theme-primary); } .team--2 .section-heading__sub-title::before { background-color: var(--tj-color-theme-primary); } .team--2 .section-heading__title { color: var(--tj-color-heading-primary); } .team__wrapper { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__wrapper { gap: 20px; } } .team__wrapper .team__socials { border-radius: 50%; } .team__wrapper .team__socials .tj-socials--sm ul { gap: 6px; } .team__wrapper .team__socials .tj-socials--sm ul li a { width: 30px; height: 30px; } .team__wrapper .team__socials .tj-socials--sm ul li a i { font-size: 16px; } .team__wrapper .team__single { width: 100%; background-repeat: no-repeat; background-size: cover; background-position: center; display: flex; flex-direction: column; align-items: center; padding: 40px 30px; text-align: center; border-radius: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__wrapper .team__single { padding: 30px 30px; } } @media (max-width: 575px) { .team__wrapper .team__single { width: 100%; padding-top: 35px; } } .team__wrapper .team__single__img { width: 308px; height: 308px; border-radius: 50%; overflow: hidden; border: 7px solid var(--tj-color-common-white); transition: all 0.3s; } .team__wrapper .team__single__img img { border-radius: 50%; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__wrapper .team__single__img { width: 240px; height: 240px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__wrapper .team__single__img { width: 200px; height: 200px; } } .team__wrapper .team__single__title { font-size: var(--tj-fs-h4); } .team__wrapper .team__single__title a { color: var(--tj-color-heading-primary); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .team__wrapper .team__single__title { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__wrapper .team__single__title { font-size: 20px; } } .team__wrapper .team__single__title:hover a { color: var(--tj-color-theme-primary); } .team__wrapper .team__single__desig { color: var(--tj-color-theme-dark3); } .team__wrapper .team__single:hover .team__single__img { border-color: transparent; } /* !END: Team CSS */ /**---------------------------------------- START: Theme Marquee CSS ----------------------------------------*/ .tj__marquee--2 { position: relative; overflow: hidden; border-start-start-radius: 16px; border-start-end-radius: 16px; } /** !END: Theme Marquee CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .blog__single__wrapper__2--2 { grid-template-columns: 100%; } .blog__single__wrapper__2--2 .blog__single { width: 100%; flex-direction: row-reverse; justify-content: space-between; transition: all var(--tj-td-standard) ease-in-out 0s; } .blog__single__wrapper__2--2 .blog__single__banner { max-width: 307px; height: 236px; } .blog__single__wrapper__2--2 .blog__single__content { padding-inline-start: 0; padding-inline-end: 0; margin-inline-start: 105px; max-width: 532px; width: 100%; justify-content: center; align-items: start; } .blog__single__wrapper__2--2 .blog__single__content .tj-btn-2 i { font-size: 16px; } .blog__single__wrapper__2--2 .blog__single__content__tag { padding: 3px 7px; background-color: var(--tj-color-theme-dark); color: var(--tj-color-common-white); font-size: 16px; border-radius: 6px; } .blog__single__wrapper__2--2 .blog__single__content__tag:hover { background-color: var(--tj-color-theme-secondary); color: var(--tj-color-common-white); } .blog__single__wrapper__2--2 .blog__single__content__list { margin-bottom: 15px; } .blog__single__wrapper__2--2 .blog__single__title { margin-bottom: 18px; } .blog__single__wrapper__2--2 .blog__single__title a { display: inline; background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 calc(100% - 3px); background-repeat: no-repeat; background-size: 0 1px; } .blog__single__wrapper__2--2 .blog__single__title:hover a { color: var(--tj-color-heading-primary); background-size: 100% 1px; } .blog__single__wrapper__2--2 .blog__single__date { position: relative; height: 90px; background-color: var(--tj-color-common-white); border-radius: 7px; flex-shrink: 0; } .blog__single__wrapper__2--2 .blog__single__date__day { padding: 13px 0 15px; } .blog__single__wrapper__2--2 .blog__single__date__month { padding: 8px 0 4px; color: var(--tj-color-theme-dark); } .blog__single__wrapper__2--2 .blog__single:hover { background-color: var(--tj-color-theme-bg2); } .blog__single__wrapper__2--2 .blog__single:hover .blog__single__date__day { background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .blog__single__wrapper__2--2 .blog__single__content { margin-inline-start: 30px; max-width: 368px; } .blog__single__wrapper__2--2 .blog__single__date { height: 80px; } .blog__single__wrapper__2--2 .blog__single__date__month { padding-top: 6px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2--2 .blog__single__content { margin-inline-start: 15px; max-width: 302px; padding: 0; } .blog__single__wrapper__2--2 .blog__single__date { position: absolute; left: auto; right: 30px; top: 30px; height: 80px; } .blog__single__wrapper__2--2 .blog__single__date__month { padding-top: 6px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__2--2 .blog__single { flex-direction: column; } .blog__single__wrapper__2--2 .blog__single__banner { max-width: 100%; } .blog__single__wrapper__2--2 .blog__single__content { margin-inline-start: 0; max-width: 100%; padding: 20px 5px 15px; } } /* !END: Blog CSS */ /**---------------------------------------- START: Header CSS ----------------------------------------*/ .header--8 .header__wrapper { justify-content: space-between; padding: 0 20px; } .header--8 .header__wrapper > div:last-child { margin-left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--8 .header__wrapper { padding: 0 15px; } } .header--8 .header__logo { width: 133px; } .header--8.header .header__right .header__mobile-toggler { border-radius: 100%; } .header--8.header .header__right .tj-btn__text { padding: 15px 30px; } .header--8.header .header__right .tj-btn__icon { width: 46px; height: 46px; } .header--8.header .header__right .tj-btn > :nth-child(1) { margin-inline-end: -46px; } .header--8.header .header__right .tj-btn:hover > :nth-child(1) { margin-inline-end: 0; } .header--8.header .header__right .tj-btn:hover > :nth-child(3) { margin-inline-start: -46px; } .header--8.header--absolute { margin-top: 30px; border-radius: 0; background-color: transparent; box-shadow: none; max-width: calc(100% - 60px); left: 30px; right: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--8.header--absolute { max-width: calc(100% - 30px); left: 15px; right: 15px; margin: 0; } } .header--8.header--absolute::after { content: ""; width: 100%; height: auto; position: absolute; bottom: -24px; left: 0; border-bottom: 1px solid var(--tj-color-border-4); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--8.header--absolute::after { bottom: -10px; } } @media (max-width: 575px) { .header--8.header--absolute::after { bottom: -5px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--8.header--absolute { margin-top: 10px; } } @media (max-width: 575px) { .header--8.header--absolute { margin-top: 0; } } .header--8.header--absolute .header__logo { padding: 0; } .header--8.header--absolute .header__wrapper { padding: 0; } .header--8.header--absolute .mainmenu ul { gap: 0; } .header--8.header--absolute .mainmenu nav > ul > li > a { padding: 10px 20px; color: var(--tj-color-common-white); } .header--8.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after { color: var(--tj-color-common-white); } .header--8.header--absolute .mainmenu nav > ul > li .sub-menu { border-radius: 12px; } .header--8.header--absolute .header__right .header__mobile-toggler { border-color: var(--tj-color-border-4); background-color: transparent; } .header--8.header--absolute .header__right .header__mobile-toggler span { background-color: var(--tj-color-common-white); } .header--8.header-duplicate { top: -120px; left: 30px; right: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--8.header-duplicate { left: 15px; right: 15px; margin: 0; } } .header--8.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--8.header-duplicate.sticky { margin: 0; } } .header--8.header-duplicate .header__wrapper { padding-left: 20px; padding-right: 20px; } @media (max-width: 575px) { .header--8.header-duplicate .header__wrapper { padding-left: 15px; padding-right: 15px; } } /* !END: Header CSS */ /**---------------------------------------- START: Footer CSS ----------------------------------------*/ .footer-8 .tj-socials ul li { line-height: 1; } .footer-8 .tj-socials ul li a { opacity: 0.35; line-height: 1; } .footer-8 .tj-socials ul li a i { color: var(--tj-color-common-white); position: relative; } .footer-8 .tj-socials ul li a i::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; background-color: var(--tj-color-theme-dark); border-radius: 100%; z-index: -1; opacity: 0; } .footer-8 .tj-socials ul li a:hover { opacity: 1; } .footer-8 .tj-socials ul li a:hover i::after { opacity: 1; } .footer-8 .subscribe-form input[type=email] { background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); outline: 0; border: 1px solid var(--tj-color-border-5); color: var(--tj-color-common-white); } .footer-8 .subscribe-form input[type=email]::-webkit-input-placeholder { color: var(--tj-color-common-white4); } .footer-8 .subscribe-form input[type=email]:-moz-placeholder { color: var(--tj-color-common-white4); } .footer-8 .subscribe-form input[type=email]::-moz-placeholder { color: var(--tj-color-common-white4); } .footer-8 .subscribe-form input[type=email]:-ms-input-placeholder { color: var(--tj-color-common-white4); } .footer-8 .subscribe-form input[type=email]::placeholder { color: var(--tj-color-common-white4); } .footer-8 .subscribe-form button::before { height: 100%; border-color: var(--tj-color-border-5); } .footer-8 .subscribe-form input[type=checkbox]::before { color: var(--tj-color-theme-dark); } .footer-8 .subscribe-form input[type=checkbox]:checked { background-color: var(--tj-color-common-white); border-color: var(--tj-color-common-white); } .footer-8 .subscribe-form label { color: var(--tj-color-common-white4); } .footer-8 .subscribe-form label a:not(:hover) { color: var(--tj-color-common-white4); } /* !END: Footer CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .hero--9 { position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; background-color: var(--tj-color-theme-dark); z-index: 0; margin-bottom: 30px; } .hero--9 .hero__inner { padding-top: 200px; padding-bottom: 80px; overflow: visible; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--9 .hero__inner { min-height: 710px; padding-top: 180px; padding-bottom: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--9 .hero__inner { min-height: 680px; padding-top: 150px; padding-bottom: 60px; } } @media (max-width: 575px) { .hero--9 .hero__inner { min-height: 670px; padding-top: 120px; padding-bottom: 40px; } } .hero--9 .hero__content { max-width: 1080px; width: 100%; margin-inline-start: 145px; } .hero--9 .hero__content .tj-btn--3 { margin-inline-start: 355px; } .hero--9 .hero__content .tj-btn--3 .tj-btn__icon { background-color: transparent; border: 1px solid var(--tj-color-common-white); } .hero--9 .hero__content .tj-btn--3 .tj-btn__text { background-color: transparent; border: 1px solid var(--tj-color-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--9 .hero__content .tj-btn--3 { margin-inline-start: 270px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--9 .hero__content .tj-btn--3 { margin-inline-start: 245px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--9 .hero__content .tj-btn--3 { margin-inline-start: 195px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--9 .hero__content .tj-btn--3 { margin-inline-start: 160px; } } @media (max-width: 575px) { .hero--9 .hero__content .tj-btn--3 { margin-inline-start: 0; margin-top: 10px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--9 .hero__content { max-width: 910px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--9 .hero__content { margin-inline-start: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--9 .hero__content { padding-inline-start: 110px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--9 .hero__content { padding-inline-start: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--9 .hero__content { padding-inline-start: 0; } } .hero--9 .hero__title { font-size: 144px; font-weight: var(--tj-fw-sbold); line-height: 0.972; letter-spacing: -0.025em; color: var(--tj-color-common-white); position: relative; } .hero--9 .hero__title span { color: inherit; padding-inline-start: 355px; } .hero--9 .hero__title span:not(.circle):has(img) { display: inline-block; margin-right: 6px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--9 .hero__title { max-width: 100%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--9 .hero__title { font-size: 110px; } .hero--9 .hero__title span { padding-inline-start: 270px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--9 .hero__title { font-size: 100px; } .hero--9 .hero__title span { padding-inline-start: 245px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--9 .hero__title { font-size: 80px; } .hero--9 .hero__title span { padding-inline-start: 195px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--9 .hero__title { font-size: 66px; } .hero--9 .hero__title span { padding-inline-start: 160px; } } @media (max-width: 575px) { .hero--9 .hero__title { font-size: 44px; line-height: 1.15; } .hero--9 .hero__title span { padding-inline-start: 110px; } } .hero--9 .hero__title .circle-wrap { position: absolute; width: 120px; height: 120px; top: calc(50% + 5px); inset-inline-start: 230px; transform: translateY(-50%); z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .hero--9 .hero__title .circle-wrap .rotate-image { position: absolute; inset-inline-start: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); margin: 0; animation: rotateImg 12s infinite linear; } .hero--9 .hero__title .circle-wrap .rotate-image textPath { fill: var(--tj-color-common-white); } .hero--9 .hero__title .circle-wrap .circle { display: inline-flex; align-items: center; justify-content: center; width: 75px; height: 75px; font-size: 15px; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); border-radius: 50%; text-decoration: none; line-height: 1; z-index: 5; padding: 0; } .hero--9 .hero__title .circle-wrap:hover .circle { transform: scale(0.9); } .hero--9 .hero__title .circle-wrap:hover .rotate-image { animation-play-state: paused; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--9 .hero__title .circle-wrap { width: 100px; height: 100px; inset-inline-start: 160px; } .hero--9 .hero__title .circle-wrap .circle { width: 60px; height: 60px; font-size: 13px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--9 .hero__title .circle-wrap { inset-inline-start: 130px; top: calc(50% + 10px); } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--9 .hero__title .circle-wrap { inset-inline-start: 95px; top: calc(50% + 15px); width: 90px; height: 90px; } .hero--9 .hero__title .circle-wrap .circle { width: 54px; height: 54px; font-size: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--9 .hero__title .circle-wrap { inset-inline-start: 60px; top: calc(50% + 20px); } } @media (max-width: 575px) { .hero--9 .hero__title .circle-wrap { inset-inline-start: 0; top: 10px; transform: translate(0); } } .hero--9 .hero__desc { color: var(--tj-color-common-white); font-size: var(--tj-fs-h5); font-weight: var(--tj-fw-medium); margin-bottom: 24px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--9 .hero__desc { font-size: 18px; } } .hero--9 .hero__bottom { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 40px; margin-top: -116px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--9 .hero__bottom { margin-top: -80px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--9 .hero__bottom { margin-top: -50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--9 .hero__bottom { flex-direction: column-reverse; align-items: start; margin-top: 40px; } } .hero--9 .hero__banner { max-width: 263px; width: 100%; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--9 .hero__banner { max-width: 240px; } } .hero--9 .hero__tags { max-width: 350px; width: 100%; display: flex; flex-wrap: wrap; } .hero--9 .hero__tags a { color: var(--tj-color-common-white); font-size: 16px; font-weight: var(--tj-fw-medium); line-height: 1; padding: 13px 20px; border-radius: 50px; border: 1px solid var(--tj-color-border-9); display: inline-flex; } .hero--9 .hero__tags a:hover { background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); } @keyframes rotateImg { 0% { transform: translate(-50%, -50%) rotate(0deg); } 100% { transform: translate(-50%, -50%) rotate(360deg); } } /* !END: Hero CSS */ /**---------------------------------------- START: Funfact CSS ----------------------------------------*/ .features__single { display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__single { gap: 20px; } } .features__single .funfact-item { background-color: var(--tj-color-theme-bg2); padding: 38px 30px 47px 30px; border-radius: 10px; } .features__single .funfact-item .number { font-size: 86px; font-weight: var(--tj-fw-bold); font-family: var(--tj-ff-heading); color: var(--tj-color-heading-primary); display: flex; align-items: center; line-height: 0.8; } .features__single .funfact-item .number .odometer.odometer-auto-theme { line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__single .funfact-item .number { font-size: 76px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .features__single .funfact-item .number { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__single .funfact-item .number { font-size: 50px; } } .features__single .funfact-item .text { margin-top: 6px; margin-bottom: 22px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .features__single .funfact-item { padding: 22px 30px 40px 30px; } } @media (max-width: 575px) { .features__single .funfact-item { padding: 25px 20px 40px 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__single .tj-u-shape { left: 50%; top: 100%; transform: translateX(-50%) translateY(-15px) rotate(90deg); } } .features__single > .tj-u-shape { background: var(--tj-color-theme-bg2); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__single > .tj-u-shape { left: 50%; top: 100%; transform: translateX(-50%) translateY(-15px) rotate(90deg); } } .features-item-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 30px; height: 100%; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features-item-wrap { gap: 20px; } } .features-item-wrap .service__card--3 { flex: 1; background: var(--tj-color-theme-bg1); border-radius: 10px; padding: 35px 30px 43px; } .features-item-wrap .service__card--3 .service__icon { margin-bottom: 38px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .features-item-wrap .service__card--3 .service__icon { margin-bottom: 25px; width: 70px; height: 70px; font-size: 46px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features-item-wrap .service__card--3 .service__title { font-size: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .features-item-wrap .service__card--3 { padding: 35px 20px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features-item-wrap .service__card--3 { flex: 100%; } } .h8-feature-item-right { padding: 30px 30px 40px 30px; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 10px; } @media (max-width: 575px) { .h8-feature-item-right { padding: 28px 20px 35px 20px; } } .h8-feature-item-right .feature__content { max-width: 360px; width: 100%; min-height: 242px; display: flex; flex-direction: column; justify-content: space-between; } .h8-feature-item-right .feature__content .tj-btn--underline-2 { color: var(--tj-color-common-white); } .h8-feature-item-right .feature__content .tj-btn--underline-2::before { background-color: var(--tj-color-common-white); } .h8-feature-item-right .feature__content .tj-btn--underline-2 i { color: var(--tj-color-common-white); } .h8-feature-item-right .feature__title { color: var(--tj-color-common-white); margin-bottom: 18px; } .h8-feature-item-right .feature__desc { color: var(--tj-color-common-white2); } /* !END: Funfact CSS */ /**---------------------------------------- START: Abour CSS ----------------------------------------*/ .h8-about-img { border-radius: 16px; overflow: hidden; height: 100%; position: relative; } .h8-about-img img { width: 100%; height: 100%; object-fit: cover; } .h8-about-img .h8-about-marquee { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); } .h8-about-marquee .service-marquee__item .service-marquee__title { font-family: var(--tj-ff-body); color: transparent; -webkit-text-stroke: 1px var(--tj-color-common-white); opacity: 1; margin-bottom: 16px; } .h8-about-marquee .service-marquee__item .service-marquee__img { width: 56px; animation: rotateImg2 6s infinite linear; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h8-about-marquee .service-marquee__item .service-marquee__img { width: 48px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-about-marquee .service-marquee__item .service-marquee__img { width: 38px; } } .h8-about-area { background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 16px; padding: 120px 60px; } .h8-about-area .about__content { max-width: 570px; padding-left: 0; margin-bottom: 0; } .h8-about-area .about__desc { max-width: 510px; } .h8-about-area .about__action { margin-top: 22px; } @media (max-width: 575px) { .h8-about-area .about__action { flex-wrap: wrap; } } .h8-about-area .section-heading__title { margin-bottom: 14px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-about-area { padding: 100px 30px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .h8-about-area { padding: 80px 20px; margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-about-area { padding: 60px 15px; margin-bottom: 20px; } } .funfact-area.style-6 { margin-top: 60px; } .funfact-area.style-6 .funfact-item { background: var(--tj-color-common-white); border-radius: 8px; padding: 14px 20px 22px 20px; text-align: start; box-shadow: var(--tj-shadow-theme-primary); flex: 1; } .funfact-area.style-6 .funfact-item .number { color: var(--tj-color-heading-primary); justify-content: start; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-6 .funfact-item .number { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-6 .funfact-item .number { font-size: 40px; } } .funfact-area.style-6 .funfact-item .text { color: var(--tj-color-text-body); font-size: 18px; line-height: 1.556; margin-top: 8px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-6 .funfact-item .text { font-size: 16px; } } .funfact-area.style-6 .funfact-item::after { display: none; } @media (max-width: 575px) { .funfact-area.style-6 .funfact-item { flex: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-6 { margin-top: 40px; } } /* !END: About CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .h8-service .section-heading__right { display: inline-flex; gap: 10px; } .h8-service .section-heading__right .swiper-button-prev, .h8-service .section-heading__right .swiper-button-next { opacity: 1; visibility: visible; position: static; transform: none; margin: 0; } .service__slider__2 .service__card { background: var(--tj-color-theme-bg1); border-radius: 10px; border: 0; padding-top: 122px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__slider__2 .service__card { padding-top: 105px; } } .service__slider__2 .service__card::after { display: none; } .service__slider__2 .service__card .service__icon__wrap { background-color: var(--tj-color-common-white); border-radius: 0 0 10px 0; position: absolute; top: 0; left: 0; z-index: -1; padding: 0 15px 15px 0; } .service__slider__2 .service__card .service__icon__wrap::after, .service__slider__2 .service__card .service__icon__wrap::before { content: ""; position: absolute; background-color: transparent; top: 0px; right: -20px; width: 20px; height: 10px; box-shadow: 10px 0 0 0 var(--tj-color-common-white); border-radius: 0 10px 0 0; z-index: -1; transform: scaleX(-1); } .service__slider__2 .service__card .service__icon__wrap::after { top: auto; right: auto; bottom: -10px; left: 0; } .service__slider__2 .service__card .service__icon { font-size: 47px; background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); border-radius: 10px; margin-bottom: 0; } .service__slider__2 .service__card .service__icon i { color: var(--tj-color-common-white); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__slider__2 .service__card .service__icon { width: 70px; height: 70px; font-size: 44px; } } .service__slider__2 .service__card .sl__num { color: var(--tj-color-heading-primary); font-size: 14px; line-height: 1; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); opacity: 0.3; position: absolute; top: 30px; right: 30px; } .service__slider__2 .service__card .service__title { margin-bottom: 15px; overflow: hidden; } .service__slider__2 .service__card .service__title a span { text-shadow: 0 35px 0; } .service__slider__2 .service__card .service__title a:hover span { transform: translateY(-35px); } .service__slider__2 .service__card .service__desc { margin-bottom: 26px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__slider__2 .service__card .service__desc { margin-bottom: 15px; } } .service__slider__2 .service__card .tj-btn-2 { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; } .service__slider__2 .service__card .tj-btn-2 span { text-shadow: 0 22px 0; text-indent: -100px; } .service__slider__2 .service__card .tj-btn-2 i { color: inherit; font-size: 18px; } .service__slider__2 .service__card .tj-btn-2:hover span { transform: translateY(-22px); } .service__slider__2 .service__card:hover { background: var(--tj-color-theme-bg2); } .service__slider__2 .service__card:hover .service__icon { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .service__slider__2 .service__card:hover .tj-btn-2, .service__slider__2 .service__card:hover .service__title a, .service__slider__2 .service__card:hover .service__desc { color: inherit; } .service__slider__2 .service__card:hover .tj-btn-2 span { text-indent: 0; } .service__slider__2 .swiper-pagination-bullet { background-color: var(--tj-color-theme-dark); } .service__slider__2 .swiper-pagination-bullet:hover { opacity: 1; } /* !END: Service CSS */ /**---------------------------------------- START: Award CSS ----------------------------------------*/ .h8-award .award__banner img { border-radius: 10px; } .h8-award .award__content__list { gap: 0; padding-left: 0; } .h8-award .award__content__list__item { padding-top: 38px; padding-bottom: 38px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-award .award__content__list__item { padding-top: 25px; padding-bottom: 25px; } } .h8-award .award__content__list__item::before { background-color: var(--tj-color-theme-dark); opacity: 0.12; } .h8-award .award__content__list__item:first-child::after { content: ""; position: absolute; top: 0; right: 0; width: 100%; height: 1px; background-color: var(--tj-color-theme-dark); opacity: 0.12; } .h8-award .award__content__list__item:hover::before { opacity: 1; } .h8-award .award__content__list__item:hover .award__content__list__title { padding-left: 25px; } .h8-award .award__content__list__item:hover .award__content__list__icon { transform: rotate(-45deg) scale(1); } .h8-award .award__content__list__icon { font-size: 20px; color: var(--tj-color-theme-dark); transform: rotate(-45deg) scale(0); position: absolute; top: 2px; left: 0; } .h8-award .award__content__list__title { margin-bottom: 0; position: relative; gap: 20px; cursor: default; } .h8-award .award__content__list__title__year { font-size: 18px; } /* !END: Award CSS */ /**---------------------------------------- START: Portfolio CSS ----------------------------------------*/ .h8-portfolio .section-heading__title { margin-bottom: 25px; } .h8-portfolio-wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 60px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h8-portfolio-wrapper { gap: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-portfolio-wrapper { gap: 30px; } } .h8-portfolio-single.portfolio__single { max-width: 630px; width: 100%; padding: 30px; background-color: var(--tj-color-theme-bg1); border-radius: 14px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-portfolio-single.portfolio__single { max-width: 550px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-portfolio-single.portfolio__single { max-width: 490px; padding: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-portfolio-single.portfolio__single { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-portfolio-single.portfolio__single { padding: 15px 15px 20px 15px; } } .h8-portfolio-single.portfolio__single.portfolio-small { max-width: 475px; height: calc(100% - 120px); } .h8-portfolio-single.portfolio__single.portfolio-small .portfolio__single__img { height: 280px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h8-portfolio-single.portfolio__single.portfolio-small .portfolio__single__img { height: 400px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-portfolio-single.portfolio__single.portfolio-small { max-width: 420px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-portfolio-single.portfolio__single.portfolio-small { max-width: 380px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-portfolio-single.portfolio__single.portfolio-small { max-width: 100%; } } .h8-portfolio-single.portfolio__single::after { display: none; } .h8-portfolio-single.portfolio__single .portfolio__single__img { border-radius: 12px; overflow: hidden; position: relative; height: 400px; } .h8-portfolio-single.portfolio__single .portfolio__single__img img { width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-portfolio-single.portfolio__single .portfolio__single__img { height: 370px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-portfolio-single.portfolio__single .portfolio__single__img { height: 280px; } } .h8-portfolio-single.portfolio__single .portfolio__single__action a { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); background-color: var(--tj-color-common-white); } .h8-portfolio-single.portfolio__single .portfolio__single__action a i { color: var(--tj-color-theme-dark); } .h8-portfolio-single.portfolio__single .portfolio__single__action a:hover { background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); transform: translate(-50%, -50%) rotate(0deg) !important; } .h8-portfolio-single.portfolio__single .portfolio__single__action a:hover i { color: var(--tj-color-common-white); } .h8-portfolio-single.portfolio__single .portfolio__single__content { position: static; transform: none; opacity: 1; visibility: visible; padding: 0; padding-top: 20px; display: flex; gap: 10px; justify-content: space-between; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h8-portfolio-single.portfolio__single .portfolio__single__content { padding: 0; padding-top: 20px; } } @media (max-width: 575px) { .h8-portfolio-single.portfolio__single .portfolio__single__content { flex-wrap: wrap; justify-content: space-between; } } .h8-portfolio-single.portfolio__single .portfolio__single__tag { border-radius: 50px; border-color: var(--tj-color-theme-secondary); background: var(--tj-color-theme-secondary); color: var(--tj-color-common-white); font-size: 14px; } .h8-portfolio-single.portfolio__single .portfolio__single__tag:hover { border-color: var(--tj-color-theme-primary) !important; background: var(--tj-color-theme-primary); color: var(--tj-color-common-white) !important; } .h8-portfolio-single.portfolio__single .portfolio__single__title { color: var(--tj-color-heading-primary); max-width: 350px; margin-bottom: 0; } .h8-portfolio-single.portfolio__single .portfolio__single__title:hover a { letter-spacing: inherit; color: var(--tj-color-theme-primary); } /* !END: Portfolio CSS */ /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .h8-testimonials .section-heading__title { color: var(--tj-color-common-white); } .h8-testimonials-wrapper { position: relative; z-index: 0; margin-top: 50px; } .h8-testimonials-wrapper .testimonials__slider__8 { overflow: visible; } .h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-prev, .h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-next { left: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-prev, .h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-next { left: 125px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-prev, .h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-next { left: 98px; } } .h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-next, .h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-prev { right: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-next, .h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-prev { right: 125px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-testimonials-wrapper .testimonials__slider__8 .swiper-button-next, .h8-testimonials-wrapper .testimonials__slider__8 .swiper-rtl .swiper-button-prev { right: 98px; } } .h8-testimonials-wrapper .testimonials__slider__item { background: transparent; padding: 0; border: 0; opacity: 0.3; border-radius: 10px; } .h8-testimonials-wrapper .testimonials__inner { background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); padding: 45px; mask-image: url(../images/shape/test-bg-shape.svg); mask-repeat: no-repeat; mask-size: cover; mask-position: top center; border-radius: 10px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-testimonials-wrapper .testimonials__inner { padding: 40px 35px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .h8-testimonials-wrapper .testimonials__inner { padding: 40px 20px; } } @media (max-width: 575px) { .h8-testimonials-wrapper .testimonials__inner { padding: 25px 20px; } } .h8-testimonials-wrapper .testimonials__qoute { width: 98px; height: 98px; font-size: 50px; top: -50px; left: 50%; transform: translateX(-50%); color: var(--tj-color-common-white); background: linear-gradient(180deg, #f44454 0%, #054ce0 100%); border: 0; } .h8-testimonials-wrapper .testimonials__qoute i { transform: scale(-1); } .h8-testimonials-wrapper .testimonials__qoute::after { display: none; } .h8-testimonials-wrapper .testimonials__desc { font-size: 26px; line-height: 1.5; color: var(--tj-color-common-white4); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); letter-spacing: -0.02em; text-align: center; padding-top: 35px; padding-bottom: 40px; margin-bottom: 22px; border-color: var(--tj-color-border-4); max-width: 860px; margin-inline-start: auto; margin-inline-end: auto; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h8-testimonials-wrapper .testimonials__desc { font-size: 24px; padding-top: 30px; padding-bottom: 25px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .h8-testimonials-wrapper .testimonials__desc { font-size: 22px; padding-top: 25px; padding-bottom: 20px; } } @media (max-width: 575px) { .h8-testimonials-wrapper .testimonials__desc { font-size: 20px; padding-top: 25px; padding-bottom: 15px; } } .h8-testimonials-wrapper .testimonials__author { flex-direction: column; } .h8-testimonials-wrapper .testimonials__author__info { display: flex; align-items: center; gap: 4px; } .h8-testimonials-wrapper .testimonials__author__name { color: var(--tj-color-common-white); } .h8-testimonials-wrapper .testimonials__author__desig { color: var(--tj-color-common-white5); } .h8-testimonials-wrapper .testimonials__rating { margin-bottom: 0; } .h8-testimonials-wrapper .testimonials__rating .star-ratings { letter-spacing: -1px; } .h8-testimonials-wrapper .swiper-slide-active .testimonials__slider__item { opacity: 1; } .h8-testimonials-wrapper .swiper-pagination-bullet { background: var(--tj-color-common-white); } /* !END: Testimonials CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .h8-blog .section-heading__title { margin-bottom: 15px; } .blog__single__wrapper.h8-blog-wrapper { display: flex; flex-direction: column; gap: 30px; } .blog__single__wrapper.h8-blog-wrapper .blog__single { display: flex; align-items: center; padding: 15px; background-color: var(--tj-color-theme-bg1); border-radius: 12px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single { flex-direction: column; align-items: flex-start; } } .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner { max-width: 260px; width: 100%; height: 260px; margin: 0; border-radius: 10px; } .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner a { height: 100%; } .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner a img { height: 100%; object-fit: cover; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner { max-width: 100%; } } @media (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__banner { height: 220px; } } .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__content { background: transparent; padding: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__content { padding: 20px 0 10px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single .blog__single__title { font-size: 20px; } } .blog__single__wrapper.h8-blog-wrapper .blog__single__title { font-size: 32px; margin-bottom: 20px; } .blog__single__wrapper.h8-blog-wrapper .blog__single__title a { color: inherit; background-image: linear-gradient(to bottom, currentColor 0%, currentColor 100%); background-size: 0 2px; background-repeat: no-repeat; background-position: 0 92%; display: inline; } .blog__single__wrapper.h8-blog-wrapper .blog__single__title a:hover { background-size: 100% 2px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single__title a { background-size: 0 1px; background-position: 0 96%; } .blog__single__wrapper.h8-blog-wrapper .blog__single__title a:hover { background-size: 100% 1px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper.h8-blog-wrapper .blog__single__title { font-size: 24px; margin-bottom: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper.h8-blog-wrapper .blog__single__title { font-size: 20px; margin-bottom: 16px; } } .blog__single__wrapper.h8-blog-wrapper .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } .blog__single__wrapper.h8-blog-wrapper .blog__single__content__list li { position: relative; } .blog__single__wrapper.h8-blog-wrapper .blog__single__content__list li:not(:last-child)::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper.h8-blog-wrapper .blog__single__content__list { margin-bottom: 12px; } } .blog__single__wrapper.h8-blog-wrapper .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; font-size: 16px; line-height: 1; padding: 3px 8px 3px; color: var(--tj-color-common-white); background: var(--tj-color-theme-secondary); border: 1px solid var(--tj-color-theme-secondary); letter-spacing: 0; border-radius: 15px; } .blog__single__wrapper.h8-blog-wrapper .blog__single__content__tag:hover { border-color: var(--tj-color-theme-primary); background-color: var(--tj-color-theme-primary); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper.h8-blog-wrapper .blog__single__content__tag { font-size: 14px; } } .blog__single__wrapper.h8-blog-wrapper .blog__single__content__date { color: var(--tj-color-text-body); font-size: 14px; } /* !END: Blog CSS */ /**---------------------------------------- START: Header CSS ----------------------------------------*/ .header__mobile-toggler--2 { padding: 13px 13px; flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 3px; will-change: transform; transition-delay: 0.17s; } .header__mobile-toggler--2 span { width: 4px; height: 4px; border-radius: 50%; will-change: transform; transition-timing-function: linear; } .header__mobile-toggler--2 span:nth-child(2), .header__mobile-toggler--2 span:last-child { width: 4px; height: 4px; } .header__mobile-toggler--2 span:nth-child(2) { transition-delay: 0.03s; } .header__mobile-toggler--2 span:nth-child(3) { transition-delay: 0.05s; } .header__mobile-toggler--2 span:nth-child(4) { transition-delay: 0.07s; } .header__mobile-toggler--2 span:nth-child(5) { transition-delay: 0.09s; } .header__mobile-toggler--2 span:nth-child(6) { transition-delay: 0.11s; } .header__mobile-toggler--2 span:nth-child(7) { transition-delay: 0.13s; } .header__mobile-toggler--2 span:nth-child(8) { transition-delay: 0.15s; } .header__mobile-toggler--2 span:last-child { transition-delay: 0.17s; } .header__mobile-toggler--2:hover span:nth-child(odd) { opacity: 0; } .header__mobile-toggler--2:hover span:nth-child(5) { opacity: 1; } .header__mobile-toggler--2:hover span:nth-child(2), .header__mobile-toggler--2:hover span:last-child { width: 4px; height: 4px; } .header__mobile-toggler--2:has(.active) span:nth-child(odd) { opacity: 0; } .header__mobile-toggler--2:has(.active) span:nth-child(5) { opacity: 1; } .header__mobile-toggler--2:has(.active) span:nth-child(2), .header__mobile-toggler--2:has(.active) span:last-child { width: 4px; height: 4px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__mobile-toggler--2 { width: 46px; height: 46px; } } .header__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 40px; background-repeat: no-repeat; background-size: cover; background-position: center; padding: 14px 30px; border-end-start-radius: 12px; border-end-end-radius: 12px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__top { display: none; } } .header__top__list { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 31px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__top__list { justify-content: center; } } .header__top__list li { position: relative; line-height: 1; z-index: 0; } .header__top__list li::after { content: ""; position: absolute; top: 50%; right: -16px; transform: translateY(calc(-50% - 2px)); width: 1px; height: 15px; background-color: var(--tj-color-border-4); } .header__top__list li:last-child::after { display: none; } .header__top__list li a { font-family: var(--tj-ff-heading); font-size: 16px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; line-height: 1; color: var(--tj-color-common-white2); display: inline-flex; gap: 8px; } .header__top__list li a i { color: var(--tj-color-common-white); font-size: 17px; font-weight: normal; margin-top: 1px; } .header__top__list li a:hover { color: var(--tj-color-common-white); } .header__top__list li a:hover i { color: var(--tj-color-common-white); } @media (max-width: 575px) { .header__top__list li::after { display: none; } } .header__top__socials { display: flex; align-items: center; gap: 6px; } .header__top__socials__title { font-size: 16px; font-weight: var(--tj-fw-sbold); line-height: 1; color: var(--tj-color-common-white2); margin-bottom: 0; } .header__top__socials .tj-socials--sm ul { gap: 5px; } .header__top__socials .tj-socials--sm ul li { line-height: 1; } .header__top__socials .tj-socials--sm ul li a { line-height: 1; } .header__top__socials .tj-socials--sm ul li a i { font-size: 24px; color: var(--tj-color-common-white); position: relative; z-index: 0; } .header__top__socials .tj-socials--sm ul li a i::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; background-color: transparent; border-radius: 100%; z-index: -1; } .header__top__socials .tj-socials--sm ul li a:hover i { color: var(--tj-color-theme-secondary); } .header__top__socials .tj-socials--sm ul li a:hover i::after { background-color: var(--tj-color-common-white); } .header--9 .header__wrapper { justify-content: space-between; padding: 0 20px; } .header--9 .header__wrapper > div:last-child { margin-left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--9 .header__wrapper { padding: 0 15px; } } .header--9 .header__logo { width: 133px; } .header--9.header .header__right .header__mobile-toggler { border-radius: 100%; } .header--9.header .header__right .tj-btn { padding: 14px 30px; border-radius: 58px; } .header--9.header .header__right .tj-btn::after { border-radius: 58px; } .header--9.header .header__right .tj-btn .tj-btn__text { overflow: hidden; } .header--9.header .header__right .tj-btn .tj-btn__text span { text-shadow: 0 20px 0; } .header--9.header .header__right .tj-btn:hover { color: var(--tj-color-common-white); } .header--9.header .header__right .tj-btn:hover::after { transform: scale(1); } .header--9.header .header__right .tj-btn:hover .tj-btn__text span { transform: translateY(-20px); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--9.header .header__right .tj-btn { padding: 11px 25px; } } .header--9.header--absolute { margin-top: 0; border-radius: 0; background-color: transparent; box-shadow: none; max-width: calc(100% - 60px); left: 30px; right: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--9.header--absolute { max-width: calc(100% - 30px); left: 15px; right: 15px; } } @media (max-width: 575px) { .header--9.header--absolute { margin-top: 0; max-width: calc(100% - 20px); left: 10px; right: 10px; } } .header--9.header--absolute .header__wrapper { padding: 0; } .header--9.header--absolute .header__logo { padding: 0; } .header--9.header--absolute .mainmenu { box-shadow: none; background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); padding-left: 15px; padding-right: 15px; border-radius: 58px; } .header--9.header--absolute .mainmenu ul { gap: 0; } .header--9.header--absolute .mainmenu ul > li > a { padding: 10px 20px; } .header--9.header--absolute .mainmenu ul > li .sub-menu { border: 1px solid var(--tj-color-border-1); border-radius: 12px; margin-top: 10px; z-index: 0; } .header--9.header--absolute .mainmenu ul > li .sub-menu::after { content: ""; position: absolute; left: 0; top: -11px; width: 100%; height: 100%; z-index: -1; } .header--9.header--absolute .header__right .header__mobile-toggler { border-radius: 100%; border: 0; background-color: var(--tj-color-common-white); } .header--9.header-duplicate { top: -120px; left: 30px; right: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--9.header-duplicate { left: 15px; right: 15px; margin: 0; } } .header--9.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; /* Sticks to the top */ } .header--9.header-duplicate .header__mobile-toggler--2 { padding: 13px 13px; } .header--9.header-duplicate .header__wrapper { padding-left: 20px; padding-right: 20px; } @media (max-width: 575px) { .header--9.header-duplicate .header__wrapper { padding-left: 15px; padding-right: 15px; } } /* !END: Header CSS */ /**---------------------------------------- START: Footer CSS ----------------------------------------*/ .h9-footer__top__title .tj-el-title { color: var(--tj-color-common-white); max-width: 100%; width: 100%; font-size: 70px; line-height: 1.114; letter-spacing: -0.025em; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h9-footer__top__title .tj-el-title { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-footer__top__title .tj-el-title { font-size: 40px; } } @media (max-width: 575px) { .h9-footer__top__title .tj-el-title { font-size: 30px; } } .footer-9 .tj-btn i { font-size: 20px; transform: rotate(45deg) !important; } /* !END: Footer CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .h9-hero__title .tj-el-title { font-size: 106px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; line-height: 1.038; margin-bottom: 20px; } .h9-hero__title .tj-el-title span { color: var(--tj-color-heading-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h9-hero__title .tj-el-title { font-size: 90px; max-width: 100%; margin-bottom: 15px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h9-hero__title .tj-el-title { font-size: 67px; max-width: 100%; margin-bottom: 15px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h9-hero__title .tj-el-title { font-size: 80px; max-width: 100%; margin-bottom: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h9-hero__title .tj-el-title { font-size: 40px; max-width: 100%; margin-bottom: 15px; } } @media (max-width: 575px) { .h9-hero__title .tj-el-title { font-size: 35px; max-width: 100%; margin-bottom: 12px; } } .hero--10 { position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; } .hero--10 .hero__inner { padding-top: 44px; } .hero--10 .hero__title { font-size: 106px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.025em; line-height: 1.038; } .hero--10 .hero__title span { color: var(--tj-color-heading-primary); } .hero--10 .hero__title span:not(.cd-headline.clip):has(img) { display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--10 .hero__title { font-size: 90px; max-width: 100%; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--10 .hero__title { font-size: 67px; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--10 .hero__title { font-size: 80px; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--10 .hero__title { font-size: 40px; max-width: 100%; } } @media (max-width: 575px) { .hero--10 .hero__title { font-size: 35px; max-width: 100%; } } .hero--10 .hero__desc { margin-bottom: 24px; } .hero--10 .hero__content { display: flex; gap: 30px; justify-content: space-between; margin-bottom: 94px; } .hero--10 .hero__content__left { width: 100%; max-width: 877px; } .hero--10 .hero__content__right { max-width: 317px; width: 100%; margin-top: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--10 .hero__inner { padding-top: 65px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--10 .hero__content { margin-bottom: 74px; } .hero--10 .hero__content__right { margin-top: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--10 .hero__content { flex-wrap: wrap; gap: 0; } .hero--10 .hero__content__left { max-width: 100%; } .hero--10 .hero__content__right { max-width: 100%; margin-top: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--10 .hero__content { margin-bottom: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--10 .hero__inner { padding-top: 47px; } .hero--10 .hero__content { margin-bottom: 65px; } .hero--10 .hero__content__right { margin-top: 5px; } } .hero__statistics { padding: 0 15px 30px; } .hero__statistics__item { padding: 54px 60px 37px; border-radius: 16px; background-color: var(--tj-color-theme-secondary); overflow: hidden; position: relative; z-index: 0; } .hero__statistics__title { color: var(--tj-color-common-white); } .hero__statistics__title__wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 30px; } .hero__statistics__btn { line-height: 1; padding: 4px 8px 4px 11px; display: flex; gap: 3px; align-items: center; font-size: 16px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-5); border-radius: 40px; } .hero__statistics__btn i { font-size: 18px; } .hero__statistics__funtact__wrapper { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; } .hero__statistics__chart { max-width: 465px; width: 100%; min-height: 296px; height: 100%; border-radius: 10px; overflow: hidden; background-color: var(--tj-color-theme-bg2); display: flex; align-items: flex-end; } .hero__statistics__chart img { margin-top: auto; } .hero__statistics__box { padding: 30px; border-radius: 10px; background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); max-width: 377px; width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__statistics__box { max-width: 300px; } } .hero__statistics__box .hero__desc { font-size: 18px; color: var(--tj-color-common-white); font-weight: var(--tj-fw-regular); margin-top: 20px; } .hero__statistics__box .tj-btn-2 { color: var(--tj-color-common-white); } .hero__statistics__box .tj-btn-2 i { color: var(--tj-color-common-white); font-size: 18px; } .hero__statistics__banner { height: 100%; } .hero__statistics__banner img { height: 100%; width: 100%; object-fit: cover; } .hero__statistics__item--2 { padding: 30px; display: flex; background-color: var(--tj-color-common-white); margin-top: 30px; justify-content: space-between; } .hero__statistics__item--2 .hero__statistics__title { color: var(--tj-color-heading-primary); } .hero__statistics__item--2 .hero__statistics__title__wrapper { padding: 24px 30px 0; flex-direction: column; } .hero__statistics__item--2 .hero__statistics__funtact__wrapper { margin-bottom: 10px; } .hero__statistics__item--2 .funfact-area.style-7 { flex-shrink: 0; } .hero__statistics__item--2 .funfact-area.style-7 .funfact-item .number { color: var(--tj-color-heading-primary); margin-top: 14px; } .hero__statistics__item--3 { padding: 0; background-color: transparent; height: 100%; } .hero__statistics__item--3 .hero__statistics__title { max-width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__statistics__item { padding: 44px 30px 34px; } .hero__statistics__item--2 { padding: 20px; } .hero__statistics__item--2 .hero__statistics__title__wrapper { padding: 24px 10px 15px; } .hero__statistics__item--3 { padding: 0; } .hero__statistics__item--3 .hero__statistics__title { max-width: 100%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero__statistics__funtact__wrapper .client__thumbs__inner { margin-bottom: 14px; } .hero__statistics__chart { min-height: 243px; } .hero__statistics__item--2 { gap: 20px; } .hero__statistics__item--2 .hero__statistics__funtact__wrapper { margin-bottom: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero__statistics { padding: 0 5px 20px; } .hero__statistics__chart { min-height: 243px; } .hero__statistics .funfact-area.style-7 { margin-bottom: 10px; } .hero__statistics__item--2 { margin-top: 20px; } .hero__statistics__item--2 .hero__statistics__title__wrapper { flex-direction: row; } .hero__statistics__item--2 .hero__statistics__funtact__wrapper { margin-bottom: 0; } .hero__statistics__item--2 .funfact-area.style-7 { margin-bottom: 0; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero__statistics__funtact__wrapper .client__thumbs__inner li { height: 55px; width: 55px; } .hero__statistics__item { padding: 54px 30px 37px; } .hero__statistics__item--2 { padding: 30px; } .hero__statistics__item--2 .hero__statistics__title__wrapper { padding-inline-start: 0; padding-inline-end: 0; } .hero__statistics__item--3 { padding: 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero__statistics__item--2 .hero__statistics__title__wrapper { margin-bottom: 10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero__statistics { padding: 0 0 15px; } .hero__statistics .rg-30 { row-gap: 15px; } .hero__statistics__funtact__wrapper { flex-wrap: wrap; gap: 16px; } .hero__statistics__funtact__wrapper .client__thumbs__inner { margin-bottom: 13px; } .hero__statistics__funtact__wrapper .client__thumbs__inner li { height: 55px; width: 55px; } .hero__statistics__title__wrapper { flex-wrap: nowrap; padding: 10px 0; } .hero__statistics__chart { max-width: 100%; min-height: 200px; } .hero__statistics__box { padding: 24px 20px 28px; } .hero__statistics__box .hero__desc { margin-top: 14px; margin-bottom: 14px; } .hero__statistics__item { padding: 20px; } .hero__statistics__item--2 { margin-top: 15px; flex-wrap: wrap; gap: 20px; } .hero__statistics__item--2 .hero__statistics__title__wrapper { flex-wrap: wrap; padding: 10px 0 0; } .hero__statistics__item--2 .hero__statistics__funtact__wrapper { margin-bottom: 0; } .hero__statistics__item--3 { padding: 0; min-height: 500px; } } @media (max-width: 575px) { .hero__statistics__funtact__wrapper .funfact-area.style-7 { width: 100%; } } .space-140 { padding-top: 140px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .space-140 { padding-top: 70px; } } .hand__mike { width: 231px; height: 131px; display: inline-flex; justify-content: center; overflow: hidden; position: relative; transform: translateY(15px); z-index: 0; } .hand__mike__wrapper { display: inline-block; } .hand__mike__bg { height: 75%; width: 100%; border-radius: 67px; background: var(--tj-color-blue-1); position: absolute; left: 0; bottom: 0; z-index: -1; } .hand__mike img { width: auto; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; } .hand__mike--sm { width: 140px; height: 80px; transform: translateY(0); } .hand__mike--sm .hand__mike__bg { height: 73.4%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hand__mike { width: 190px; height: 95px; transform: translateY(8px); } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hand__mike { width: 151px; height: 70px; transform: translateY(8px); } .hand__mike--sm { transform: translateY(0); } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hand__mike { width: 190px; height: 95px; } .hand__mike--sm { width: 130px; height: 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hand__mike { width: 95px; height: 48px; transform: translateY(4px); } .hand__mike--sm { width: 100px; height: 55px; transform: translateY(0); } } @media (max-width: 575px) { .hand__mike--sm { width: 80px; height: 40px; } } .hero .title-animation .hand__mike { display: inline-flex !important; } .hero .title-animation .hand__mike img { margin-left: 0; } .hero-9 .client__thumbs__inner { margin: 0; padding: 0; } .hero-9 .client__thumbs__inner li { max-width: 66px; width: 66px; height: 66px; padding: 3px; } .hero-9 .client__thumbs__inner li img { width: 100%; height: 100%; padding: 0; } .hero-9 .client__thumbs__inner li.plus h6 { height: 100%; width: 100%; font-size: 18px; background-color: var(--tj-color-common-white); color: var(--tj-color-theme-dark); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-9 .client__thumbs__inner li { width: 60px; height: 60px; } } /* !END: Hero CSS */ /**---------------------------------------- START: Funfact CSS ----------------------------------------*/ .funfact-area.style-7 { margin-top: 0; flex-shrink: 0; } .funfact-area.style-7 .funfact-item { padding: 0; background: transparent; border-radius: 0; text-align: start; position: relative; } .funfact-area.style-7 .funfact-item .odometer-symbol { margin-top: -5px; } .funfact-area.style-7 .funfact-item::after { display: none; } .funfact-area.style-7 .funfact-item .number { font-size: 100px; justify-content: start; margin-top: 72px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-7 .funfact-item .number { font-size: 72px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .funfact-area.style-7 .funfact-item .number { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-area.style-7 .funfact-item .number { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .funfact-area.style-7 .funfact-item { flex-basis: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .funfact-area.style-7 .funfact-item { flex-basis: 100%; } } /* !END: Funfact CSS */ /**---------------------------------------- START: Feature CSS ----------------------------------------*/ .service__card--5 .tj-btn-2 { margin-top: 20px; } .service__card--5 .tj-btn-2 i { font-size: 16px; } .service__card--5:hover .tj-btn-2 { color: var(--tj-color-heading-primary); } .service__card--5:hover .tj-btn-2 i { color: var(--tj-color-heading-primary); } .service__card--5:hover .tj-btn-2:hover { color: var(--tj-color-theme-primary); } .service__card--5:hover .tj-btn-2:hover i { color: var(--tj-color-theme-primary); } .service__card--5 .service__card__top { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; margin-bottom: 55px; flex-wrap: wrap; } .service__card--5 .service__icon { margin-bottom: 0; } .service__card--5 .service__title { max-width: 157px; width: 100%; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__card--5 .service__card__top { margin-bottom: 40px; } .service__card--5 .service__icon { font-size: 41px; width: 70px; height: 70px; } } /* !END: Feature CSS */ /**---------------------------------------- START: Abour CSS ----------------------------------------*/ .about--10 { border-radius: 16px; border-start-start-radius: 0; border-start-end-radius: 0; } .about--10 .section-heading__title { margin-bottom: 30px; } .about--10 .about__banner { position: relative; z-index: 0; max-width: 523px; } .about--10 .about__banner > img { border-radius: 16px; } .about--10 .about__banner::after { display: none; } .about--10 .about__ratings { display: flex; align-items: center; gap: 10px 45px; padding: 24px 28px; background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border: 1px solid var(--tj-color-border-5); border-radius: 8px; } .about--10 .about__ratings__item { position: relative; z-index: 0; } .about--10 .about__ratings__item::after { content: ""; width: 1px; height: 100%; background-color: var(--tj-color-border-5); position: absolute; top: 0; left: -23px; z-index: 1; } .about--10 .about__ratings__item:first-child::after { display: none; } .about--10 .about__content { max-width: 735px; margin-inline-start: auto; padding-inline-start: 0; } .about--10 .about__features { display: flex; gap: 20px; } .about--10 .about__features__item { padding: 30px; background-color: var(--tj-color-common-white); border-radius: 10px; } .about--10 .about__features__title { margin-bottom: 5px; } .about--10 .about__features__title__wrapper { display: flex; align-items: center; gap: 8px; margin-bottom: 18px; } .about--10 .about__features__desc { margin-bottom: 0; } .about--10 .about__features__icon { font-size: 30px; color: var(--tj-color-theme-secondary); line-height: 1; } .about--10 .about__action { margin-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about--10 .about__banner { width: 100%; max-width: 100%; } .about--10 .about__banner img { width: 100%; } } @media (max-width: 575px) { .about--10 .about__ratings { right: 15px; bottom: 45px; } .about--10 .about__features { flex-wrap: wrap; } .about--10 .about__features__item { padding-inline-start: 20px; padding-inline-end: 20px; } } /* !END: About CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .service__wrapper__4 { display: flex; flex-direction: column; gap: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 { gap: 20px; } } .service__wrapper__4 .service__card { display: flex; justify-content: space-between; padding: 30px; background: var(--tj-color-theme-bg1); border: 0; position: relative; border-radius: 12px; transition: none; transform-origin: top; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card { flex-direction: column; gap: 22px; } } @media (max-width: 575px) { .service__wrapper__4 .service__card { padding: 30px 20px 20px; } } .service__wrapper__4 .service__card::after { display: none; } .service__wrapper__4 .service__card .service__banner { position: relative; z-index: 1; border-radius: 10px; overflow: hidden; width: 350px; position: relative; z-index: 0; flex-shrink: 0; } .service__wrapper__4 .service__card .service__banner a { width: 100%; height: 100%; } .service__wrapper__4 .service__card .service__banner img { height: 100%; width: 100%; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__4 .service__card .service__banner { height: 321px; width: 50%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card .service__banner { width: 100%; } } .service__wrapper__4 .service__card .service__content { width: 735px; transition: all var(--tj-td-standard) ease-in-out 0s; display: flex; justify-content: space-between; flex-shrink: 1; overflow: hidden; } .service__wrapper__4 .service__card .service__content__right { max-width: 360px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .service__wrapper__4 .service__card .service__content { width: 580px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .service__wrapper__4 .service__card .service__content { width: 475px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .service__wrapper__4 .service__card .service__content { width: 286px; flex-wrap: wrap; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card .service__content { flex-direction: column; width: 100%; } } .service__wrapper__4 .service__card .service__icon { font-size: 41px; width: 72px; height: 72px; border: 0; background-color: var(--tj-color-theme-secondary); margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card .service__icon { margin-bottom: 14px; } } .service__wrapper__4 .service__card .service__icon i { color: var(--tj-color-common-white); } .service__wrapper__4 .service__card .service__title { margin-bottom: 16px; max-width: 100%; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card .service__title { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card .service__title { margin-bottom: 12px; } } .service__wrapper__4 .service__card .service__desc { font-size: 18px; margin-bottom: 24px; line-height: 1.5556; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service__wrapper__4 .service__card .service__desc { margin-bottom: 14px; font-size: 16px; } } .service__wrapper__4 .service__card .tj-btn { padding: 14px 19px 14px 25px; border: 1px solid var(--tj-color-border-1); border-radius: 58px; gap: 6px; width: auto; color: var(--tj-color-theme-dark); } .service__wrapper__4 .service__card .tj-btn::after { background-color: var(--tj-color-common-white); } .service__wrapper__4 .service__card .tj-btn__icon { overflow: hidden; } .service__wrapper__4 .service__card .tj-btn i { color: var(--tj-color-theme-dark); font-size: 16px; transform: translate(-14px, 12px) rotate(-45deg); text-shadow: 18px 0 0 currentColor; } .service__wrapper__4 .service__card .tj-btn:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-theme-primary); } .service__wrapper__4 .service__card .tj-btn:hover::after { background-color: var(--tj-color-theme-primary); transform: translate(-50%, -50%) scale(1); } .service__wrapper__4 .service__card .tj-btn:hover i { color: var(--tj-color-common-white); transform: translate(0, -2px) rotate(-45deg); } .service__wrapper__4 .service__card:hover { background: var(--tj-color-theme-bg2); } .service__wrapper__4 .service__card:hover .service__banner img { transform: scale(1.1) rotate(3deg); } .service__wrapper__4 .service__card:hover .service__icon { background-color: var(--tj-color-theme-primary); } .service__wrapper__4 .service__card:hover .service__title a { color: var(--tj-color-heading-primary); } .service__wrapper__4 .service__card:hover .service__title:hover a { color: var(--tj-color-theme-primary); } .service__wrapper__4 .service__card:hover .service__desc { color: var(--tj-color-text-body); } /* !END: Service CSS */ /**---------------------------------------- START: Process CSS ----------------------------------------*/ .process__4 .section-heading__title { color: var(--tj-color-common-white); margin-bottom: 14px; } .process__4 .section-heading__desc { color: var(--tj-color-common-white2); max-width: 396px; } .process__left { max-width: 594px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__left { max-width: 100%; } } .process__banner { margin-top: 90px; border-radius: 12px; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__banner { margin-top: 50px; } .process__banner img { width: 100%; } } .process__list { display: flex; flex-direction: column; gap: 20px; margin-top: 34px; color: var(--tj-color-common-white2); } .process__list ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; gap: 20px; } .process__list li { display: flex; align-items: center; gap: 8px; color: inherit; line-height: 1; } .process__list li i { width: 20px; height: 20px; display: inline-flex; justify-content: center; align-items: center; font-size: 9px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-secondary); border-radius: 50%; } .process__wrapper { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 30px; max-width: 645px; padding-inline-start: 112px; position: relative; z-index: 1; } .process__wrapper::before { content: ""; height: 100%; width: 2px; background: url("../images/icons/dashed-line.svg"); position: absolute; left: 17px; top: 0; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process__wrapper { padding-inline-start: 70px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__wrapper { padding-inline-start: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__wrapper { margin-top: 50px; max-width: 100%; } .process__wrapper::before { left: 30px; } } @media (max-width: 575px) { .process__wrapper { padding-inline-start: 0; gap: 100px; margin-top: 50px; padding-top: 100px; overflow: hidden; } .process__wrapper::before { left: 50%; top: -11px; } } .process__wrapper .process__line { position: absolute; left: 17px; width: 2px; height: 0; background: var(--tj-color-common-white); transform-origin: top; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .process__wrapper .process__line { left: 30px; } } @media (max-width: 575px) { .process__wrapper .process__line { top: -95px; left: 50%; } } .process__wrapper .process__single { width: 100%; margin-bottom: 0; overflow: visible; border-radius: 10px; display: block; background: none; padding: 0; } .process__wrapper .process__single .process__inner { backdrop-filter: blur(10px); background: var(--tj-color-theme-bg4); padding: 46px 32px 50px; border-radius: 12px; overflow: visible; transition: all 0.3s linear; transform: translateX(50px); } .process__wrapper .process__single .process__inner::after { display: none; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process__wrapper .process__single .process__inner { transform: translateX(30px); } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__wrapper .process__single .process__inner { padding: 46px 20px 50px; transform: translateX(15px); } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .process__wrapper .process__single .process__inner { transform: translateX(24px); } } @media (max-width: 575px) { .process__wrapper .process__single .process__inner { padding: 46px 15px 50px; transform: translateX(0); } } .process__wrapper .process__single .step-header { display: flex; justify-content: space-between; } .process__wrapper .process__single .step-header .step { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); line-height: 1; font-weight: var(--tj-fw-medium); display: inline-flex; border-radius: 56px; padding: 4px 8px; position: absolute; right: 30px; top: 30px; } @media (max-width: 575px) { .process__wrapper .process__single .step-header .step { right: 15px; top: 15px; } } .process__wrapper .process__single .process__sl { font-size: 24px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--tj-color-common-white); -webkit-text-stroke: inherit; margin-bottom: 0; position: absolute; left: -124px; top: 35px; z-index: 2; width: 60px; height: 60px; border-radius: 100%; background: var(--tj-color-theme-bg4); backdrop-filter: blur(10px); display: inline-flex; align-items: center; justify-content: center; } .process__wrapper .process__single .process__sl span { opacity: 0.4; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .process__wrapper .process__single .process__sl { left: -80px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .process__wrapper .process__single .process__sl { font-size: 20px; width: 50px; height: 50px; top: 40px; left: -66px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .process__wrapper .process__single .process__sl { left: -112px; } } @media (max-width: 575px) { .process__wrapper .process__single .process__sl { left: 50%; top: -80px; transform: translateX(-50%); } } .process__wrapper .process__single .process__content { max-width: 100%; } .process__wrapper .process__single .process__title { margin-bottom: 16px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .process__wrapper .process__single .process__title { font-size: 24px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .process__wrapper .process__single .process__title { font-size: 20px; margin-bottom: 12px; } } .process__wrapper .process__single .process__desc { color: var(--tj-color-common-white2); font-size: 16px; } .process__wrapper .process__single.active::before { background-color: var(--tj-color-theme-primary); box-shadow: 0 0 0 6px var(--tj-color-theme-bg3); } .process__wrapper .process__single.active .process__inner { transform: translateX(0); } .process__wrapper .process__single.active .step { background-color: var(--tj-color-theme-secondary); } .process__wrapper .process__single.active .process__sl { background-color: var(--tj-color-common-white); } .process__wrapper .process__single.active .process__sl span { opacity: 1; color: var(--tj-color-theme-dark); } /* !END: Process CSS */ /**---------------------------------------- START: Team CSS ----------------------------------------*/ .team--3 .section-heading__sub-title { padding: 0; background-color: transparent; color: var(--tj-color-theme-primary); } .team--3 .section-heading__sub-title::before { background-color: var(--tj-color-theme-primary); } .team--3 .section-heading__title { color: var(--tj-color-heading-primary); } .team__wrapper__2 { display: flex; flex-wrap: wrap; gap: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .team__wrapper__2 { gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__wrapper__2 { gap: 15px; } } .team__wrapper__2 .team__socials { left: auto; right: 0; top: 50px; bottom: auto; border-radius: 0; border-start-start-radius: 10px; border-end-start-radius: 10px; transform: translateX(100%); padding: 10px; padding-inline-start: 9px; padding-inline-end: 0; background-color: var(--tj-color-theme-bg1); } .team__wrapper__2 .team__socials .tj-socials--sm { transform: translateY(0); } .team__wrapper__2 .team__socials .tj-socials--sm ul { flex-direction: column; gap: 6px; } .team__wrapper__2 .team__socials .tj-socials--sm ul li a { background-color: var(--tj-color-theme-dark); width: 28px; height: 28px; } .team__wrapper__2 .team__socials .tj-socials--sm ul li a i { color: var(--tj-color-common-white); font-size: 15px; } .team__wrapper__2 .team__socials .tj-socials--sm ul li a:hover { background-color: var(--tj-color-theme-secondary); } .team__wrapper__2 .team__socials::before, .team__wrapper__2 .team__socials::after { content: ""; position: absolute; background-color: transparent; top: -10px; right: 0; width: 25px; height: 10px; box-shadow: 10px 0 0 0 var(--tj-color-theme-bg1); border-top-right-radius: 10px; z-index: -1; } .team__wrapper__2 .team__socials::before { transform: scaleY(-1); } .team__wrapper__2 .team__socials::after { top: auto; left: auto; bottom: -10px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .team__wrapper__2 .team__socials { top: 30px; padding: 6px; padding-inline-start: 8px; padding-inline-end: 0; } .team__wrapper__2 .team__socials .tj-socials--sm ul { gap: 0; } .team__wrapper__2 .team__socials .tj-socials--sm ul li a { width: 20px; height: 20px; } .team__wrapper__2 .team__socials .tj-socials--sm ul li a i { font-size: 12px; } } .team__wrapper__2 .team__single { width: 100%; background-color: var(--tj-color-theme-bg1); display: flex; flex-direction: column; align-items: center; padding: 15px 15px 26px; text-align: center; border-radius: 12px; } .team__wrapper__2 .team__single__img { border-radius: 10px; overflow: hidden; margin-bottom: 15px; } .team__wrapper__2 .team__single__img img { border-radius: 0; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .team__wrapper__2 .team__single__img img { height: 206px; object-fit: cover; } } .team__wrapper__2 .team__single__title { font-size: var(--tj-fs-h4); margin-bottom: 3px; } .team__wrapper__2 .team__single__title a { color: var(--tj-color-heading-primary); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .team__wrapper__2 .team__single__title { font-size: 22px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .team__wrapper__2 .team__single__title { font-size: 21px; } } @media (max-width: 575px) { .team__wrapper__2 .team__single__title { font-size: 20px; } } .team__wrapper__2 .team__single__title:hover a { color: var(--tj-color-theme-primary); } .team__wrapper__2 .team__single__desig { color: var(--tj-color-theme-dark3); } .team__wrapper__2 .team__single:hover .team__socials { transform: translateX(0); } .team__wrapper__2 .team__single:hover .team__single__img { border-color: transparent; } .team__wrapper__2 .team__single:hover .team__single__img img { transform: scale(1.1); transform-origin: top; } /* !END: Team CSS */ /**---------------------------------------- START: Portfolio CSS ----------------------------------------*/ .portfolio__2 { background-position: left top; } .portfolio__2 .container-fluid { --bs-gutter-x: 0; } .portfolio__wrapper--4 .portfolio__single { padding: 0; background: transparent; border: 0; border-radius: 16px; overflow: hidden; } .portfolio__wrapper--4 .portfolio__single__img { border-radius: 16px; overflow: hidden; height: 580px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__wrapper--4 .portfolio__single__img { height: 480px; } } @media (max-width: 575px) { .portfolio__wrapper--4 .portfolio__single__img { height: 400px; } } .portfolio__wrapper--4 .portfolio__single__img img { width: 100%; height: 100%; object-fit: cover; } .portfolio__wrapper--4 .portfolio__single__content { position: absolute; left: 30px; right: 30px; bottom: 30px; transform: translateY(100%); opacity: 1; visibility: visible; padding: 30px 30px 26px; background-color: var(--tj-color-common-white); display: flex; gap: 10px; justify-content: space-between; align-items: flex-end; opacity: 0; border-radius: 10px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__wrapper--4 .portfolio__single__content { left: 20px; right: 20px; bottom: 20px; padding: 24px 20px 20px; } } @media (max-width: 575px) { .portfolio__wrapper--4 .portfolio__single__content { flex-wrap: wrap; justify-content: space-between; left: 15px; right: 15px; bottom: 15px; padding: 20px 15px 17px; } } .portfolio__wrapper--4 .portfolio__single__tag { border-radius: 50px; background-color: transparent; border-color: var(--tj-color-theme-secondary); color: var(--tj-color-theme-secondary); font-size: 14px; margin-bottom: 12px; text-shadow: none; } .portfolio__wrapper--4 .portfolio__single__tag:hover { background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary) !important; color: var(--tj-color-common-white) !important; } .portfolio__wrapper--4 .portfolio__single__title { color: var(--tj-color-heading-primary); max-width: 465px; margin-bottom: 0; font-size: var(--tj-fs-h3); line-height: var(--tj-lh-h3); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .portfolio__wrapper--4 .portfolio__single__title { font-size: 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper--4 .portfolio__single__title { font-size: 28px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__wrapper--4 .portfolio__single__title { font-size: 26px; } } @media (max-width: 575px) { .portfolio__wrapper--4 .portfolio__single__title { font-size: 20px; } } .portfolio__wrapper--4 .portfolio__single__title:hover a { letter-spacing: inherit; color: var(--tj-color-theme-primary); } .portfolio__wrapper--4 .portfolio__single::after { display: none; } .portfolio__wrapper--4 .portfolio__single__action { margin-bottom: 6px; } .portfolio__wrapper--4 .portfolio__single__action a { visibility: visible; opacity: 1; position: static; transform: none; border: 0; color: var(--tj-color-common-white); background: var(--tj-color-theme-primary); transform: rotate(-45deg); } .portfolio__wrapper--4 .portfolio__single__action a i { color: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio__wrapper--4 .portfolio__single__action a { width: 60px; height: 60px; } .portfolio__wrapper--4 .portfolio__single__action a i { font-size: 16px; } } @media (max-width: 575px) { .portfolio__wrapper--4 .portfolio__single__action a { width: 50px; height: 50px; } .portfolio__wrapper--4 .portfolio__single__action a i { font-size: 16px; } } .portfolio__wrapper--4 .portfolio__single__action a:hover { border-color: transparent; } .portfolio__wrapper--4 .portfolio__single__action a:hover i { color: var(--tj-color-common-white); } .portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__content { transform: translateY(0); opacity: 1; } .portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__tag { color: var(--tj-color-theme-secondary); } .portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__action a { background: var(--tj-color-theme-primary); transform: rotate(315deg); } .portfolio__wrapper--4 .portfolio__single:hover .portfolio__single__action a i { color: var(--tj-color-common-white); } /* !END: Portfolio CSS */ /**---------------------------------------- START: Client CSS ----------------------------------------*/ .tj-client__wrapper .client-item { padding: 0; } .tj-client__wrapper .client-logo { width: 100%; height: 244px; padding: 0 30px; background-color: var(--tj-color-theme-bg1); border: 0; border-radius: 7px; transition: all 0.3s ease-in-out; } .tj-client__wrapper .client-logo:hover { background-color: var(--tj-color-theme-secondary); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .tj-client__wrapper .client-logo { height: 180px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-client__wrapper .client-logo { height: 180px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-client__wrapper .client-logo { height: 120px; padding: 0 20px; } } @media (max-width: 575px) { .tj-client__wrapper .client-logo { height: 150px; padding: 0 20px; } } /* !END: Client CSS */ /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .testimonials__4 { width: calc(60% - 17px); } .testimonials__4 .section-heading { margin-top: 48px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__4 { width: 100%; } .testimonials__4 .section-heading__title { max-width: 100%; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .testimonials__4 .section-heading { margin-top: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__4 .section-heading { margin-top: 44px; } } .testimonials__wrapper__2 { width: 100%; position: relative; z-index: 0; } .testimonials__wrapper__2 .swiper { padding-bottom: 0; } .testimonials__wrapper__2 .testimonials__slider__item { background-color: var(--tj-color-theme-bg2); border: 0; padding-top: 60px; padding-bottom: 60px; border-radius: 10px; } .testimonials__wrapper__2 .testimonials__rating { margin-bottom: 10px; } .testimonials__wrapper__2 .testimonials__rating .star-ratings { margin: 0 auto; } .testimonials__wrapper__2 .testimonials__desc { font-family: var(--tj-ff-heading); font-size: 24px; line-height: 1.58; letter-spacing: -0.02em; font-weight: var(--tj-fw-medium); color: var(--tj-color-theme-dark); text-align: center; border-color: var(--tj-color-border-3); } .testimonials__wrapper__2 .testimonials__footer { justify-content: center; text-align: center; } .testimonials__wrapper__2 .testimonials__author { margin-bottom: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .testimonials__wrapper__2 .testimonials__slider__item { padding: 45px 30px; } .testimonials__wrapper__2 .testimonials__desc { font-size: 20px; } } @media (max-width: 575px) { .testimonials__wrapper__2 .testimonials__slider__item { padding: 40px 24px; } .testimonials__wrapper__2 .testimonials__desc { font-size: 18px; } } .testimonials__wrapper__2:hover .swiper-button-next, .testimonials__wrapper__2:hover .swiper-button-prev { opacity: 1; visibility: visible; margin-top: -25px; } .testimonials__wrapper__2:hover .swiper-button-prev { left: 0; } .testimonials__wrapper__2:hover .swiper-button-next { right: 0; } .client__thumbs__wrapper { display: inline-block; } .client__thumbs__wrapper .client__thumbs__inner { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; margin-bottom: 0; transform: translateY(10px); margin-top: -10px; } .client__thumbs__wrapper .client__thumbs__item { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 52px; height: 52px; background-color: var(--tj-color-common-white); border-radius: 50%; margin-inline-start: -18px; flex-shrink: 0; line-height: 1; padding: 2px; z-index: 2; } .client__thumbs__wrapper .client__thumbs__item:first-child { margin-inline-start: 0; } .client__thumbs__wrapper .client__thumbs__item img { display: inline-flex; object-fit: cover; border-radius: 50%; height: 100%; width: 100%; position: relative; padding: 0; } .client__thumbs__wrapper .client__thumbs__text { display: inline-flex; align-items: center; justify-content: center; height: 100%; width: 100%; font-size: 14px; font-weight: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; line-height: 1; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-secondary); display: flex; border-radius: 50%; margin-bottom: 0; } @media (max-width: 575px) { .client__thumbs__wrapper .client__thumbs__item { width: 44px; height: 44px; margin-inline-start: -15px; } } /* !END: Testimonials CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .blog__single__wrapper__3 .blog__single { padding: 15px; background-color: var(--tj-color-theme-bg1); border-radius: 12px; } .blog__single__wrapper__3 .blog__single__banner { border-radius: 10px; border-end-end-radius: 0; overflow: hidden; } .blog__single__wrapper__3 .blog__single__banner img { border-radius: 0; } .blog__single__wrapper__3 .blog__single__date { position: relative; top: auto; left: auto; bottom: 0; border-end-start-radius: 0; border-end-end-radius: 0; } .blog__single__wrapper__3 .blog__single__date__wrapper { position: absolute; right: 0; bottom: 0; padding-inline-start: 17px; padding-top: 17px; background-color: var(--tj-color-theme-bg1); border-start-start-radius: 10px; z-index: 0; } .blog__single__wrapper__3 .blog__single__date__wrapper::before, .blog__single__wrapper__3 .blog__single__date__wrapper::after { content: ""; position: absolute; background-color: transparent; top: -10px; right: 0; width: 25px; height: 10px; box-shadow: 10px 0 0 0 var(--tj-color-theme-bg1); border-top-right-radius: 10px; z-index: -1; } .blog__single__wrapper__3 .blog__single__date__wrapper::before { transform: scaleY(-1); } .blog__single__wrapper__3 .blog__single__date__wrapper::after { top: auto; right: auto; left: -25px; bottom: 0; transform: scaleY(-1); } .blog__single__wrapper__3 .blog__single__date__month { padding: 4px 0 4px; border: 1px solid var(--tj-color-border-1); border-radius: 0; border-end-start-radius: 8px; border-end-end-radius: 8px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__3 .blog__single__date__wrapper { padding-inline-start: 13px; padding-top: 13px; } } .blog__single__wrapper__3 .blog__single__content { padding: 15px; background-color: transparent; } .blog__single__wrapper__3 .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper__3 .blog__single__content__list { margin-bottom: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__3 .blog__single__content__list { margin-bottom: 12px; } } .blog__single__wrapper__3 .blog__single__content__list li { position: relative; font-size: 14px; } .blog__single__wrapper__3 .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } .blog__single__wrapper__3 .blog__single__content__list li:last-child::after { display: none; } .blog__single__wrapper__3 .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 3px 6px 3px; background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); color: var(--tj-color-theme-secondary); font-size: 16px; font-weight: var(--tj-fw-medium); line-height: 1; letter-spacing: 2%; border-radius: 17px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper__3 .blog__single__content__tag { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__3 .blog__single__content__tag { font-size: 14px; } } .blog__single__wrapper__3 .blog__single__content__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); } @media only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single__wrapper__3 .blog__single__content { padding: 15px 5px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single__wrapper__3 .blog__single__content { padding: 15px 5px 10px; } } /* !END: Blog CSS */ /**---------------------------------------- START: Header CSS ----------------------------------------*/ .header--10 .header__wrapper { justify-content: space-between; padding: 0 20px; } .header--10 .header__wrapper > div:last-child { margin-left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header--10 .header__wrapper { padding: 0 15px; } } .header--10 .header__logo { width: 133px; } .header--10.header .header__right .header__mobile-toggler { border-radius: 100%; } .header--10.header .header__right .tj-btn { padding: 14px 30px; border-radius: 58px; } .header--10.header .header__right .tj-btn::after { border-radius: 58px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--10.header .header__right .tj-btn { padding: 11px 25px; } } .header--10.header--absolute { margin-top: 30px; border-radius: 0; background-color: transparent; box-shadow: none; max-width: calc(100% - 60px); left: 30px; right: 30px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .header--10.header--absolute { max-width: calc(100% - 30px); left: 15px; right: 15px; margin-top: 10px; } } @media (max-width: 575px) { .header--10.header--absolute { max-width: calc(100% - 20px); left: 10px; right: 10px; margin-top: 0; } } .header--10.header--absolute .header__wrapper { padding: 0; } .header--10.header--absolute .header__logo { padding: 0; } .header--10.header--absolute .mainmenu { background: rgba(255, 255, 255, 0.1); padding-left: 15px; padding-right: 15px; border-radius: 58px; } .header--10.header--absolute .mainmenu ul { gap: 0; } .header--10.header--absolute .mainmenu nav > ul > li > a { padding: 10px 20px; color: var(--tj-color-common-white); } .header--10.header--absolute .mainmenu nav > ul > li.has-dropdown > a::after { color: var(--tj-color-common-white); } .header--10.header--absolute .mainmenu nav > ul > li .sub-menu { border-radius: 12px; margin-top: 10px; z-index: 0; } .header--10.header--absolute .mainmenu nav > ul > li .sub-menu::after { content: ""; position: absolute; left: 0; top: -11px; width: 100%; height: 100%; z-index: -1; } .header--10.header--absolute .tj-btn--bordered { color: var(--tj-color-common-white); border-color: var(--tj-color-border-4); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), (max-width: 575px) { .header--10.header--absolute .tj-btn--bordered { padding: 11px 25px; } } .header--10.header--absolute .tj-btn--bordered::after { background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); transform: translate(-50%, -50%) scale(1); } .header--10.header--absolute .tj-btn--bordered:hover { border-color: var(--tj-color-border-6); } .header--10.header--absolute .tj-btn--bordered:hover::after { transform: translate(-50%, -50%) scale(0); } .header--10.header--absolute .header__right .header__mobile-toggler { border-color: var(--tj-color-common-white); background-color: transparent; } .header--10.header--absolute .header__right .header__mobile-toggler span { background-color: var(--tj-color-common-white); } .header--10.header-duplicate { top: -120px; /* Initially hidden */ left: 30px; right: 30px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1600px) { .header--10.header-duplicate { left: 15px; right: 15px; } } .header--10.header-duplicate.sticky { margin-top: 0; border-top-right-radius: 0; border-top-left-radius: 0; top: 0; /* Sticks to the top */ } .header--10.header-duplicate .header__wrapper { padding-left: 20px; padding-right: 20px; } @media (max-width: 575px) { .header--10.header-duplicate .header__wrapper { padding-left: 15px; padding-right: 15px; } } /* !END: Header CSS */ /**---------------------------------------- START: Footer CSS ----------------------------------------*/ .footer--10 .footer__inner { background: transparent; margin-bottom: 0; padding: 120px 0 75px 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--10 .footer__inner { padding: 80px 0 35px 0; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer__inner { padding: 60px 0 20px 0; } } .footer--10 .footer__inner::after { display: none; } .footer--10 .footer__top__title { color: var(--tj-color-theme-dark); font-size: 70px; line-height: 1.114; margin-top: -14px; margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer--10 .footer__top__title { font-size: 60px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--10 .footer__top__title { font-size: 50px; margin-top: -8px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer__top__title { font-size: 40px; margin-top: -8px; } } .footer--10 .footer__top__list li { color: var(--tj-color-theme-dark); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; } .footer--10 .footer__widget__wrapper--2 { justify-content: space-between; } .footer--10 .footer__widget__wrapper--2 .footer__title { color: var(--tj-color-theme-dark); } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--10 .footer__widget__wrapper--2 .footer__title { margin-bottom: 30px; } } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe { margin-left: 0; padding: 0; } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::before, .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe::after { display: none; } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription { padding-top: 25px; margin-bottom: 25px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .hero__subscription { padding-top: 20px; margin-bottom: 20px; } } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper { padding: 6px; background-color: var(--tj-color-common-white); border-color: var(--tj-color-border-11); max-width: 540px; width: 100%; border-radius: 8px; } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper:has(.tj-input:not(.tj-nice-select):focus) { border-color: var(--tj-color-theme-primary); } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-input { padding: 14px 18px; color: inherit; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-input { padding: 12px; } } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn { padding: 17px 25px; border-radius: 6px; } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn:hover { color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn:hover i { color: var(--tj-color-theme-primary); } .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn::after { border-radius: 6px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe .tj-input__wrapper .tj-btn { padding: 15px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .footer--10 .footer__widget__wrapper--2 .footer__widget.footer__widget__subscribe { width: 100%; max-width: 100%; } } .footer--10 .footer__widget__wrapper--2 .footer__widget--services { margin-left: 0; } .footer--10 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a { color: var(--tj-color-theme-dark); } .footer--10 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li a:hover { color: var(--tj-color-theme-primary); } .footer--10 .footer__widget__wrapper--2 .footer__widget.widget_nav_menu ul li:last-child { margin-bottom: 0; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .footer--10 .footer__widget__wrapper--2 .footer__widget { width: 100%; max-width: calc(45% - 20px); } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer__widget__wrapper--2 .footer__widget { margin-bottom: 40px; } } .footer--10 .footer-contact-wrap { padding: 60px 0; border-top: 1px solid var(--tj-color-border-11); border-bottom: 1px solid var(--tj-color-border-11); } .footer--10 .footer-contact-wrap .footer__widget { margin-bottom: 0; } .footer--10 .footer-contact-wrap .footer__copyright__logo { max-width: 225px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .footer--10 .footer-contact-wrap .footer__copyright__logo { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer--10 .footer-contact-wrap .footer__copyright__logo { margin-bottom: 20px; } } .footer--10 .footer-contact-wrap .footer__contact__single a { color: var(--tj-color-theme-dark); background: var(--tj-color-common-white); border-color: var(--tj-color-common-white); font-weight: var(--tj-fw-sbold); border-radius: 6px; } .footer--10 .footer-contact-wrap .footer__contact__single a .icon { display: inline-flex; overflow: hidden; line-height: 1; } .footer--10 .footer-contact-wrap .footer__contact__single a .icon i { display: inline-flex; text-shadow: 30px 0 0; } .footer--10 .footer-contact-wrap .footer__contact__single a .text { display: inline-flex; overflow: hidden; } .footer--10 .footer-contact-wrap .footer__contact__single a .text span { line-height: 1.4; display: inline-flex; text-shadow: 0 25px 0; } .footer--10 .footer-contact-wrap .footer__contact__single a:hover .icon i { transform: translateX(-30px); } .footer--10 .footer-contact-wrap .footer__contact__single a:hover .text span { transform: translateY(-25px); } .footer--10 .footer-contact-wrap .footer__contact__ratings { background: var(--tj-color-common-white); border-radius: 6px; } .footer--10 .footer-contact-wrap .footer__contact__ratings .star-ratings .empty-ratings, .footer--10 .footer-contact-wrap .footer__contact__ratings .star-ratings .fill-ratings { color: var(--tj-color-theme-dark); } .footer--10 .footer-contact-wrap .footer__contact__ratings__divider { background: var(--tj-color-border-1); } .footer--10 .footer__copyright__wrapper { border: 0; margin: 0; } .h10_footer__contact .footer__contact__single .contact_content { color: var(--tj-color-theme-dark); background: var(--tj-color-common-white); border-color: var(--tj-color-common-white); font-weight: var(--tj-fw-sbold); border-radius: 6px; } .h10_footer__contact .footer__contact__single .contact_content .icon { display: inline-flex; overflow: hidden; line-height: 1; } .h10_footer__contact .footer__contact__single .contact_content .icon i { display: inline-flex; text-shadow: 30px 0 0; } .h10_footer__contact .footer__contact__single .contact_content .text { display: inline-flex; overflow: hidden; } .h10_footer__contact .footer__contact__single .contact_content .text span { line-height: 1.4; display: inline-flex; text-shadow: 0 25px 0; } .h10_footer__contact .footer__contact__single a:hover .icon i { transform: translateX(-30px); } .h10_footer__contact .footer__contact__single a:hover .text span { transform: translateY(-25px); } /* !END: Footer CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .hero--11 { position: relative; overflow: hidden; background-color: var(--tj-color-theme-dark); background-size: cover; background-repeat: no-repeat; background-position: center; z-index: 0; border-radius: 0 0 20px 20px; } .hero--11 .hero__inner { padding-top: 152px; padding-bottom: 80px; overflow: visible; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px) { .hero--11 .hero__inner { padding-top: 120px; padding-bottom: 150px; } } @media (max-width: 575px) { .hero--11 .hero__inner { padding-top: 120px; padding-bottom: 60px; } } .hero--11 .hero__left { max-width: 550px; position: relative; z-index: 1; padding-top: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero--11 .hero__left { max-width: 500px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--11 .hero__left { padding-top: 0; padding-bottom: 60px; } } .hero--11 .hero__left .btn-area { display: flex; flex-wrap: wrap; gap: 15px; } .hero--11 .hero__left .btn-area .tj-btn--popup { width: auto; height: auto; border-radius: 60px; padding: 19px 30px; color: var(--tj-color-common-white); background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border-color: transparent; } .hero--11 .hero__left .btn-area .tj-btn--popup i { color: var(--tj-color-common-white); transform: translateY(-3px); } .hero--11 .hero__left .btn-area .tj-btn--popup .btn-text { font-weight: var(--tj-fw-sbold); overflow: hidden; } .hero--11 .hero__left .btn-area .tj-btn--popup .btn-text span { text-shadow: 0 20px 0; } .hero--11 .hero__left .btn-area .tj-btn--popup:hover .btn-text span { transform: translateY(-20px); } .hero--11 .hero__subtitle { color: var(--tj-color-common-white2); font-size: 18px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-medium); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 28px; } .hero--11 .hero__subtitle img { width: 28px; animation: shake2 1.6s linear infinite; } .hero--11 .hero__title { line-height: 1.143; letter-spacing: -0.02em; font-weight: var(--tj-fw-sbold); color: var(--tj-color-common-white); margin-top: -15px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .hero--11 .hero__title { font-size: 55px; max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--11 .hero__title { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .hero--11 .hero__title { font-size: 60px; margin-top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero--11 .hero__title { font-size: 60px; } } @media (max-width: 575px) { .hero--11 .hero__title { font-size: 40px; } } .hero--11 .hero__desc { color: var(--tj-color-common-white2); font-size: var(--tj-fs-h5); margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--11 .hero__desc { font-size: 18px; } } .hero--11 .hero__socials { margin-top: 143px; } .hero--11 .hero__socials span { color: var(--tj-color-common-white); font-size: 16px; font-weight: var(--tj-fw-medium); line-height: 1; text-transform: uppercase; display: inline-flex; margin-bottom: 18px; opacity: 0.5; } .hero--11 .hero__socials .tj-socials ul { gap: 6px; line-height: 1; } .hero--11 .hero__socials .tj-socials ul li a i { color: var(--tj-color-common-white); position: relative; z-index: 0; } .hero--11 .hero__socials .tj-socials ul li a i::after { content: ""; position: absolute; top: 1px; bottom: 1px; left: 1px; right: 1px; background-color: transparent; border-radius: 100%; z-index: -1; } .hero--11 .hero__socials .tj-socials ul li a:hover i { color: var(--tj-color-theme-secondary); } .hero--11 .hero__socials .tj-socials ul li a:hover i::after { background-color: var(--tj-color-common-white); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .hero--11 .hero__socials { margin-top: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero--11 .hero__socials { margin-top: 50px; } } .hero--11 .hero__shape { position: absolute; max-width: 130px; width: 100%; top: 40%; left: -60px; z-index: 0; mix-blend-mode: luminosity; } .hero--11 .hero__shape--2 { top: auto; bottom: -50px; left: auto; right: 150px; } .hero--11 .hero__shape img { opacity: 0.18; } .h10-hero-banner { max-width: 543px; width: 100%; border-radius: 12px; overflow: hidden; mask-image: url(../images/shape/h10-hero-img-mask.svg); mask-repeat: no-repeat; mask-size: contain; mask-position: top left; margin-inline-start: 15px; } .h10-hero-banner-area { max-width: 645px; width: 100%; position: relative; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h10-hero-banner-area { max-width: 630px; } } .h10-hero-banner-area .hero-funfact { max-width: 190px; width: 100%; background-color: var(--tj-color-theme-secondary); border-radius: 8px; padding: 25px; position: absolute; bottom: 150px; right: -25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner-area .hero-funfact { max-width: 170px; padding: 20px; bottom: 130px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h10-hero-banner-area .hero-funfact { max-width: 150px; padding: 15px; bottom: 114px; right: -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner-area .hero-funfact { bottom: 115px; right: -5px; } } @media (max-width: 575px) { .h10-hero-banner-area .hero-funfact { max-width: 200px; padding: 18px 15px; position: static; } } .h10-hero-banner-area .hero-funfact .number { font-size: 76px; line-height: 0.8; color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); letter-spacing: -0.025em; display: flex; align-items: end; } .h10-hero-banner-area .hero-funfact .number .symbol { font-size: 38px; line-height: 1; font-weight: var(--tj-fw-ebold); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner-area .hero-funfact .number .symbol { font-size: 30px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) { .h10-hero-banner-area .hero-funfact .number .symbol { font-size: 26px; } } .h10-hero-banner-area .hero-funfact .number .odometer.odometer-auto-theme, .h10-hero-banner-area .hero-funfact .number .odometer span { color: var(--tj-color-common-white); line-height: 0.8; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner-area .hero-funfact .number { font-size: 66px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), (max-width: 575px) { .h10-hero-banner-area .hero-funfact .number { font-size: 50px; } } .h10-hero-banner-area .hero-funfact .text { font-size: 16px; line-height: 1.5; color: var(--tj-color-common-white); font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; margin-top: 26px; } @media (max-width: 575px) { .h10-hero-banner-area .hero-funfact .text { margin-top: 12px; } } .h10-hero-banner-area .hero-funfact--2 { background-color: var(--tj-color-common-white); bottom: -88px; right: 235px; } .h10-hero-banner-area .hero-funfact--2 .number { color: var(--tj-color-theme-dark); } .h10-hero-banner-area .hero-funfact--2 .number .odometer span { color: var(--tj-color-theme-dark); } .h10-hero-banner-area .hero-funfact--2 .text { color: var(--tj-color-theme-dark); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-hero-banner-area .hero-funfact--2 { bottom: -90px; right: 206px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h10-hero-banner-area .hero-funfact--2 { bottom: -75px; right: 165px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner-area .hero-funfact--2 { bottom: -100px; right: 220px; } } .h10-hero-banner-area .star-shape { width: 86px; position: absolute; top: 70px; right: 25px; } .h10-hero-banner-area .star-shape img { animation: spinner 8s linear infinite; } @media only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner-area .star-shape { width: 70px; top: 30px; } } @media (max-width: 575px) { .h10-hero-banner-area .star-shape { width: 70px; top: -100px; right: 0; } } .h10-hero-banner-area .cursor-shape { width: 112px; position: absolute; bottom: 7px; left: -155px; } .h10-hero-banner-area .cursor-shape img { animation: moveHor 2.5s alternate infinite linear; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h10-hero-banner-area .cursor-shape { left: -40px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-banner-area .cursor-shape { left: 0; } } .h10-hero-banner img { width: 100%; height: 100%; object-fit: cover; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-hero-banner { margin-inline-start: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-hero-banner { max-width: 460px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .h10-hero-banner { max-width: 400px; } } @media (max-width: 575px) { .h10-hero-funfact-wrap { display: flex; gap: 15px; margin-top: 15px; } } @keyframes shake2 { 0% { transform: rotate(0); } 10% { transform: rotate(7deg); } 20% { transform: rotate(-7deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50% { transform: rotate(2deg); } 60% { transform: rotate(-2deg); } 70% { transform: rotate(1deg); } 80%, 90%, 100% { transform: rotate(0); } } /* !END: Hero CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .h10-feature-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .h10-feature-wrap { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-feature-wrap { grid-template-columns: 100%; } } .h10-feature.service__card { background: transparent; padding: 15px 15px 25px 15px; border-radius: 10px; flex: 1; } .h10-feature.service__card::after { display: none; } .h10-feature.service__card .service__icon { background-color: var(--tj-color-theme-bg1); width: 100%; height: 180px; font-size: 80px; border: 0; border-radius: 8px; margin-bottom: 18px; } .h10-feature.service__card .service__icon i { color: var(--tj-color-theme-secondary); } .h10-feature.service__card .service__inner { padding: 0 15px; } .h10-feature.service__card .service__title { margin-bottom: 16px; color: var(--tj-color-heading-primary); } .h10-feature.service__card .service__title a { color: inherit; } .h10-feature.service__card .service__desc { color: var(--tj-color-text-body); margin-bottom: 20px; } .h10-feature.service__card:nth-child(even) .service__icon { background-color: var(--tj-color-theme-bg2); } .h10-feature.service__card:nth-child(even) .service__icon i { color: var(--tj-color-theme-primary); } .h10-feature.service__card .tj-btn-2 { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: var(--tj-color-heading-primary); } .h10-feature.service__card .tj-btn-2 span { text-shadow: 0 22px 0; text-indent: -100px; } .h10-feature.service__card .tj-btn-2 i { color: inherit; font-size: 18px; } .h10-feature.service__card .tj-btn-2:hover span { transform: translateY(-22px); } .h10-feature.service__card:hover .tj-btn-2 span { text-indent: 0; } /* !END: Service CSS */ /**---------------------------------------- START: About CSS ----------------------------------------*/ .about--11 .experience-wrap { background-color: var(--tj-color-theme-secondary); border-radius: 10px; overflow: hidden; max-width: 368px; width: 100%; padding: 60px 0; position: relative; z-index: 2; } .about--11 .experience-wrap .text-marquee-slider__wrap { left: 6px; z-index: 1; width: 122%; height: 100%; transform: rotate(-90deg); position: absolute; top: 0; overflow: hidden; } .about--11 .experience-wrap .text-marquee-slider__wrap .text-marquee-slider__item { align-items: center; gap: 15px; } .about--11 .experience-wrap .text-marquee-slider__wrap .text-marquee-slider__title { font-size: 24px; opacity: 1; } .about--11 .experience-wrap .text-marquee-slider__wrap .text-marquee-slider__dot { width: 6px; height: 6px; border-radius: 100%; background-color: currentColor; opacity: 1; margin-top: 6px; } .about--11 .experience-wrap .experience-year { position: relative; z-index: 2; margin-inline-start: 145px; } @media (max-width: 575px) { .about--11 .experience-wrap .experience-year { margin-inline-start: calc(50% - 20px); } } .about--11 .experience-wrap .experience-year .year-number { font-size: 318px; line-height: 0.85; font-weight: var(--tj-fw-bold); font-family: var(--tj-ff-heading); color: var(--tj-color-common-white); letter-spacing: -0.025em; margin-top: -20px; white-space: nowrap; } @media (max-width: 575px) { .about--11 .experience-wrap .experience-year .year-number { font-size: 280px; } } .about--11 .experience-wrap .experience-year .year-text { font-size: 16px; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-heading); color: var(--tj-color-common-white); letter-spacing: -0.02em; max-width: 147px; width: 100%; margin-top: 25px; } .about-11 .plus-shape { animation: spinner 3s 0s infinite alternate none running; } .about-11 .section-heading__title span { color: inherit; width: 120px; height: 56px; line-height: 1; position: relative; top: 10px; display: inline-block; z-index: 2; margin-top: -5px; cursor: pointer; } .about-11 .section-heading__title span img { position: absolute; top: 0; left: 0; max-width: 100%; height: 100%; border-radius: 100px; transition: all 0.3s linear 0s; } .about-11 .section-heading__title span:hover img { transform: scale(1.3); } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .about-11 .section-heading__title span { width: 102px; height: 48px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-11 .section-heading__title span { width: 86px; height: 40px; } } @media (max-width: 575px) { .about-11 .section-heading__title span { width: 78px; height: 36px; top: 7px; } } /* !END: About CSS */ /**---------------------------------------- START: Client CSS ----------------------------------------*/ .client-slider-3 { padding-top: 0; padding-bottom: 0; } .client-slider-3 .client-logo { width: 233px; height: 133px; border: 0; } .client-slider-3 .client-logo img { opacity: 1; } .client-slider-3 .client-logo:hover img { opacity: 1; visibility: visible; width: auto; animation: gelatine 0.5s linear; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .client-slider-3 .client-logo { width: 210px; height: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .client-slider-3 .client-logo { width: 190px; height: 100px; } } @media (max-width: 575px) { .client-slider-3 .client-logo { width: 170px; height: 80px; } } /* !END: Client CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .h10-service-area { position: relative; z-index: 1; } .h10-service-item { width: 57.5%; border-bottom: 1px solid var(--tj-color-border-1); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-item { width: 100%; } } .h10-service-item:first-child { border-top: 1px solid var(--tj-color-border-1); } .h10-service-item.hover-item.active .h10-service-content { height: auto; } .h10-service-item.hover-item.active .h10-service-content .service-icon { background-color: var(--tj-color-theme-primary); color: var(--tj-color-common-white); } .h10-service-item.hover-item.active .h10-service-content .desc { opacity: 1; transform: scaleY(1); line-height: 1.625; } .h10-service-item.hover-item.active .h10-service-content .btn-icon i { transform: rotate(0); } .h10-service-item.hover-item.active .h10-service-img { z-index: 5; } .h10-service-item.hover-item.active .h10-service-img img { left: 0; opacity: 1; visibility: visible; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-item.hover-item.active .h10-service-img { height: 300px; margin-bottom: 24px; } } .h10-service-item .h10-service-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .h10-service-content { padding: 28px 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 15px; overflow: hidden; transition: all 0.3s ease-in-out; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .h10-service-content { padding: 24px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-content { padding: 20px 0; } } .h10-service-content .service-icon { width: 64px; height: 64px; border-radius: 50%; background-color: var(--tj-color-theme-secondary); color: var(--tj-color-common-white); font-size: 40px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-content .service-icon { width: 54px; height: 54px; font-size: 30px; } } .h10-service-content .service-title { font-size: 26px; margin: 15px 0; } .h10-service-content .service-title a:hover { color: var(--tj-color-theme-primary); } .h10-service-content .desc { max-width: 645px; margin: 0; opacity: 0; transform: scaleY(0); transform-origin: top; line-height: 0; transition: all 0.3s; } .h10-service-content .btn-icon { font-size: 20px; line-height: 1; width: 30px; height: 30px; margin-top: 20px; } .h10-service-content .btn-icon i { display: inline-flex; transform: rotate(-45deg); } .h10-service-content .btn-icon:hover { color: var(--tj-color-theme-primary); } .h10-service-inner { flex: 1; transition: all 0.3s ease-in-out; } .h10-service-img { width: 502px; height: 560px; position: absolute; top: 0; right: 0; background-color: var(--tj-color-theme-bg1); border-radius: 10px; overflow: hidden; z-index: 0; } .h10-service-img img { position: absolute; left: -50%; opacity: 0; visibility: hidden; -webkit-transition: all 0.2s linear 0s; -moz-transition: all 0.2s linear 0s; -ms-transition: all 0.2s linear 0s; -o-transition: all 0.2s linear 0s; transition: all 0.2s linear 0s; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-img img { position: unset; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .h10-service-img { width: 430px; } } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h10-service-img { width: 360px; height: 480px; } } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-service-img { width: 100%; height: 0; position: unset; -webkit-transition: all 0.3s linear 0s; -moz-transition: all 0.3s linear 0s; -ms-transition: all 0.3s linear 0s; -o-transition: all 0.3s linear 0s; transition: all 0.3s linear 0s; } } /* !END: Service CSS */ /**---------------------------------------- START: Package CSS ----------------------------------------*/ .h10-package .section-heading__title { color: var(--tj-color-common-white); } .toggle_switcher { cursor: pointer; display: inline-block; } .toggle_switcher .toggle-checkbox { position: absolute; visibility: hidden; } .toggle_switcher .toggle-checkbox:checked + .toggle-switch::before { left: 37px; } .toggle_switcher .toggle-switch { display: inline-block; background-color: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border: 1px solid var(--tj-color-border-4); border-radius: 43px; width: 70px; height: 36px; position: relative; vertical-align: middle; transition: background 0.25s; } .toggle_switcher .toggle-switch::before, .toggle_switcher .toggle-switch::after { content: ""; } .toggle_switcher .toggle-switch::before { display: block; background-color: var(--tj-color-theme-primary); border-radius: 50%; width: 26px; height: 26px; position: absolute; top: 4px; left: 5px; transition: left 0.25s; } .price_switcher { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--tj-fw-sbold); font-size: 16px; line-height: 1.5; color: var(--tj-color-common-white); } .price_switcher p { margin: 0; } .price_switcher span { color: var(--tj-color-theme-primary); } .package__single--3 { background: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border-color: var(--tj-color-border-4); } .package__single--3.package__single--recommended { background: var(--tj-color-theme-bg4); backdrop-filter: blur(20px); border: 1px solid var(--tj-color-border-4); } .package__single--3.package__single--recommended .tj-btn--full { border-color: var(--tj-color-border-4); } .package__single--3.package__single--recommended .tj-btn--full::after { display: block; transform: translate(-50%, -50%) scale(1); } .package__single--3 .package__price__disc { position: absolute; top: 40px; right: 30px; z-index: 2; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .package__single--3 .package__price__disc { top: 30px; right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .package__single--3 .package__price__disc { top: 30px; right: 15px; } } .package__single--3 .package__features__title, .package__single--3 .package__price, .package__single--3 .package__name { color: var(--tj-color-common-white); } .package__single--3 .package__price { border-color: var(--tj-color-border-4); } .package__single--3 .package__features { background: transparent; border: 1px solid var(--tj-color-border-4); margin-top: 30px; } .package__single--3 .package__features ul li { color: var(--tj-color-common-white2); } .package__single--3 .package__features ul li::before { color: var(--tj-color-common-white2); } .package__single--3 .package__price__type, .package__single--3 .package__desc { color: var(--tj-color-common-white2); } .package__single--3 .tj-btn--full { color: var(--tj-color-common-white); border-color: var(--tj-color-border-4); } .package__single--3 .tj-btn--full .btn-text { overflow: hidden; } .package__single--3 .tj-btn--full .btn-text span { text-shadow: 0 22px 0; } .package__single--3 .tj-btn--full .btn-icon { overflow: hidden; } .package__single--3 .tj-btn--full .btn-icon i { color: var(--tj-color-common-white); text-shadow: -15px 0 0; } .package__single--3 .tj-btn--full::after { display: none; } .package__single--3 .tj-btn--full:hover .btn-text span { transform: translateY(-22px); } .package__single--3 .tj-btn--full:hover .btn-icon i { transform: translateX(15px); } .package__single--3 .package__badge { background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-border-4); width: 300px; padding: 6px 60px 5px; } .package__single--3 .package__badge .scroll-slider { --gap: 10px; } .package__single--3 .package__badge .scroll-slider .badge-item { display: flex; align-items: center; gap: 10px; } .package__single--3 .package__badge .scroll-slider .badge-item .dot { width: 4px; height: 4px; border-radius: 50%; background-color: var(--tj-color-common-white); } .package__single--3 .scroll-wrapper { animation: scroll 20s linear infinite; } .package__single--3 [dir=rtl] .scroll-wrapper { animation: scroll-rtl 30s linear infinite; } /* !END: Package CSS */ /**---------------------------------------- START: Portfolio CSS ----------------------------------------*/ .h10-portfolio-section { padding-top: 120px; padding-bottom: 90px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h10-portfolio-section { padding-top: 100px; padding-bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h10-portfolio-section { padding-top: 80px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-portfolio-section { padding-top: 60px; padding-bottom: 60px; } } .h10-portfolio-section .section-heading--2 { align-items: start; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-portfolio-section .section-heading--2 { flex-direction: column; margin-bottom: 30px; } } .h10-portfolio-section .section-heading__right { margin-top: auto; margin-bottom: 0; } .h10-portfolio-section .section-heading__title { font-size: 70px; margin-top: -16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px) { .h10-portfolio-section .section-heading__title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .h10-portfolio-section .section-heading__title { font-size: 50px; margin-top: -10px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-portfolio-section .section-heading__title { font-size: 40px; margin-top: -10px; } } .portfolio-filter .button-group { display: inline-flex; flex-wrap: wrap; align-items: center; position: relative; } .portfolio-filter .button-group button { background: transparent; border: none; color: var(--tj-color-text-body); font-size: 16px; font-weight: var(--tj-fw-medium); line-height: 1; padding: 13px 22px; border-radius: 50px; border: 1px solid var(--tj-color-border-1); z-index: 10; position: relative; } .portfolio-filter .button-group button:hover, .portfolio-filter .button-group button.active { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); } .portfolio-box { padding-top: 50px; background-size: contain; background-repeat: no-repeat; background-position: center; position: relative; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-box { padding-top: 30px; } } .portfolio-box .h8-portfolio-single.portfolio__single { float: left; display: inline-block; margin-bottom: 30px; max-width: calc(50% - 15px); padding: 15px; } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio-box .h8-portfolio-single.portfolio__single { max-width: calc(50% - 10px); margin-bottom: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-box .h8-portfolio-single.portfolio__single { max-width: 100%; margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 1024px) { .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__img { height: 260px; } } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__content { align-items: flex-end; padding: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__content { padding: 15px 0; } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__content__left { width: calc(100% - 60px); } } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__title { margin-top: -5px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__title br { display: none; } } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__tag { color: var(--tj-color-text-body); border-color: var(--tj-color-border-1); background-color: var(--tj-color-common-white); margin: 15px 0 0 0; } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__tag:hover { color: var(--tj-color-common-white); border-color: var(--tj-color-theme-secondary) !important; background-color: var(--tj-color-theme-secondary); } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__action a { position: static; transform: rotate(-45deg); opacity: 1; font-size: 22px; color: var(--tj-color-theme-dark); background-color: var(--tj-color-common-white); border-color: var(--tj-color-border-1); } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__action a i { color: inherit; } .portfolio-box .h8-portfolio-single.portfolio__single .portfolio__single__action a:hover { transform: rotate(0) !important; } .portfolio-box .h8-portfolio-single.portfolio__single:hover .portfolio__single__action a { color: var(--tj-color-common-white); background-color: var(--tj-color-theme-primary); border-color: var(--tj-color-theme-primary); } .portfolio-box .h8-portfolio-single.portfolio__single:hover .portfolio__single__action a i { color: var(--tj-color-common-white); } .portfolio-box .portfolio-sizer { width: calc(50% - 15px); } .portfolio-box .gutter-sizer { width: 30px; } /* !END: Portfolio CSS */ /**---------------------------------------- START: Testimonials CSS ----------------------------------------*/ .section-heading__title .client__thumbs__wrapper { width: auto; height: auto; top: 0; margin-top: 0; } .section-heading__title .client__thumbs__wrapper:hover img { transform: scale(1); } .h10-testimonial-wrap { display: flex; flex-direction: column; gap: 30px; mask-image: linear-gradient(90deg, rgba(217, 217, 217, 0) 0%, rgb(166, 166, 166) 20%, rgb(140, 140, 140) 80%, rgba(115, 115, 115, 0) 100%); /* Scroll slider */ /* RTL override */ } .h10-testimonial-wrap .scroll-slider { --gap: 30px; position: relative; display: flex; overflow: hidden; user-select: none; align-items: center; gap: var(--gap); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-testimonial-wrap .scroll-slider { --gap: 20px; } } .h10-testimonial-wrap .scroll-wrapper { flex-shrink: 0; display: flex; gap: var(--gap); min-width: 100%; animation: scroll 50s linear infinite; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-testimonial-wrap .scroll-wrapper { animation: scroll 25s linear infinite; } } .h10-testimonial-wrap [dir=rtl] .scroll-wrapper { animation: scroll-rtl 50s linear infinite; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .h10-testimonial-wrap [dir=rtl] .scroll-wrapper { animation: scroll-rtl 25s linear infinite; } } .testimonials__slider__item.h10-testimonial-item { max-width: 420px; width: 100%; background-color: var(--tj-color-common-white); padding: 30px; border: 0; border-radius: 12px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonials__slider__item.h10-testimonial-item { padding: 30px; } } @media (max-width: 575px) { .testimonials__slider__item.h10-testimonial-item { padding: 24px 20px 28px; } } .testimonials__slider__item.h10-testimonial-item .testimonials__qoute__2 { font-size: 45px; color: var(--tj-color-theme-secondary); display: inline-flex; } .testimonials__slider__item.h10-testimonial-item .testimonials__desc { font-size: 18px; color: var(--tj-color-text-body); border: 0; padding-top: 17px; padding-bottom: 18px; margin-bottom: 0; } @media (max-width: 575px) { .testimonials__slider__item.h10-testimonial-item .testimonials__desc { font-size: 16px; } } .testimonials__slider__item.h10-testimonial-item .testimonials__author__name { margin-bottom: 0; } .testimonials__slider__item.h10-testimonial-item .testimonials__rating { margin-bottom: 0; } [dir=rtl] .h10-testimonial-item { direction: ltr; } /* !END: Testimonials CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .h10-blog .section-heading__desc { max-width: 292px; } .blog__single.h10-blog-single { background-color: var(--tj-color-theme-bg1); border-radius: 12px; } .blog__single.h10-blog-single .blog__single__banner { height: 303px; } .blog__single.h10-blog-single .blog__single__banner a { height: 100%; } .blog__single.h10-blog-single .blog__single__banner a img { height: 100%; object-fit: cover; } .blog__single.h10-blog-single .blog__single__content { padding: 25px 30px 30px 30px; background-color: transparent; } .blog__single.h10-blog-single .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 16px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single.h10-blog-single .blog__single__content__list { margin-bottom: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single.h10-blog-single .blog__single__content__list { margin-bottom: 12px; } } .blog__single.h10-blog-single .blog__single__content__list li { position: relative; font-size: 14px; } .blog__single.h10-blog-single .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } .blog__single.h10-blog-single .blog__single__content__list li:last-child::after { display: none; } .blog__single.h10-blog-single .blog__single__content__tag { font-family: var(--tj-ff-body); display: inline-flex; justify-content: center; align-items: center; padding: 3px 6px 3px; background-color: var(--tj-color-common-white); border: 1px solid var(--tj-color-border-1); color: var(--tj-color-theme-secondary); font-size: 16px; font-weight: var(--tj-fw-medium); line-height: 1; letter-spacing: 2%; border-radius: 17px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px) { .blog__single.h10-blog-single .blog__single__content__tag { font-size: 14px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single.h10-blog-single .blog__single__content__tag { font-size: 14px; } } .blog__single.h10-blog-single .blog__single__content__tag:hover { color: var(--tj-color-common-white) !important; background-color: var(--tj-color-theme-secondary); border-color: var(--tj-color-theme-secondary); } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single.h10-blog-single .blog__single__content { padding: 20px 15px; } } .blog__single.h10-blog-single .blog__single__title { margin-bottom: 22px; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single.h10-blog-single .blog__single__title { margin-bottom: 15px; } } .blog__single.h10-blog-single-small { display: flex; align-items: center; background-color: var(--tj-color-theme-bg1); border-radius: 8px; } .blog__single.h10-blog-single-small:not(:last-child) { margin-bottom: 30px; } @media only screen and (min-width: 1025px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single.h10-blog-single-small:not(:last-child) { margin-bottom: 20px; } } .blog__single.h10-blog-single-small .blog__single__banner { max-width: 145px; width: 100%; height: 150px; flex: 0 0 auto; } .blog__single.h10-blog-single-small .blog__single__banner a { height: 100%; } .blog__single.h10-blog-single-small .blog__single__banner a img { height: 100%; object-fit: cover; } .blog__single.h10-blog-single-small .blog__single__content { padding: 25px; background-color: transparent; } .blog__single.h10-blog-single-small .blog__single__content__list { display: flex; gap: 24px; align-items: center; margin-bottom: 0; } .blog__single.h10-blog-single-small .blog__single__content__list li { position: relative; font-size: 14px; } .blog__single.h10-blog-single-small .blog__single__content__list li::after { content: ""; position: absolute; top: 50%; left: 100%; width: 4px; height: 4px; background-color: var(--tj-color-theme-dark); border-radius: 100%; transform: translate(10px, -50%); } .blog__single.h10-blog-single-small .blog__single__content__list li:last-child::after { display: none; } @media only screen and (min-width: 768px) and (max-width: 1024px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__single.h10-blog-single-small .blog__single__content { padding: 15px; } } .blog__single.h10-blog-single-small .blog__single__title { font-size: 16px; font-weight: var(--tj-fw-sbold); margin-bottom: 10px; } /* !END: Blog CSS */ /*# sourceMappingURL=ranko-main.css.map */