/** Gerold Animation CSS */ @-webkit-keyframes bounce-thum-1 { 0% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @keyframes bounce-thum-1 { 0% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes waves { 0%, 100% { -webkit-clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50% { -webkit-clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } } @keyframes waves { 0%, 100% { -webkit-clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50% { -webkit-clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } } @-webkit-keyframes up-down-move { 0% { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @keyframes up-down-move { 0% { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes up-down-move-2 { 0% { -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @keyframes up-down-move-2 { 0% { -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } /**---------------------------------------- START: Theme Header CSS ----------------------------------------*/ .tj-header-area.header-1 .header-button { margin-left: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-1 .header-button { margin-left: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-header-area.header-1 .header-button { margin-left: auto; } } @media (max-width: 575px) { .tj-header-area.header-1 .header-button { margin-left: auto; } } /* !END: Theme Header CSS */ /**---------------------------------------- START: Theme Header 04 CSS ----------------------------------------*/ .tj-header-area.header-4 { padding: 20px 0; } .tj-header-area.header-4 .header-menu { border: 1px solid var(--tj-primary-color); border-radius: 50px; padding: 0px 40px; } .tj-header-area.header-4 .header-menu ul > li > a { padding: 14px 0px; } .tj-header-area.header-4 .header-menu ul > li > a::before { bottom: 8px; display: none; } .tj-header-area.header-4 .header-menu ul > li > a::after { right: -20px; display: none; } .tj-header-area.header-4 .header-menu ul > li > .sub-menu { top: 102%; } .tj-header-area.header-4 .header-menu ul > li > .sub-menu > li > .sub-menu { top: 0; } .tj-header-area.header-4 .header-menu ul > li > .sub-menu > li.has-dropdown > a::after { display: block; } .tj-header-area.header-4 .social-icons li a { color: var(--tj-white); border: 1px solid var(--tj-primary-color); } .tj-header-area.header-4 .logo-box { max-width: 205px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-4 .logo-box { max-width: 130px; } } /* !END: Theme Header 04 CSS */ /** Buttons CSS */ .btn-inline { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; color: var(--tj-white); gap: 8px; overflow: hidden; padding-right: 24px; text-decoration: none; position: relative; z-index: 1; -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .btn-inline::after, .btn-inline::before { content: "\f178"; font-family: var(--tj-ff-fontawesome); font-weight: var(--tj-fw-regular); color: var(--tj-white); font-size: 16px; line-height: 1; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; } .btn-inline::before { -webkit-transform: translateX(-120%) translateY(-50%); -ms-transform: translateX(-120%) translateY(-50%); transform: translateX(-120%) translateY(-50%); } .btn-inline::after { left: auto; right: 0; } .btn-inline > span { transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; line-height: normal; letter-spacing: 0.02em; } .btn-inline:hover::before { -webkit-transform: translateX(0) translateY(-50%); -ms-transform: translateX(0) translateY(-50%); transform: translateX(0) translateY(-50%); } .btn-inline:hover::after { -webkit-transform: translateX(120%) translateY(-50%); -ms-transform: translateX(120%) translateY(-50%); transform: translateX(120%) translateY(-50%); } .btn-inline:hover > span { -webkit-transform: translateX(24px); -ms-transform: translateX(24px); transform: translateX(24px); } .elementor-align-justify .tj-btn-primary, .elementor-align-justify .tj-btn-primary-2 { width: 100%; } .tj-footer-area.style-4 { padding: 0px; } .footer-top-area { background-color: var(--tj-theme-primary); padding: 34px 0; } .footer-contact-infos { text-align: center; } .footer-contact-infos .contact-footer-item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; row-gap: 10px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 1; } .footer-contact-infos .contact-footer-item .line { color: var(--tj-white); } .footer-contact-infos .contact-footer-item .line:last-child { display: none; } .footer-contact-infos .contact-footer-item .contact_text span { font-size: 20px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-medium); letter-spacing: 0.02em; } .footer-contact-infos .contact-footer-item .contact_text a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; font-size: 20px; color: var(--tj-white); font-weight: var(--tj-fw-medium); letter-spacing: 0.02em; text-decoration: none; line-height: 1; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; z-index: 1; } .footer-contact-infos .contact-footer-item .contact_text a .active-link { -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .footer-contact-infos .contact-footer-item .contact_text a .hover-link { opacity: 0; visibility: hidden; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); border-radius: 50%; position: absolute; } .footer-contact-infos .contact-footer-item .contact_text a:hover .active-link { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .footer-contact-infos .contact-footer-item .contact_text a:hover .hover-link { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-contact-infos .contact-footer-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-contact-infos .contact-footer-item .line { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-contact-infos .contact-footer-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-contact-infos .contact-footer-item .line { display: none; } .footer-contact-infos .contact-footer-item .contact_text span { font-size: 18px; } .footer-contact-infos .contact-footer-item .contact_text a { font-size: 18px; } } @media (max-width: 575px) { .footer-contact-infos .contact-footer-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .footer-contact-infos .contact-footer-item .line { display: none; } .footer-contact-infos .contact-footer-item .contact_text span { font-size: 16px; } .footer-contact-infos .contact-footer-item .contact_text a { font-size: 16px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-middle-area { padding: 34px 0; } } .footer-social-media { max-width: 1145px; width: 100%; margin-left: auto; margin-right: auto; } .footer-social-media ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .footer-social-media ul li { line-height: 1; border-right: 1px solid rgba(255, 255, 255, 0.1); } .footer-social-media ul li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 278px; height: 238px; color: var(--tj-heading-secondary); font-size: 20px; font-weight: var(--tj-fw-medium); letter-spacing: 0.02em; text-decoration: none; padding: 10px; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .footer-social-media ul li a .active-media { -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .footer-social-media ul li a .hover-media { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 35px; height: 35px; line-height: 1; font-size: 16px; border: 1px solid var(--tj-white); opacity: 0; visibility: hidden; -webkit-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); border-radius: 50%; position: absolute; } .footer-social-media ul li a .hover-media i { position: relative; left: 1px; } .footer-social-media ul li a:hover .active-media { opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .footer-social-media ul li a:hover .hover-media { opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .footer-social-media ul li:last-child { border: none; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-social-media ul li a { width: 230px; height: 210px; font-size: 18px; letter-spacing: 0px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-social-media ul li a { width: 170px; height: 160px; font-size: 18px; letter-spacing: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-social-media { max-width: 360px; } .footer-social-media ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 16px; } .footer-social-media ul li { border-right: none; } .footer-social-media ul li a { width: 170px; height: auto; font-size: 18px; letter-spacing: 0px; } } @media (max-width: 575px) { .footer-social-media ul { -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-column-gap: 16px; -moz-column-gap: 16px; column-gap: 16px; row-gap: 16px; } .footer-social-media ul li { border-right: none; } .footer-social-media ul li a { width: 160px; height: auto; font-size: 16px; letter-spacing: 0px; } } .footer-bottom-area { padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.1); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-bottom-area { padding: 25px 0; } } .copy-style-4 p { color: var(--tj-grey-5); margin-bottom: 0; } .copy-style-4 p a { color: var(--tj-white); font-weight: var(--tj-fw-regular); text-decoration: none; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .copy-style-4 p a:hover { color: var(--tj-theme-primary); } /**---------------------------------------- START: Theme sec title CSS ----------------------------------------*/ .section-header.style-2 span { display: inline-block; font-size: 12px; font-weight: var(--tj-fw-medium); text-transform: uppercase; color: var(--tj-heading-secondary); background-color: var(--tj-theme-secondary); padding: 10px 20px; border-radius: 50px; margin-bottom: 25px; } .section-header.style-2 .title { font-weight: var(--tj-fw-medium); margin-bottom: 0; } .section-header.style-3 .subtitle { display: inline-block; color: var(--tj-heading-primary); font-weight: var(--tj-fw-medium); font-size: 12px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 25px; } .section-header.style-3 .title { font-size: 44px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-header.style-3 .title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-header.style-3 .title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-header.style-3 .title { font-size: 30px; } } .section-header.style-4 .subtitle { display: inline-block; color: var(--tj-heading-primary); font-size: 12px; font-weight: var(--tj-fw-sbold); letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(129, 76, 236, 0.2); border-radius: 50px; padding: 5px 12px; margin-bottom: 25px; } .section-header.style-4 .title { font-size: 44px; font-weight: var(--tj-fw-sbold); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 0; display: block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section-header.style-4 .title { font-size: 42px; } } @media (max-width: 575px) { .section-header.style-4 .title { font-size: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-header.style-4 .title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-header.style-4 .title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-header.style-4 .title { font-size: 30px; } } .section-header.style-5 .subtitle { display: inline-block; color: var(--tj-heading-primary); font-size: 12px; font-weight: var(--tj-fw-sbold); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 20px; } .section-header.style-5 .title { font-size: 44px; font-weight: var(--tj-fw-sbold); text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: 0; display: block; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section-header.style-5 .title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section-header.style-5 .title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section-header.style-5 .title { font-size: 30px; } } /* !END: Theme sec title CSS */ /**---------------------------------------- START: Theme cursor CSS ----------------------------------------*/ body.tj-magic-cursor #magic-cursor { display: block; } #magic-cursor { position: absolute; display: none; width: 10px; height: 10px; pointer-events: none; z-index: 99999; opacity: 0; } #ball { position: fixed; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; pointer-events: none; background-color: var(--tj-theme-primary) !important; border-radius: 50%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; mix-blend-mode: difference; color: transparent; } /* Ball view ============= */ #ball .ball-view { position: absolute; opacity: 0; visibility: hidden; padding: 0 5px; line-height: 1.1; text-align: center; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); font-family: var(--tj-ff-body); font-weight: 400; font-size: 16px; text-transform: capitalize; color: var(--tj-white); } /* Ball drag ============= */ #ball .ball-drag { position: absolute; display: block; width: 100%; padding: 0 5px; font-size: 15px; font-weight: 600; color: var(--tj-black); line-height: 1.2; text-align: center; -webkit-transition: all 0.3s; transition: all 0.3s; } #ball .ball-drag::before, #ball .ball-drag::after { position: absolute; top: 50%; margin-top: -5px; font-size: 19px; color: var(--tj--white); height: 10px; line-height: 10px; font-family: "Font Awesome 6 Pro"; font-weight: 900; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; } #ball .ball-drag::before { content: "\f104"; /* Font Awesome */ left: 0; -webkit-transform: translate3d(-30px, 0, 0); transform: translate3d(-30px, 0, 0); -webkit-transition: all 0.25s; transition: all 0.25s; } #ball .ball-drag::after { content: "\f105"; /* Font Awesome */ right: 0; -webkit-transform: translate3d(30px, 0, 0); transform: translate3d(30px, 0, 0); -webkit-transition: all 0.25s; transition: all 0.25s; } #ball.with-blur { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } /* Ball close ============== */ #ball.ball-close-enabled { opacity: 1 !important; } #ball .ball-close { position: absolute; padding: 0 5px; font-size: 14px; font-weight: 600; color: var(--tj-black); line-height: 1; text-align: center; } .tj-magnetic-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } /* !END: Theme cursor CSS */ /**---------------------------------------- START: Theme Animation CSS ----------------------------------------*/ @keyframes bounce-thum-1 { 0% { -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 100% { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @keyframes waves { 0%, 100% { -webkit-clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); clip-path: polygon(0% 45%, 16% 44%, 33% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%); } 50% { -webkit-clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); clip-path: polygon(0% 60%, 15% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%); } } @keyframes up-down-move { 0% { -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 100% { -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } } @keyframes up-down-move-2 { 0% { -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } } @-webkit-keyframes wave-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(14deg); transform: rotate(14deg); } 20% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 30% { -webkit-transform: rotate(14deg); transform: rotate(14deg); } 40% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes wave-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(14deg); transform: rotate(14deg); } 20% { -webkit-transform: rotate(-8deg); transform: rotate(-8deg); } 30% { -webkit-transform: rotate(14deg); transform: rotate(14deg); } 40% { -webkit-transform: rotate(-4deg); transform: rotate(-4deg); } 50% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 60% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes rotate-animation { 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 25% { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } 50% { -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); } 75% { -webkit-transform: rotate3d(0, 0, 1, 270deg); transform: rotate3d(0, 0, 1, 270deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } @keyframes rotate-animation { 0% { -webkit-transform: rotate3d(0, 0, 1, 0deg); transform: rotate3d(0, 0, 1, 0deg); } 25% { -webkit-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } 50% { -webkit-transform: rotate3d(0, 0, 1, 180deg); transform: rotate3d(0, 0, 1, 180deg); } 75% { -webkit-transform: rotate3d(0, 0, 1, 270deg); transform: rotate3d(0, 0, 1, 270deg); } 100% { -webkit-transform: rotate3d(0, 0, 1, 360deg); transform: rotate3d(0, 0, 1, 360deg); } } /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .tj-hero-4-area { padding: 150px 0 85px; position: relative; z-index: 1; background-color: var(--tj-theme-accent-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-area { padding: 120px 0 85px; } } @media (max-width: 575px) { .tj-hero-4-area { padding: 120px 0 20px; } } .tj-hero-4-area::before { content: ""; position: absolute; top: -174px; right: -324px; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); width: 650px; height: 550px; border-radius: 50%; background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0.1) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; } .tj-hero-4-area.anim .tj-hero-4-subtitle, .tj-hero-4-area.anim .tj-hero-4-title, .tj-hero-4-area.anim .tj-hero-4-bottom-thumb img, .tj-hero-4-area.anim .tj-hero-4-bottom-thumb-shape-1, .tj-hero-4-area.anim .tj-hero-4-bottom-thumb-shape-2, .tj-hero-4-area.anim .tj-hero-4-bottom-reviews, .tj-hero-4-area.anim .tj-hero-4-bottom-counter { opacity: 0; } .tj-hero-4-area.activeAnimation .tj-hero-4-subtitle, .tj-hero-4-area.activeAnimation .tj-hero-4-title, .tj-hero-4-area.activeAnimation .tj-hero-4-bottom-thumb img, .tj-hero-4-area.activeAnimation .tj-hero-4-bottom-thumb-shape-1, .tj-hero-4-area.activeAnimation .tj-hero-4-bottom-thumb-shape-2, .tj-hero-4-area.activeAnimation .tj-hero-4-bottom-reviews, .tj-hero-4-area.activeAnimation .tj-hero-4-bottom-counter { opacity: 1; } .tj-hero-4-subtitle { font-weight: var(--tj-fw-sbold); font-size: 12px; letter-spacing: 0.05em; display: inline-block; background-color: var(--tj-theme-secondary); padding: 9px 22px 9px 32px; border-radius: 50px; margin-bottom: 38px; position: relative; color: var(--tj-heading-secondary); z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-4-subtitle { margin-bottom: 20px; } } .tj-hero-4-subtitle::before { content: ""; position: absolute; width: 7px; height: 7px; top: 50%; left: 15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #00ff2f; border-radius: 50%; } .tj-hero-4-title { font-weight: var(--tj-fw-sbold); font-size: 110px; line-height: 0.84; background: -webkit-gradient(linear, left top, right top, from(var(--tj-heading-primary)), to(var(--tj-heading-secondary))); background: linear-gradient(to right, var(--tj-heading-primary) 0%, var(--tj-heading-secondary) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0; display: inline-block; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-4-title { font-size: 75px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-title { font-size: 90px; } } @media (max-width: 575px) { .tj-hero-4-title { font-size: 70px; } } .tj-hero-4-bottom-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-wrap: wrap; flex-wrap: wrap; position: relative; z-index: 1; } .tj-hero-4-bottom-reviews { background: var(--tj-black); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); border: 0.5px solid var(--tj-theme-primary); border-radius: 15px; position: absolute; top: 21%; left: -30px; padding: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-4-bottom-reviews { z-index: 2; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-reviews { left: 0; z-index: 2; padding: 30px 16px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-bottom-reviews { position: relative; margin-bottom: 60px; top: 20px; } } @media (max-width: 575px) { .tj-hero-4-bottom-reviews { position: relative; margin-bottom: 60px; top: 20px; left: 0; padding: 30px 27px; } } .tj-hero-4-bottom-reviews-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tj-hero-4-bottom-reviews-wrap-thumb { margin-right: 10px; } .tj-hero-4-bottom-reviews-wrap-thumb ul { display: -webkit-box; display: -ms-flexbox; display: flex; padding-left: 0; margin-bottom: 0; } .tj-hero-4-bottom-reviews-wrap-thumb ul li { list-style: none; margin-left: -16px; -webkit-transition: ease-out 0.4s; transition: ease-out 0.4s; } .tj-hero-4-bottom-reviews-wrap-thumb ul li:first-child { margin-left: 0; } .tj-hero-4-bottom-reviews-wrap-thumb ul li img { width: 59px; height: 59px; border-radius: 50%; -o-object-fit: cover; object-fit: cover; border: 2px solid var(--tj-bg); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tj-hero-4-bottom-reviews-wrap-thumb ul li img { width: 48px; height: 48px; } } .tj-hero-4-bottom-reviews-wrap-rating .star-ratings { unicode-bidi: bidi-override; font-size: 24px; letter-spacing: 8px; line-height: 1; position: relative; margin: 0; padding: 0; -webkit-text-stroke: 1px var(--tj-theme-primary); margin-bottom: 6px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tj-hero-4-bottom-reviews-wrap-rating .star-ratings { font-size: 20px; letter-spacing: 5px; } } .tj-hero-4-bottom-reviews-wrap-rating .star-ratings .fill-ratings { color: var(--tj-theme-primary); padding: 0; position: absolute; z-index: 1; display: block; top: 0; left: 0; overflow: hidden; } .tj-hero-4-bottom-reviews-wrap-rating .star-ratings .fill-ratings span { display: inline-block; } .tj-hero-4-bottom-reviews-wrap-rating .star-ratings .empty-ratings { padding: 0; display: block; z-index: 0; color: var(--tj-black); } .tj-hero-4-bottom-reviews-wrap-rating p { margin-bottom: 0; color: var(--tj-white); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .tj-hero-4-bottom-reviews-wrap-rating p { font-size: 14px; } } .tj-hero-4-bottom-reviews-title { border-bottom: 0.5px solid var(--tj-theme-primary); padding-bottom: 12px; margin-bottom: 22px; } .tj-hero-4-bottom-reviews-title p { font-weight: var(--tj-fw-sbold); font-size: 20px; letter-spacing: -0.02em; color: var(--tj-heading-secondary); display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-reviews-title p { font-size: 16px; } } @media (max-width: 575px) { .tj-hero-4-bottom-reviews-title p { font-size: 16px; margin-bottom: 0; } } .tj-hero-4-bottom-thumb { max-width: 410px; width: 100%; margin-top: -20px; position: relative; z-index: 1; text-align: center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-4-bottom-thumb { max-width: 390px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-thumb { max-width: 350px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-4-bottom-thumb { max-width: 315px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-bottom-thumb { max-width: 310px; margin-top: -10px; } } @media (max-width: 575px) { .tj-hero-4-bottom-thumb { max-width: 230px; margin-top: -10px; } } .tj-hero-4-bottom-thumb img { width: 100%; height: 100%; border-radius: 200px; } .tj-hero-4-bottom-thumb-shape-1 { position: absolute; bottom: 26%; left: -38%; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-4-bottom-thumb-shape-1 { bottom: 22%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-thumb-shape-1 { bottom: 16%; } } @media (max-width: 575px) { .tj-hero-4-bottom-thumb-shape-1 { bottom: 34%; left: -26%; } } .tj-hero-4-bottom-thumb-shape-2 { position: absolute; top: 42%; right: -38%; z-index: 2; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-4-bottom-thumb-shape-2 { right: -25%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-thumb-shape-2 { top: 15%; } } @media (max-width: 575px) { .tj-hero-4-bottom-thumb-shape-2 { right: -26%; } } .tj-hero-4-bottom-counter { position: absolute; right: -65px; top: 21%; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-4-bottom-counter { right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-counter { top: 145px; right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-4-bottom-counter { position: relative; right: auto; top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-bottom-counter { position: relative; right: auto; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; } } @media (max-width: 575px) { .tj-hero-4-bottom-counter { position: relative; right: auto; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } } .tj-hero-4-bottom-counter-item { margin-bottom: 35px; } .tj-hero-4-bottom-counter-item .funfact-item { margin: 0; } .tj-hero-4-bottom-counter-item .funfact-item .text { margin-top: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-4-bottom-counter-item { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-4-bottom-counter-item { margin-right: 7px; margin-bottom: 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-bottom-counter-item { margin-right: 16px; margin-bottom: 0; } } @media (max-width: 575px) { .tj-hero-4-bottom-counter-item { margin-bottom: 0; } } .tj-hero-4-bottom-counter-item .number { font-size: 48px; color: var(--tj-heading-secondary); letter-spacing: 2px; } @media (max-width: 575px) { .tj-hero-4-bottom-counter-item .number { font-size: 32px !important; } } .tj-hero-4-bottom-counter-item .number .odometer.odometer-auto-theme { font-family: var(--tj-ff-body); margin-right: 2px; } .tj-hero-4-bottom-counter-item .text { font-weight: 400; font-size: 16px; color: var(--tj-heading-secondary); } @media (max-width: 575px) { .tj-hero-4-bottom-counter-item .text { font-size: 13px; text-align: center; } } .tj-hero-4-bottom-tag { background: transparent; border: 1px solid var(--tj-white); border-radius: 50px; font-weight: var(--tj-fw-sbold); display: inline-block; padding: 14px 22px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-4-bottom-tag { padding: 11px 19px; font-size: 14px; } } @media (max-width: 575px) { .tj-hero-4-bottom-tag { padding: 10px 13px; font-size: 10px; } } .elementor .tj-hero-4-bottom-thumb img { width: 100%; height: 100%; border-radius: 200px; } .elementor-editor-active .tj-hero-4-area .tj-hero-4-subtitle, .elementor-editor-active .tj-hero-4-area .tj-hero-4-title, .elementor-editor-active .tj-hero-4-area .tj-hero-4-bottom-thumb img, .elementor-editor-active .tj-hero-4-area .tj-hero-4-bottom-thumb-shape-1, .elementor-editor-active .tj-hero-4-area .tj-hero-4-bottom-thumb-shape-2, .elementor-editor-active .tj-hero-4-area .tj-hero-4-bottom-reviews, .elementor-editor-active .tj-hero-4-area .tj-hero-4-bottom-counter { opacity: 1; } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme About CSS ----------------------------------------*/ .tj-about-4-area { padding: 70px 0 40px; } .tj-about-4-area .section-header { margin-bottom: 4px; } .tj-about-4-paragraph { font-size: 32px; letter-spacing: 0.02em; color: var(--tj-heading-secondary); text-align: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-about-4-paragraph { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-about-4-paragraph { font-size: 21px; } } @media (max-width: 575px) { .tj-about-4-paragraph { font-size: 23px; } } .tj-about-4-paragraph span { background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), to(#f0a)); background-image: linear-gradient(90deg, var(--tj-theme-primary) 0%, #f0a 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tj-about-4-button { margin-top: 5px; } /* !END: Theme About CSS */ /**---------------------------------------- START: Theme Service CSS ----------------------------------------*/ .tj-service-4-area { padding: 100px 0 90px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-4-area { padding: 40px 0 50px; } } .tj-service-4-area::before { content: ""; position: absolute; top: 22%; left: 200px; -webkit-transform: translate(-50%); -ms-transform: translate(-50%); transform: translate(-50%); width: 900px; height: 700px; border-radius: 50%; background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; } .tj-service-4-wrapper { background: rgba(36, 15, 49, 0.5); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); border-radius: 25px; padding: 30px; margin-bottom: 30px; border: 1px solid transparent; position: relative; z-index: 1; } .tj-service-4-wrapper::before { position: absolute; content: ""; top: 0; left: 0; width: 0; height: 0; border-top: 1px solid var(--tj-theme-primary); border-left: 1px solid var(--tj-theme-primary); border-radius: 25px; -webkit-transition: 0.5s; transition: 0.5s; opacity: 0; visibility: hidden; } .tj-service-4-wrapper::after { position: absolute; content: ""; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 1px solid var(--tj-theme-primary); border-right: 1px solid var(--tj-theme-primary); border-radius: 25px; -webkit-transition: 0.5s; transition: 0.5s; opacity: 0; visibility: hidden; } .tj-service-4-wrapper:hover::before { width: 100%; height: 100%; visibility: visible; opacity: 1; border-radius: 25px; } .tj-service-4-wrapper:hover::after { width: 100%; height: 100%; visibility: visible; opacity: 1; border-radius: 25px; } .tj-service-4-wrapper:hover .tj-service-4-icon span i { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .tj-service-4-wrapper .service-link { border: none; padding: 0; margin: 0; background: transparent; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .tj-service-4-icon { margin-bottom: 75px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-4-icon { margin-bottom: 35px; } } .tj-service-4-icon span { width: 64px; height: 64px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 34px; background: var(--tj-theme-primary); border-radius: 20px; color: var(--tj-white); } .tj-service-4-icon span img, .tj-service-4-icon span svg { max-width: 35px; width: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .tj-service-4-icon span i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; transition: transform 0.5s ease, -webkit-transform 0.5s ease; } .tj-service-4-title { font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; color: var(--tj-heading-secondary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-service-4-title { font-size: 21px; } } .tj-service-4-title a { display: inline-block; } .tj-service-4-paragraph { font-size: 15px; letter-spacing: 0.02em; color: var(--tj-body); opacity: 0.8; } /* !END: Theme Service CSS */ /**---------------------------------------- START: Theme Project CSS ----------------------------------------*/ .portfolio-section.portfolios_page .portfolio-6-wrapper, .portfolio-section.portfolios_page .tj_portfolios.style-2 { margin-top: -100px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-section.portfolios_page .portfolio-6-wrapper, .portfolio-section.portfolios_page .tj_portfolios.style-2 { margin-top: -40px; } } .portfolio-section.portfolios_page .portfolio-wrapper-8 { margin-bottom: 40px; } .tj-project-4-wrappper { padding-top: 120px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-4-wrappper { padding-top: 0px; } } .tj-project-4-item { position: relative; z-index: 1; float: left; display: block; } .tj-project-4-item:nth-child(2) { margin-top: -120px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-4-item:nth-child(2) { margin-top: 0; } } .tj-project-4-thumb { background: #2e1f3e; padding: 18px; margin-bottom: 35px; border-radius: 25px; width: 100%; height: auto; } .tj-project-4-thumb a { display: inline-block; } .tj-project-4-thumb img { max-width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 15px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-4-thumb { margin-bottom: 30px; } } @media (max-width: 575px) { .tj-project-4-thumb { border-radius: 15px; } } .tj-project-4-subtitle { font-weight: var(--tj-fw-sbold); color: var(--tj-heading-primary); margin-bottom: 15px; display: inline-block; } .tj-project-4-title { font-weight: var(--tj-fw-sbold); font-size: 32px; margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-project-4-title { font-size: 24px; } } .tj-project-4-title a { display: inline-block; } .tj-project-4-button .tj-btn-primary { padding: 17px 80px; } .elementor .tj-project-4-thumb img { border-radius: 15px; } /* !END: Theme Project CSS */ /**---------------------------------------- START: Theme Cta CSS ----------------------------------------*/ .tj-cta-section { padding-bottom: 155px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-cta-section { padding-bottom: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-cta-section { padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-section { padding-bottom: 80px; } } .cta-wrapper { background-color: #0f0715; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 25px; padding: 94px 25px; } .cta-wrapper .cta-inner { text-align: center; } .cta-wrapper .cta-inner .cta-images { max-width: 98px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 10px; } .cta-wrapper .cta-inner .cta-images img { height: 98px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .cta-wrapper .cta-inner .title { font-size: 58px; font-weight: var(--tj-fw-medium); margin-bottom: 25px; letter-spacing: -2px; } .cta-wrapper .cta-inner .subtitle { display: block; font-weight: var(--tj-fw-medium); } .cta-wrapper .cta-inner .cta-button { margin-top: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-wrapper .cta-inner .title { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-wrapper { padding: 80px 25px; } .cta-wrapper .cta-inner .title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-wrapper { padding: 75px 15px; } .cta-wrapper .cta-inner .title { font-size: 40px; } } @media (max-width: 575px) { .cta-wrapper { padding: 75px 15px; } .cta-wrapper .cta-inner .title { font-size: 35px; } } /* !END: Theme Cta CSS */ /**---------------------------------------- START: Theme FAQ CSS ----------------------------------------*/ .faq-section.style-4 { background-color: var(--tj-theme-accent-1); padding-top: 210px; padding-bottom: 180px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .faq-section.style-4 { padding-top: 120px; padding-bottom: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq-section.style-4 { padding-top: 100px; padding-bottom: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq-section.style-4 { padding-top: 80px; padding-bottom: 80px; } } .accordion-item.style-2 { background-color: transparent; } .accordion-item.style-2.active { border-color: var(--tj-theme-primary); } .accordion-item.style-2 .faq-title::before { width: 28px; height: 28px; font-size: 14px; font-weight: var(--tj-fw-bold); color: var(--tj-theme-primary); border: 2px solid var(--tj-theme-primary); border-radius: 50%; } .accordion-item.style-2 .faq-text { max-width: 810px; } @media (max-width: 575px) { .accordion-item.style-2 .faq-title { padding: 16px 50px 16px 15px; } } /* !END: Theme FAQ CSS */ /**---------------------------------------- START: Theme testimonial CSS ----------------------------------------*/ .style-4 .testimonial-pagination { text-align: center; margin-top: 25px; } .style-4 .testimonial-pagination .swiper-pagination-bullet { background: var(--tj-grey-2); opacity: 1; } .style-4 .testimonial-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--tj-theme-primary); } .testimonial-item.style-4 { background-color: var(--tj-theme-accent-2); border-radius: 15px; padding: 45px 30px; } .testimonial-item.style-4 .top-infos { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; margin-bottom: 20px; } .testimonial-item.style-4 .top-infos .title { font-weight: var(--tj-fw-medium); letter-spacing: 0.02em; margin-bottom: 0; } .testimonial-item.style-4 .desc { color: var(--tj-white); } .testimonial-item.style-4 .desc p:last-child { margin-bottom: 0; } .testimonial-item.style-4 .testimonial-auother { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; margin-top: 50px; } .testimonial-item.style-4 .testimonial-auother .auother-image { max-width: 50px; width: 100%; } .testimonial-item.style-4 .testimonial-auother .auother-image img { width: 100%; height: 50px; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .testimonial-item.style-4 .testimonial-auother .auother-text .title { font-size: 16px; letter-spacing: 0.02em; margin-bottom: 5px; } .testimonial-item.style-4 .testimonial-auother .auother-text .subtitle { font-size: 14px; letter-spacing: 0.02em; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-item.style-4 { padding: 35px 15px; } .testimonial-item.style-4 .top-infos { gap: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-item.style-4 { padding: 35px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-item.style-4 { padding: 35px 15px; margin-left: auto; margin-right: auto; } } @media (max-width: 575px) { .testimonial-item.style-4 { padding: 35px 15px; margin-left: auto; margin-right: auto; } .testimonial-item.style-4 .top-infos { gap: 12px; } } .star-ratings { unicode-bidi: bidi-override; font-size: 16px; letter-spacing: 5px; line-height: 1; position: relative; margin: 0; padding: 0; -webkit-text-stroke: 1px var(--tj-theme-primary); -webkit-text-fill-color: transparent; } .star-ratings .fill-ratings { -webkit-text-fill-color: var(--tj-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; } /* !END: Theme testimonial CSS */ /**---------------------------------------- START: Theme Counter CSS ----------------------------------------*/ .tj-counter-section.style-4 { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; background-repeat: no-repeat; background-position: center; background-size: cover; padding: 95px 0; } .tj-counter-section.style-4 .section-header { max-width: 530px; width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-counter-section.style-4 .section-header { max-width: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-counter-section.style-4 { padding: 80px 0; } .tj-counter-section.style-4 .section-header { margin-bottom: 15px; } } .counter-content-area { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 25px; } .counter-content-area .funfact_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; row-gap: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter-content-area .funfact_wrapper { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; row-gap: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .counter-content-area { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .counter-content-area .funfact_wrapper { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; row-gap: 25px; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } @media (max-width: 575px) { .counter-content-area { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .counter-content-area .funfact_wrapper { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; row-gap: 25px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .funfact-item.style-4 { background-color: var(--tj-theme-accent-2); -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px); border-radius: 25px; max-width: 310px; width: 100%; padding: 30px 25px 35px 30px; margin-bottom: 0; } .funfact-item.style-4 .number { font-size: 48px; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-body); letter-spacing: 2px; margin-bottom: 15px; } .funfact-item.style-4 .odometer.odometer-auto-theme, .funfact-item.style-4 .odometer.odometer-theme-default { font-family: var(--tj-ff-body); } .funfact-item.style-4 .text { text-align: end; color: var(--tj-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .funfact-item.style-4 { max-width: 260px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .funfact-item.style-4 { max-width: 215px; padding: 30px 15px 35px 15px; } .funfact-item.style-4 .number { font-size: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .funfact-item.style-4 .number { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .funfact-item.style-4 { max-width: 245px; padding: 30px 15px 35px 15px; } .funfact-item.style-4 .number { font-size: 40px; } } @media (max-width: 575px) { .funfact-item.style-4 { padding: 30px 15px 35px 15px; } .funfact-item.style-4 .number { font-size: 40px; } } /* !END: Theme Counter CSS */ /**---------------------------------------- START: Theme Progress CSS ----------------------------------------*/ .tj-progress-section { padding-bottom: 220px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-progress-section { padding-bottom: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-progress-section { padding-bottom: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress-section { padding-bottom: 50px; } } .progress-single { max-width: 306px; width: 100%; background-color: var(--tj-theme-accent-2); padding: 45px 30px 50px 35px; margin-bottom: 30px; border-radius: 25px; } .progress-single .progress-text { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 18px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 15px; } .progress-single .progress-text .icon-box { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 80px; height: 80px; line-height: 1; border-radius: 20px; background-color: var(--tj-theme-accent-2); } .progress-single .progress-text .icon-box img { max-width: 40px; width: 100%; } .progress-single .progress-text .progress-title .title { font-weight: var(--tj-fw-medium); margin-bottom: 0; } .progress-single .desc { color: var(--tj-white); } .progress-single .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .progress-single { padding: 35px 15px 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .progress-single { padding: 35px 15px 40px; } .progress-single .progress-text { gap: 15px; } .progress-single .progress-text .icon-box { width: 46px; height: 46px; border-radius: 12px; } .progress-single .progress-text .icon-box img { max-width: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .progress-single { max-width: 100%; padding: 30px 15px 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .progress-single { max-width: 100%; padding: 30px 15px 35px; } .progress-single .progress-text { gap: 15px; } .progress-single .progress-text .icon-box { width: 46px; height: 46px; border-radius: 12px; } .progress-single .progress-text .icon-box img { max-width: 30px; } } @media (max-width: 575px) { .progress-single { padding: 30px 15px 35px; margin-left: auto; margin-right: auto; } .progress-single .progress-text .icon-box { width: 60px; height: 60px; border-radius: 12px; } .progress-single .progress-text .icon-box img { max-width: 30px; } } .progress-item { position: relative; background: var(--tj-color-common-white); margin-top: 50px; z-index: 1; } .progress-item .item_value { position: absolute; top: -30px; right: 0; font-size: 16px; letter-spacing: 2px; font-weight: var(--tj-fw-medium); color: var(--tj-heading-secondary); } .progress-item .item_bar { position: relative; height: 4px; background-color: rgba(255, 255, 255, 0.1); border-radius: 150px; } .progress-item .item_bar .progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; height: 4px; margin: 0; border-radius: 0px; overflow: visible; background-color: var(--tj-heading-secondary); border-radius: 150px; -webkit-transition: width 100ms ease; transition: width 100ms ease; } /* !END: Theme Progress CSS */ /**---------------------------------------- START: Theme Work CSS ----------------------------------------*/ .resume-section.style-4 { position: relative; z-index: 1; } .resume-section.style-4 .section-header { margin-bottom: 95px; } .resume-section.style-4 .resume_inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 35px; border-bottom: 1px solid rgba(129, 76, 236, 0.2); padding-bottom: 65px; margin-bottom: 60px; } .resume-section.style-4 .resume_inner:last-child { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume-section.style-4 .resume_inner { gap: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .resume-section.style-4 .resume_wrapper { max-width: 1030px; width: 100%; margin-left: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .resume-section.style-4 { padding-bottom: 120px; } .resume-section.style-4 .resume_wrapper { max-width: 950px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .resume-section.style-4 .resume_wrapper { max-width: 950px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume-section.style-4 .section-header { margin-bottom: 50px; } } .resume-sidebar-btn .side-sticky { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; font-size: 12px; font-weight: var(--tj-fw-sbold); color: var(--tj-heading-secondary); text-transform: uppercase; background-color: var(--tj-theme-secondary); padding: 10px 20px; border-radius: 50px; -webkit-transition: 0.6s; transition: 0.6s; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume-sidebar-btn { margin-bottom: 40px; } } .resume_item { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1030px; width: 100%; margin-left: auto; gap: 95px; border-bottom: 1px solid rgba(129, 76, 236, 0.2); padding-bottom: 45px; margin-bottom: 40px; } .resume_item:last-child { border-bottom: none; padding-bottom: 0px; margin-bottom: 0px; } .resume_item .resume_content { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 40px; max-width: 735px; width: 100%; } .resume_item .resume_content .icon_box { max-width: 60px; width: 100%; } .resume_item .resume_content .icon_box img { width: 100%; border-radius: 8px; } .resume_item .resume_content .resume_text { max-width: 645px; width: 100%; } .resume_item .resume_content .resume_text .title { font-size: 20px; font-weight: var(--tj-fw-medium); text-transform: uppercase; margin-bottom: 15px; letter-spacing: 0.02em; } .resume_item .resume_content .resume_text .subtitle { display: block; font-size: 15px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 22px; } .resume_item .resume_content .resume_text .desc { font-size: 18px; } .resume_item .resume_content .resume_text .desc p:last-child { margin-bottom: 0; } .resume_item .resume_date { max-width: 210px; width: 100%; } .resume_item .resume_date .date { display: block; color: var(--tj-heading-secondary); letter-spacing: 0.02em; text-align: end; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .resume_item { max-width: 780px; gap: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume_item { gap: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume_item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .resume_item .resume_content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 30px; } .resume_item .resume_date { max-width: 100%; } .resume_item .resume_date .date { text-align: start; } } /* !END: Theme Work CSS */ /**---------------------------------------- START: Theme Marquee CSS ----------------------------------------*/ .tj-maquee-section.style-4 { background-color: var(--tj-black-2); padding: 26px 0; } .tj-maquee-section.style-4 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .tj-maquee-section.style-4 .marquee-item .marquee-box .marquee-icon img { -webkit-animation: rotateImg3 6s infinite linear; animation: rotateImg3 6s infinite linear; } @-webkit-keyframes rotateImg3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotateImg3 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* !END: Theme Marquee CSS */ /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .tj-header-area.header-5 { padding: 0 50px 0 50px; } .tj-header-area.header-5.header-duplicate { padding: 10px 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-5 { padding: 0 20px 0 20px; } .tj-header-area.header-5.header-duplicate { padding: 10px 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-area.header-5 { padding: 0; } .tj-header-area.header-5.header-duplicate { padding: 10px 0; } } .tj-header-area.header-5 .header-menu ul { -webkit-column-gap: 25px; -moz-column-gap: 25px; column-gap: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-5 .header-menu ul { -webkit-column-gap: 15px; -moz-column-gap: 15px; column-gap: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-5 .header-menu ul { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; } } .tj-header-area.header-5 .header-menu ul > li > a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 3px 14px; border: 1px solid transparent; border-radius: 50px; color: rgba(255, 255, 255, 0.5); } .tj-header-area.header-5 .header-menu ul > li > a::before, .tj-header-area.header-5 .header-menu ul > li > a::after { display: none; } .tj-header-area.header-5 .header-menu ul > li:hover > a { border-color: var(--tj-theme-primary); color: var(--tj-color-white); } .tj-header-area.header-5 .header-menu ul > li.current-menu-ancestor > a, .tj-header-area.header-5 .header-menu ul > li.current > a { border-color: var(--tj-theme-primary); color: var(--tj-color-white); } .tj-header-area.header-5 .header-menu ul > li > .sub-menu > li.has-dropdown > a::after { display: block; } .tj-header-area.header-5 .social-icons li a { border: 1px solid rgba(255, 255, 255, 0.14); } .tj-header-area.header-5 .social-icons li a:hover { border-color: rgba(255, 255, 255, 0.14); } .tj-header-5-right { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-5-right { margin-left: auto; } } .tj-header-5-right-social-icons { gap: 10px; } .tj-header-5-right-social-icons li a { width: 30px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.14); font-size: 13px; } .tj-header-5-right-button .tj-btn-primary i { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .tj-header-5-logo-box { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 112px; height: 112px; background: var(--tj-bg); border: 2px solid var(--tj-theme-primary); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-5-logo-box { width: 100px; height: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-5-logo-box { width: 90px; height: 90px; } } .tj-header-5-logo-box img { width: 60%; } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ .tj-footer-area.footer-5 { padding-top: 120px; padding-bottom: 0px; position: relative; background-color: var(--tj-black-2); overflow: hidden; z-index: 1; } .tj-footer-area.footer-5::before { content: ""; position: absolute; top: 0; left: 0; width: 650px; height: 550px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-left: -15%; margin-top: 12%; opacity: 0.6; z-index: -1; } .footer-content-area { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding: 60px 50px; gap: 8px; } .footer-content-area .line { display: inline-block; width: 2px; height: 75%; background-color: rgba(255, 255, 255, 0.1); margin-top: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-content-area { padding: 35px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-content-area { padding: 35px 15px; -ms-flex-wrap: wrap; flex-wrap: wrap; } .footer-content-area .line { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-content-area { padding: 35px 15px; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 40px; } .footer-content-area .line { display: none; } } .footer-widget .footer-title .title { font-size: 14px; text-transform: uppercase; letter-spacing: 0.02em; font-weight: var(--tj-fw-regular); color: rgba(255, 255, 255, 0.5); margin-bottom: 35px; } .footer-widget.widget_nav_menu ul { margin: 0; padding: 0; list-style: none; } .footer-widget.widget_nav_menu ul li { margin-bottom: 12px; } .footer-widget.widget_nav_menu ul li:last-child { margin-bottom: 0; } .footer-widget.widget_nav_menu ul li a { font-size: 15px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-regular); text-decoration: none; position: relative; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .footer-widget.widget_nav_menu ul li a:hover { color: var(--tj-theme-primary); } .footer-widget.footer_contact .contact-item ul { margin: 0; padding: 0; list-style: none; } .footer-widget.footer_contact .contact-item ul li { margin-bottom: 15px; font-size: 15px; color: var(--tj-white); font-weight: var(--tj-fw-regular); } .footer-widget.footer_contact .contact-item ul li:last-child { margin-bottom: 0; } .footer-widget.footer_contact .contact-item ul li a { color: var(--tj-heading-secondary); text-decoration: none; position: relative; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .footer-widget.footer_contact .contact-item ul li a:hover { color: var(--tj-theme-primary); } .footer-widget.footer_socials_media .socials-links ul { margin: 0; padding: 0; list-style: none; } .footer-widget.footer_socials_media .socials-links ul li { margin-bottom: 10px; } .footer-widget.footer_socials_media .socials-links ul li:last-child { margin-bottom: 0; } .footer-widget.footer_socials_media .socials-links ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 8px; position: relative; font-size: 15px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-regular); text-decoration: none; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .footer-widget.footer_socials_media .socials-links ul li a span { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 29px; height: 29px; line-height: 1; font-size: 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 50%; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .footer-widget.footer_socials_media .socials-links ul li a span::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--tj-theme-primary); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: 0.4s; transition: 0.4s; border-radius: 50%; z-index: -1; } .footer-widget.footer_socials_media .socials-links ul li a span i { color: var(--tj-white); } .footer-widget.footer_socials_media .socials-links ul li a:hover { color: var(--tj-theme-primary); } .footer-widget.footer_socials_media .socials-links ul li a:hover span::after { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .footer-widget.footer_socials_media .socials-links ul li a:hover span i { color: var(--tj-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-widget .footer-title .title { margin-bottom: 25px; } } .copyright-area { padding: 30px 0; } .copyright-text p { margin-bottom: 0; color: inherit; } .copyright-text p a { color: inherit; text-decoration: none; -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .copyright-text p a:hover { color: var(--tj-theme-primary); } /* !END: Theme Footer CSS */ /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .tj-hero-5-area { min-height: 925px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: #0d0612; position: relative; z-index: 1; padding: 15px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-5-area { min-height: 850px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-5-area { -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media (max-width: 575px) { .tj-hero-5-area { min-height: 695px; } } .tj-hero-5-area .hero_scroll { position: absolute; left: 0; bottom: 115px; z-index: 2; } .tj-hero-5-area .hero_scroll .down { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 18px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 14px; color: var(--tj-white); text-decoration: none; letter-spacing: -0.02em; } .tj-hero-5-area .hero_scroll .down span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 32px; border: 1px solid var(--tj-white); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); border-radius: 50px; } .tj-hero-5-area .hero_scroll .down span i { display: inline-block; position: relative; right: -6px; top: 4px; -webkit-animation: jump-arrow 2.5s infinite; animation: jump-arrow 2.5s infinite; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-area .hero_scroll { left: -15px; } } @media (max-width: 575px) { .tj-hero-5-area .hero_scroll { left: -20px; } } .tj-hero-5-thumb { max-width: 1275px; width: 100%; position: absolute; height: 100%; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; z-index: 1; background-position: center; background-size: cover; background-repeat: no-repeat; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-hero-5-thumb { max-width: 1000px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-5-thumb { max-width: 790px; background-position: center left; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-5-thumb { max-width: 800px; height: 850px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-5-thumb { position: static; background-size: cover; background-repeat: no-repeat; background-position: center center; max-width: 791px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-thumb { position: static; background-size: cover; background-repeat: no-repeat; background-position: center center; max-width: 600px; margin: auto; } } @media (max-width: 575px) { .tj-hero-5-thumb { display: none; } } .tj-hero-5-thumb::after { content: ""; position: absolute; width: 400px; height: 100%; top: 0; left: 0; background-image: linear-gradient(92deg, #0d0612 0%, rgba(13, 6, 18, 0) 100%); z-index: -1; } .tj-hero-5-wrapper { max-width: 545px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-5-wrapper { padding-top: 200px; max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-wrapper { padding-top: 180px; max-width: 100%; } } @media (max-width: 575px) { .tj-hero-5-wrapper { padding-top: 160px; } } .tj-hero-5-content { position: relative; z-index: 2; } .tj-hero-5-sub-title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; font-weight: var(--tj-fw-sbold); font-size: 18px; line-height: 1; margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-5-sub-title { margin-bottom: 15px; } } .tj-hero-5-title { font-weight: var(--tj-fw-sbold); font-size: 72px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 26px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-5-title { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-title { font-size: 40px; margin-bottom: 20px; } } @media (max-width: 575px) { .tj-hero-5-title { font-size: 35px; margin-bottom: 20px; } } .tj-hero-5-paragraph { font-size: 18px; color: var(--tj-white); margin-bottom: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-paragraph { font-size: 16px; } } @media (max-width: 575px) { .tj-hero-5-paragraph { font-size: 14px; } } .tj-hero-5-thumb-shape-1 { position: absolute; top: 54%; left: 47%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .tj-hero-5-thumb-shape-2 { position: absolute; width: 295px; height: 626px; top: 5%; right: 22%; -webkit-mask-image: url(../images/shapes/hero-4-line-shape.svg); mask-image: url(../images/shapes/hero-4-line-shape.svg); background-image: linear-gradient(243.16deg, #030915 18.92%, #814cec 28.98%, #814cec 69.8%, #051f46 79.62%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; z-index: -1; -webkit-animation: up-down-move 3s forwards infinite alternate; animation: up-down-move 3s forwards infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-hero-5-thumb-shape-2 { right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-5-thumb-shape-2 { width: 241px; top: 5%; right: 0%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-5-thumb-shape-2 { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-5-thumb-shape-2 { top: 42%; right: 3%; width: 260px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-thumb-shape-2 { display: none; } } .tj-hero-5-thumb-shape-3 { position: absolute; top: 41%; right: 23%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: right; rotate: -90deg; -webkit-animation: up-down-move-2 3s forwards infinite alternate; animation: up-down-move-2 3s forwards infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-hero-5-thumb-shape-3 { top: 38%; right: 10%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-5-thumb-shape-3 { right: 4%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-5-thumb-shape-3 { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-5-thumb-shape-3 { top: 65%; right: 8%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-5-thumb-shape-3 { display: none; } } .tj-hero-5-thumb-shape-3::before { content: ""; position: absolute; width: 100%; height: 1px; top: 50%; right: -120px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: var(--tj-white); } .tj-hero-5-thumb-shape-3 span { color: var(--tj-white); display: block; letter-spacing: -0.02em; margin-bottom: 4px; } .tj-hero-5-thumb-shape-4 { position: absolute; top: 56%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-hero-5-thumb-shape-4 { left: 60%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-5-thumb-shape-4 { left: 66%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-thumb-shape-4 { top: 83%; } } .tj-hero-5-thumb-shape-4-text-animed { position: relative; } .tj-hero-5-thumb-shape-4-text-animed > div { font-size: 775px; font-weight: 700; display: inline-block; position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); margin: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-5-thumb-shape-4-text-animed > div { font-size: 600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-5-thumb-shape-4-text-animed > div { font-size: 550px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-5-thumb-shape-4-text-animed > div { font-size: 665px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-5-thumb-shape-4-text-animed > div { font-size: 565px; } } .tj-hero-5-thumb-shape-4-text-animed > div.first { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.07); } .tj-hero-5-thumb-shape-4-text-animed > div.second { color: transparent; -webkit-text-stroke: 2px rgba(135, 80, 247, 0.6); -webkit-animation: waves 4s ease-in-out infinite; animation: waves 4s ease-in-out infinite; } .tj-hero-5-thumb-mobile { max-width: 780px; width: 100%; margin: auto; margin-top: 40px; } .tj-hero-5-thumb-mobile img { width: 100%; height: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-5-thumb-mobile { margin-top: 10px; } } .tj-btn-primary-5 i { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } @-webkit-keyframes jump-arrow { 0%, 20%, 55%, 80%, 100% { -webkit-transform: translate3d(-50%, 0, 0) rotate(-90deg); transform: translate3d(-50%, 0, 0) rotate(-90deg); } 40% { -webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg); transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 70% { -webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg); transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 90% { -webkit-transform: translate3d(-50%, -5px, 0) rotate(-90deg); transform: translate3d(-50%, -5px, 0) rotate(-90deg); } } @keyframes jump-arrow { 0%, 20%, 55%, 80%, 100% { -webkit-transform: translate3d(-50%, 0, 0) rotate(-90deg); transform: translate3d(-50%, 0, 0) rotate(-90deg); } 40% { -webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg); transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 70% { -webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg); transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 90% { -webkit-transform: translate3d(-50%, -5px, 0) rotate(-90deg); transform: translate3d(-50%, -5px, 0) rotate(-90deg); } } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme Couter CSS ----------------------------------------*/ .tj-counter-5-area { padding: 120px 0 120px; background-color: var(--tj-theme-accent-1); position: relative; z-index: 1; } .tj-counter-5-area::before { content: ""; position: absolute; bottom: -380px; right: -211px; width: 900px; height: 700px; border-radius: 50%; background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-counter-5-area { padding: 120px 0 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-counter-5-area { padding: 100px 0 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-counter-5-area { padding: 80px 0 50px; } } .tj-counter-5-shape-1 { position: absolute; left: 10%; bottom: 10%; z-index: -1; -webkit-animation: up-down-move 3s forwards infinite alternate; animation: up-down-move 3s forwards infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-counter-5-shape-1 { left: 2%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-counter-5-shape-1 { left: 1%; bottom: 5%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-counter-5-shape-1 { left: 1%; bottom: 7%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-counter-5-shape-1 { left: 0%; bottom: 6%; } } .tj-counter-5-shape-2 { position: absolute; top: 30%; right: 11%; z-index: -1; -webkit-animation: up-down-move-2 3s forwards infinite alternate; animation: up-down-move-2 3s forwards infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-counter-5-shape-2 { top: 28%; right: 2%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-counter-5-shape-2 { top: 27%; right: 1%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-counter-5-shape-2 { top: 18%; right: 1%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-counter-5-shape-2 { top: 15%; right: 2%; } } .tj-counter-5-wrapper { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 90px 30px 97px; margin-bottom: 30px; text-align: center; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-counter-5-wrapper { padding: 50px 15px 50px; } .tj-counter-5-wrapper .funfact-item { margin-bottom: 15px; } } @media (max-width: 575px) { .tj-counter-5-wrapper { padding: 45px 15px 45px; } .tj-counter-5-wrapper .funfact-item { margin-bottom: 15px; } } .tj-counter-5-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--tj-theme-primary); font-size: 64px; line-height: 150%; letter-spacing: -0.02em; } .tj-counter-5-paragraph:last-child { margin-bottom: 0; } /* !END: Theme Couter CSS */ /**---------------------------------------- START: Theme Faq CSS ----------------------------------------*/ .tj-service-5-area { padding: 0 0 120px; background-color: var(--tj-theme-accent-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-service-5-area { padding: 0 0 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-service-5-area { padding: 0 0 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-5-area { padding: 0 0 50px; } } .tj-service-5-accordion-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; row-gap: 40px; } .tj-service-5-accordion-list { padding-left: 0; margin: 0; list-style: none; } .tj-service-5-accordion-list-content { max-width: 504px; width: 100%; margin-left: 50px; margin-top: 125px; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-service-5-accordion-list-content { margin-top: 75px; max-width: 430px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-service-5-accordion-list-content { margin-top: 35px; max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-service-5-accordion-list-content { margin-top: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-service-5-accordion-list-content { margin-top: 32px; } } @media (max-width: 575px) { .tj-service-5-accordion-list-content { margin-left: 30px; margin-top: 30px; } } .tj-service-5-accordion-list-title { color: var(--tj-heading-secondary); margin-bottom: 0; font-weight: var(--tj-fw-bold); font-size: 30px; letter-spacing: -0.02em; cursor: pointer; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; position: relative; padding-right: 30px; } .tj-service-5-accordion-list-title::before { content: "\e093"; top: 0; right: 0; color: var(--tj-heading-secondary); position: absolute; font-family: var(--tj-ff-fontawesome); font-weight: var(--tj-fw-regular); opacity: 1; visibility: visible; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .tj-service-5-accordion-list-title span { color: var(--tj-heading-primary); margin-right: 4px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-service-5-accordion-list-title { font-size: 22px; padding-right: 20px; } } @media (max-width: 575px) { .tj-service-5-accordion-list-title { font-size: 20px; padding-right: 20px; } } .tj-service-5-accordion-list .desc { color: rgba(255, 255, 255, 0.6); } .tj-service-5-accordion-list .desc p:last-child { margin: 0; } .tj-service-5-accordion-list .desc ul { margin: 0; padding: 0; list-style: none; } .tj-service-5-accordion-list .desc ul li { font-weight: var(--tj-fw-sbold); color: var(--tj-white); display: block; position: relative; z-index: 1; padding-left: 12px; line-height: 2; } @media (max-width: 575px) { .tj-service-5-accordion-list .desc ul li { font-size: 14px; } } .tj-service-5-accordion-list .desc ul li::before { content: ""; position: absolute; width: 4px; height: 4px; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: var(--tj-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-service-5-accordion-list .desc { font-size: 15px; } } .tj-service-5-accordion-list .tj-button { margin-top: 25px; } .tj-service-5-accordion-list .accordion_item { background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; margin-bottom: 30px; list-style: none; padding: 30px 30px 30px 30px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-service-5-accordion-list .accordion_item { padding: 30px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-5-accordion-list .accordion_item { padding: 25px 15px; } } .tj-service-5-accordion-thumb { max-width: 615px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-service-5-accordion-thumb { max-width: 540px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-service-5-accordion-thumb { max-width: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-service-5-accordion-thumb { max-width: 100%; } } .tj-service-5-accordion-thumb img { width: 100%; height: 100%; border-radius: 15px; -o-object-fit: cover; object-fit: cover; } .elementor .tj-service-5-accordion-thumb img { border-radius: 15px; } .accordion-list .accordion_item.active .tj-service-5-accordion-list-title { padding-top: 40px; padding-bottom: 30px; -webkit-transform: translateY(22px); -ms-transform: translateY(22px); transform: translateY(22px); margin-bottom: -100px; max-width: 555px; width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .accordion-list .accordion_item.active .tj-service-5-accordion-list-title { -webkit-transform: translateY(-15px); -ms-transform: translateY(-15px); transform: translateY(-15px); max-width: 520px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .accordion-list .accordion_item.active .tj-service-5-accordion-list-title { -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); max-width: 490px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .accordion-list .accordion_item.active .tj-service-5-accordion-list-title { max-width: 100%; padding-top: 0; padding-bottom: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); margin-bottom: 0; } } .accordion-list .accordion_item.active .tj-service-5-accordion-list-title::before { visibility: hidden; opacity: 0; } .accordion-list li { cursor: pointer; } .accordion-list li.active { border: 1px solid var(--tj-theme-primary); } /* !END: Theme Faq CSS */ /**---------------------------------------- START: Theme Cta CSS ----------------------------------------*/ .tj-cta-section.style-5 { padding-bottom: 0px; background-color: var(--tj-black-2); } .cta-wrapper.style-5 { padding: 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-wrapper.style-5 { padding: 30px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta-wrapper.style-5 { padding: 30px 15px; } } .cta-inner-5 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 60px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .cta-inner-5 .cta-images { max-width: 295px; width: 100%; } .cta-inner-5 .cta-images img { width: 100%; border-radius: 25px; } .cta-inner-5 .cta-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 840px; width: 100%; } .cta-inner-5 .cta-content .cta-text { max-width: 665px; width: 100%; } .cta-inner-5 .cta-content .cta-text .title { font-size: 60px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; margin-bottom: 40px; } .cta-inner-5 .cta-content .cta-text span { display: block; color: var(--tj-white); } .cta-inner-5 .cta-content .cta-button .cta-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%; color: var(--tj-white); font-size: 30px; background-color: var(--tj-black-2); text-decoration: none; } .cta-inner-5 .cta-content .cta-button .cta-link .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .cta-inner-5 .cta-content .cta-button .cta-link .icon_box i:first-child, .cta-inner-5 .cta-content .cta-button .cta-link .icon_box i:last-child { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .cta-inner-5 .cta-content .cta-button .cta-link .icon_box i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .cta-inner-5 .cta-content .cta-button .cta-link:hover .icon_box i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .cta-inner-5 .cta-content .cta-button .cta-link:hover .icon_box i:last-child { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta-inner-5 { gap: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-inner-5 { gap: 30px; } .cta-inner-5 .cta-content .cta-text .title { font-size: 50px; margin-bottom: 30px; } .cta-inner-5 .cta-content .cta-button .cta-link { width: 90px; height: 90px; font-size: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-inner-5 { gap: 30px; } .cta-inner-5 .cta-images { max-width: 230px; } .cta-inner-5 .cta-content .cta-text .title { font-size: 35px; margin-bottom: 30px; } .cta-inner-5 .cta-content .cta-button .cta-link { width: 75px; height: 75px; font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-inner-5 { gap: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .cta-inner-5 .cta-images { max-width: 230px; } .cta-inner-5 .cta-content .cta-text .title { font-size: 30px; margin-bottom: 30px; } .cta-inner-5 .cta-content .cta-button .cta-link { width: 75px; height: 75px; font-size: 25px; position: relative; z-index: 1; } } @media (max-width: 575px) { .cta-inner-5 { gap: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .cta-inner-5 .cta-images { max-width: 100%; } .cta-inner-5 .cta-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .cta-inner-5 .cta-content .cta-text .title { font-size: 30px; margin-bottom: 25px; } .cta-inner-5 .cta-content .cta-button .cta-link { width: 75px; height: 75px; font-size: 25px; } } /* !END: Theme Cta CSS */ /**---------------------------------------- START: Theme Contact CSS ----------------------------------------*/ .contact-section.style-5 { background-color: var(--tj-black-2); padding-top: 120px; position: relative; z-index: 1; } .contact-section.style-5::before { content: ""; position: absolute; bottom: 0; right: 0; width: 650px; height: 550px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-right: -4%; margin-bottom: -6%; opacity: 0.5; z-index: -1; } .contact-section.style-5 .section-header { margin-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-section.style-5 { padding-top: 80px; padding-bottom: 80px; } } .contact_wrapper_5 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact_wrapper_5 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .contact-box.style-5 { max-width: 100%; } .contact-box.style-5 .section-header .desc p { margin-top: 20px; color: rgba(255, 255, 255, 0.6); } .contact-box.style-5 .contact-info-list { padding: 30px 30px 35px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } .contact-box.style-5 .contact-info-list ul { padding: 0; margin: 0; row-gap: 0; } .contact-box.style-5 .contact-info-list ul li { gap: 15px; border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-left: 0px; margin-top: 0; padding-bottom: 30px; margin-bottom: 30px; } .contact-box.style-5 .contact-info-list ul li:last-child { border: none; padding-bottom: 0px; margin-bottom: 0px; } .contact-box.style-5 .contact-info-list ul li .icon-box { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; font-size: 22px; line-height: 1; position: initial; } .contact-box.style-5 .contact-info-list ul li .icon-box i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .contact-box.style-5 .contact-info-list ul li .text-box { max-width: calc(100% - 75px); width: 100%; } .contact-box.style-5 .contact-info-list ul li .text-box p { font-size: 18px; margin-bottom: 10px; font-weight: var(--tj-fw-sbold); color: var(--tj-heading-secondary); } .contact-box.style-5 .contact-info-list ul li .text-box a { font-size: 18px; font-weight: var(--tj-fw-regular); color: rgba(255, 255, 255, 0.5); } .contact-box.style-5 .contact-info-list ul li .text-box a:hover { color: var(--tj-theme-primary); } .contact-box.style-5 .contact-info-list ul li .text-box span { font-size: 18px; font-weight: var(--tj-fw-regular); color: rgba(255, 255, 255, 0.5); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-box.style-5 .contact-info-list { padding: 30px 15px; } } @media (max-width: 575px) { .contact-box.style-5 .contact-info-list ul li .icon-box { width: 50px; height: 50px; font-size: 20px; } .contact-box.style-5 .contact-info-list ul li .text-box { max-width: calc(100% - 65px); } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-box { max-width: 100%; } } .contact-form-box.style-5 { max-width: 100%; width: 100%; background: transparent; padding: 60px 30px 40px; border: 2px solid rgba(255, 255, 255, 0.1); margin: 0; } .contact-form-box.style-5 .tj-contact-form .form_group { margin-bottom: 50px; } .contact-form-box.style-5 .tj-contact-form .form_group.textarea-group { margin-bottom: 30px; } .contact-form-box.style-5 .tj-contact-form .form_group label { display: block; font-size: 16px; color: var(--tj-heading-secondary); text-transform: uppercase; font-weight: var(--tj-fw-sbold); margin-bottom: 15px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel], .contact-form-box.style-5 .tj-contact-form .form_group input[type=email], .contact-form-box.style-5 .tj-contact-form .form_group input[type=text] { padding: 16px 20px; background-color: transparent; font-size: 16px; color: var(--tj-color-common-white); border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 10px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]::-ms-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea::-webkit-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]::-webkit-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]::-webkit-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]::-webkit-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea::-moz-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]::-moz-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]::-moz-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]::-moz-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea:-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]:-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]:-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]:-ms-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]::-ms-input-placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]::-ms-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea::placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]::placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]::placeholder, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]::placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-form-box.style-5 .tj-contact-form .form_group textarea:focus, .contact-form-box.style-5 .tj-contact-form .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus, .contact-form-box.style-5 .tj-contact-form .form_group input[type=tel]:focus, .contact-form-box.style-5 .tj-contact-form .form_group input[type=email]:focus, .contact-form-box.style-5 .tj-contact-form .form_group input[type=text]:focus { border-color: var(--tj-theme-primary); } .contact-form-box.style-5 .tj-contact-form .form_group textarea { min-height: 180px; resize: none; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-form-box.style-5 { padding: 35px 15px 30px; } } @media (max-width: 575px) { .contact-form-box.style-5 .tj-contact-form .form_group { margin-bottom: 30px; } } /* !END: Theme Contact CSS */ /**---------------------------------------- START: Theme Testimonial CSS ----------------------------------------*/ .testimonial-section.style-5 { background-color: var(--tj-theme-accent-1); position: relative; overflow: hidden; z-index: 1; } .testimonial-section.style-5::after, .testimonial-section.style-5::before { content: ""; position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 650px; height: 550px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(190deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(250px); filter: blur(250px); margin-bottom: -16%; opacity: 0.5; z-index: -1; } .testimonial-section.style-5::after { top: 0; margin-top: -16%; } .testimonial-section.style-5 .section-header { max-width: 100%; margin-bottom: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-section.style-5::after, .testimonial-section.style-5::before { width: 650px; height: 350px; margin-bottom: -16%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-section.style-5 { padding-top: 80px; padding-bottom: 80px; } .testimonial-section.style-5 .section-header { margin-bottom: 40px; } } .testimonial-item.style-5 { max-width: 100%; border: 2px solid rgba(255, 255, 255, 0.1); background: transparent; padding: 40px 30px 30px; -webkit-transition: 0.6s; transition: 0.6s; } .testimonial-item.style-5 .icon-box { margin-bottom: 40px; } .testimonial-item.style-5 .quote { font-size: 20px; line-height: 1.8; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; } .testimonial-item.style-5 .testimonial-feature-item { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; padding-top: 25px; border-top: 2px solid rgba(255, 255, 255, 0.1); } .testimonial-item.style-5 .testimonial-feature-item .testimonial-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .testimonial-item.style-5 .testimonial-feature-item .testimonial-rating { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .testimonial-item.style-5 .testimonial-feature-item .auother-images { max-width: 75px; height: 75px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; } .testimonial-item.style-5 .testimonial-feature-item .auother-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; padding: 8px; border-radius: 50%; } .testimonial-item.style-5:hover { border-color: var(--tj-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-item.style-5 { padding: 30px 15px; } .testimonial-item.style-5 .quote { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-item.style-5 { padding: 30px 15px; } .testimonial-item.style-5 .quote { font-size: 18px; } .testimonial-item.style-5 .icon-box { margin-bottom: 20px; } } @media (max-width: 575px) { .testimonial-item.style-5 { padding: 30px 15px; } .testimonial-item.style-5 .quote { font-size: 16px; } .testimonial-item.style-5 .icon-box { margin-bottom: 20px; } .testimonial-item.style-5 .testimonial-rating { padding-left: 90px; } } /* !END: Theme Testimonial CSS */ /**---------------------------------------- START: Theme Progress CSS ----------------------------------------*/ .tj-progress-section.style-5 { padding-top: 120px; padding-bottom: 120px; background-color: var(--tj-black-2); position: relative; z-index: 1; } .tj-progress-section.style-5 .section-header { max-width: 100%; margin-bottom: 60px; } .tj-progress-section.style-5 .h5-shapes-1 { position: absolute; left: 8%; top: 50%; max-width: 55px; width: 100%; z-index: -1; -webkit-animation: up-down-move 3s forwards infinite alternate; animation: up-down-move 3s forwards infinite alternate; } .tj-progress-section.style-5 .h5-shapes-1 img { width: 100%; } .tj-progress-section.style-5 .h5-shapes-2 { position: absolute; bottom: 50px; right: 150px; max-width: 110px; width: 100%; z-index: -1; -webkit-animation: up-down-move-2 3s forwards infinite alternate; animation: up-down-move-2 3s forwards infinite alternate; } .tj-progress-section.style-5 .h5-shapes-2 img { width: 100%; } @media only screen and (min-width: 1400px) and (max-width: 1600px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-progress-section.style-5 .h5-shapes-1 { top: 20%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-progress-section.style-5 { padding-top: 80px; padding-bottom: 50px; } .tj-progress-section.style-5 .section-header { margin-bottom: 40px; } .tj-progress-section.style-5 .h5-shapes-1 { top: 15%; } .tj-progress-section.style-5 .h5-shapes-2 { bottom: 30px; max-width: 75px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-progress-section.style-5 { padding-top: 80px; padding-bottom: 50px; } .tj-progress-section.style-5 .section-header { margin-bottom: 40px; } .tj-progress-section.style-5 .h5-shapes-1 { top: 15%; max-width: 45px; left: 5%; } .tj-progress-section.style-5 .h5-shapes-2 { bottom: 30px; max-width: 75px; } } @media (max-width: 575px) { .tj-progress-section.style-5 { padding-top: 80px; padding-bottom: 50px; } .tj-progress-section.style-5 .section-header { margin-bottom: 40px; } .tj-progress-section.style-5 .h5-shapes-1 { top: 10%; max-width: 45px; left: 5%; } .tj-progress-section.style-5 .h5-shapes-2 { bottom: 30px; max-width: 75px; } } .progress-single.style-5 { border: 2px solid rgba(255, 255, 255, 0.1); background-color: transparent; border-radius: 10px; } .progress-single.style-5 .progress-text .progress-title .title { font-weight: var(--tj-fw-bold); letter-spacing: -0.02em; } .progress-single.style-5 .progress-text .icon-box { border-radius: 50%; } .progress-single.style-5 .desc { color: rgba(255, 255, 255, 0.6); } .progress-single.style-5 .progress-item .item_bar { background: rgba(255, 255, 255, 0.1); } /* !END: Theme Progress CSS */ /**---------------------------------------- START: Theme Resume CSS ----------------------------------------*/ .resume-section.style-5 { padding-bottom: 120px; background-color: var(--tj-theme-accent-1); position: relative; overflow: hidden; z-index: 1; } .resume-section.style-5::after { content: ""; position: absolute; top: 0; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 650px; height: 550px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(190deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(250px); filter: blur(250px); margin-top: -16%; opacity: 0.5; z-index: -1; } .resume-section.style-5 .section-header { max-width: 560px; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume-section.style-5 { padding-bottom: 80px; } } .resume-tabs { text-align: center; } .resume_menu_5 { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin-bottom: 40px; background-color: var(--tj-theme-primary); border-radius: 60px; position: relative; padding: 5px; z-index: 1; } .resume_menu_5 .resume-tab { font-size: 15px; font-weight: var(--tj-fw-bold); color: var(--tj-heading-secondary); border-radius: 60px; padding: 11px 25px; position: relative; -webkit-transition: 0.6s; transition: 0.6s; z-index: 1; } .resume_menu_5 .resume-tab.active { background-color: var(--tj-theme-accent-2); color: var(--tj-heading-secondary); } @media (max-width: 575px) { .resume_menu_5 { margin-bottom: 30px; max-width: 320px; } .resume_menu_5 .resume-tab { font-size: 14px; padding: 10px 15px; } } .resume_wrapper_5 { border-radius: 16px; border: 2px solid rgba(255, 255, 255, 0.1); padding: 60px; } .resume_wrapper_5 .resume_inner_5 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 40px; text-align: left; } .resume_wrapper_5 .resume_inner_5:not(:last-child) { margin-bottom: 40px; } .resume_wrapper_5 .resume_inner_5:not(:last-child) .resume_item { border-bottom: 2px solid rgba(255, 255, 255, 0.1); padding-bottom: 40px; } .resume_wrapper_5 .resume_inner_5 .icon_box { max-width: 60px; width: 100%; } .resume_wrapper_5 .resume_inner_5 .resume_item { max-width: calc(100% - 100px); width: 100%; gap: 40px; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_content { max-width: calc(100% - 210px); width: 100%; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_content .resume_text { max-width: 100%; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_content .resume_text .subtitle { color: var(--tj-white); } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_content .resume_text .desc { letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_date { max-width: 170px; width: 100%; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_date .date { display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; font-size: 20px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_date .date i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: var(--tj-theme-primary); line-height: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .resume_wrapper_5 { padding: 60px 30px; } .resume_wrapper_5 .resume_inner_5 .resume_item { gap: 20px; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_content { max-width: calc(100% - 190px); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume_wrapper_5 { padding: 40px 20px; } .resume_wrapper_5 .resume_inner_5 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .resume_wrapper_5 .resume_inner_5 .resume_item { gap: 20px; max-width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_content { max-width: 100%; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_date { max-width: 100%; } .resume_wrapper_5 .resume_inner_5 .resume_item .resume_date .date { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: start; } } /* !END: Theme Resume CSS */ /**---------------------------------------- START: Theme Portfolio CSS ----------------------------------------*/ .portfolio-section.style-5 { padding-bottom: 120px; background-color: var(--tj-black-2); } .portfolio-section.style-5 .section-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 20px; max-width: 100%; margin-bottom: 60px; position: relative; z-index: 1; } .portfolio-section.style-5 .section-header .sec-text { max-width: 560px; margin-left: 0; } .portfolio-section.style-5 .section-header .portfolio-shapes { position: absolute; bottom: 20px; right: 32%; max-width: 100px; width: 100%; z-index: -1; -webkit-animation: up-down-move-2 3s forwards infinite alternate; animation: up-down-move-2 3s forwards infinite alternate; } .portfolio-section.style-5 .section-header .portfolio-shapes img { width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio-section.style-5 .portfolio_slider { margin-left: calc((100% - 1140px) / 2); } .portfolio-section.style-5 .portfolio_slider .portfolio-pagination { left: 37%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-section.style-5 .portfolio_slider { margin-left: calc((100% - 960px) / 2); } .portfolio-section.style-5 .portfolio_slider .portfolio-pagination { left: auto; text-align: center; } .portfolio-section.style-5 .section-header .portfolio-shapes { max-width: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .portfolio-section.style-5 { padding-bottom: 80px; } .portfolio-section.style-5 .portfolio_slider { margin-left: auto; } .portfolio-section.style-5 .portfolio_slider .portfolio-pagination { left: auto; text-align: center; margin-top: 30px; } .portfolio-section.style-5 .section-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin-bottom: 40px; } .portfolio-section.style-5 .section-header .portfolio-shapes { max-width: 80px; } } @media (max-width: 575px) { .portfolio-section.style-5 { padding-bottom: 80px; } .portfolio-section.style-5 .portfolio_slider { margin-left: auto; } .portfolio-section.style-5 .portfolio_slider .portfolio-pagination { left: auto; text-align: center; margin-top: 30px; } .portfolio-section.style-5 .section-header { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; margin-bottom: 40px; } .portfolio-section.style-5 .section-header .portfolio-shapes { max-width: 65px; right: 10%; } } .portfolio-item.style-5 { max-width: 645px; width: 100%; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 35px; } .portfolio-item.style-5 .image-box { margin-bottom: 25px; border-radius: 15px; overflow: hidden; } .portfolio-item.style-5 .image-box a { display: inline-block; } .portfolio-item.style-5 .image-box img { -webkit-transition: 0.6s; transition: 0.6s; } .portfolio-item.style-5 .content-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 25px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .portfolio-item.style-5 .content-box .portfolio-text .portfolio-title { font-size: 20px; letter-spacing: 0.02em; margin-bottom: 6px; } .portfolio-item.style-5 .content-box .portfolio-text p { color: rgba(255, 255, 255, 0.6); letter-spacing: 0.02em; margin-bottom: 0; } .portfolio-item.style-5 .content-box .portfolio-arrow a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tj-white); font-size: 25px; border-radius: 50%; text-decoration: none; position: relative; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .portfolio-item.style-5 .content-box .portfolio-arrow a::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(-10deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; z-index: -1; } .portfolio-item.style-5 .content-box .portfolio-arrow a i { display: inline-block; -webkit-transition: 0.4s; transition: 0.4s; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .portfolio-item.style-5 .content-box .portfolio-arrow a:hover::before { opacity: 1; visibility: visible; } .portfolio-item.style-5 .content-box .portfolio-arrow a:hover i { -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } .portfolio-item.style-5:hover .image-box a img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-item.style-5 { padding: 30px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-item.style-5 { padding: 30px 15px; margin-left: auto; margin-right: auto; } } .portfolio_slider_5 { margin-left: calc((100% - 1296px) / 2); width: auto; min-width: auto; max-width: inherit; padding-right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio_slider_5 { margin-left: 15px; } } .portfolio_slider_5 .portfolio-pagination { position: relative; margin-top: 50px; text-align: center; } .portfolio_slider_5 .portfolio-pagination .swiper-pagination-bullet { opacity: 1; background-color: rgba(255, 255, 255, 0.1); } .portfolio_slider_5 .portfolio-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tj-theme-primary); } /* !END: Theme Portfolio CSS */ /**---------------------------------------- START: Theme Maquee CSS ----------------------------------------*/ .tj-maquee-section.style-5 { position: relative; background-color: var(--tj-color-theme-secondary); overflow: hidden; } .tj-maquee-section.style-5 .tj-maquee-slider-one { position: relative; background: var(--tj-theme-primary); padding: 26px 0; } .tj-maquee-section.style-5 .tj-maquee-slider-one .marquee-item .marquee-box .marquee-icon img { -webkit-animation: rotateImg2 6s infinite linear; animation: rotateImg2 6s infinite linear; } .tj-maquee-section.style-5 .tj-maquee-slider-two { background: var(--tj-color-theme-secondary); padding: 26px 0; } .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box .marquee-icon img { -webkit-animation: rotateImg 6s infinite linear; animation: rotateImg 6s infinite linear; } .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box .marquee-title { margin-left: 55px; margin-right: 0px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box { gap: 35px; } .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box .marquee-title { margin-right: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box { gap: 30px; } .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box .marquee-title { margin-left: 30px; } .tj-maquee-section.style-5 .tj-maquee-slider-two .marquee-item .marquee-box .marquee-title .title { font-size: 18px; } } .tj-maquee-section.style-5 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .tj-maquee-section.maquee-style-5 { background: var(--tj-theme-primary); position: relative; padding: 30px 0; z-index: 1; } .tj-maquee-section.maquee-style-5 .maquee-bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(28.52%, rgba(255, 255, 255, 0)), color-stop(68.59%, rgba(255, 255, 255, 0)), color-stop(96.94%, rgb(255, 255, 255))); -webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 28.52%, rgba(255, 255, 255, 0) 68.59%, rgb(255, 255, 255) 96.94%); mask-image: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(28.52%, rgba(255, 255, 255, 0)), color-stop(68.59%, rgba(255, 255, 255, 0)), color-stop(96.94%, rgb(255, 255, 255))); mask-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 28.52%, rgba(255, 255, 255, 0) 68.59%, rgb(255, 255, 255) 96.94%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--tj-theme-primary); z-index: 2; } .tj-maquee-section.maquee-style-5 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tj-maquee-section.maquee-style-5 .maquee-wrapper .marquee-item { max-width: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-maquee-section.maquee-style-5 { padding: 20px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-maquee-section.maquee-style-5 { padding: 12px 0; } } @media (max-width: 575px) { .tj-maquee-section.maquee-style-5 .maquee-wrapper .marquee-item { max-width: 125px; } } .elementor .marquee-item .marquee-logo img { max-height: 60px; width: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .elementor .marquee-item .marquee-logo img { max-height: 35px; } } .marquee-item { width: auto; display: inline-block; } .marquee-item .marquee-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 55px; } .marquee-item .marquee-box .marquee-icon { max-width: 20px; width: 100%; } .marquee-item .marquee-box .marquee-icon img { width: 100%; -webkit-animation: rotateImg 6s infinite linear; animation: rotateImg 6s infinite linear; } .marquee-item .marquee-box .marquee-title { margin-left: 0px; margin-right: 55px; } .marquee-item .marquee-box .marquee-title .title { font-size: 20px; font-weight: var(--tj-fw-ebold); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .marquee-item .marquee-box { gap: 35px; } .marquee-item .marquee-box .marquee-title { margin-right: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .marquee-item .marquee-box { gap: 30px; } .marquee-item .marquee-box .marquee-title { margin-right: 30px; } .marquee-item .marquee-box .marquee-title .title { font-size: 18px; } } @-webkit-keyframes rotateImg { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateImg { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotateImg2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotateImg2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* !END: Theme Maquee CSS */ /**---------------------------------------- START: Theme Header CSS ----------------------------------------*/ .tj-header-area.header-6 { padding: 30px 50px; } .tj-header-area.header-6 .header-menu { margin-left: 0; background-color: var(--tj-black-2); border-radius: 70px; padding: 0px 40px; } .tj-header-area.header-6 .header-menu ul > li > a { color: rgba(255, 255, 255, 0.5); padding: 15px 0px; } .tj-header-area.header-6 .header-menu ul > li > a::after, .tj-header-area.header-6 .header-menu ul > li > a::before { display: none; } .tj-header-area.header-6 .header-menu ul > li > a.current-menu-ancestor, .tj-header-area.header-6 .header-menu ul > li > a.current, .tj-header-area.header-6 .header-menu ul > li > a:hover { color: var(--tj-white); } .tj-header-area.header-6 .header-menu ul > li > .sub-menu > li.current-menu-ancestor > a, .tj-header-area.header-6 .header-menu ul > li > .sub-menu > li.current-menu-item > a { color: var(--tj-white); } .tj-header-area.header-6 .header-menu ul > li > .sub-menu > li.has-dropdown a::after { display: block; } .tj-header-area.header-6 .header-button { margin-left: 0; } .tj-header-area.header-6 .header-button .btn i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-header-area.header-6 .header-button .btn:hover i { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-area.header-6 { padding: 30px 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-header-area.header-6 { padding: 25px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-6 { padding: 25px 0; } .tj-header-area.header-6 .header-button { margin-left: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-header-area.header-6 { padding: 20px 0; } .tj-header-area.header-6 .header-button { margin-left: auto; } } @media (max-width: 575px) { .tj-header-area.header-6 { padding: 15px 0px; } .tj-header-area.header-6 .header-button { margin-left: auto; } } .tj-header-area.header-6-sticky .header-menu ul > li > ul.sub-menu > li:hover > a, .tj-header-area.header-6 .header-menu ul > li > ul.sub-menu > li:hover > a { color: var(--tj-white); } /* !END: Theme Header CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ .tj-footer-6-area { background: var(--tj-black-2); padding: 48px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-6-area { padding: 35px 0; } .tj-footer-6-area .footer-menu ul { margin: 0 0 10px; } } .tj-footer-6-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; row-gap: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-6-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-6-wrapper { row-gap: 20px; } } .tj-footer-6-left { max-width: 332px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-6-left { max-width: 100%; text-align: center; } } .tj-footer-6-paragraph { display: inline-block; font-weight: var(--tj-fw-sbold); font-size: 12px; margin-bottom: 0; padding-left: 16px; position: relative; z-index: 1; } .tj-footer-6-paragraph::before { content: ""; position: absolute; width: 7px; height: 7px; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: #00ff2f; border-radius: 50%; } .tj-footer-6-menu.footer-menu ul { margin: 0; } .tj-footer-6-menu.footer-menu ul li a { color: rgba(255, 255, 255, 0.6); font-size: 14px; font-weight: var(--tj-fw-regular); text-decoration: none; text-transform: uppercase; position: relative; -webkit-transition: 0.3s; transition: 0.3s; } .tj-footer-6-menu.footer-menu ul li a::before { display: none; } .tj-footer-6-menu.footer-menu ul li a:hover { color: var(--tj-white); } .tj-footer-6-copyright { font-size: 14px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin-bottom: 0; } .tj-footer-6-copyright a { color: var(--tj-white); text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s; } .tj-footer-6-copyright a:hover { color: var(--tj-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-7-area.style-8 .tj-footer-7-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .tj-footer-7-area.style-8 .tj-footer-6-left { margin-right: auto; margin-left: auto; margin-bottom: 0px; } .tj-footer-7-area.style-8 .tj-header-5-right-media { display: block; } } /* !END: Theme Footer CSS */ /**---------------------------------------- START: Theme Button CSS ----------------------------------------*/ .tj-arrow-6-btn .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-arrow-6-btn .icon_box i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .tj-arrow-6-btn .icon_box .icon_first { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-arrow-6-btn .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-arrow-6-btn:hover .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-arrow-6-btn:hover .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } /* !END: Theme Button CSS */ /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .hero-section.style-6 { position: relative; padding-top: 265px; overflow: hidden; background-color: var(--tj-black-2); z-index: 1; background-repeat: no-repeat; background-position: center; background-size: cover; } .hero-section.style-6::before { width: 522px; height: 522px; margin-right: 15%; margin-top: -5%; } .hero-section.style-6::after { content: ""; position: absolute; bottom: 0; right: 0; width: 522px; height: 522px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-right: -5%; opacity: 0.6; margin-top: -5%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-section.style-6 { padding-bottom: 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-section.style-6 { padding-top: 245px; padding-bottom: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-section.style-6 { padding-top: 160px; padding-bottom: 80px; } } @media (max-width: 575px) { .hero-section.style-6 { padding-top: 160px; padding-bottom: 50px; } } .hero-wrapper-style-6 { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 85px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 1445px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 25px; z-index: 1; } .hero-wrapper-style-6 .hero-infos { max-width: 310px; width: 100%; height: 100%; margin-left: auto; background-color: var(--tj-black-2); padding: 30px; margin-top: -80px; border-radius: 10px; } .hero-wrapper-style-6 .hero-infos .hero-images { max-width: 250px; width: 100%; border: 2px solid var(--tj-white); border-radius: 150px; margin-bottom: 30px; } .hero-wrapper-style-6 .hero-infos .hero-images img { width: 100%; height: 100px; -o-object-fit: cover; object-fit: cover; border-radius: 150px; } .hero-wrapper-style-6 .hero-infos .desc { max-width: 250px; width: 100%; color: var(--tj-grey-1); } .hero-wrapper-style-6 .hero-infos .desc p:last-child { margin-bottom: 0; } .hero-wrapper-style-6 .hero-infos .hero-button { margin-top: 80px; } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 15px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-bold); text-decoration: none; padding-bottom: 5px; position: relative; z-index: 1; } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn::before { position: absolute; content: ""; display: block; height: 1px; min-height: 1px; right: 0; bottom: 0; left: 0; background: var(--tj-heading-secondary); will-change: transform; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-timing-function: ease; animation-timing-function: ease; } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn .icon_box i:first-child, .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn .icon_box i:last-child { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn .icon_box i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn:hover::before { -webkit-animation-name: hover-underline; animation-name: hover-underline; } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn:hover .icon_box i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .hero-wrapper-style-6 .hero-infos .hero-button .hero-btn:hover .icon_box i:last-child { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .hero-wrapper-style-6 .group_overly span { position: absolute; width: 6px; height: 6px; right: 45%; top: 40px; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(110.61%, var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 110.61%); border-radius: 50%; -webkit-animation: services-triangle 5s linear infinite alternate; animation: services-triangle 5s linear infinite alternate; } .hero-wrapper-style-6 .group_overly span:nth-child(2) { width: 16px; height: 16px; right: 25%; top: 100px; z-index: -1; -webkit-animation: services-triangle 6s linear infinite alternate; animation: services-triangle 6s linear infinite alternate; } .hero-wrapper-style-6 .group_overly span:nth-child(3) { width: 35px; height: 35px; right: 10%; bottom: 35%; top: auto; z-index: -1; -webkit-animation: services-triangle 7s linear infinite alternate; animation: services-triangle 7s linear infinite alternate; } .hero-wrapper-style-6 .group_overly span:nth-child(4) { width: 10px; height: 10px; right: 20%; bottom: 32%; top: auto; z-index: -1; -webkit-animation: services-triangle 8s linear infinite alternate; animation: services-triangle 8s linear infinite alternate; } .hero-wrapper-style-6 .group_overly span:nth-child(5) { width: 10px; height: 10px; right: 30%; bottom: 0; top: auto; z-index: -1; -webkit-animation: services-triangle 9s linear infinite alternate; animation: services-triangle 9s linear infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-wrapper-style-6 { max-width: 1335px; padding-bottom: 80px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-wrapper-style-6 { max-width: 1145px; margin-bottom: 0px; padding-bottom: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-wrapper-style-6 { max-width: 950px; gap: 75px; margin-bottom: 0px; padding-bottom: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-wrapper-style-6 { max-width: 950px; gap: 25px; margin-bottom: 0px; padding-bottom: 80px; } .hero-wrapper-style-6 .hero-infos { max-width: 280px; padding: 30px 15px; margin-top: -60px; } .hero-wrapper-style-6 .hero-infos .hero-images { max-width: 200px; margin-left: auto; margin-right: auto; } .hero-wrapper-style-6 .hero-infos .hero-images img { height: 75px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-wrapper-style-6 { max-width: 950px; gap: 35px; margin-bottom: 0px; } .hero-wrapper-style-6 .hero-infos { max-width: 280px; padding: 30px 15px; margin-right: auto; margin-top: 0px; } .hero-wrapper-style-6 .hero-infos .hero-images { max-width: 200px; margin-left: auto; margin-right: auto; } .hero-wrapper-style-6 .hero-infos .hero-images img { height: 75px; } } @media (max-width: 575px) { .hero-wrapper-style-6 { max-width: 950px; gap: 35px; margin-bottom: 0px; } .hero-wrapper-style-6 .hero-infos { max-width: 100%; padding: 30px 15px; margin-top: 0px; } .hero-wrapper-style-6 .hero-infos .hero-images { max-width: 200px; margin-left: auto; margin-right: auto; } .hero-wrapper-style-6 .hero-infos .hero-images img { height: 75px; } } .hero-content-box.style-6 { max-width: 1045px; width: 100%; } .hero-content-box.style-6 .sub-tile { display: block; color: var(--tj-grey-1); font-weight: var(--tj-fw-medium); margin-bottom: 15px; } .hero-content-box.style-6 .desc { font-size: 28px; font-weight: var(--tj-fw-sbold); color: var(--tj-grey-1); letter-spacing: -0.02em; margin-bottom: 30px; } .hero-content-box.style-6 .desc span { color: var(--tj-heading-secondary); } .hero-content-box.style-6 .hero-title { font-size: 145px; text-transform: uppercase; letter-spacing: -0.03em; font-weight: var(--tj-fw-sbold); margin-bottom: 0; line-height: 1; } .hero-content-box.style-6 .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: 20px; } .hero-content-box.style-6 .hero-title span img { max-width: 230px; height: 106px; -o-object-fit: cover; object-fit: cover; width: 100%; border-radius: 150px; border: 2px solid var(--tj-white); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-content-box.style-6 { max-width: 930px; } .hero-content-box.style-6 .hero-title { font-size: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-box.style-6 { max-width: 750px; } .hero-content-box.style-6 .hero-title { font-size: 95px; } .hero-content-box.style-6 .hero-title span { gap: 10px; } .hero-content-box.style-6 .hero-title span img { max-width: 185px; height: 85px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-box.style-6 { max-width: 560px; } .hero-content-box.style-6 .hero-title { font-size: 75px; } .hero-content-box.style-6 .hero-title span { gap: 10px; } .hero-content-box.style-6 .hero-title span img { max-width: 165px; height: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-content-box.style-6 { max-width: 435px; } .hero-content-box.style-6 .desc { font-size: 25px; margin-bottom: 20px; } .hero-content-box.style-6 .hero-title { font-size: 55px; line-height: 1.1; } .hero-content-box.style-6 .hero-title span { gap: 10px; } .hero-content-box.style-6 .hero-title span img { max-width: 130px; height: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-content-box.style-6 { max-width: 435px; } .hero-content-box.style-6 .desc { font-size: 20px; margin-bottom: 20px; } .hero-content-box.style-6 .hero-title { font-size: 55px; line-height: 1.1; } .hero-content-box.style-6 .hero-title span { gap: 10px; } .hero-content-box.style-6 .hero-title span img { max-width: 130px; height: 60px; } } @media (max-width: 575px) { .hero-content-box.style-6 { max-width: 435px; } .hero-content-box.style-6 .desc { font-size: 20px; margin-bottom: 20px; } .hero-content-box.style-6 .hero-title { font-size: 45px; line-height: 1.1; } .hero-content-box.style-6 .hero-title span { gap: 10px; } .hero-content-box.style-6 .hero-title span img { max-width: 85px; height: 40px; } } .hero_scroll { position: absolute; left: 0; bottom: 115px; z-index: 2; } .hero_scroll .down { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 18px; -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); font-size: 14px; color: var(--tj-heading-secondary); text-decoration: none; letter-spacing: -0.02em; } .hero_scroll .down span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 22px; height: 32px; border: 1px solid var(--tj-heading-secondary); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); border-radius: 50px; } .hero_scroll .down span i { display: inline-block; position: relative; right: -6px; top: 4px; -webkit-animation: jump-arrow 2.5s infinite; animation: jump-arrow 2.5s infinite; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero_scroll { display: none; } } @keyframes jump-arrow { 0%, 20%, 55%, 80%, 100% { -webkit-transform: translate3d(-50%, 0, 0) rotate(-90deg); transform: translate3d(-50%, 0, 0) rotate(-90deg); } 40% { -webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg); transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 70% { -webkit-transform: translate3d(-50%, -8px, 0) rotate(-90deg); transform: translate3d(-50%, -8px, 0) rotate(-90deg); } 90% { -webkit-transform: translate3d(-50%, -5px, 0) rotate(-90deg); transform: translate3d(-50%, -5px, 0) rotate(-90deg); } } @-webkit-keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } @-webkit-keyframes services-triangle { 0% { -webkit-transform: rotate(0deg) translateX(-50px); -ms-transform: rotate(0deg) translateX(-50px); transform: rotate(0deg) translateX(-50px); } 100% { -webkit-transform: rotate(360deg) translateY(100px); -ms-transform: rotate(360deg) translateY(100px); transform: rotate(360deg) translateY(100px); } } @keyframes services-triangle { 0% { -webkit-transform: rotate(0deg) translateX(-50px); -ms-transform: rotate(0deg) translateX(-50px); transform: rotate(0deg) translateX(-50px); } 100% { -webkit-transform: rotate(360deg) translateY(100px); -ms-transform: rotate(360deg) translateY(100px); transform: rotate(360deg) translateY(100px); } } @-webkit-keyframes hover-underline { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 49% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } to { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } @keyframes hover-underline { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: right; transform-origin: right; } 49% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: right; transform-origin: right; } 50% { -webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: left; transform-origin: left; } to { -webkit-transform: scaleX(1); transform: scaleX(1); -webkit-transform-origin: left; transform-origin: left; } } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme Maquee CSS ----------------------------------------*/ .tj-maquee-section.style-6 { position: relative; background-color: var(--tj-black-2); padding: 60px 0; z-index: 1; } .tj-maquee-section.style-6::before { content: ""; position: absolute; width: 720px; height: 100%; background: -webkit-gradient(linear, left top, right top, from(var(--tj-black)), to(rgba(5, 18, 41, 0))); background: linear-gradient(90deg, var(--tj-black) 0%, rgba(5, 18, 41, 0) 100%); top: 0; left: 0; z-index: 2; } .tj-maquee-section.style-6::after { content: ""; position: absolute; width: 720px; height: 100%; background: -webkit-gradient(linear, left top, right top, from(var(--tj-black)), to(rgba(5, 18, 41, 0))); background: linear-gradient(90deg, var(--tj-black) 0%, rgba(5, 18, 41, 0) 100%); top: 0; right: 0; z-index: 2; -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } .tj-maquee-section.style-6 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-maquee-section.style-6 { padding: 30px 0; } .tj-maquee-section.style-6::before { width: 500px; } .tj-maquee-section.style-6::after { width: 500px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-maquee-section.style-6 { padding: 25px 0; } .tj-maquee-section.style-6::before { width: 300px; } .tj-maquee-section.style-6::after { width: 300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-maquee-section.style-6 { padding: 25px 0; } .tj-maquee-section.style-6::before { width: 200px; } .tj-maquee-section.style-6::after { width: 200px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-maquee-section.style-6 { padding: 20px 0; } .tj-maquee-section.style-6::before { width: 100px; } .tj-maquee-section.style-6::after { width: 100px; } } @media (max-width: 575px) { .tj-maquee-section.style-6 { padding: 20px 0; } .tj-maquee-section.style-6::before { width: 100px; } .tj-maquee-section.style-6::after { width: 100px; } } .tj-maquee-section.style-9 { background-color: var(--tj-theme-accent-2); position: relative; } .tj-maquee-section.style-9 .maquee-bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-mask-image: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(28.52%, rgba(255, 255, 255, 0)), color-stop(68.59%, rgba(255, 255, 255, 0)), color-stop(96.94%, rgb(255, 255, 255))); -webkit-mask-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 28.52%, rgba(255, 255, 255, 0) 68.59%, rgb(255, 255, 255) 96.94%); mask-image: -webkit-gradient(linear, left top, right top, from(rgb(255, 255, 255)), color-stop(28.52%, rgba(255, 255, 255, 0)), color-stop(68.59%, rgba(255, 255, 255, 0)), color-stop(96.94%, rgb(255, 255, 255))); mask-image: linear-gradient(90deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 28.52%, rgba(255, 255, 255, 0) 68.59%, rgb(255, 255, 255) 96.94%); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; background: var(--tj-theme-accent-2); z-index: 2; } .tj-maquee-section.style-9 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .tj-maquee-section.style-9 .marquee-item { background: var(--tj-black); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 200px; height: 84px; border-radius: 10px; -webkit-transition: 0.4s; transition: 0.4s; position: relative; z-index: 1; cursor: pointer; } .tj-maquee-section.style-9 .marquee-item::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-gradient(linear, left top, right top, from(#8750f7), color-stop(110.61%, #2a1454)); background: linear-gradient(90deg, #8750f7 0%, #2a1454 110.61%); border-radius: 10px; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; } .tj-maquee-section.style-9 .marquee-item:hover::before { opacity: 1; visibility: visible; } /* !END: Theme Maquee CSS */ /**---------------------------------------- START: Theme About CSS ----------------------------------------*/ .tj-about-section.style-6 { padding-top: 120px; padding-bottom: 160px; background-color: var(--tj-theme-accent-1); position: relative; overflow: hidden; z-index: 1; } .tj-about-section.style-6 .section-header { margin-bottom: 35px; } .tj-about-section.style-6::before { content: ""; position: absolute; top: 0; right: 0; width: 420px; height: 420px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-right: -5%; opacity: 0.5; margin-top: -5%; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-about-section.style-6 { padding-bottom: 120px; } .tj-about-section.style-6 .section-header { margin-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-about-section.style-6 { padding-top: 80px; padding-bottom: 80px; } .tj-about-section.style-6 .section-header { margin-bottom: 20px; } } @media (max-width: 575px) { .tj-about-section.style-6 { padding-top: 80px; padding-bottom: 120px; } .tj-about-section.style-6 .section-header { margin-bottom: 20px; } } .about-wrapper-sytle-6 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 35px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-sytle-6 { gap: 50px; } } .about-6-images { position: relative; display: inline-block; max-width: 550px; width: 100%; z-index: 1; } .about-6-images .ab_images { position: relative; z-index: 1; } .about-6-images .ab_images::before { position: absolute; content: ""; width: 100%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), to(var(--tj-white))); background: linear-gradient(to right, var(--tj-theme-primary) 0%, var(--tj-white) 100%); border-radius: 16px; } .about-6-images img { position: relative; width: 100%; border-radius: 16px; padding: 2px; z-index: 1; } .about-6-images .about-shapes { position: absolute; right: -50px; top: 40%; max-width: 110px; margin-left: auto; width: 100%; z-index: 2; -webkit-animation: up-down-move6 2.5s forwards infinite alternate; animation: up-down-move6 2.5s forwards infinite alternate; } .about-6-images .about-shapes img { width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-6-images { max-width: 475px; } .about-6-images .about-shapes { right: -60px; } .about-6-images .about-shapes svg { width: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-6-images { max-width: 310px; } .about-6-images .about-shapes { right: -75px; } .about-6-images .about-shapes svg { width: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-6-images { margin-left: auto; margin-right: auto; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-6-images { max-width: 430px; } } @media (max-width: 575px) { .about-6-images { max-width: 300px; } .about-6-images .about-shapes { right: -80px; } .about-6-images .about-shapes svg { width: 60px; } } .about-right-content-6 { max-width: 620px; width: 100%; margin-left: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-right-content-6 { max-width: 575px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-right-content-6 { max-width: 575px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about-right-content-6 { margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about-right-content-6 { margin-left: 0; } } .list-one ul { margin: 0; padding: 0; list-style: none; } .list-one ul li { position: relative; color: var(--tj-white); font-weight: var(--tj-fw-sbold); padding-left: 15px; margin-bottom: 6px; z-index: 1; } .list-one ul li::before { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 5px; height: 5px; background-color: var(--tj-white); } .list-one ul li:last-child { margin-bottom: 0; } .about-feature-item-6 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 580px; width: 100%; } .about-feature-item-6 .desc { max-width: 315px; width: 100%; margin-bottom: 25px; color: var(--tj-grey-1); } .about-feature-item-6 .desc p:last-child { margin-bottom: 0; } .about-feature-item-6 .about-button { margin-top: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-feature-item-6 .about-button { margin-top: 35px; } } @media (max-width: 575px) { .about-feature-item-6 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; } } .fun-fact-6 { max-width: 260px; width: 100%; border-top: 2px solid rgba(255, 255, 255, 0.1); border-bottom: 2px solid rgba(255, 255, 255, 0.1); -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); position: relative; top: -30px; } .fun-fact-6 .number { font-size: 110px; font-weight: var(--tj-fw-sbold); color: var(--tj-heading-primary); line-height: 1; } .fun-fact-6 .text { position: relative; top: -20px; color: var(--tj-grey-1); text-align: end; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .fun-fact-6 { top: -65px; } .fun-fact-6 .number { font-size: 95px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .fun-fact-6 { top: -70px; } .fun-fact-6 .number { font-size: 75px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .fun-fact-6 { top: -70px; } .fun-fact-6 .number { font-size: 75px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .fun-fact-6 { top: -70px; } .fun-fact-6 .number { font-size: 75px; } } @media (max-width: 575px) { .fun-fact-6 { top: 35px; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .fun-fact-6 .number { font-size: 60px; } } @-webkit-keyframes up-down-move6 { 0% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(25px); transform: translateY(25px); } } @keyframes up-down-move6 { 0% { -webkit-transform: translateY(-25px); transform: translateY(-25px); } 100% { -webkit-transform: translateY(25px); transform: translateY(25px); } } .elementor .about-6-images img { border-radius: 16px; } /* !END: Theme About CSS */ /**---------------------------------------- START: Theme Testimonial CSS ----------------------------------------*/ .tj-testimonial-section.style-6 { background-color: var(--tj-theme-accent-1); padding-bottom: 120px; position: relative; z-index: 1; } .tj-testimonial-section.style-6::before { content: ""; position: absolute; top: -25%; left: -10%; width: 450px; height: 450px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(190deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(250px); filter: blur(250px); opacity: 0.8; z-index: -1; } .tj-testimonial-section.style-6 .section-header { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; margin-bottom: 60px; } .tj-testimonial-section.style-6 .section-header .sec-text { max-width: 560px; width: 100%; } .tj-testimonial-section.style-6 .testimonial-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .tj-testimonial-section.style-6 .testimonial-navigation .testimonial-next, .tj-testimonial-section.style-6 .testimonial-navigation .testimonial-prev { border: 2px solid rgba(255, 255, 255, 0.1); color: var(--tj-white); border-radius: 50px; padding: 7px 35px; position: relative; z-index: 1; } .tj-testimonial-section.style-6 .testimonial-navigation .testimonial-next::before, .tj-testimonial-section.style-6 .testimonial-navigation .testimonial-prev::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background: linear-gradient(260deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); border-radius: 50px; opacity: 0; visibility: hidden; -webkit-transition: 0.6s; transition: 0.6s; z-index: -1; } .tj-testimonial-section.style-6 .testimonial-navigation .testimonial-next:hover::before, .tj-testimonial-section.style-6 .testimonial-navigation .testimonial-prev:hover::before { opacity: 1; visibility: visible; } .tj-testimonial-section.style-6 .testimonial-pagination { text-align: center; margin-top: 50px; } .tj-testimonial-section.style-6 .testimonial-pagination .swiper-pagination-bullet { background-color: var(--tj-grey-2); } .tj-testimonial-section.style-6 .testimonial-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tj-theme-primary); } .tj-testimonial-section.style-6 .swiper-slide { -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .swiper-slide .icon-box svg { -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .swiper-slide .icon-box svg:first-child { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); margin-right: 5px; -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .swiper-slide .icon-box svg:last-child { -webkit-transform: translateX(-22px) rotate(135deg); -ms-transform: translateX(-22px) rotate(135deg); transform: translateX(-22px) rotate(135deg); -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .swiper-slide.swiper-slide-active .icon-box svg { -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .swiper-slide.swiper-slide-active .icon-box svg:first-child { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); margin-right: 5px; -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .swiper-slide.swiper-slide-active .icon-box svg:last-child { -webkit-transform: translateX(0px) rotate(0deg); -ms-transform: translateX(0px) rotate(0deg); transform: translateX(0px) rotate(0deg); -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-section.style-6 .group_overly span { position: absolute; width: 6px; height: 6px; right: 45%; top: 40px; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(110.61%, var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 110.61%); border-radius: 50%; -webkit-animation: services-triangle 8s linear infinite alternate; animation: services-triangle 8s linear infinite alternate; } .tj-testimonial-section.style-6 .group_overly span:nth-child(2) { width: 16px; height: 16px; right: 40%; top: 100px; z-index: -1; -webkit-animation: services-triangle 9s linear infinite alternate; animation: services-triangle 9s linear infinite alternate; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-section.style-6::after, .tj-testimonial-section.style-6::before { width: 650px; height: 350px; margin-bottom: -16%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-section.style-6 { padding-top: 0px; padding-bottom: 80px; } .tj-testimonial-section.style-6 .section-header { margin-bottom: 40px; } .tj-testimonial-section.style-6 .testimonial-pagination { margin-top: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-section.style-6 .testimonial-slider-6 { padding: 0px 15px; } } .testimonial-item.style-6 { max-width: 100%; background-color: var(--tj-black-2); padding: 40px 30px 30px; border-radius: 16px; } .testimonial-item.style-6 .icon-box { margin-bottom: 40px; } .testimonial-item.style-6 .quote { font-size: 20px; line-height: 1.8; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; } .testimonial-item.style-6 .testimonial-feature-item { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: end; padding-top: 25px; border-top: 2px solid rgba(255, 255, 255, 0.1); } .testimonial-item.style-6 .testimonial-feature-item .testimonial-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .testimonial-item.style-6 .testimonial-feature-item .auother-images { max-width: 75px; height: 75px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; } .testimonial-item.style-6 .testimonial-feature-item .auother-images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; padding: 8px; } .testimonial-item.style-6 .testimonial-feature-item .feature-content .name { margin-bottom: 5px; } .testimonial-item.style-6:hover { border-color: var(--tj-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-item.style-6 { padding: 30px 15px; } .testimonial-item.style-6 .quote { font-size: 18px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-item.style-6 { padding: 30px 15px; } .testimonial-item.style-6 .quote { font-size: 18px; } .testimonial-item.style-6 .icon-box { margin-bottom: 20px; } } @media (max-width: 575px) { .testimonial-item.style-6 { padding: 30px 15px; } .testimonial-item.style-6 .quote { font-size: 16px; } .testimonial-item.style-6 .icon-box { margin-bottom: 20px; } .testimonial-item.style-6 .testimonial-rating { padding-left: 90px; } } /* !END: Theme Testimonial CSS */ /**---------------------------------------- START: Theme Portfolio CSS ----------------------------------------*/ .tj-portfolio-section.style-6 { padding-top: 0px; padding-bottom: 180px; background-color: var(--tj-theme-accent-1); } .tj-portfolio-section.style-6 .section-header.style-4 { max-width: 100%; text-align: center; } .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 210px; font-weight: var(--tj-fw-sbold); background: var(--tj-theme-primary); background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), to(var(--tj-white))); background: linear-gradient(to right, var(--tj-theme-primary) 0%, var(--tj-white) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; margin-bottom: 0; } .tj-portfolio-section.style-6 .portfolio-wrapper-6 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 50px; } .tj-portfolio-section.style-6 .portfolio-wrapper-6:last-child { margin-bottom: 0; } .tj-portfolio-section.style-6 .project-wrapper .stack-item { padding-top: 25px; } .tj-portfolio-section.style-6 .project-wrapper .stack-item:nth-child(1) { z-index: 1; } .tj-portfolio-section.style-6 .project-wrapper .stack-item:nth-child(2) { z-index: 2; } .tj-portfolio-section.style-6 .project-wrapper .stack-item:nth-child(3) { z-index: 3; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 175px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-portfolio-section.style-6 { padding-bottom: 120px; } .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-portfolio-section.style-6 { padding-bottom: 80px; } .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-portfolio-section.style-6 { padding-bottom: 80px; } .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 75px; } } @media (max-width: 575px) { .tj-portfolio-section.style-6 { padding-bottom: 80px; } .tj-portfolio-section.style-6 .section-header.style-4 .title { font-size: 45px; } } .portfolio-6-wrapper { overflow: hidden; position: relative; z-index: 1; } .portfolio-6-wrapper .portfolio-6-content-area { height: 600px; } .portfolio-6-wrapper .portfolio-6-content-area .stack-item { z-index: 1; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-6-wrapper .portfolio-6-content-area { height: auto; } } .portfolio-wrapper-6 { z-index: 1; } .portfolio-item.style-6 { position: relative; border-radius: 20px; z-index: 1; overflow: hidden; } .portfolio-item.style-6 .portfolio-images { position: relative; z-index: 1; } .portfolio-item.style-6 .portfolio-images::before { position: absolute; content: ""; width: 100%; height: 470px; bottom: 0; left: 0; background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 7, 8, 0)), to(#050708)); background: linear-gradient(180deg, rgba(5, 7, 8, 0) 0%, #050708 100%); } .portfolio-item.style-6 .portfolio-images img { width: 100%; max-height: 640px; -o-object-fit: cover; object-fit: cover; -o-object-position: center top; object-position: center top; } .portfolio-item.style-6 .portfolio-images .portfolio-link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100px; height: 100px; line-height: 1; border-radius: 50%; position: absolute; top: 30px; right: 30px; color: var(--tj-white); font-size: 20px; text-decoration: none; border: 1px solid var(--tj-white); background: transparent; -webkit-transition: 0.4s; transition: 0.4s; z-index: 3; } .portfolio-item.style-6 .portfolio-images .portfolio-link .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .portfolio-item.style-6 .portfolio-images .portfolio-link .icon_box .icon_first, .portfolio-item.style-6 .portfolio-images .portfolio-link .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .portfolio-item.style-6 .portfolio-images .portfolio-link .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .portfolio-item.style-6 .portfolio-images .portfolio-link:hover { background-color: var(--tj-theme-primary); border-color: var(--tj-theme-primary); } .portfolio-item.style-6 .portfolio-images .portfolio-link:hover .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .portfolio-item.style-6 .portfolio-images .portfolio-link:hover .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .portfolio-item.style-6 .portfolio-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; bottom: 0px; right: 0; width: 100%; padding: 30px; z-index: 2; } .portfolio-item.style-6 .portfolio-content .portfolio-header { max-width: 400px; width: 100%; } .portfolio-item.style-6 .portfolio-content .portfolio-header .sub-tile { display: block; color: var(--tj-heading-primary); margin-bottom: 20px; } .portfolio-item.style-6 .portfolio-content .portfolio-header .title { font-size: 44px; font-weight: var(--tj-fw-sbold); margin-bottom: 0; } .portfolio-item.style-6 .portfolio-content .portfolio-header .title a { display: inline; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor)); background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; -webkit-transition: all 0.3s, background-size 0.8s; transition: all 0.3s, background-size 0.8s; } .portfolio-item.style-6 .portfolio-content .portfolio-header .title a:hover { background-size: 100% 2px; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul li { font-size: 16px; color: var(--tj-grey-1); line-height: 1; border-right: 2px solid var(--tj-grey-1); padding-right: 15px; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul li:last-child { border: none; padding-left: 15px; padding-right: 0px; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul li span { display: inline-block; font-size: 16px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-sbold); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-item.style-6 .portfolio-images::before { height: 350px; } .portfolio-item.style-6 .portfolio-content .portfolio-header .title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-item.style-6 .portfolio-content .portfolio-header .title { font-size: 35px; } .portfolio-item.style-6 .portfolio-images::before { height: 250px; } .portfolio-item.style-6 .portfolio-images .portfolio-link { width: 80px; height: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio-item.style-6 .portfolio-content { padding: 15px; } .portfolio-item.style-6 .portfolio-content .portfolio-header { max-width: 100%; } .portfolio-item.style-6 .portfolio-content .portfolio-header .sub-tile { margin-bottom: 10px; } .portfolio-item.style-6 .portfolio-content .portfolio-header .title { font-size: 30px; } .portfolio-item.style-6 .portfolio-images::before { height: 165px; } .portfolio-item.style-6 .portfolio-images .portfolio-link { width: 65px; height: 65px; } } @media (max-width: 575px) { .portfolio-item.style-6 .portfolio-content { gap: 15px; padding: 15px; } .portfolio-item.style-6 .portfolio-content .portfolio-header { max-width: 100%; } .portfolio-item.style-6 .portfolio-content .portfolio-header .sub-tile { margin-bottom: 10px; } .portfolio-item.style-6 .portfolio-content .portfolio-header .title { font-size: 25px; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul li { font-size: 14px; padding-right: 10px; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul li:last-child { padding-left: 10px; } .portfolio-item.style-6 .portfolio-content .portfolio-list ul li span { font-size: 14px; color: var(--tj-white); } .portfolio-item.style-6 .portfolio-images::before { height: 165px; } .portfolio-item.style-6 .portfolio-images .portfolio-link { width: 50px; height: 50px; top: 15px; right: 15px; } } /* !END: Theme Portfolio CSS */ /**---------------------------------------- START: Theme Service CSS ----------------------------------------*/ .tj-service-6-area { padding: 0 0 120px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-service-6-area { padding: 0 0 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-6-area { padding: 0 0 80px; } } .tj-service-6-area .tj-btn-primary { width: 100%; border-radius: 12px; padding: 28px 35px; } .tj-service-6-area .tj-btn-primary .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-service-6-area .tj-btn-primary .icon_box .icon_first, .tj-service-6-area .tj-btn-primary .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-service-6-area .tj-btn-primary .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-service-6-area .tj-btn-primary .icon_box i { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .tj-service-6-area .tj-btn-primary:hover .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-service-6-area .tj-btn-primary:hover .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .tj-service-6-section-wrapper .section-header { margin: auto; margin-bottom: 50px; } .tj-service-6-wrapper { background: var(--tj-theme-accent-2); padding: 30px 32px 30px 32px; margin-bottom: 30px; border-radius: 12px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-6-wrapper { padding: 30px 15px; } } .tj-service-6-wrapper:hover .tj-service-6-icon span { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tj-service-6-icon { width: 64px; height: 64px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: var(--tj-theme-primary); border-radius: 50%; margin-bottom: 35px; } .tj-service-6-icon span { color: var(--tj-white); font-size: 32px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .tj-service-6-icon span i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .tj-service-6-icon span img, .tj-service-6-icon span svg { max-width: 32px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .tj-service-6-title { font-weight: var(--tj-fw-sbold); font-size: 28px; letter-spacing: -0.02em; margin-bottom: 18px; } .tj-service-6-title a { display: inline-block; -webkit-transition: 0.3s; transition: 0.3s; } .tj-service-6-title a:hover { color: var(--tj-theme-primary); } .tj-service-6-paragraph { color: rgba(255, 255, 255, 0.5); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-service-6-paragraph { font-size: 14px; } } .tj-service-6-paragraph p { margin-bottom: 24px; } .tj-service-6-paragraph ul { padding-left: 0; } .tj-service-6-paragraph ul li { color: var(--tj-white); list-style: none; position: relative; padding-left: 14px; line-height: 1; margin-bottom: 12px; } .tj-service-6-paragraph ul li::before { content: ""; position: absolute; width: 4px; height: 4px; top: 50%; left: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: var(--tj-white); } /* !END: Theme Service CSS */ /**---------------------------------------- START: Theme Resume CSS ----------------------------------------*/ .tj-resume-6-area { background: var(--tj-theme-accent-1); padding-top: 120px; padding-bottom: 120px; position: relative; overflow: hidden; z-index: 1; } .tj-resume-6-area::before { content: ""; position: absolute; top: 0; right: 0; width: 420px; height: 420px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-right: -5%; opacity: 0.8; margin-top: -5%; z-index: -1; } .tj-resume-6-area::after { content: ""; position: absolute; bottom: 0; left: -12%; width: 520px; height: 520px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-right: -35%; opacity: 0.5; margin-top: -5%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-resume-6-area { padding-top: 80px; padding-bottom: 80px; } .tj-resume-6-area .section-header { margin-bottom: 0; } } .tj-resume-6-marquee-title { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 80px; font-weight: var(--tj-fw-sbold); font-size: 164px; letter-spacing: -0.03em; text-transform: uppercase; background-image: linear-gradient(107deg, rgba(129, 76, 236, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: 0; } .tj-resume-6-marquee-title span { line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .tj-resume-6-marquee-title span img { max-width: 69px; -webkit-animation: rotateImgReverse 6s infinite linear; animation: rotateImgReverse 6s infinite linear; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-resume-6-marquee-title { font-size: 120px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-resume-6-marquee-title { font-size: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-resume-6-marquee-title { font-size: 80px; } .tj-resume-6-marquee-title span img { max-width: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-resume-6-marquee-title { font-size: 70px; gap: 40px; } .tj-resume-6-marquee-title span img { max-width: 45px; } } @media (max-width: 575px) { .tj-resume-6-marquee-title { font-size: 50px; gap: 40px; } .tj-resume-6-marquee-title span img { max-width: 45px; } } .tj-resume-6-left .tj-section-button { margin-top: 30px; } .tj-resume-6-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 35px; } .tj-resume-6-wrapper .resume-6-sidebar-content { max-width: 420px; width: 100%; } .tj-resume-6-wrapper .resume-6-inner { max-width: 785px; width: 100%; margin-left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-resume-6-wrapper .resume-6-sidebar-content { max-width: 365px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-resume-6-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .tj-resume-6-wrapper .side-sticky { position: relative !important; top: 0 !important; left: 0 !important; } } .tj-resume-6-accordion-item { background: var(--tj-black-2); border: none !important; padding: 23px 30px; cursor: pointer; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-resume-6-accordion-item { padding: 16px 15px; } } .tj-resume-6-accordion-button { background: var(--tj-black-2); color: var(--tj-white); font-size: 18px; font-weight: 700; padding-left: 0; padding-right: 30px; } .tj-resume-6-accordion-button-icon span { margin-right: 20px; display: inline-block; max-width: 60px; width: 100%; } .tj-resume-6-accordion-button::after { content: "+"; width: 30px; height: 30px; border: 2px solid var(--tj-theme-primary); font-size: 28px; border-radius: 50%; font-weight: var(--tj-fw-light); position: absolute; right: 0; top: 34%; -webkit-transition: 0.4s; transition: 0.4s; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--tj-theme-primary); background-image: none; } .tj-resume-6-accordion-button:not(.collapsed) { background-color: transparent; color: var(--tj-white); -webkit-box-shadow: none !important; box-shadow: none !important; } .tj-resume-6-accordion-button:not(.collapsed)::after { background-image: none; content: "-"; -webkit-transform: none; -ms-transform: none; transform: none; -webkit-transition: 0.4s; transition: 0.4s; } .tj-resume-6-accordion-button:focus { -webkit-box-shadow: none !important; box-shadow: none !important; border: none; } .tj-resume-6-accordion-button-content { display: -webkit-box; display: -ms-flexbox; display: flex; } .tj-resume-6-accordion-button-title h4 { font-size: 20px; font-weight: var(--tj-fw-sbold); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 14px; } @media (max-width: 575px) { .tj-resume-6-accordion-button-title h4 { font-size: 16px; } } .tj-resume-6-accordion-button-title h6 { font-weight: 400; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 0; } @media (max-width: 575px) { .tj-resume-6-accordion-button-title h6 { font-size: 12px; } } .tj-resume-6-accordion-body { padding-left: 0; padding-right: 0; } .tj-resume-6-accordion-body p { font-size: 16px; line-height: 30px; color: rgba(255, 255, 255, 0.5); margin-bottom: 32px; } @media (max-width: 575px) { .tj-resume-6-accordion-body p { font-size: 12px; } } .tj-resume-6-accordion-body span { color: rgba(255, 255, 255, 0.6); } .tj-resume-6-accordion-body span i { color: var(--tj-theme-primary); font-weight: var(--tj-fw-regular); line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin-right: 10px; } .swiper .marquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .swiper .marquee-wrapper .marquee-item { width: auto; display: inline-block; } .swiper.swiper-rtl .tj-resume-6-marquee-title span img { -webkit-animation: rotateImg 6s infinite linear; animation: rotateImg 6s infinite linear; } /* !END: Theme Resume CSS */ /**---------------------------------------- START: Theme Blog CSS ----------------------------------------*/ .tj-blog-6-area { background: var(--tj-black-2); padding: 120px 0 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-6-area { padding: 80px 0 50px; } } .tj-blog-6-wrapper { background: var(--tj-theme-accent-2); border-radius: 12px; padding: 15px; margin-bottom: 30px; } .tj-blog-6-wrapper:hover .tj-blog-6-thumb img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .tj-blog-6-thumb { position: relative; border-radius: 12px; overflow: hidden; margin-bottom: 16px; } .tj-blog-6-thumb a { display: block; } .tj-blog-6-thumb img { width: 100%; -webkit-transition: 0.4s; transition: 0.4s; } .tj-blog-6-content { padding: 15px; } .tj-blog-6-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 10px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 24px; } .tj-blog-6-meta-item { font-weight: var(--tj-fw-medium); font-size: 16px; line-height: 1.2; color: rgba(255, 255, 255, 0.5); position: relative; z-index: 1; } .tj-blog-6-meta-item:not(:last-child) { padding-right: 18px; margin-right: 14px; } .tj-blog-6-meta-item:not(:last-child)::after { content: ""; position: absolute; width: 4px; height: 4px; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; background: rgba(255, 255, 255, 0.5); border-radius: 50%; } .tj-blog-6-meta-item > a { color: inherit; font-size: inherit; font-weight: inherit; } .tj-blog-6-meta-item > a:hover { color: var(--tj-theme-primary); } .tj-blog-6-meta-item.category > a { display: inline-block; background: var(--tj-theme-secondary); border-radius: 56px; padding: 4px 11px; font-weight: var(--tj-fw-medium); font-size: 15px; line-height: 1; color: var(--tj-heading-primary); } .tj-blog-6-meta-item.category > a:hover { background: var(--tj-theme-primary); color: var(--tj-white); } .tj-blog-6-title { color: var(--tj-body); font-weight: var(--tj-fw-sbold); font-size: 24px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tj-blog-6-title { font-size: 22px; } } .tj-blog-6-title a { display: inline-block; -webkit-transition: 0.3s; transition: 0.3s; } .tj-blog-6-btn { font-weight: var(--tj-fw-bold); font-size: 15px; color: var(--tj-heading-secondary); text-decoration: none; position: relative; z-index: 1; } .tj-blog-6-btn::before { content: ""; position: absolute; width: 0; height: 1px; bottom: -3px; left: 0; background-color: var(--tj-heading-secondary); -webkit-transition: 0.4s; transition: 0.4s; } .tj-blog-6-btn .icon_box { padding: 0px 0px; } .tj-blog-6-btn i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transition: 0.4s; transition: 0.4s; } .tj-blog-6-btn:hover { color: var(--tj-heading-secondary); } .tj-blog-6-btn:hover::before { width: 100%; } .tj-blog-6-wrapper .tj-blog-6-meta-opti .link_btn { background: rgba(129, 76, 236, 0.2); border-radius: 56px; padding: 2px 8px; font-weight: var(--tj-fw-regular); font-size: 15px; color: var(--tj-theme-h3-primary-1); text-decoration: none; -webkit-transition: 0.4s; transition: 0.4s; margin-right: 16px; } .tj-blog-6-wrapper .tj-blog-6-meta-opti .link_btn:hover { color: var(--tj-white); background-color: var(--tj-theme-primary); } .tj-blog-6-wrapper .tj-blog-6-title a { display: inline; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor)); background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; -webkit-transition: all 0.3s, background-size 0.8s; transition: all 0.3s, background-size 0.8s; } .tj-blog-6-wrapper .tj-blog-6-title a:hover { color: var(--tj-color-theme-primary); background-size: 100% 1px; } /* !END: Theme Blog CSS */ /**---------------------------------------- START: Theme Cta CSS ----------------------------------------*/ .tj-cta-6-section { background: var(--tj-black-2); padding-bottom: 0; } .tj-cta-6-wrapper { background-position: center center; padding: 120px 25px 100px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-cta-6-wrapper { padding: 75px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-6-wrapper { padding: 50px 15px; } } .tj-cta-6-subtitle { font-size: 14px; text-transform: uppercase; color: var(--tj-heading-secondary); display: inline-block; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 40px; padding: 5px 10px; font-weight: var(--tj-fw-regular); margin-bottom: 46px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-cta-6-subtitle { margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-6-subtitle { margin-bottom: 25px; } } .tj-cta-6-title { font-weight: var(--tj-fw-sbold); font-size: 70px; letter-spacing: -0.04em; color: var(--tj-heading-secondary); margin-bottom: 85px; } .tj-cta-6-title a { display: inline-block; color: inherit; } .tj-cta-6-title a:hover { color: inherit; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-cta-6-title { font-size: 50px; margin-bottom: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-cta-6-title { font-size: 40px; margin-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-cta-6-title { font-size: 35px; margin-bottom: 40px; } } @media (max-width: 575px) { .tj-cta-6-title { font-size: 25px; margin-bottom: 35px; } } .tj-cta-6-socail { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: inline-block; padding-top: 15px; } .tj-cta-6-socail ul { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 0; } .tj-cta-6-socail ul li { list-style: none; position: relative; padding-left: 15px; padding-right: 15px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-cta-6-socail ul li { font-size: 14px; padding-left: 0; } .tj-cta-6-socail ul li::after { display: none; } } @media (max-width: 575px) { .tj-cta-6-socail ul li { padding-right: 0; padding-left: 0; margin-bottom: 20px; margin-right: 20px; } .tj-cta-6-socail ul li::after { display: none; } .tj-cta-6-socail ul li:nth-child(3) { margin-bottom: 0; } .tj-cta-6-socail ul li:nth-child(4) { margin-bottom: 0; } } .tj-cta-6-socail ul li::after { content: ""; position: absolute; height: 20px; width: 2px; top: 50%; right: 0; background: rgba(255, 255, 255, 0.1); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .tj-cta-6-socail ul li:first-child { padding-left: 0; } .tj-cta-6-socail ul li:last-child { padding-right: 0; } .tj-cta-6-socail ul li:last-child::after { display: none; } .tj-cta-6-socail ul li span { width: 28px; height: 28px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); background: transparent; margin-right: 6px; -webkit-transition: 0.3s; transition: 0.3s; } .tj-cta-6-socail ul li span i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; font-size: 11px; } .tj-cta-6-socail ul li a { color: var(--tj-heading-secondary); text-decoration: none; -webkit-transition: 0.3s; transition: 0.3s; } .tj-cta-6-socail ul li span { position: relative; z-index: 1; } .tj-cta-6-socail ul li span::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--tj-white); -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transition: 0.3s; transition: 0.3s; border-radius: 50%; z-index: -1; } .tj-cta-6-socail ul li:hover span { color: var(--tj-theme-accent-2); } .tj-cta-6-socail ul li:hover span::before { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } /* !END: Theme Cta CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ .tj-footer-7-top { padding: 110px 0 110px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-7-top { padding: 60px 0 60px; } } .tj-footer-7-top-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; border-radius: 12px; padding: 0 0; gap: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-7-top-wrapper { row-gap: 40px; } } @media (max-width: 575px) { .tj-footer-7-top-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 575px) { .tj-footer-7-top-wrapper .tj-footer-6-left { max-width: inherit; } } .tj-footer-7-top-title { font-weight: var(--tj-fw-sbold); font-size: 47px; letter-spacing: -0.02em; margin-bottom: 30px; } @media (max-width: 575px) { .tj-footer-7-top-title { font-size: 30px; } } .tj-footer-7-top-form .mc4wp-form-fields { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .tj-footer-7-top-form .mc4wp-form-fields input { width: calc(100% - 65px); } .tj-footer-7-top-form input { background: transparent; border: 2px solid var(--tj-grey-1); border-radius: 60px; padding: 16px 20px 16px 25px; position: relative; z-index: 2; color: var(--tj-white); } .tj-footer-7-top-form input::-webkit-input-placeholder { font-size: 16px; color: var(--body); } .tj-footer-7-top-form input::-moz-placeholder { font-size: 16px; color: var(--body); } .tj-footer-7-top-form input:-ms-input-placeholder { font-size: 16px; color: var(--body); } .tj-footer-7-top-form input::-ms-input-placeholder { font-size: 16px; color: var(--body); } .tj-footer-7-top-form input::placeholder { font-size: 16px; color: var(--body); } .tj-footer-7-top-form input:focus { border: 2px solid var(--tj-theme-primary); outline: none; } .tj-footer-7-top-submit-btn { width: 60px; height: 60px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), to(var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 100%); border-radius: 50px; border: none; color: var(--tj-white); } .tj-footer-7-top-submit-btn .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-footer-7-top-submit-btn .icon_box i:first-child, .tj-footer-7-top-submit-btn .icon_box i:last-child { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-footer-7-top-submit-btn .icon_box i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-footer-7-top-submit-btn:hover .icon_box i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-footer-7-top-submit-btn:hover .icon_box i:last-child { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-col-1 { max-width: 500px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-7-col-1 { max-width: 430px; width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-col-2 { max-width: 300px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-7-col-2 { max-width: 190px; width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-col-3 { max-width: 450px; width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-col-4 { max-width: 300px; width: 100%; } } .tj-footer-7-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; border-top: 1px solid #33283b; padding: 30px 0 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-wrapper { row-gap: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-7-wrapper { row-gap: 20px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-7-wrapper { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; row-gap: 10px; -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; } } @media (max-width: 575px) { .tj-footer-7-bottom .tj-footer-6-copyright { font-size: 13px; } } .tj-footer-7-middle li div, .tj-footer-7-middle li a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.14); width: 30px; height: 30px; border-radius: 50%; color: var(--tj-white); font-size: 13px; } .tj-footer-7-middle li div::before, .tj-footer-7-middle li a::before { background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), to(var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 100%); } .tj-footer-7-middle li div i, .tj-footer-7-middle li a i { color: inherit; font-size: inherit; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-middle .tj-header-5-right-media { display: block; } } /* !END: Theme Footer CSS */ /**---------------------------------------- START: About CSS ----------------------------------------*/ .tj-about-7-area { background: var(--tj-theme-accent-2); padding: 120px 0 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-7-area { padding: 60px 0 60px; } } .tj-about-7-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .tj-about-7-wrapper .subtitle { display: inline-block; color: var(--tj-heading-primary); font-size: 12px; font-weight: var(--tj-fw-sbold); letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(129, 76, 236, 0.2); border-radius: 50px; padding: 5px 12px; background: transparent; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-7-wrapper .resume-sidebar-btn { margin-bottom: 20px; } } .tj-about-7-bottom { max-width: 810px; width: 100%; margin-left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-about-7-bottom { max-width: 660px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-about-7-bottom { max-width: 420px; } } .tj-about-7-title { font-weight: var(--tj-fw-sbold); font-size: 44px; line-height: 1.2; letter-spacing: -0.02em; text-transform: capitalize; margin-bottom: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-about-7-title { font-size: 36px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-about-7-title { font-size: 30px; } } @media (max-width: 575px) { .tj-about-7-title { font-size: 24px; } } .tj-about-7-title span { font-size: 36px; } /* !END: About CSS */ /**---------------------------------------- START: Blog CSS ----------------------------------------*/ .tj-blog-7-area { background: var(--tj-theme-accent-2); padding: 120px 0 120px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-7-area { padding: 60px 0 60px; } } .tj-blog-7-area::before { content: ""; position: absolute; width: 220px; height: 220px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-left: -5%; margin-bottom: -5%; z-index: -1; } .tj-blog-7-top-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-7-top-button { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; margin-bottom: 60px; } } .tj-blog-7-main-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(50% - 12px), 1fr)); grid-gap: 24px; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-blog-7-main-wrapper { grid-template-columns: 650px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-blog-7-main-wrapper { grid-template-columns: 550px; } } @media (max-width: 575px) { .tj-blog-7-main-wrapper { grid-template-columns: 100%; } } .tj-blog-7-wrapper { background: var(--tj-black-2); padding: 15px; border-radius: 16px; min-height: 205px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media (max-width: 575px) { .tj-blog-7-wrapper { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .tj-blog-7-wrapper:first-child { grid-row: 1/3; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; display: -webkit-box; display: -ms-flexbox; display: flex; } .tj-blog-7-wrapper:first-child .tj-blog-7-thumb { max-width: 100%; min-height: 345px; max-height: 345px; margin-bottom: 18px; } .tj-blog-7-wrapper:first-child .tj-blog-7-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .tj-blog-7-wrapper:first-child .tj-blog-7-title { font-size: 32px; } @media (max-width: 575px) { .tj-blog-7-wrapper:first-child .tj-blog-7-title { font-size: 22px; } } .tj-blog-7-wrapper:hover .tj-blog-7-thumb img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); border-radius: 15px; } .tj-blog-7-wrapper:hover .tj-blog-7-wrap-thumb img { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } .tj-blog-7-thumb { max-width: 245px; width: 100%; height: 100%; overflow: hidden; border-radius: 15px; } .tj-blog-7-thumb a { display: inline-block; width: 100%; height: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-blog-7-thumb { max-width: 186px; } } @media (max-width: 575px) { .tj-blog-7-thumb { max-width: 100%; height: auto; } } .tj-blog-7-thumb img { width: 100%; height: 100%; border-radius: 15px; -o-object-fit: cover; object-fit: cover; -webkit-transition: 0.6s; transition: 0.6s; } .tj-blog-7-content { padding: 15px 15px 15px 30px; } @media (max-width: 575px) { .tj-blog-7-content { padding: 15px 10px 15px 15px; } } .tj-blog-7-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } .tj-blog-7-meta span { position: relative; font-size: 15px; color: rgba(255, 255, 255, 0.5); padding-right: 20px; margin-right: 15px; z-index: 1; } .tj-blog-7-meta span::before { position: absolute; content: ""; width: 4px; height: 4px; line-height: 1; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; background: rgba(255, 255, 255, 0.5); border-radius: 50%; } .tj-blog-7-meta span:last-child { padding-right: 0; margin-right: 0; } .tj-blog-7-meta span:last-child::before { display: none; } .tj-blog-7-meta span a { font-size: 15px; color: rgba(255, 255, 255, 0.5); text-decoration: none; -webkit-transition: 0.6s; transition: 0.6s; } .tj-blog-7-meta span a:hover { color: var(--tj-theme-primary); } .tj-blog-7-title { font-size: 24px; line-height: 1.4; letter-spacing: -0.03em; margin-bottom: 16px; font-weight: var(--tj-fw-sbold); } @media (max-width: 575px) { .tj-blog-7-title { font-size: 22px; } } .tj-blog-7-title a { display: inline; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor)); background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; -webkit-transition: all 0.3s, background-size 0.8s; transition: all 0.3s, background-size 0.8s; } .tj-blog-7-title:hover a { background-size: 100% 1px; } .tj-blog-7-paragraph { margin-bottom: 25px; } .tj-blog-7-btn { font-weight: var(--tj-fw-bold); font-size: 15px; letter-spacing: -0.03em; color: var(--tj-color-heading-primary); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 1; } .tj-blog-7-btn::before { content: ""; position: absolute; width: 100%; height: 1px; bottom: 0; left: 0; background: var(--tj-color-heading-primary); } .tj-blog-7-btn i { font-size: 14px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; margin-left: 8px; -webkit-transform: translateY(1px); -ms-transform: translateY(1px); transform: translateY(1px); } .elementor .tj-blog-7-thumb img { height: 100%; } /* !END: Blog CSS */ /**---------------------------------------- START: Counter CSS ----------------------------------------*/ .tj-counter-7-area { background: var(--tj-theme-accent-2); padding: 0 0 90px; position: relative; z-index: 1; overflow: hidden; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-counter-7-area { padding: 0 0 60px; } } .tj-counter-7-area::before { content: ""; position: absolute; bottom: -408px; left: -330px; width: 650px; height: 550px; border-radius: 50%; background-image: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0.1) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; } .tj-counter-7-wrapper { border: none; padding: 40px 30px 50px; text-align: center; border-radius: 10px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.01))); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.01) 100%); } .tj-counter-7-wrapper .tj-counter-5-title { color: var(--tj-white); } /* !END: Counter CSS */ /**---------------------------------------- START: Feature CSS ----------------------------------------*/ .tj-feature-7-wrapper { background: var(--tj-black-2); padding: 30px; border-radius: 15px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .tj-feature-7-subtitle { font-weight: var(--tj-fw-medium); font-size: 15px; } .tj-feature-7-title { font-size: 45px; font-weight: 700; letter-spacing: -0.04em; } @media (max-width: 575px) { .tj-feature-7-title { font-size: 30px; } } .tj-feature-7-title span i { color: #00f721; font-size: 28px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-feature-7-title span svg { fill: #00f721; max-width: 28px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-feature-7-review-img { max-width: 360px; width: 100%; height: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-feature-7-review-img img { width: 100%; height: 100%; } } .tj-feature-7-thumb { max-width: 870px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-feature-7-thumb { margin-top: 30px; } } .tj-feature-7-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 15px; background-size: cover; background-repeat: no-repeat; background-position: center center; } .elementor .tj-feature-7-thumb img { border-radius: 15px; } /* !END: Feature CSS */ /**---------------------------------------- START: Hero CSS ----------------------------------------*/ .tj-hero-7-area { background-color: var(--tj-theme-accent-2); padding: 185px 0 0; position: relative; z-index: 1; background-position: center top; background-size: contain; background-repeat: no-repeat; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-7-area { padding: 130px 0 0; } } .tj-hero-7-area::before { content: ""; position: absolute; top: -250px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 650px; height: 550px; border-radius: 50%; background-image: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0.1) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; } .tj-hero-7-area::after { content: ""; position: absolute; width: 100%; } .tj-hero-7-area.anim .tj-hero-7-thumb, .tj-hero-7-area.anim .tj-hero-7-content, .tj-hero-7-area.anim .tj-hero-7-button, .tj-hero-7-area.anim .tj-feature-7-wrapper, .tj-hero-7-area.anim .tj-feature-7-thumb { opacity: 0; } .tj-hero-7-area.activeAnimation .tj-hero-7-thumb, .tj-hero-7-area.activeAnimation .tj-hero-7-content, .tj-hero-7-area.activeAnimation .tj-hero-7-button, .tj-hero-7-area.activeAnimation .tj-feature-7-wrapper, .tj-hero-7-area.activeAnimation .tj-feature-7-thumb { opacity: 1; } .tj-hero-7-wrapper { max-width: 900px; width: 100%; margin: auto; text-align: center; margin-bottom: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-7-wrapper { margin-bottom: 80px; } } .tj-hero-7-thumb { max-width: 128px; width: 100%; height: 128px; margin: auto; border-radius: 50%; margin-bottom: 32px; position: relative; z-index: 1; } .tj-hero-7-thumb::before { content: ""; position: absolute; width: 136px; height: 136px; top: 50%; left: 50%; border-radius: 50%; background-image: linear-gradient(93.07deg, var(--tj-theme-primary) 3.62%, var(--tj-white) 98.68%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .tj-hero-7-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .tj-hero-7-title { font-weight: var(--tj-fw-sbold); font-size: 68px; line-height: 1.15; letter-spacing: -0.03em; text-transform: uppercase; margin-bottom: 38px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-7-title { font-size: 54px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-7-title { font-size: 40px; } } @media (max-width: 575px) { .tj-hero-7-title { font-size: 27px; } } .tj-hero-7-title .wave { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: wave-animation; animation-name: wave-animation; display: inline-block; -webkit-transform-origin: 70% 70%; -ms-transform-origin: 70% 70%; transform-origin: 70% 70%; background-image: none; background-clip: unset; -webkit-text-fill-color: inherit; } .tj-hero-7-title span { background-image: linear-gradient(107deg, var(--tj-heading-primary) 0%, var(--tj-white) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .elementor-editor-active .tj-hero-7-area .tj-hero-7-thumb, .elementor-editor-active .tj-hero-7-area .tj-hero-7-content, .elementor-editor-active .tj-hero-7-area .tj-hero-7-button, .elementor-editor-active .tj-hero-7-area .tj-feature-7-wrapper, .elementor-editor-active .tj-hero-7-area .tj-feature-7-thumb { opacity: 1; } .elementor .tj-hero-7-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } /* !END: Hero CSS */ /**---------------------------------------- START: progress CSS ----------------------------------------*/ .progress-single.style-7 { background-color: var(--tj-black); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.1); padding: 40px 30px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .progress-single.style-7 .progress-text { -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; } .progress-single.style-7 .progress-text .tj-progress-7-icon span { width: 80px; height: 80px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: var(--tj-theme-accent-2); border-radius: 50%; font-size: 45px; line-height: 1; color: var(--tj-white); } .progress-single.style-7 .progress-text .tj-progress-7-icon span img, .progress-single.style-7 .progress-text .tj-progress-7-icon span svg { max-width: 48px; width: 100%; height: auto; transition: transform 0.5s ease, -webkit-transform 0.5s ease; } .progress-single.style-7 .progress-text .tj-progress-7-icon span i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; transition: transform 0.5s ease, -webkit-transform 0.5s ease; } .progress-single.style-7 .progress-text .progress-title { width: calc(100% - 95px); } .progress-single.style-7 .progress-text .progress-title .title { font-size: 20px; letter-spacing: -0.02em; } .progress-single.style-7 .desc { color: rgba(255, 255, 255, 0.6); margin-bottom: 75px; } .progress-single.style-7:hover { border-color: var(--tj-theme-primary); } .progress-single.style-7:hover .tj-progress-7-icon span img, .progress-single.style-7:hover .tj-progress-7-icon span svg { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .progress-single.style-7:hover .tj-progress-7-icon span i { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) { .progress-single.style-7 { padding: 40px 20px; } } /* !END: progress CSS */ /**---------------------------------------- START: Project CSS ----------------------------------------*/ .tj-project-7-area { background: var(--tj-h3-bg); padding: 120px 0 120px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-project-7-area { padding: 100px 0 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-7-area { padding: 80px 0 80px; } } .tj-project-7-area::before { content: ""; position: absolute; top: 50%; left: 50%; width: 650px; height: 550px; border-radius: 50%; background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0.1) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .tj-project-7-section-wrapper { max-width: 475px; width: 100%; position: relative; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-7-section-wrapper { margin: 0; } } .tj-project-7-wrappper { padding-top: 250px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-7-wrappper { padding-top: 0; } } .tj-project-7-item { cursor: pointer; z-index: 1; float: left; display: block; } .tj-project-7-item:nth-child(2) { margin-top: -250px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-7-item:nth-child(2) { margin-top: 0; } } .tj-project-7-item-inner { background: var(--tj-black-2); padding: 35px; border-radius: 30px; -webkit-transition: 0.5s; transition: 0.5s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-project-7-item-inner { padding: 25px; border-radius: 20px; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-project-7-item-inner { padding: 20px; border-radius: 20px; } } .tj-project-7-item-inner:hover { background: var(--tj-theme-secondary); } .tj-project-7-item-inner:hover:hover .tj-project-7-icon::before { opacity: 1; visibility: visible; } .tj-project-7-item-inner:hover:hover .tj-project-7-icon span::before { visibility: visible; opacity: 1; } .tj-project-7-item-inner:hover:hover .tj-project-7-icon .icon_box i:first-child { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-project-7-item-inner:hover:hover .tj-project-7-icon .icon_box i:last-child { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .tj-project-7-item a { text-decoration: none; } .tj-project-7-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; } .tj-project-7-content-inner { max-width: calc(100% - 90px); width: 100%; } @media (max-width: 575px) { .tj-project-7-content { gap: 20px; } .tj-project-7-content-inner { max-width: calc(100% - 70px); width: 100%; } } .tj-project-7-thumb { margin-bottom: 30px; } .tj-project-7-thumb img { width: 100%; height: 100%; border-radius: 15px; } .tj-project-7-title { font-size: 20px; letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 10px; } .tj-project-7-title a { display: inline-block; -webkit-transition: 0.4s; transition: 0.4s; } .tj-project-7-title a:hover { color: var(--tj-theme-primary); } .tj-project-7-paragraph { letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.6); } .tj-project-7-paragraph p:last-child { margin-bottom: 0; } .elementor .tj-project-7-thumb img { border-radius: 15px; } .tj-project-7-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; border: 1px solid rgba(255, 255, 255, 0.1); color: var(--tj-white); font-size: 25px; border-radius: 50%; text-decoration: none; position: relative; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .tj-project-7-icon::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-image: linear-gradient(-10deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; z-index: -1; } .tj-project-7-icon .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-project-7-icon .icon_box i:first-child, .tj-project-7-icon .icon_box i:last-child { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; color: var(--tj-white); } .tj-project-7-icon .icon_box i:last-child { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } @media (max-width: 575px) { .tj-project-7-icon { width: 50px; height: 50px; font-size: 20px; } } .project-7-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; row-gap: 30px; -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } .project-7-wrapper .tj-project-7-item { max-width: 630px; width: 100%; } .project-7-wrapper .tj-project-7-item:nth-child(even) { margin-top: -510px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .project-7-wrapper .tj-project-7-item { max-width: 540px; width: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .project-7-wrapper .tj-project-7-item { max-width: 450px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .project-7-wrapper .tj-project-7-item { max-width: 330px; width: 100%; } .project-7-wrapper .tj-project-7-item .tj-project-7-item-inner { padding: 30px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .project-7-wrapper .tj-project-7-item { max-width: 100%; } .project-7-wrapper .tj-project-7-item:nth-child(even) { margin-top: 0px; } .project-7-wrapper .tj-project-7-item .tj-project-7-item-inner { padding: 30px 20px; } } /* !END: Project CSS */ /**---------------------------------------- START: Service CSS ----------------------------------------*/ .tj-service-7-area { background: var(--tj-black-2); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); padding: 120px 0 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-7-area { padding: 60px 0 40px; } } .tj-service-7-wrapper { background: var(--tj-theme-accent-2); padding: 40px 30px 32px; border-radius: 12px; border: 2px solid transparent; margin-bottom: 30px; position: relative; z-index: 1; } .tj-service-7-wrapper::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 1px solid var(--tj-theme-primary); border-left: 1px solid var(--tj-theme-primary); border-radius: 12px; -webkit-transition: 0.5s; transition: 0.5s; opacity: 0; visibility: hidden; z-index: -1; } .tj-service-7-wrapper::after { position: absolute; content: ""; bottom: 0; right: 0; width: 0; height: 0; border-bottom: 1px solid var(--tj-theme-primary); border-right: 1px solid var(--tj-theme-primary); border-radius: 12px; -webkit-transition: 0.5s; transition: 0.5s; opacity: 0; visibility: hidden; z-index: -1; } .tj-service-7-wrapper:hover::before { width: 100%; height: 100%; visibility: visible; opacity: 1; border-radius: 12px; } .tj-service-7-wrapper:hover::after { width: 100%; height: 100%; visibility: visible; opacity: 1; border-radius: 12px; } .tj-service-7-wrapper:hover .tj-service-7-icon span img { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .tj-service-7-wrapper:hover .tj-service-7-icon span i { -webkit-transform: scaleX(-1); -ms-transform: scaleX(-1); transform: scaleX(-1); } .tj-service-7-wrapper:hover .tj-service-7-button .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-service-7-wrapper:hover .tj-service-7-button .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .tj-service-7-icon { margin-bottom: 38px; } .tj-service-7-icon span { color: var(--tj-white); width: 64px; height: 64px; font-size: 30px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), to(var(--tj-theme-secondary))); background-image: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 100%); border-radius: 70px; } .tj-service-7-icon span img { max-width: 40px; width: 100%; height: 40px; transition: transform 0.5s ease, -webkit-transform 0.5s ease; } .tj-service-7-icon span i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; transition: transform 0.5s ease, -webkit-transform 0.5s ease; } .tj-service-7-title { font-size: 28px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; margin-bottom: 28px; -webkit-transition: 0.3s; transition: 0.3s; } .tj-service-7-title a { display: inline-block; -webkit-transition: 0.3s; transition: 0.3s; } .tj-service-7-title a:hover { color: var(--tj-theme-primary); } .tj-service-7-paragraph { color: rgba(255, 255, 255, 0.6); margin-bottom: 12px; } .tj-service-7-paragraph p:last-child { margin-bottom: 0; } .tj-service-7-button { text-align: right; } .tj-service-7-button a { text-decoration: none; } .tj-service-7-button a .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-service-7-button a .icon_box .icon_first, .tj-service-7-button a .icon_box .icon_second { color: var(--tj-heading-secondary); font-size: 24px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-service-7-button a .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-service-7-button a:hover .icon_box i { color: var(--tj-theme-primary); } /* !END: Service CSS */ /**---------------------------------------- START: Testimonial CSS ----------------------------------------*/ .tj-testimonial-7-area { background: var(--tj-black-2); padding: 120px 0 120px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-7-area { padding: 60px 0 60px; } } .tj-testimonial-7-section-wrapper .section-header { margin: auto; margin-bottom: 50px; } .tj-testimonial-7-active { overflow: hidden; } .tj-testimonial-7-wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; row-gap: 40px; background: var(--tj-theme-accent-2); padding: 30px; border-radius: 15px; border: 1px solid transparent; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-testimonial-7-wrapper { -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-7-wrapper { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: start; padding: 30px 20px; } } .tj-testimonial-7-wrapper.swiper-slide { -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-7-wrapper.swiper-slide .icon-box { -webkit-transition: 0.6s; transition: 0.6s; } .tj-testimonial-7-wrapper.swiper-slide .icon-box svg { margin-right: 5px; -webkit-transition: 0.5s; -o-transition: 0.5s; -webkit-transition-delay: 1.5s; transition-delay: 1.5s; -webkit-transition: 0.4s; transition: 0.4s; } .tj-testimonial-7-wrapper.swiper-slide.swiper-slide-active .icon-box svg:first-child { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-name: iconRotate1; animation-name: iconRotate1; } .tj-testimonial-7-wrapper.swiper-slide.swiper-slide-active .icon-box svg:last-child { -webkit-animation-delay: 0.5s; animation-delay: 0.5s; -webkit-animation-name: iconRotate2; animation-name: iconRotate2; } .tj-testimonial-7-thumb { max-width: 470px; width: 100%; height: 385px; } .tj-testimonial-7-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top center; object-position: top center; border-radius: 15px; } .tj-testimonial-7-content { width: calc(100% - 520px); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-testimonial-7-thumb { max-width: 300px; height: auto; } .tj-testimonial-7-content { width: calc(100% - 330px); } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-testimonial-7-thumb { max-width: 100%; height: auto; } .tj-testimonial-7-content { width: 100%; } } .tj-testimonial-7-icon { margin-bottom: 32px; } .tj-testimonial-7-paragraph { font-size: 24px; color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-7-paragraph { font-size: 16px; } } .tj-testimonial-7-auother-title { font-weight: var(--tj-fw-sbold); font-size: 20px; letter-spacing: -0.02em; margin-bottom: 6px; } .tj-testimonial-7-auother-paragraph { font-size: 14px; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.5); margin-bottom: 0; } .tj-testimonial-7-arrow-box button { width: 55px; height: 55px; line-height: 1; font-size: 24px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 50%; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; color: var(--tj-white); background: transparent; border: 1px solid var(--tj-border); position: absolute; left: -80px; top: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 999; } .tj-testimonial-7-arrow-box button::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-gradient(linear, left top, right top, from(#8750f7), to(#2a1454)); background: linear-gradient(90deg, #8750f7 0%, #2a1454 100%); border-radius: 50%; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; } .tj-testimonial-7-arrow-box button:hover::before { visibility: visible; opacity: 1; } .tj-testimonial-7-arrow-box button.slider-next { left: auto; right: -80px; } .tj-testimonial-7-pagination-box { text-align: center; margin-top: 50px; } .tj-testimonial-7-pagination-box .swiper-pagination-bullet { background: rgba(255, 255, 255, 0.5); width: 8px; height: 8px; margin: 0 5px 0; -webkit-transition: 0.4s; transition: 0.4s; } .tj-testimonial-7-pagination-box .swiper-pagination-bullet-active { background: var(--tj-theme-primary); } .elementor .tj-testimonial-7-thumb img { height: 100%; border-radius: 15px; } /* !END: Testimonial CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ /* !END: Theme Footer CSS */ /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .hero-section.style-8 { padding: 250px 0 50px; background-repeat: no-repeat; background-size: initial; background-position: top right; } .hero-section.style-8::before { content: ""; position: absolute; top: 0; right: 0; width: 750px; height: 320px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); margin-right: 5%; margin-top: -4%; opacity: 0.5; z-index: -1; } .hero-section.style-8 .hero-8-socials { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 50px; } .hero-section.style-8 .hero-8-socials .social-icons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hero-section.style-8 .hero-8-socials .social-icons li a { color: var(--tj-white); border: 1px solid rgba(255, 255, 255, 0.1); } .hero-section.style-8 .hero-8-socials .social-icons li a::before { background: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); } .hero-section.style-8 .hero-8-socials .social-icons li a i { color: inherit; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-section.style-8 .hero-8-socials { left: 10px; } .hero-section.style-8 .hero_scroll { left: -35px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-section.style-8 { padding: 220px 0 20px; } .hero-section.style-8 .hero-8-socials { left: 10px; } .hero-section.style-8 .hero_scroll { left: -35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-section.style-8 { padding: 220px 0 20px; } .hero-section.style-8 .hero-8-socials { left: 10px; } .hero-section.style-8 .hero_scroll { left: -35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-section.style-8 { padding: 170px 0 40px; } .hero-section.style-8 .hero-8-socials { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); left: auto; top: auto; position: relative; } .hero-section.style-8 .hero-8-socials .social-icons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-section.style-8 { padding: 170px 0 60px; } .hero-section.style-8 .hero-8-socials { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); left: auto; top: auto; position: relative; } .hero-section.style-8 .hero-8-socials .social-icons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (max-width: 575px) { .hero-section.style-8 { padding: 150px 0 60px; } .hero-section.style-8 .hero-8-socials { -webkit-transform: translate(0); -ms-transform: translate(0); transform: translate(0); left: auto; top: auto; position: relative; } .hero-section.style-8 .hero-8-socials .social-icons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-section.style-8 .hero_scroll { display: none; } } .hero-content-box.style-8 .subtitle { font-size: 18px; color: var(--tj-grey-1); font-weight: var(--tj-fw-sbold); margin-bottom: 30px; } .hero-content-box.style-8 .subtitle span { display: inline-block; color: var(--tj-heading-secondary); } .hero-content-box.style-8 .subtitle .wave { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: wave-animation; animation-name: wave-animation; display: inline-block; -webkit-transform-origin: 70% 70%; -ms-transform-origin: 70% 70%; transform-origin: 70% 70%; } .hero-content-box.style-8 .hero-title { font-size: 80px; text-transform: uppercase; font-weight: var(--tj-fw-sbold); color: var(--tj-heading-secondary); -webkit-background-clip: initial; -webkit-text-fill-color: initial; background: none; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 20px; } .hero-content-box.style-8 .hero-title span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .hero-content-box.style-8 .hero-title span img { max-width: 140px; width: 100%; height: 75px; -o-object-fit: cover; object-fit: cover; border-radius: 150px; } .hero-content-box.style-8 .desc { max-width: 420px; width: 100%; font-size: 20px; color: var(--tj-grey-1); } .hero-content-box.style-8 .desc p:last-child { margin-bottom: 0; } .hero-content-box.style-8 .hero-button { margin-top: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-box.style-8 { padding-left: 15px; } .hero-content-box.style-8 .hero-title { font-size: 65px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-box.style-8 { padding-left: 30px; } .hero-content-box.style-8 .hero-title { font-size: 50px; } .hero-content-box.style-8 .hero-title span img { max-width: 120px; height: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-content-box.style-8 { padding-left: 0px; margin-bottom: 80px; } .hero-content-box.style-8 .hero-title { font-size: 50px; } .hero-content-box.style-8 .hero-title span img { max-width: 120px; height: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-content-box.style-8 { padding-left: 0px; margin-bottom: 100px; } .hero-content-box.style-8 .hero-title { font-size: 45px; } .hero-content-box.style-8 .hero-title span img { max-width: 110px; height: 50px; } .hero-content-box.style-8 .desc { font-size: 18px; } } @media (max-width: 575px) { .hero-content-box.style-8 { padding-left: 0px; margin-bottom: 100px; } .hero-content-box.style-8 .hero-title { font-size: 38px; } .hero-content-box.style-8 .hero-title span img { max-width: 120px; height: 55px; } .hero-content-box.style-8 .desc { font-size: 18px; } } .hero-8-images { max-width: 550px; width: 100%; margin-left: auto; position: relative; top: -60px; z-index: 1; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-8-images .hero8-mask-images { position: relative; max-width: 94%; width: 100%; height: 655px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-mask-image: url(../images/shapes/hero8-shapes.svg); mask-image: url(../images/shapes/hero8-shapes.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: cover; mask-size: cover; } .hero-8-images img { width: 100%; } .hero-8-images::before { position: absolute; content: ""; width: 94%; height: 95%; top: 30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(#cb0891), color-stop(var(--tj-theme-primary)), color-stop(#cb0891), color-stop(var(--tj-theme-primary)), to(#cb0891)); background: linear-gradient(90deg, var(--tj-theme-primary), #cb0891, var(--tj-theme-primary), #cb0891, var(--tj-theme-primary), #cb0891); background-size: 600% 100%; -webkit-animation: gradient 15s linear infinite; animation: gradient 15s linear infinite; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); -webkit-box-shadow: 0px 0px 16.98px 0px rgb(129, 76, 236) inset; box-shadow: 0px 0px 16.98px 0px rgb(129, 76, 236) inset; } .hero-8-images .hero-shapes::before { position: absolute; content: ""; width: 100%; height: 100%; left: 0; top: 15px; background: var(--tj-theme-primary); -webkit-box-shadow: 0px 0px 16.98px 0px rgb(129, 76, 236) inset; box-shadow: 0px 0px 16.98px 0px rgb(129, 76, 236) inset; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); z-index: -1; } .hero-8-images .hero-shapes::after { position: absolute; content: ""; width: 99.5%; height: 99.5%; left: 50%; top: 17px; background: var(--tj-black-2); -webkit-box-shadow: 0px 0px 16.98px 0px rgb(129, 76, 236) inset; box-shadow: 0px 0px 16.98px 0px rgb(129, 76, 236) inset; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; } .hero-8-images .hero-circle { position: absolute; bottom: 15%; left: -80px; width: 150px; height: 150px; z-index: 3; background: linear-gradient(150.14deg, rgba(255, 255, 255, 0.15) 14.68%, rgba(255, 255, 255, 0) 46.13%); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.15); } .hero-8-images .hero-circle .circle-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .hero-8-images .hero-circle .rotate-image { -webkit-animation: rotateImg 10s infinite linear; animation: rotateImg 10s infinite linear; } .hero-8-images .hero-circle .rotate-image textPath { fill: var(--tj-white); } .hero-8-images .circle-button .circle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: var(--tj-white); background: rgb(126, 74, 231); width: 60px; height: 60px; border-radius: 50%; text-decoration: none; } .hero-8-images .images_shapes { position: absolute; max-width: 100px; width: 100%; bottom: 45px; left: -30%; z-index: -1; opacity: 0.1; } .hero-8-images .images_shapes img { width: 100%; } .hero-8-images .images_shapes-2 { position: absolute; max-width: 40px; width: 100%; top: 80px; right: 40px; z-index: -1; } .hero-8-images .images_shapes-2 img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-8-images::before { top: 25px; } .hero-8-images .hero8-mask-images { height: 540px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-8-images::before { top: 28px; } .hero-8-images .hero8-mask-images { height: 595px; } .hero-8-images .hero-circle { bottom: -30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } @media (max-width: 575px) { .hero-8-images::before { height: 92%; } .hero-8-images .hero8-mask-images { height: auto; } .hero-8-images .hero-shapes::before { top: 16px; } .hero-8-images .hero-circle { bottom: -30px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes gradient { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes gradient { 0% { background-position: 0%; } 100% { background-position: 100%; } } .elementor .hero-8-images .hero8-mask-images img { border: none; border-radius: 0; } .elementor .hero-section.style-8 img { border-radius: inherit; border: inherit; } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme Maquee CSS ----------------------------------------*/ .tj-maquee-section.style-8 { position: relative; background-color: var(--tj-color-theme-secondary); overflow: hidden; } .tj-maquee-section.style-8 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .tj-maquee-section.maquee-style-8 { position: relative; background: var(--tj-theme-primary); z-index: 1; } .tj-maquee-section.maquee-style-8::before { position: absolute; content: ""; top: 0; right: 0; width: 85%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(110.61%, var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 110.61%); z-index: 2; } .tj-maquee-section.maquee-style-8::after { content: ""; position: absolute; width: 110%; height: 100%; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(65.52%, rgba(255, 255, 255, 0)), color-stop(68.59%, rgba(255, 255, 255, 0))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, rgba(255, 255, 255, 0) 65.52%, rgba(255, 255, 255, 0) 68.59%); top: 0; left: 0; z-index: 2; } .tj-maquee-section.maquee-style-8 .maquee-slider-one { position: relative; z-index: 2; } .tj-maquee-section.maquee-style-8 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-maquee-section.maquee-style-8 { padding: 24px 0; } } .tj-maquee-section.maquee-style-bottom-8 { position: relative; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(110.61%, var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 110.61%); padding: 33px 0; } .tj-maquee-section.maquee-style-bottom-8::after { position: absolute; content: ""; width: 110%; height: 100%; top: 0; left: -10px; background: rgb(192, 172, 233); -webkit-transform: rotate(-1.09deg); -ms-transform: rotate(-1.09deg); transform: rotate(-1.09deg); z-index: -1; } .tj-maquee-section.maquee-style-bottom-8 .marquee-item .marquee-box .marquee-icon img { -webkit-animation: rotateImg2 6s infinite linear; animation: rotateImg2 6s infinite linear; } .tj-maquee-section.maquee-style-bottom-8 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-maquee-section.maquee-style-bottom-8 { padding: 25px 0; } } .marquee-item { width: auto; display: inline-block; } .marquee-item .marquee-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; gap: 80px; } .marquee-item .marquee-box .marquee-icon { max-width: 20px; width: 100%; } .marquee-item .marquee-box .marquee-icon img { width: 100%; -webkit-animation: rotateImg 6s infinite linear; animation: rotateImg 6s infinite linear; } .marquee-item .marquee-box .marquee-title { margin-left: 0px; margin-right: 0px; } .marquee-item .marquee-box .marquee-title .title { font-size: 20px; font-weight: var(--tj-fw-ebold); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .marquee-item .marquee-box { gap: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .marquee-item .marquee-box { gap: 40px; } .marquee-item .marquee-box .marquee-title .title { font-size: 18px; } .marquee-item .marquee-logo { max-width: 100px; width: 100%; } .marquee-item .marquee-logo img { width: 100%; } } .funfact-item.style-8 { position: relative; border-right: 1px solid rgba(255, 255, 255, 0.2); padding: 24px 0; z-index: 3; } .funfact-item.style-8 .number { font-size: 40px; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-heading); line-height: 1; letter-spacing: 0.02em; color: var(--tj-white); } .funfact-item.style-8 .number span { font-size: 40px; font-weight: var(--tj-fw-sbold); font-family: var(--tj-ff-heading); line-height: 1; letter-spacing: 0.09em; color: var(--tj-white); } .funfact-item.style-8 .text { font-size: 20px; font-weight: var(--tj-fw-medium); color: var(--tj-white); letter-spacing: 0.02em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .funfact-item.style-8 .text { font-size: 18px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .funfact-item.style-8 .text { font-size: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .funfact-item.style-8 { display: none; } } @keyframes rotateImg { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateImg2 { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } /* !END: Theme Maquee CSS */ /**---------------------------------------- START: Theme About CSS ----------------------------------------*/ .tj-about-section.style-8 { padding-top: 120px; padding-bottom: 120px; background-color: var(--tj-black-2); } .tj-about-section.style-8 .section-header { margin-bottom: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-about-section.style-8 { padding-top: 80px; padding-bottom: 80px; } } @media (max-width: 575px) { .tj-about-section.style-8 { padding-top: 65px; padding-bottom: 80px; } } .about-wrapper-8 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 35px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-wrapper-8 { gap: 50px; } } .about-8-images { max-width: 515px; width: 100%; position: relative; z-index: 1; } .about-8-images img { position: relative; z-index: 3; } .about-8-images::before { position: absolute; content: ""; width: 100%; height: 405px; bottom: 0; left: 0; background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(#cb0891), color-stop(var(--tj-theme-primary)), color-stop(#cb0891), color-stop(var(--tj-theme-primary)), to(#cb0891)); background-image: linear-gradient(90deg, var(--tj-theme-primary), #cb0891, var(--tj-theme-primary), #cb0891, var(--tj-theme-primary), #cb0891); background-size: 600% 100%; -webkit-animation: gradient 15s linear infinite; animation: gradient 15s linear infinite; -webkit-animation-direction: alternate; animation-direction: alternate; border-radius: 120px 14px 14px 14px; z-index: 2; } .about-8-images::after { position: absolute; content: ""; width: 100%; height: 405px; bottom: 10px; left: -10px; border-radius: 120px 14px 14px 14px; border: 2px solid var(--tj-theme-primary); -webkit-box-shadow: 0px 0px 18px 0px rgb(129, 76, 236) inset; box-shadow: 0px 0px 18px 0px rgb(129, 76, 236) inset; z-index: 1; } .about-8-images .about_shapes { position: absolute; top: 120px; right: 30px; left: auto; max-width: 50px; width: 100%; z-index: 2; } .about-8-images .about_shapes img { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-8-images { max-width: 390px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .about-8-images { margin-left: auto; margin-right: auto; } } @media (max-width: 575px) { .about-8-images { margin-left: auto; margin-right: auto; } .about-8-images::before { height: 300px; } .about-8-images::after { height: 295px; left: -5px; } } .elementor .about-8-images img { border-radius: 14px; } .about-8-content { max-width: 630px; width: 100%; margin-left: auto; } .about-8-content .desc { color: var(--tj-grey-1); max-width: 510px; width: 100%; margin-bottom: 25px; } .about-8-content .desc p:last-child { margin-bottom: 0; } .about-8-content .about-button { margin-top: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about-8-content { max-width: 560px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about-8-content { max-width: 510px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about-8-content { margin-left: 0; } .about-8-content .about-button { margin-top: 25px; } } .list-style-two { max-width: 420px; } .list-style-two ul { margin: 0; padding: 0; list-style: none; -webkit-columns: 2; -moz-columns: 2; columns: 2; } .list-style-two ul li { color: var(--tj-white); line-height: 1.7; position: relative; padding-left: 20px; z-index: 1; } .list-style-two ul li::before { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; height: 6px; width: 6px; background-color: var(--tj-white); } @media (max-width: 575px) { .list-style-two ul li { font-size: 15px; padding-left: 15px; } } @keyframes zoom-in-zoom-out { 0% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } 50% { -webkit-transform: scale(1.5, 1.5); transform: scale(1.5, 1.5); } 100% { -webkit-transform: scale(1, 1); transform: scale(1, 1); } } /* !END: Theme About CSS */ /**---------------------------------------- START: Theme Portfolio CSS ----------------------------------------*/ .tj-portfolio-section.style-8 { padding-top: 120px; padding-bottom: 120px; position: relative; z-index: 1; } .tj-portfolio-section.style-8::before { content: ""; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); bottom: 30%; width: 650px; height: 650px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(45deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.3; z-index: -1; } .tj-portfolio-section.style-8 .section-header { max-width: 475px; width: 100%; margin-left: auto; margin-right: auto; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-portfolio-section.style-8 { padding-top: 80px; padding-bottom: 80px; } } .portfolio-wrapper-8 .portfolio-tem.style-8:nth-child(even) { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-wrapper-8 .portfolio-tem.style-8:nth-child(even) { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .portfolio-tem.style-8 { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 160px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .portfolio-tem.style-8 .portfolio-8-images { max-width: 645px; width: 100%; background-color: var(--tj-black-2); border-radius: 15px; padding: 30px; } .portfolio-tem.style-8 .portfolio-8-images img { border-radius: 15px; } .portfolio-tem.style-8 .portfolio-content { max-width: 500px; width: 100%; } .portfolio-tem.style-8 .portfolio-content .number { display: block; font-size: 124px; font-weight: var(--tj-fw-bold); -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); letter-spacing: 0.02em; margin-bottom: 25px; -webkit-transition: 0.4s; transition: 0.4s; line-height: 1; } .portfolio-tem.style-8 .portfolio-content .title { font-size: 44px; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 20px; color: var(--tj-heading-secondary); -webkit-transition: 0.5s; transition: 0.5s; } .portfolio-tem.style-8 .portfolio-content .title:hover { color: var(--tj-theme-primary); } .portfolio-tem.style-8 .portfolio-content .arrow_link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 70px; height: 70px; line-height: 1; text-decoration: none; color: var(--tj-white); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; position: relative; z-index: 1; } .portfolio-tem.style-8 .portfolio-content .arrow_link::before { position: absolute; content: ""; width: 100%; height: 100%; background: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: -1; } .portfolio-tem.style-8 .portfolio-content .arrow_link .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .portfolio-tem.style-8 .portfolio-content .arrow_link .icon_box .icon_first, .portfolio-tem.style-8 .portfolio-content .arrow_link .icon_box .icon_second { font-size: 24px; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .portfolio-tem.style-8 .portfolio-content .arrow_link .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .portfolio-tem.style-8:hover .portfolio-content .number { -webkit-text-stroke: 1px var(--tj-theme-primary); } .portfolio-tem.style-8:hover .portfolio-content .arrow_link::before { opacity: 1; visibility: visible; } .portfolio-tem.style-8:hover .portfolio-content .arrow_link .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .portfolio-tem.style-8:hover .portfolio-content .arrow_link .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio-tem.style-8 { gap: 75px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-tem.style-8 { gap: 60px; } .portfolio-tem.style-8 .portfolio-content .number { font-size: 100px; margin-bottom: 15px; } .portfolio-tem.style-8 .portfolio-content .title { font-size: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-tem.style-8 { gap: 30px; } .portfolio-tem.style-8 .portfolio-content .number { font-size: 75px; margin-bottom: 10px; } .portfolio-tem.style-8 .portfolio-content .title { font-size: 32px; margin-bottom: 10px; } .portfolio-tem.style-8 .portfolio-content .arrow_link { width: 50px; height: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-tem.style-8 { gap: 30px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 50px; } .portfolio-tem.style-8:last-child { margin-bottom: 0; } .portfolio-tem.style-8 .portfolio-8-images { padding: 15px; } .portfolio-tem.style-8 .portfolio-content .number { font-size: 70px; margin-bottom: 10px; } .portfolio-tem.style-8 .portfolio-content .title { font-size: 30px; margin-bottom: 10px; } .portfolio-tem.style-8 .portfolio-content .arrow_link { width: 50px; height: 50px; } } /* !END: Theme Portfolio CSS */ /**---------------------------------------- START: Theme Services CSS ----------------------------------------*/ .service-slider-8.swiper .service-navigation { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; margin-bottom: 50px; } .service-slider-8.swiper .service-navigation .service-next, .service-slider-8.swiper .service-navigation .service-prev { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 54px; height: 54px; line-height: 1; border: 2px solid rgba(255, 255, 255, 0.1); color: var(--tj-white); border-radius: 50%; position: relative; -webkit-transition: 0.5s; transition: 0.5s; z-index: 1; } .service-slider-8.swiper .service-navigation .service-next::before, .service-slider-8.swiper .service-navigation .service-prev::before { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-color: var(--tj-theme-primary); border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: 0.5s; transition: 0.5s; z-index: -1; } .service-slider-8.swiper .service-navigation .service-next:hover, .service-slider-8.swiper .service-navigation .service-prev:hover { border-color: var(--tj-theme-primary); } .service-slider-8.swiper .service-navigation .service-next:hover::before, .service-slider-8.swiper .service-navigation .service-prev:hover::before { opacity: 1; visibility: visible; } .service-slider-8.swiper .service-pagination { text-align: center; margin-top: 50px; } .service-slider-8.swiper .service-pagination .swiper-pagination-bullet { background-color: var(--tj-theme-primary); opacity: 0.3; } .service-slider-8.swiper .service-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-slider-8.swiper .service-pagination { margin-top: 35px; } } .tj-service-item.style-8 { text-align: center; background-color: var(--tj-black-2); border-radius: 12px; border: 1px solid rgba(116, 119, 121, 0.1); padding: 40px 30px; -webkit-transition: 0.5s; transition: 0.5s; } .tj-service-item.style-8 .service-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 64px; height: 64px; line-height: 1; background: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); border-radius: 50%; margin-bottom: 35px; -webkit-transition: 0.4s; transition: 0.4s; font-size: 30px; } .tj-service-item.style-8 .service-icon img, .tj-service-item.style-8 .service-icon svg { max-width: 30px; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; -webkit-transition: 0.4s; transition: 0.4s; } .tj-service-item.style-8 .service-icon span, .tj-service-item.style-8 .service-icon i { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; } .tj-service-item.style-8 .title { font-size: 28px; font-weight: var(--tj-fw-sbold); letter-spacing: -0.02em; margin-bottom: 25px; } .tj-service-item.style-8 .desc { margin-bottom: 35px; } .tj-service-item.style-8 .desc p:last-child { margin-bottom: 0; } .tj-service-item.style-8 .service-link { -webkit-transition: 0.5s; transition: 0.5s; } .tj-service-item.style-8 .service-link a { color: var(--tj-white); font-size: 20px; text-decoration: none; display: inline-block; } .tj-service-item.style-8 .service-link a .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-service-item.style-8 .service-link a .icon_box .icon_first, .tj-service-item.style-8 .service-link a .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-service-item.style-8 .service-link a .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-service-item:hover.style-8 .service-icon img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .tj-service-item:hover.style-8 .service-link a .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-service-item:hover.style-8 .service-link a .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-service-item.style-8 { padding: 30px 15px; } .tj-service-item.style-8 .service-icon { margin-bottom: 25px; } .tj-service-item.style-8 .title { margin-bottom: 15px; } .tj-service-item.style-8 .desc { margin-bottom: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-item.style-8 { padding: 30px 15px; } .tj-service-item.style-8 .service-icon { margin-bottom: 25px; } .tj-service-item.style-8 .title { font-size: 24px; margin-bottom: 15px; } .tj-service-item.style-8 .desc { margin-bottom: 25px; } } /* !END: Theme Services CSS */ /**---------------------------------------- START: Theme Resume CSS ----------------------------------------*/ .tj-resume-section.style-8 { padding-bottom: 120px; position: relative; overflow: hidden; z-index: 1; } .tj-resume-section.style-8::before { content: ""; position: absolute; left: 0; bottom: -10%; width: 420px; height: 420px; border-radius: 50%; background: var(--tj-theme-primary); background: linear-gradient(45deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.3; z-index: -1; } .tj-resume-section.style-8 .resume_shapes { position: absolute; bottom: 40%; left: 20%; max-width: 40px; width: 100%; z-index: -1; } .tj-resume-section.style-8 .resume_shapes img { width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-resume-section.style-8 { padding-bottom: 80px; } } .resume-wrapper-8 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 60px; } .resume-wrapper-8 .resume-8-left { max-width: 400px; width: 100%; } .resume-wrapper-8 .resume-8-left .desc { color: var(--tj-grey-1); } .resume-wrapper-8 .resume-8-left .desc p:last-child { margin-bottom: 0; } .resume-wrapper-8 .resume-8-left .tj-section-button { margin-top: 35px; } .resume-wrapper-8 .resume-inner-8 { max-width: 815px; width: 100%; margin-left: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .resume-wrapper-8 .resume-inner-8 { max-width: 655px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .resume-wrapper-8 { gap: 30px; } .resume-wrapper-8 .resume-inner-8 { max-width: 540px; } .resume-wrapper-8 .resume-8-left { max-width: 365px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume-wrapper-8 { gap: 10px; } } .resume_item.style-8 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; padding-bottom: 0px; margin-bottom: 30px; padding: 30px; } .resume_item.style-8:last-child { margin-bottom: 0; } .resume_item.style-8 .resume-content { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: start; gap: 30px; } .resume_item.style-8 .resume-content .icon_box { max-width: 60px; width: 100%; line-height: 1; display: -webkit-box; display: -ms-flexbox; display: flex; } .resume_item.style-8 .resume-content .icon_box img { width: 100%; } .resume_item.style-8 .resume-content .resume-text .title { font-size: 20px; text-transform: uppercase; font-weight: var(--tj-fw-sbold); letter-spacing: 0.02em; margin-bottom: 15px; } .resume_item.style-8 .resume-content .resume-text .subtitle { display: block; color: var(--tj-white); text-transform: uppercase; margin-bottom: 15px; } .resume_item.style-8 .resume_date { max-width: 160px; width: 100%; margin-left: auto; } .resume_item.style-8 .resume_date .date { color: var(--tj-grey-1); font-size: 20px; letter-spacing: 0.02em; } .resume_item.style-8 .resume_date .date i { color: var(--tj-theme-primary); margin-right: 5px; } .resume_item.style-8 .desc { padding-left: 90px; letter-spacing: 0.02em; font-size: 18px; color: var(--tj-grey-1); } .resume_item.style-8 .desc p:last-child { margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .resume_item.style-8 { padding: 30px 15px; } .resume_item.style-8 .resume-content .resume-text .subtitle { margin-bottom: 0; } .resume_item.style-8 .resume-content .resume_date { margin-left: 90px; margin-bottom: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .resume_item.style-8 { padding: 30px 15px; } } @media (max-width: 575px) { .resume_item.style-8 { padding: 30px 15px; } .resume_item.style-8 .resume-content .resume-text .subtitle { margin-bottom: 0; } .resume_item.style-8 .resume-content .resume_date { margin-left: 0px; margin-bottom: 15px; } .resume_item.style-8 .desc { padding-left: 0; } } .resume-section.style-9 { background: var(--tj-theme-accent-2); padding-bottom: 120px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .resume-section.style-9 { padding-bottom: 60px; } } .resume-section.style-9 .section-header { margin: auto; margin-bottom: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .resume-section.style-9 .resume_wrapper_5 { padding: 30px 110px 30px 40px; } } @media (max-width: 575px) { .resume-section.style-9 .resume_wrapper_5 { padding: 30px 15px; } } /* !END: Theme Resume CSS */ /**---------------------------------------- START: Theme Testimonial CSS ----------------------------------------*/ .testimonial-8 .testimonial-pagination { text-align: center; margin-top: 50px; } .testimonial-8 .testimonial-pagination .swiper-pagination-bullet { background-color: var(--tj-theme-primary); opacity: 0.3; } .testimonial-8 .testimonial-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; } .testimonial-8 .swiper-slide { -webkit-transition: 0.6s; transition: 0.6s; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-8.style-8 { padding-top: 80px; padding-bottom: 80px; } .testimonial-8.style-8 .testimonial-pagination { margin-top: 35px; } } .testimonial-item.style-8 { background-color: var(--tj-black-2); border: 1px solid rgba(116, 119, 121, 0.2); padding: 30px; border-radius: 10px; -webkit-transition: 0.4s; transition: 0.4s; } .testimonial-item.style-8 .icon-box { margin-bottom: 40px; } .testimonial-item.style-8 .icon-box svg { margin-right: 5px; } .testimonial-item.style-8 .icon-box svg:first-child { -webkit-animation-name: iconRotate1; animation-name: iconRotate1; } .testimonial-item.style-8 .icon-box svg:last-child { -webkit-animation-name: iconRotate2; animation-name: iconRotate2; } .testimonial-item.style-8 .quote { font-size: 18px; color: var(--tj-grey-1); margin-bottom: 30px; } .testimonial-item.style-8 .testimonial-feature-item { border-top: 1px solid rgba(116, 119, 121, 0.2); padding-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } .testimonial-item.style-8 .testimonial-feature-item .feature-content { width: calc(100% - 90px); } .testimonial-item.style-8 .testimonial-feature-item .feature-content .name { font-size: 20px; margin-bottom: 5px; } .testimonial-item.style-8 .testimonial-feature-item .feature-content .designation { display: block; font-size: 14px; color: var(--tj-grey-1); } .testimonial-item.style-8 .testimonial-feature-item .auother-images { max-width: 75px; height: 75px; width: 100%; border: 1px solid rgba(116, 119, 121, 0.2); padding: 8px; border-radius: 50%; } .testimonial-item.style-8 .testimonial-feature-item .auother-images img { height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .testimonial-item:hover.style-8 { border-color: var(--tj-theme-secondary); } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-item.style-8 { padding: 30px 15px; } .testimonial-item.style-8 .icon-box { margin-bottom: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial-item.style-8 { padding: 30px 15px; } .testimonial-item.style-8 .icon-box { margin-bottom: 25px; } .testimonial-item.style-8 .quote { font-size: 16px; } .testimonial-item.style-8 .testimonial-feature-item .feature-content .name { font-size: 18px; } } /* !END: Theme Testimonial CSS */ /**---------------------------------------- START: Theme Blog CSS ----------------------------------------*/ .tj-blog-section.style-8 { padding-bottom: 90px; background-color: var(--tj-theme-accent-1); } .tj-blog-section.style-8 .section-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-blog-section.style-8 { padding-bottom: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-blog-section.style-8 { padding-bottom: 80px; } } .blog-wrapper-8 { position: relative; z-index: 2; } .blog-wrapper-8 .active-bg { top: 0px; bottom: 0px; left: 0px; right: 0px; position: absolute; opacity: 0; -webkit-transition: 0.6s; transition: 0.6s; background: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(110.61%, var(--tj-theme-secondary))); background: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 110.61%); border-radius: 10px; z-index: -2; } .blog-wrapper-8:hover .active-bg { opacity: 1; } .blog-item.style-8 { background-color: transparent; max-width: 100%; } .blog-item.style-8 .blog_inner { position: relative; } .blog-item.style-8 .blog_inner .anim_box { display: block; border: 1px solid rgba(116, 119, 121, 0.2); padding: 38px 30px; border-radius: 10px; text-decoration: none; position: relative; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 25px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: relative; z-index: 2; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-text { max-width: 645px; width: 100%; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-text .title a { font-size: 26px; text-transform: uppercase; font-weight: var(--tj-fw-sbold); margin-bottom: 0; display: inline; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor)); background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; -webkit-transition: all 0.3s, background-size 0.8s; transition: all 0.3s, background-size 0.8s; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-text .title a:hover { color: var(--tj-color-theme-primary); background-size: 100% 1px; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-arrow { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; max-width: 70px; width: 100%; height: 70px; color: var(--tj-white); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; text-decoration: none; color: var(--tj-white); text-decoration: none; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-arrow .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-arrow .icon_box .icon_first, .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-arrow .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-arrow .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-arrow:hover { background-color: var(--tj-theme-primary); border-color: var(--tj-theme-primary); } .blog-item.style-8 .blog_inner .blog-reveal-bg { background-size: inherit; background-position: center; background-repeat: no-repeat; position: absolute; top: 0; left: 0; width: 350px; height: 350px; opacity: 0; margin: -180px 0 0 -180px; overflow: hidden; pointer-events: none; background-position: center; background-size: cover; background-repeat: no-repeat; border-radius: 15px; 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; } .blog-item.style-8:hover { z-index: 2; } .blog-item.style-8:hover .blog_inner .blog-reveal-bg { opacity: 1; } .blog-item.style-8:hover .blog_inner .anim_box { color: var(--tj-white); } .blog-item.style-8:hover .blog_inner .anim_box .blog-8-content .blog-text .title { color: var(--tj-color-theme-primary); background-size: 100% 1px; } .blog-item.style-8:hover .blog_inner .anim_box .blog-8-content .blog-arrow .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .blog-item.style-8:hover .blog_inner .anim_box .blog-8-content .blog-arrow .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .blog-item.style-8:hover span { color: var(--tj-white); } .blog-item.style-8:hover span::before { background: var(--tj-white); } .blog-item.style-8:hover span a { color: var(--tj-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-item.style-8 .blog_inner .anim_box { padding: 30px 15px; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-text .title { font-size: 22px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog-item.style-8 .blog_inner .anim_box { padding: 30px 15px; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .blog-item.style-8 .blog_inner .anim_box .blog-8-content .blog-text .title { font-size: 20px; } } .tj-blog-8-meta { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; row-gap: 6px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 16px; } .tj-blog-8-meta span { position: relative; font-size: 15px; color: rgba(255, 255, 255, 0.5); padding-right: 20px; margin-right: 15px; -webkit-transition: 0.4s; transition: 0.4s; z-index: 1; } .tj-blog-8-meta span::before { position: absolute; content: ""; width: 4px; height: 4px; line-height: 1; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); right: 0; background: rgba(255, 255, 255, 0.5); border-radius: 50%; -webkit-transition: 0.4s; transition: 0.4s; } .tj-blog-8-meta span:last-child { padding-right: 0; margin-right: 0; } .tj-blog-8-meta span:last-child::before { display: none; } .tj-blog-8-meta span a { font-size: 15px; color: var(--tj-white); text-decoration: none; -webkit-transition: 0.4s; transition: 0.4s; } /* !END: Theme Blog CSS */ /**---------------------------------------- START: Theme Cta CSS ----------------------------------------*/ .tj-cta-section.style-8 { padding-bottom: 0px; background-color: var(--tj-theme-accent-1); } .cta-wrapper.style-8 { padding: 70px 25px; position: relative; z-index: 1; } .cta-wrapper.style-8 .cta-content .subtitle { display: block; font-size: 12px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-sbold); letter-spacing: 0.02em; text-transform: uppercase; margin-bottom: 20px; } .cta-wrapper.style-8 .cta-content .title { font-size: 88px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-sbold); line-height: 1; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 15px; } .cta-wrapper.style-8 .cta-content .desc { color: var(--tj-body); font-weight: var(--tj-fw-medium); } .cta-wrapper.style-8 .cta-content .desc p:last-child { margin-bottom: 0; } .cta-wrapper.style-8 .cta-circle { width: 150px; height: 150px; margin-left: auto; margin-right: auto; z-index: 3; background: linear-gradient(150.14deg, rgba(255, 255, 255, 0.15) 14.68%, rgba(255, 255, 255, 0) 46.13%); -webkit-backdrop-filter: blur(32px); backdrop-filter: blur(32px); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.15); margin-top: 40px; } .cta-wrapper.style-8 .cta-circle .circle-wrap { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .cta-wrapper.style-8 .cta-circle .rotate-image { -webkit-animation: rotateImg 10s infinite linear; animation: rotateImg 10s infinite linear; } .cta-wrapper.style-8 .cta-circle .rotate-image textPath { fill: var(--tj-white); } .cta-wrapper.style-8 .circle-button .circle { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: var(--tj-white); background: var(--tj-theme-primary); width: 60px; height: 60px; border-radius: 50%; text-decoration: none; } .cta-wrapper.style-8 .circle-button .circle .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .cta-wrapper.style-8 .circle-button .circle .icon_box .icon_first, .cta-wrapper.style-8 .circle-button .circle .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .cta-wrapper.style-8 .circle-button .circle .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .cta-wrapper.style-8 .circle-button:hover .circle .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .cta-wrapper.style-8 .circle-button:hover .circle .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } .cta-wrapper.style-8 .cta_shapes { position: absolute; top: 18%; right: 14%; left: auto; max-width: 50px; width: 100%; z-index: -1; -webkit-animation: up-down-move 3s forwards infinite alternate; animation: up-down-move 3s forwards infinite alternate; } .cta-wrapper.style-8 .cta_shapes img { width: 100%; } .cta-wrapper.style-8 .cta_shapes_2 { position: absolute; left: 12%; bottom: 30%; max-width: 40px; width: 100%; z-index: -1; } .cta-wrapper.style-8 .cta_shapes_2 img { width: 100%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta-wrapper.style-8 .cta_shapes { right: 8%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-wrapper.style-8 .cta_shapes { right: 8%; } .cta-wrapper.style-8 .cta-content .title { font-size: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-wrapper.style-8 { padding: 40px 15px; } .cta-wrapper.style-8 .cta_shapes { right: 8%; top: 8%; } .cta-wrapper.style-8 .cta-content .title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-wrapper.style-8 { padding: 40px 15px; } .cta-wrapper.style-8 .cta_shapes { display: none; } .cta-wrapper.style-8 .cta-circle { width: 120px; height: 120px; } .cta-wrapper.style-8 .cta-circle .rotate-image { width: 100px; height: 100px; } .cta-wrapper.style-8 .cta-content .title { font-size: 50px; } } @media (max-width: 575px) { .cta-wrapper.style-8 { padding: 35px 15px; } .cta-wrapper.style-8 .cta_shapes { display: none; } .cta-wrapper.style-8 .cta-circle { width: 105px; height: 105px; } .cta-wrapper.style-8 .cta-circle .rotate-image { width: 95px; height: 95px; } .cta-wrapper.style-8 .cta-content .title { font-size: 35px; } } /* !END: Theme Cta CSS */ /**---------------------------------------- START: Theme Header CSS ----------------------------------------*/ .tj-header-9-logo .logo-box { max-width: 190px; width: 100%; } .tj-header-9-right { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 30px; } .tj-header-9-right .btn { color: var(--tj-heading-secondary); } .tj-header-9-right .social-icons { padding: 0; margin: 0; list-style: none; gap: 10px; } .tj-header-9-right .social-icons li { margin: 0; } .tj-header-9-right .social-icons li a { width: 30px; height: 30px; border-color: rgba(255, 255, 255, 0.14); color: var(--tj-white); font-size: 13px; line-height: 1; } .tj-header-9-right .social-icons li a i { color: inherit; } .tj-header-9-right .social-icons li a:hover { color: var(--tj-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-header-9-right { gap: 20px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-header-9-right { gap: 20px; margin-left: auto; } .tj-header-9-right .social-icons { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-9-right { gap: 20px; margin-left: auto; } } @media (max-width: 575px) { .tj-header-9-right .btn { display: none; } } /* !END: Theme Header CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ .footer-widget.widget-info { max-width: 375px; width: 100%; } .footer-widget.widget-info .footer-logo { max-width: 180px; width: 100%; margin-bottom: 24px; } .footer-widget.widget-info .footer-logo a { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .footer-widget.widget-info .footer-logo img { max-width: 100%; height: auto; } .footer-widget.widget-info .desc { color: var(--tj-body); margin-bottom: 15px; } .footer-widget.widget-info .desc p:last-child { margin: 0; } .footer-widget.widget-info .tj-footer-9-social .social-icons { padding: 0; margin: 0; list-style: none; } .footer-widget.widget-info .tj-footer-9-social .social-icons li a { color: var(--tj-white); border: 1px solid rgba(255, 255, 255, 0.14); } .footer-widget.widget-info .tj-footer-9-social .social-icons li a i { color: var(--tj-white); } .footer-widget.widget-info .tj-footer-9-social .social-icons li a::before { background: var(--tj-black-2); } .tj-footer-9-area { background-position: center center; background-size: cover; background-repeat: no-repeat; border-radius: 100px 100px 0 0; } .tj-footer-9-area .footer-widget .footer-title .title { font-weight: var(--tj-fw-sbold); font-size: 20px; letter-spacing: -0.02em; color: var(--tj-white); } .tj-footer-9-area .tj-footer-7-top-title { font-size: 20px; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.5; margin-bottom: 26px; } .tj-footer-9-area .tj-footer-7-top-form input { background: var(--tj-white); border: 2px solid var(--tj-bg-2); padding: 16px 20px 16px 25px; color: var(--tj-bg-2); } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-9-area .tj-footer-7-top-form input { padding: 16px 10px 16px 20px; width: 257px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-footer-9-area .tj-footer-7-top-form input { padding: 16px 10px 16px 20px; width: 320px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-footer-9-area .tj-footer-7-top-form input::-webkit-input-placeholder { font-size: 12px; } .tj-footer-9-area .tj-footer-7-top-form input::-moz-placeholder { font-size: 12px; } .tj-footer-9-area .tj-footer-7-top-form input:-ms-input-placeholder { font-size: 12px; } .tj-footer-9-area .tj-footer-7-top-form input::-ms-input-placeholder { font-size: 12px; } .tj-footer-9-area .tj-footer-7-top-form input::placeholder { font-size: 12px; } } .tj-footer-9-area .tj-footer-7-top-submit-btn { background: var(--tj-bg-2); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-footer-9-area .tj-footer-7-top-submit-btn { display: inline-block; margin-top: 0px; } } .tj-footer-9-area .tj-footer-7-wrapper { border-top: 1px solid rgba(255, 255, 255, 0.15); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-9-area .tj-footer-7-wrapper { row-gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-9-area .tj-footer-6-left { max-width: 224px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-9-area .tj-footer-6-left { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-footer-9-area .tj-footer-6-left { max-width: 215px; margin-left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-footer-9-area .footer-menu ul { margin: 0 0 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-9-area .tj-footer-6-menu ul { font-size: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-9-area .tj-footer-6-menu ul li a { font-size: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-9-area .tj-footer-6-copyright { font-size: 12px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-9-col-2 { max-width: 370px; width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-9-col-2 { max-width: 326px; width: 100%; } } /* !END: Theme Footer CSS */ /**---------------------------------------- START: Theme About CSS ----------------------------------------*/ .tj-about-9-area { background: var(--tj-theme-accent-2); } .tj-about-9-area .section-header { margin-bottom: 26px; } .tj-about-9-area .section-header.style-5 .title { margin-bottom: 26px; } .tj-about-9-area .section-header.style-5 .desc { color: rgba(255, 255, 255, 0.6); margin-bottom: 30px; max-width: 513px; width: 100%; } .tj-about-9-bg { background: var(--tj-black-2); padding: 120px 0 120px; margin: 0 35px 0; border-radius: 24px; position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-about-9-bg { margin: 0 0 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-about-9-bg { padding: 10px 0 10px; } } @media (max-width: 575px) { .tj-about-9-bg { margin: 0 0 0; padding: 10px 0 10px; } } .tj-about-9-thumb { max-width: 535px; width: 100%; height: 593px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-9-thumb { max-width: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-9-thumb { margin-bottom: 40px; } } .tj-about-9-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 15px; } .tj-about-9-wrapper { margin-left: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-about-9-wrapper { margin-left: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-about-9-wrapper { margin-left: 0; } } .tj-about-9-counter-title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; line-height: 0; font-weight: var(--tj-fw-sbold); font-size: 48px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-about-9-counter-title { font-size: 46px; } } .tj-about-9-counter { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; background: var(--tj-theme-accent-2); border-radius: 15px; margin-bottom: 34px; } .tj-about-9-counter-item { padding: 22px 34px 26px 34px; border-right: 1px solid rgba(255, 255, 255, 0.1); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-about-9-counter-item { padding: 22px 20px 26px 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-about-9-counter-item { padding: 22px 22px 26px 34px; } } @media (max-width: 575px) { .tj-about-9-counter-item { border-right: none; } } .tj-about-9-counter-item:last-child { border-right: none; } .tj-about-9-counter-paragraph { color: rgba(255, 255, 255, 0.6); margin-top: 0 !important; margin-bottom: 0; } .tj-about-9-counter-item .number { font-family: var(--tj-ff-heading); letter-spacing: 0.04em; } .tj-about-9-counter-item .number span { font-family: var(--tj-ff-heading); letter-spacing: 0.04em; } /* !END: Theme About CSS */ /**---------------------------------------- START: Theme Blog CSS ----------------------------------------*/ .blog-style-9 .tj-blog-7-wrapper { border: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 30px; } .blog-style-9 .tj-blog-7-content { padding: 15px 15px 15px 0; } .blog-style-9 .tj-blog-7-thumb { width: 100%; height: 300px; position: relative; border-radius: 15px; z-index: 1; } .blog-style-9 .tj-blog-7-thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .blog-style-9-tag { position: absolute; top: 16px; left: 16px; } .blog-style-9-tag a { font-size: 15px; text-decoration: none; background: var(--tj-theme-primary); border-radius: 25px; padding: 0px 10px 2px; -webkit-transition: 0.4s; transition: 0.4s; display: inline-block; background-size: 200%; background-image: -webkit-gradient(linear, left top, right top, from(var(--tj-theme-primary)), color-stop(110.61%, var(--tj-theme-secondary))); background-image: linear-gradient(90deg, var(--tj-theme-primary) 0%, var(--tj-theme-secondary) 110.61%); text-decoration: none; color: var(--tj-white); } .blog-style-9-tag a:hover { background-size: 100%; } .blog-style-9-title { font-weight: var(--tj-fw-sbold); font-size: 24px; line-height: 1.4; letter-spacing: 0.02em; text-transform: uppercase; margin: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-style-9-title { font-size: 22px; } } .blog-style-9-title a { display: inline; background-image: -webkit-gradient(linear, left top, right top, color-stop(0, currentColor), to(currentColor)); background-image: linear-gradient(to right, currentColor 0, currentColor 100%); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 1px; -webkit-transition: all 0.3s, background-size 0.8s; transition: all 0.3s, background-size 0.8s; } .blog-style-9-title:hover a { background-size: 100% 1px; } /* !END: Theme Blog CSS */ /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .tj-hero-9-area { background: var(--tj-theme-accent-2); padding: 185px 0 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-9-area { padding: 140px 0 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-area { padding: 150px 0 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-area { padding: 165px 0 0; } } @media (max-width: 575px) { .tj-hero-9-area { padding: 150px 0 0; } } .tj-hero-9-wrapper { margin-bottom: 80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-9-wrapper { margin-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-wrapper { margin-bottom: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-9-wrapper { margin-bottom: 30px; } } .tj-hero-9-wrapper .title { font-weight: var(--tj-fw-sbold); font-size: 203px; letter-spacing: -0.04em; text-transform: uppercase; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media only screen and (min-width: 1601px) and (max-width: 1700px) { .tj-hero-9-wrapper .title { font-size: 164px; } } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-hero-9-wrapper .title { font-size: 140px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-9-wrapper .title { font-size: 136px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-9-wrapper .title { font-size: 110px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-wrapper .title { font-size: 84px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-wrapper .title { font-size: 60px; } } @media (max-width: 575px) { .tj-hero-9-wrapper .title { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 80px; font-weight: var(--tj-fw-bold); } } .tj-hero-9-wrapper .title a { width: 215px; height: 215px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 24px; position: relative; z-index: 1; margin: 0 65px 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-9-wrapper .title a { width: 120px; height: 120px; margin: 0 20px 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-wrapper .title a { width: 80px; height: 80px; margin: 0 20px 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-wrapper .title a { width: 70px; height: 70px; margin: 0 20px 0; } } @media (max-width: 575px) { .tj-hero-9-wrapper .title a { font-size: 22px; margin: 20px 10px 20px; } } .tj-hero-9-wrapper .title a::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: url(../images/shapes/hero-9-play-bg.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; z-index: -1; -webkit-animation: rotate-animation 20s normal linear infinite; animation: rotate-animation 20s normal linear infinite; } .tj-hero-9-wrapper .title a::after { position: absolute; content: ""; width: 75%; height: 75%; line-height: 1; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 50%; background: url(../images/shapes/hero-9-play-bg-2.svg); background-position: center center; background-size: contain; background-repeat: no-repeat; } .tj-hero-9-wrapper .title a i { position: relative; color: var(--tj-white); -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -webkit-transition: 0.6s; transition: 0.6s; z-index: 2; } .tj-hero-9-wrapper .title a:hover i { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .tj-hero-9-thumb { position: relative; z-index: 1; margin-bottom: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-thumb { padding-top: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-9-thumb { margin-bottom: 20px; padding-top: 70px; } } .tj-hero-9-thumb .image { max-width: 631px; width: 100%; margin: auto; position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-9-thumb .image { max-width: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-thumb .image { max-width: 550px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-thumb .image { max-width: 330px; } } @media (max-width: 575px) { .tj-hero-9-thumb .image { position: relative; top: 30px; } } .tj-hero-9-thumb .image::before { content: ""; position: absolute; width: 1320px; height: 480px; bottom: -10px; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: -webkit-gradient(linear, left bottom, left top, color-stop(12.86%, var(--tj-theme-accent-2)), to(rgba(21, 9, 29, 0))); background: linear-gradient(0deg, var(--tj-theme-accent-2) 12.86%, rgba(21, 9, 29, 0) 100%); z-index: 2; } .tj-hero-9-thumb .image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 315px 315px 0 0; } .tj-hero-9-award-shape { position: absolute; top: 15%; left: 16%; z-index: 1; -webkit-animation: up-down-move 3s forwards infinite alternate; animation: up-down-move 3s forwards infinite alternate; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-9-award-shape { left: 11%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-award-shape { top: 0; left: auto; right: 10%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-award-shape { top: 0; left: auto; right: 0; } } @media (max-width: 575px) { .tj-hero-9-award-shape { top: -20px; left: auto; right: 30px; } } .tj-hero-9-award-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 45px 30px; border: 1.5px dashed var(--tj-white); gap: 6px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); position: relative; z-index: 1; } .tj-hero-9-award-wrap::before { content: ""; position: absolute; width: 13px; height: 13px; top: -6px; left: -6px; background: var(--tj-bg-2); border: 2px solid var(--tj-white); border-radius: 50%; } .tj-hero-9-award-wrap::after { content: ""; position: absolute; width: 13px; height: 13px; top: -6px; right: -6px; background: var(--tj-bg-2); border: 2px solid var(--tj-white); border-radius: 50%; } .tj-hero-9-award-wrap .title { font-weight: var(--tj-fw-medium); font-size: 19px; line-height: 1.52; margin-bottom: 0; } .tj-hero-9-award-wrap .line { position: absolute; width: 13px; height: 13px; bottom: -6px; right: -6px; background: var(--tj-bg-2); border: 2px solid var(--tj-white); border-radius: 50%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-award-wrap { padding: 30px 15px; } } @media (max-width: 575px) { .tj-hero-9-award-wrap { padding: 25px 15px; } .tj-hero-9-award-wrap .title { font-size: 16px; } } .tj-hero-9-award-ponter { position: absolute; bottom: -43px; left: -38px; } @media (max-width: 575px) { .tj-hero-9-award-ponter { bottom: -30px; max-width: 35px; left: -25px; } } .tj-hero-9-award-btn { font-weight: var(--tj-fw-medium); font-size: 17px; letter-spacing: 0.01em; color: var(--tj-heading-secondary); text-decoration: none; background: var(--tj-theme-primary); padding: 2px 16px; display: inline-block; border-radius: 40px; margin-top: 36px; margin-left: -122px; } @media (max-width: 575px) { .tj-hero-9-award-btn { margin-left: -95px; } } .tj-hero-9-wrap { max-width: 310px; width: 100%; position: absolute; top: 50%; right: -9%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: left; z-index: 1; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-hero-9-wrap { right: 1%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-hero-9-wrap { top: 40%; right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-wrap { right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-hero-9-wrap { max-width: 390px; position: relative; right: auto; top: -100px; bottom: 0; left: 50%; -webkit-transform: translateX(-50%) translateY(0); -ms-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-hero-9-wrap { position: relative; top: -40px; right: 0; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); text-align: left; z-index: 1; margin: auto; } } .tj-hero-9-paragraph { color: rgba(255, 255, 255, 0.6); margin-bottom: 26px; } .tj-hero-9-paragraph p:last-child { margin-bottom: 0; } .tj-hero-9-paragraph span { color: var(--tj-heading-secondary); font-weight: var(--tj-fw-medium); } .tj-hero-9-counter { border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 2px 0 25px; margin-bottom: 30px; } .tj-hero-9-counter-title { font-weight: var(--tj-fw-sbold); font-size: 112px; color: var(--tj-heading-secondary); margin-bottom: -18px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-9-counter-title { font-size: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-counter-title { font-size: 65px; margin-bottom: -40px; } } @media (max-width: 575px) { .tj-hero-9-counter-title { font-size: 55px; margin-bottom: -45px; } } .tj-hero-9-counter-desc { text-align: right; color: rgba(255, 255, 255, 0.6); } .tj-hero-9-btn { width: 100px; height: 100px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 50%; color: var(--tj-white); text-decoration: none; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; position: relative; z-index: 1; overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-hero-9-btn { width: 80px; height: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-hero-9-btn { width: 60px; height: 60px; } } @media (max-width: 575px) { .tj-hero-9-btn { width: 60px; height: 60px; } } .tj-hero-9-bottom { margin-bottom: 60px; position: relative; z-index: 3; } .tj-hero-9-bottom::before { content: ""; position: absolute; width: 102%; height: 1px; top: 50%; left: -15px; background: #2e314c; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } @media (max-width: 575px) { .tj-hero-9-bottom::before { display: none; } } .tj-hero-9-bottom-paragraaph { font-weight: var(--tj-fw-sbold); letter-spacing: 0.02em; text-transform: uppercase; padding: 0 24px; position: relative; z-index: 1; display: inline-block; background: var(--tj-theme-accent-2); } @media (max-width: 575px) { .tj-hero-9-bottom-paragraaph { font-size: 13px; } } .tj-hero-9-bottom-paragraaph span { color: var(--tj-theme-primary); } .tj-btn-circle-dot { position: absolute; bottom: -11px; left: 50%; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); width: 20px; height: 20px; -webkit-transition: all 0.6s ease-out; transition: all 0.6s ease-out; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background-color: var(--tj-theme-primary); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border: 1px solid transparent; z-index: -1; } .tj-hero-9-btn:hover .tj-btn-circle-dot { width: 420px; height: 420px; } .tj-hero-9-btn:hover i { -webkit-transform: rotate(50deg); -ms-transform: rotate(50deg); transform: rotate(50deg); -webkit-transition: 0.4s; transition: 0.4s; } .tj-hero-9-btn i { -webkit-transition: 0.4s; transition: 0.4s; color: var(--tj-white); } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme Progress CSS ----------------------------------------*/ .tj-progress-9-area { background: var(--tj-theme-accent-2); padding: 75px 0 90px; position: relative; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-progress-9-area { padding: 75px 0 50px; } } .tj-progress-9-area::before { content: ""; position: absolute; bottom: -262px; left: 0; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); width: 650px; height: 550px; border-radius: 50%; background: linear-gradient(260deg, var(--tj-theme-primary) 0%, rgba(115, 67, 210, 0.1) 100%); -webkit-filter: blur(150px); filter: blur(150px); opacity: 0.6; z-index: -1; } .tj-progress-9-button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } @media (max-width: 575px) { .tj-progress-9-button { -webkit-box-pack: left; -ms-flex-pack: left; justify-content: left; margin-bottom: 40px; margin-top: -20px; } } .tj-progress-9-single { padding: 45px 30px 50px 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-progress-9-single { padding: 45px 15px 50px 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-progress-9-single { padding: 45px 15px 50px 20px; } } .tj-progress-9-single .progress-text { margin-bottom: 26px; } .tj-progress-9-single .progress-title .title { font-weight: var(--tj-fw-medium); font-size: 20px; letter-spacing: -0.02em; } .tj-progress-9-single .desc { color: rgba(255, 255, 255, 0.6); margin-bottom: 100px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-progress-9-single .desc { margin-bottom: 50px; } } .tj-progress-9-icon span { width: 80px; height: 80px; display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-progress-9-icon span { width: 60px; height: 60px; } } /* !END: Theme Progress CSS */ /**---------------------------------------- START: Theme Project CSS ----------------------------------------*/ .tj-project-9-area { background: var(--tj-theme-accent-2); padding: 0 0 120px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-project-9-area { padding: 0 0 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-project-9-area .tj-project-9-area .tj-project-7-content-inner { max-width: 235px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-project-9-area .tj-project-9-area .tj-project-7-content-inner { max-width: 370px; } } @media (max-width: 575px) { .tj-project-9-area .tj-project-9-area .tj-project-7-content-inner { max-width: 230px; } } @media (max-width: 575px) { .tj-project-9-area .tj-project-7-paragraph { font-size: 14px; } } .tj-project-9-navigation { max-width: 1320px; width: 100%; margin: 0 auto; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 15px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; padding-bottom: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-project-9-navigation { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } @media (max-width: 575px) { .tj-project-9-navigation { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding-bottom: 30px; } } .tj-project-9-prev, .tj-project-9-next { width: 55px; height: 55px; line-height: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: transparent; border: 1px solid var(--tj-border); border-radius: 50%; position: relative; z-index: 1; } .tj-project-9-prev::before, .tj-project-9-next::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 50%; background-image: -webkit-gradient(linear, left top, right top, from(#8750f7), to(#2a1454)); background-image: linear-gradient(90deg, #8750f7 0%, #2a1454 100%); z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; } .tj-project-9-prev:hover::before, .tj-project-9-next:hover::before { visibility: visible; opacity: 1; } .tj-project-9-pagination { text-align: center; margin-top: 50px; } .tj-project-9-pagination .swiper-pagination-bullet { background-color: var(--tj-grey-2); -webkit-transition: 0.4s; transition: 0.4s; } .tj-project-9-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tj-theme-primary); } .tj-project-9-wrapper { position: relative; -webkit-transition: 0.4s; transition: 0.4s; overflow: hidden; } .tj-project-9-wrapper a { text-decoration: none; } .tj-project-9-wrapper .tj-project-7-item-inner { padding: 25px; } .tj-project-9-wrapper:hover .tj-project-9-thumb img { mix-blend-mode: unset; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); -webkit-transition: 0.4s; transition: 0.4s; } .tj-project-9-thumb { position: relative; overflow: hidden; -webkit-transition: 0.4s; transition: 0.4s; border-radius: 12px; margin-bottom: 30px; } .tj-project-9-thumb img { mix-blend-mode: luminosity; -webkit-transition: 0.4s; transition: 0.4s; } /* !END: Theme Project CSS */ /**---------------------------------------- START: Theme Service CSS ----------------------------------------*/ .tj-service-9-area { background: var(--tj-theme-accent-2); padding: 120px 0 90px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-service-9-area { padding: 80px 0 80px; } } .tj-service-9-area .tj-service-6-wrapper { background: var(--tj-black-2); } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-service-9-area .tj-service-6-wrapper { padding: 30px 135px 30px 40px; } } .tj-service-9-area .tj-btn-primary { width: 100%; border-radius: 12px; padding: 28px 35px; } .tj-service-9-area .tj-btn-primary .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-service-9-area .tj-btn-primary .icon_box .icon_first, .tj-service-9-area .tj-btn-primary .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .tj-service-9-area .tj-btn-primary .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } .tj-service-9-area .tj-btn-primary .icon_box i { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } .tj-service-9-area .tj-btn-primary:hover .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .tj-service-9-area .tj-btn-primary:hover .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } /* !END: Theme Service CSS */ /**---------------------------------------- START: Theme Project CSS ----------------------------------------*/ .tj-testimonial-9-area { background: var(--tj-theme-accent-2); padding: 0 0 120px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-9-area { padding: 0 0 60px; } } .tj-testimonial-9-area .section-header p { color: rgba(255, 255, 255, 0.6); margin-bottom: 32px; margin-top: 24px; max-width: 350px; width: 100%; } .tj-testimonial-9-slider { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: end; } .tj-testimonial-9-active { height: 620px; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-right: 0; position: relative; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-testimonial-9-active { margin-left: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-testimonial-9-active { margin-right: auto; margin-left: 0; } } .tj-testimonial-9-active::before { content: ""; position: absolute; width: 100%; height: 200px; top: 0; right: 0; background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-theme-accent-2)), to(rgba(21, 9, 29, 0))); background: linear-gradient(180deg, var(--tj-theme-accent-2) 0%, rgba(21, 9, 29, 0) 100%); z-index: 2; } .tj-testimonial-9-active::after { content: ""; position: absolute; width: 100%; height: 200px; bottom: 0; right: 0; background: -webkit-gradient(linear, left top, left bottom, from(var(--tj-theme-accent-2)), to(rgba(21, 9, 29, 0))); background: linear-gradient(180deg, var(--tj-theme-accent-2) 0%, rgba(21, 9, 29, 0) 100%); z-index: 2; rotate: 180deg; } .tj-testimonial-9-active .swiper-slide.swiper-slide-active { border: 2px solid var(--tj-theme-primary); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-9-active .swiper-slide.swiper-slide-active { margin-left: 0; } } .tj-testimonial-9-active .swiper-slide.swiper-slide-active .tj-testimonial-9-quote-icon span { opacity: 1; } .tj-testimonial-9-wrapper { background: #140c1c; border: 2px solid var(--tj-theme-secondary); border-radius: 10px; padding: 28px 22px 40px 22px; max-width: 750px; width: 100%; -webkit-transition: 0.6s ease-in-out; transition: 0.6s ease-in-out; } .tj-testimonial-9-top { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 22px; margin-bottom: 22px; } @media (max-width: 575px) { .tj-testimonial-9-top { padding-bottom: 10px; margin-bottom: 16px; } } .tj-testimonial-9-author-name .title { font-size: 20px; letter-spacing: -0.02em; margin-bottom: 8px; } .tj-testimonial-9-author-name .desc { font-size: 14px; letter-spacing: 0.02em; color: rgba(221, 221, 221, 0.6); } @media (max-width: 575px) { .tj-testimonial-9-author-name .desc { font-size: 12px; } } .tj-testimonial-9-author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; -ms-flex-wrap: wrap; flex-wrap: wrap; } @media (max-width: 575px) { .tj-testimonial-9-author { margin-bottom: 10px; } } .tj-testimonial-9-author-img { max-width: 76px; width: 100%; height: 76px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; padding: 8px; } @media (max-width: 575px) { .tj-testimonial-9-author-img { max-width: 60px; height: 60px; } } .tj-testimonial-9-paragraph { font-size: 20px; color: rgba(255, 255, 255, 0.6); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-testimonial-9-paragraph { font-size: 19px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-testimonial-9-paragraph { font-size: 16px; } } @media (max-width: 575px) { .tj-testimonial-9-paragraph { font-size: 13px; } } .tj-testimonial-9-paragraph p:last-child { margin-bottom: 0; } .star-ratings { unicode-bidi: bidi-override; font-size: 20px; letter-spacing: 4px; line-height: 1; position: relative; margin: 0; padding: 0; -webkit-text-stroke: 1px var(--tj-color-theme-secondary); } .star-ratings .fill-ratings { color: var(--tj-color-theme-secondary); 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-common-white); } .elementor .tj-testimonial-9-author-img img { border-radius: 50%; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } /* !END: Theme Project CSS */ /**---------------------------------------- START: Theme Header CSS ----------------------------------------*/ .tj-header-area.header-10 { padding: 0px 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .tj-header-area.header-10 .logo-box { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: auto; height: 100%; margin-right: 0; border-right: 1px solid rgba(255, 255, 255, 0.1); padding: 10px 25px 10px 0; } .tj-header-area.header-10 .logo-box img { max-width: 180px; width: 100%; } .tj-header-area.header-10 .header-menu { margin-left: 0; } .tj-header-area.header-10 .header-menu ul > li > a { color: rgba(255, 255, 255, 0.5); padding: 40px 0px; } .tj-header-area.header-10 .header-menu ul > li > a::before { position: absolute; content: ""; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--tj-theme-primary); border-radius: 0px; } .tj-header-area.header-10 .header-menu ul > li > a::after { display: none; } .tj-header-area.header-10 .header-menu ul > li > a.current-menu-ancestor, .tj-header-area.header-10 .header-menu ul > li > a.current-menu-item, .tj-header-area.header-10 .header-menu ul > li > a:hover { color: var(--tj-white); } .tj-header-area.header-10 .header-menu ul > li > .sub-menu > li.current-menu-ancestor > a, .tj-header-area.header-10 .header-menu ul > li > .sub-menu > li.current-menu-item > a { color: var(--tj-white); } .tj-header-area.header-10 .header-menu ul > li > .sub-menu > li.has-dropdown a::after { display: block; } .tj-header-area.header-10 .header-button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100%; margin-left: 0; padding-left: 30px; border-left: 1px solid rgba(255, 255, 255, 0.1); } .tj-header-area.header-10 .header-button .btn i { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .tj-header-area.header-10 .header-button .btn:hover { color: var(--tj-white); } .tj-header-area.header-10 .header-button .btn:hover i { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .tj-header-area.header-10 { padding: 0px 0px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-header-area.header-10 { padding: 0px 0px; } .tj-header-area.header-10 .logo-box { padding: 10px 15px 10px 0; } .tj-header-area.header-10 .logo-box img { max-width: 165px; } } @media (max-width: 575px) { .tj-header-area.header-10 { padding: 0px 0px; } .tj-header-area.header-10 .logo-box { padding: 10px 15px 10px 0; } .tj-header-area.header-10 .logo-box img { max-width: 165px; } } /* !END: Theme Header CSS */ /**---------------------------------------- START: Theme Footer CSS ----------------------------------------*/ .tj-footer-7-area.style-10 { background-color: var(--tj-black-2); border-radius: 0px; } .tj-footer-7-area.style-10 .social-icons li a { color: var(--tj-white); width: 35px; height: 35px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; text-decoration: none; z-index: 1; } .tj-footer-7-area.style-10 .social-icons li a::before { background: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); } .tj-footer-7-area.style-10 .tj-footer-7-top-submit-btn { background: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); -webkit-transition: 0.4s; transition: 0.4s; } .tj-footer-7-area.style-10 .widget-info { max-width: 360px; width: 100%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-7-area.style-10 .widget-info { max-width: 330px; } } .tj-footer-7-area.style-10 .tj-footer-9-col-2 { max-width: 190px; width: 100%; margin-left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-area.style-10 .tj-footer-9-col-2 { max-width: 370px; } } .tj-footer-7-area.style-10 .tj-footer-9-col-3 { max-width: 180px; width: 100%; margin-left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-area.style-10 .tj-footer-9-col-3 { margin-left: 0; } } .tj-footer-7-area.style-10 .footer_socials_media { max-width: 365px; width: 100%; margin-left: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-footer-7-area.style-10 .tj-footer-9-col-2 { max-width: 185px; } .tj-footer-7-area.style-10 .footer_socials_media { max-width: 320px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-footer-7-area.style-10 .footer_socials_media { margin-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-footer-7-area.style-10 .tj-footer-9-col-2 { margin-left: 0; max-width: 310px; } .tj-footer-7-area.style-10 .tj-footer-9-col-3 { margin-left: 0; } .tj-footer-7-area.style-10 .footer_socials_media { margin-left: 0; max-width: 330px; } .tj-footer-7-area.style-10 .tj-footer-6-left { max-width: 310px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-footer-7-area.style-10 .widget-info { max-width: 100%; } .tj-footer-7-area.style-10 .tj-footer-9-col-2 { margin-left: 0; max-width: 195px; } .tj-footer-7-area.style-10 .tj-footer-9-col-3 { margin-left: 0; } .tj-footer-7-area.style-10 .footer_socials_media { margin-left: 0; max-width: 100%; } .tj-footer-7-area.style-10 .tj-footer-6-left { max-width: 195px; margin-left: auto; margin-right: auto; } .tj-footer-7-area.style-10 .footer-menu ul { margin: 0px; gap: 10px 15px; } } @media (max-width: 575px) { .tj-footer-7-area.style-10 .widget-info { max-width: 100%; } .tj-footer-7-area.style-10 .tj-footer-9-col-2 { margin-left: 0; max-width: 100%; } .tj-footer-7-area.style-10 .tj-footer-9-col-3 { margin-left: 0; } .tj-footer-7-area.style-10 .tj-footer-6-left { margin-left: auto; margin-right: auto; margin-bottom: 0; } .tj-footer-7-area.style-10 .footer_socials_media { margin-left: 0; max-width: 100%; } .tj-footer-7-area.style-10 .tj-footer-7-wrapper { row-gap: 5px; } .tj-footer-7-area.style-10 .footer-menu ul { margin: 0px; } } .tj-footer-7-area.style-10 .tj-footer-7-top-form { position: relative; } .tj-footer-7-area.style-10 .tj-footer-7-top-form form { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 15px; } /* !END: Theme Footer CSS */ /**---------------------------------------- START: Theme Blog CSS ----------------------------------------*/ .tj-blog-9-area.style-10 { padding-top: 120px; padding-bottom: 90px; background-color: var(--tj-theme-accent-1); } /* !END: Theme Blog CSS */ /**---------------------------------------- START: Theme Contact CSS ----------------------------------------*/ .tj-contact-section.style-10 { padding: 0px 35px; background-color: var(--tj-theme-accent-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-contact-section.style-10 { padding: 0px 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-contact-section.style-10 { padding: 0px 0px; } } .contact-10-wrapper { background-color: var(--tj-black-2); border-radius: 24px; padding: 120px 25px; } .contact-10-wrapper .contact-10-inner { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 35px; max-width: 1320px; width: 100%; margin-left: auto; margin-right: auto; } .contact-10-wrapper .contact-10-inner .section-header { max-width: 420px; width: 100%; } .contact-10-wrapper .contact-10-inner .section-header .desc { color: var(--tj-grey-1); } .contact-10-wrapper .contact-10-inner .section-header .contact-button { margin-top: 35px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 { max-width: 645px; width: 100%; margin-left: auto; background: linear-gradient(315.3deg, #E50093 -1.57%, var(--tj-theme-primary) 62.92%); -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px); } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group { margin-bottom: 40px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group label { text-transform: uppercase; color: var(--tj-white); font-weight: var(--tj-fw-sbold); margin-bottom: 18px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]), .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel], .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email], .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text] { padding: 16px 20px; background-color: transparent; font-size: 16px; color: var(--tj-white); border: 1px solid transparent; background: rgba(255, 255, 255, 0.1); border-radius: 10px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]::-ms-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea::-webkit-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-webkit-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]::-webkit-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]::-webkit-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]::-webkit-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea::-moz-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-moz-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]::-moz-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]::-moz-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]::-moz-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea:-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]:-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]:-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]:-ms-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]::-ms-input-placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]::-ms-input-placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea::placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search])::placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]::placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]::placeholder, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]::placeholder { color: rgba(221, 221, 221, 0.6); font-size: 16px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea:focus, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input:not([type=submit]):not([type=radio]):not([type=checkbox]):not([type=search]):focus, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=tel]:focus, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=email]:focus, .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group input[type=text]:focus { border: 1px solid var(--tj-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 { padding: 35px 15px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea { height: 150px; } } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .tj-btn-primary { background-color: var(--tj-black-2); background-image: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact-10-wrapper { padding: 80px 15px; } .contact-10-wrapper .contact-10-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact-10-wrapper .contact-10-inner .section-header { max-width: 100%; margin-bottom: 15px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 { max-width: 100%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact-10-wrapper { padding: 80px 0px; } .contact-10-wrapper .contact-10-inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .contact-10-wrapper .contact-10-inner .section-header { max-width: 100%; margin-bottom: 15px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 { max-width: 100%; margin-top: 0px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group { margin-bottom: 30px; } .contact-10-wrapper .contact-10-inner .contact-form-box.style-10 .form_group textarea { height: 145px; } } /* !END: Theme Contact CSS */ /**---------------------------------------- START: Theme Cta CSS ----------------------------------------*/ .tj-cta-section.style-10 { padding: 0px 35px; background-color: transparent; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-cta-section.style-10 { padding: 0px 0px; } } .cta-10-wrapper { padding-top: 120px; padding-bottom: 120px; padding-left: 15px; padding-right: 15px; background-color: var(--tj-black-2); background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 24px; position: relative; } .cta-10-wrapper .section-header { max-width: 1035px; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 0; } .cta-10-wrapper .section-header .title { font-size: 64px; font-weight: var(--tj-fw-sbold); line-height: 1.3; letter-spacing: -0.04em; margin-bottom: 10px; } .cta-10-wrapper .section-header .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: 10px; } .cta-10-wrapper .section-header .title span img { max-width: 70px; width: 100%; border-radius: 50%; } .cta-10-wrapper .section-header .title span img.cta-3 { border-radius: 10px; } .cta-10-wrapper .section-header .desc { max-width: 615px; width: 100%; margin-left: auto; margin-right: auto; color: var(--tj-grey-1); } .cta-10-wrapper .section-header .desc p:last-child { margin-bottom: 0; } .cta-10-wrapper .section-header .cta-button { margin-top: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta-10-wrapper .section-header .title { font-size: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta-10-wrapper { padding-top: 80px; padding-bottom: 80px; } .cta-10-wrapper .section-header .title { font-size: 45px; line-height: 1.2; } .cta-10-wrapper .section-header .title span img { max-width: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta-10-wrapper { padding-top: 80px; padding-bottom: 80px; } .cta-10-wrapper .section-header .title { font-size: 35px; line-height: 1.2; } .cta-10-wrapper .section-header .title span img { max-width: 35px; } } @media (max-width: 575px) { .cta-10-wrapper { padding-top: 80px; padding-bottom: 80px; border-radius: 16px; } .cta-10-wrapper .section-header .title { font-size: 20px; line-height: 1.4; } .cta-10-wrapper .section-header .title span { gap: 5px; } .cta-10-wrapper .section-header .title span img { max-width: 25px; } } /* !END: Theme Cta CSS */ /**---------------------------------------- START: Theme Hero CSS ----------------------------------------*/ .hero-section.style-10 { padding: 260px 0 100px; background-color: transparent; } .hero-section.style-10::before { width: 850px; height: 510px; margin-right: -3%; opacity: 0.3; } .hero-section.style-10 .hero-10-socials { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); left: 50px; } .hero-section.style-10 .hero-10-socials .social-icons { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .hero-section.style-10 .hero-10-socials .social-icons li a { color: var(--tj-white); border: 1px solid rgba(255, 255, 255, 0.1); } .hero-section.style-10 .hero-10-socials .social-icons li a::before { background-image: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background-image: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); } .hero-section.style-10 .hero-10-socials .social-icons li a i { color: var(--tj-white); } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-section.style-10 .hero-10-socials { left: 10px; } .hero-section.style-10 .hero_scroll { left: -35px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .hero-section.style-10 { padding: 235px 0 100px; } .hero-section.style-10 .hero-10-socials { left: 10px; } .hero-section.style-10 .hero_scroll { left: -35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-section.style-10 { padding: 180px 0 80px; } .hero-section.style-10 .hero-10-socials { position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 50px; } .hero-section.style-10 .hero-10-socials .social-icons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-section.style-10 .hero_scroll { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-section.style-10 { padding: 180px 0 80px; } .hero-section.style-10 .hero-10-socials { position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 40px; } .hero-section.style-10 .hero-10-socials .social-icons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-section.style-10 .hero_scroll { display: none; } } @media (max-width: 575px) { .hero-section.style-10 { padding: 160px 0 80px; } .hero-section.style-10 .hero-10-socials { position: relative; top: auto; left: auto; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); margin-top: 80px; } .hero-section.style-10 .hero-10-socials .social-icons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-section.style-10 .hero_scroll { display: none; } } .hero-content-box.style-10 .subtitle { font-size: 18px; color: var(--tj-grey-1); font-weight: var(--tj-fw-sbold); margin-bottom: 30px; } .hero-content-box.style-10 .subtitle span { display: inline-block; color: var(--tj-heading-secondary); } .hero-content-box.style-10 .subtitle .wave { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-name: wave-animation; animation-name: wave-animation; display: inline-block; -webkit-transform-origin: 70% 70%; -ms-transform-origin: 70% 70%; transform-origin: 70% 70%; } .hero-content-box.style-10 .hero-title { font-size: 65px; text-transform: uppercase; font-weight: var(--tj-fw-sbold); color: var(--tj-heading-secondary); -webkit-background-clip: initial; -webkit-text-fill-color: initial; background: none; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 15px; } .hero-content-box.style-10 .hero-title span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .hero-content-box.style-10 .hero-title span img { max-width: 140px; width: 100%; height: 75px; -o-object-fit: cover; object-fit: cover; border-radius: 150px; } .hero-content-box.style-10 .desc { max-width: 420px; width: 100%; color: var(--tj-grey-1); } .hero-content-box.style-10 .desc p:last-child { margin-bottom: 0; } .hero-content-box.style-10 .hero-button { margin-top: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-content-box.style-10 { padding-left: 25px; } .hero-content-box.style-10 .hero-title { font-size: 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-content-box.style-10 { padding-left: 35px; } .hero-content-box.style-10 .hero-title { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-content-box.style-10 { padding-left: 0px; margin-bottom: 100px; } .hero-content-box.style-10 .hero-title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-content-box.style-10 { padding-left: 0px; margin-bottom: 90px; } .hero-content-box.style-10 .hero-title { font-size: 40px; } } @media (max-width: 575px) { .hero-content-box.style-10 { padding-left: 0px; margin-bottom: 195px; } .hero-content-box.style-10 .hero-title { font-size: 35px; } } .hero-10-images { position: relative; max-width: 635px; width: 100%; z-index: 1; } .hero-10-images .mask_images { display: inline-block; position: relative; max-width: 750px; width: 100%; height: 525px; -webkit-mask-image: url(../images/shapes/mask-hero-10.png); mask-image: url(../images/shapes/mask-hero-10.png); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; z-index: 1; } .hero-10-images .mask_images img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border: none; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-10-images .mask_images { max-width: 660px; height: 510px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-10-images .mask_images { max-width: 565px; height: 475px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-10-images .mask_images { max-width: 465px; height: 400px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .hero-10-images .mask_images { max-width: 650px; height: 510px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-10-images .mask_images { max-width: 520px; height: 435px; } } @media (max-width: 575px) { .hero-10-images .mask_images { max-width: 345px; height: 285px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .hero-10-images { margin-left: auto; margin-right: auto; text-align: center; } } .hero-10-reviews-wrap { max-width: 250px; width: 100%; -webkit-backdrop-filter: blur(41px); backdrop-filter: blur(41px); background: rgba(255, 255, 255, 0.1); padding: 30px; border-radius: 12px; position: absolute; top: -45px; left: 15px; z-index: 2; } .hero-10-reviews-wrap .star-ratings { display: inline-block; } .hero-10-reviews-wrap .star-ratings .empty-ratings { -webkit-text-stroke: 1px; -webkit-text-stroke-color: var(--tj-theme-primary); color: transparent; } .hero-10-reviews-wrap .hero-10-thumb { margin-bottom: 35px; } .hero-10-reviews-wrap .hero-10-thumb ul { margin: 0; padding: 0; list-style: none; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .hero-10-reviews-wrap .hero-10-thumb ul li { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; margin-left: -20px; border: 3px solid var(--tj-black-2); border-radius: 50%; z-index: 2; } .hero-10-reviews-wrap .hero-10-thumb ul li img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; border-radius: 50%; } .hero-10-reviews-wrap .hero-10-thumb ul li.count { position: relative; z-index: 2; background-color: var(--tj-theme-primary); } .hero-10-reviews-wrap p { font-size: 15px; margin-bottom: 0; margin-top: 12px; } .hero-10-reviews-wrap p span { color: var(--tj-white); font-weight: var(--tj-fw-medium); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .hero-10-reviews-wrap .hero-10-thumb { margin-bottom: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .hero-10-reviews-wrap { max-width: 220px; left: 0px; padding: 20px; } .hero-10-reviews-wrap .hero-10-thumb { margin-bottom: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .hero-10-reviews-wrap { max-width: 220px; left: 0px; padding: 20px; } .hero-10-reviews-wrap .hero-10-thumb { margin-bottom: 15px; } } @media (max-width: 575px) { .hero-10-reviews-wrap { max-width: 220px; left: 20px; padding: 20px; top: -150px; } .hero-10-reviews-wrap .hero-10-thumb { margin-bottom: 15px; } } .hero-8-chats { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; bottom: 20px; left: 40%; gap: 15px; max-width: 260px; width: 100%; -webkit-backdrop-filter: blur(41px); backdrop-filter: blur(41px); background: rgba(255, 255, 255, 0.1); border-radius: 8px; font-size: 16px; color: var(--tj-heading-secondary); font-weight: var(--tj-fw-medium); padding: 15px 15px 20px; z-index: 2; } .hero-8-chats span { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; line-height: 1; color: var(--tj-white); background-color: var(--tj-theme-primary); border-radius: 50%; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .hero-8-chats { right: -15px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .hero-8-chats { right: 0px; } } @media (max-width: 575px) { .hero-8-chats { left: 15%; bottom: -45px; } } /* !END: Theme Hero CSS */ /**---------------------------------------- START: Theme Maquee CSS ----------------------------------------*/ .tj-maquee-section.style-10 { padding-top: 120px; background-color: transparent; position: relative; z-index: 1; } .tj-maquee-section.style-10 .maquee-wrapper { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .tj-maquee-section.style-10 .marquee-title { margin-bottom: 60px; position: relative; z-index: 1; } .tj-maquee-section.style-10 .marquee-title::before { content: ""; position: absolute; width: 102%; height: 1px; top: 50%; left: -15px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); } .tj-maquee-section.style-10 .marquee-title .title { font-weight: var(--tj-fw-sbold); letter-spacing: 0.02em; text-transform: uppercase; padding: 0 24px; position: relative; z-index: 1; display: inline-block; background: var(--tj-theme-accent-2); margin-bottom: 0; } .tj-maquee-section.style-10 .marquee-title .title span { color: var(--tj-theme-primary); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .tj-maquee-section.style-10 { padding-top: 80px; } .tj-maquee-section.style-10 .marquee-title { margin-bottom: 35px; } } @media (max-width: 575px) { .tj-maquee-section.style-10 { padding-top: 80px; } .tj-maquee-section.style-10 .marquee-title { margin-bottom: 35px; } .tj-maquee-section.style-10 .marquee-title .title { padding: 0px; } } .marquee-item.style-10 { background: var(--tj-black); display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 200px; height: 84px; border-radius: 10px; -webkit-transition: 0.6s; transition: 0.6s; position: relative; border: 1px solid rgba(255, 255, 255, 0.1); z-index: 1; cursor: pointer; } .marquee-item.style-10 .marquee-logo img { -webkit-transition: 0.6s; transition: 0.6s; } .marquee-item.style-10::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-gradient(linear, left top, right top, from(#8750F7), color-stop(110.61%, #2A1454)); background: linear-gradient(90deg, #8750F7 0%, #2A1454 110.61%); border-radius: 10px; z-index: -1; opacity: 0; visibility: hidden; -webkit-transition: 0.4s; transition: 0.4s; } .marquee-item.style-10:hover .marquee-logo img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .marquee-item.style-10:hover::before { opacity: 1; visibility: visible; } /* !END: Theme Maquee CSS */ /**---------------------------------------- START: Theme Portfolio CSS ----------------------------------------*/ .portfolio-section.style-10 { background-color: var(--tj-theme-accent-1); padding-bottom: 120px; } .portfolio-section.style-10 .section-header { max-width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; gap: 20px; -webkit-box-align: end; -ms-flex-align: end; align-items: end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .portfolio-section.style-10 .section-header .sec-text { max-width: 450px; width: 100%; } .portfolio-section.style-10 .portfolio-button { margin-top: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-section.style-10 { padding-top: 80px; padding-bottom: 80px; } .portfolio-section.style-10 .section-header { -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-align: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-bottom: 0; } .portfolio-section.style-10 .portfolio-button { margin-top: 10px; } } .portfolio-box.style-10::before { display: none; } .portfolio-box.style-10 .portfolio-item { margin-bottom: 30px; } .portfolio-filter.style-10 .button-group { background-color: var(--tj-theme-primary); padding: 5px; position: relative; } .portfolio-filter.style-10 .active-bg { position: absolute; background: var(--tj-theme-accent-1); height: 40px; top: 0; left: 0; } @media (max-width: 575px) { .portfolio-filter.style-10 .active-bg { height: 32px; } } .portfolio-box .portfolio-item.style-10 { border: 1px solid rgba(255, 255, 255, 0.1); background-color: var(--tj-black-2); padding: 35px 30px; margin-bottom: 25px; width: 48%; float: left; display: block; } .portfolio-box .portfolio-item.style-10 .image-box { position: relative; overflow: hidden; } .portfolio-box .portfolio-item.style-10 .image-box a { display: inline-block; } .portfolio-box .portfolio-item.style-10 .image-box a img { -webkit-transition: 0.6s; transition: 0.6s; } .portfolio-box .portfolio-item.style-10 .portfolio-content { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: end; gap: 20px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding-top: 30px; } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-title { font-size: 20px; font-weight: var(--tj-fw-sbold); text-transform: uppercase; margin-bottom: 10px; } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-title a { color: var(--tj-heading-secondary); -webkit-transition: 0.5s; transition: 0.5s; } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-title a:hover { color: var(--tj-theme-primary); } .portfolio-box .portfolio-item.style-10 .portfolio-content p { margin-bottom: 0; color: var(--tj-grey-1); } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-text { width: calc(100% - 80px); } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 60px; height: 60px; line-height: 1; color: var(--tj-white); text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; position: relative; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: 1; } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link::before { position: absolute; content: ""; width: 100%; height: 100%; background: -webkit-gradient(linear, right top, left top, from(var(--tj-theme-secondary)), to(var(--tj-theme-primary))); background: linear-gradient(-90deg, var(--tj-theme-secondary) 0%, var(--tj-theme-primary) 100%); border-radius: 50%; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; z-index: -1; } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link .icon_box { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; overflow: hidden; padding: 0 4px; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link .icon_box .icon_first, .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link .icon_box .icon_second { -webkit-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link .icon_box .icon_second { position: absolute; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); } @media (max-width: 575px) { .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-text { width: calc(100% - 70px); } .portfolio-box .portfolio-item.style-10 .portfolio-content .portfolio-arrow .link { width: 50px; height: 50px; } } .portfolio-box .portfolio-item.style-10:hover .image-box a img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .portfolio-box .portfolio-item.style-10:hover .portfolio-content .portfolio-arrow .link::before { opacity: 1; visibility: visible; } .portfolio-box .portfolio-item.style-10:hover .portfolio-content .portfolio-arrow .link .icon_box .icon_first { -webkit-transform: translateX(150%); -ms-transform: translateX(150%); transform: translateX(150%); } .portfolio-box .portfolio-item.style-10:hover .portfolio-content .portfolio-arrow .link .icon_box .icon_second { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-box .portfolio-item.style-10 { padding: 25px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio-box .portfolio-item.style-10 { width: 100%; padding: 25px 15px; } } /* !END: Theme Portfolio CSS */ /**---------------------------------------- START: Theme Services CSS ----------------------------------------*/ .service-10-images { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; max-width: 405px; width: 100%; border-radius: 10px; z-index: 1; margin-top: 15px; margin-right: 15px; } .service-10-images::before { position: absolute; content: ""; width: 100%; height: 100%; top: -15px; right: -15px; background-color: var(--tj-black-2); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; z-index: -1; } .service-10-images img { border-radius: 10px; } .elementor .service-10-images img { border-radius: 10px; } .service-item.style-10 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: transparent; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; margin-bottom: 30px; } .service-item.style-10.current .left-box .services-content p { color: var(--tj-white); } .service-item.style-10.current .service-icon { -webkit-transition: 0.5s; transition: 0.5s; } .service-item.style-10.current .service-icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .service-item.style-10.current .service-icon i { color: var(--tj-white); } .service-item.style-10 .service-icon { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; line-height: 1; max-width: 40px; width: 100%; margin-bottom: 0; -webkit-transition: 0.5s; transition: 0.5s; } .service-item.style-10 .service-icon img { width: 100%; -webkit-transition: 0.5s; transition: 0.5s; } .service-item.style-10 .service-icon i { font-size: 37px; -webkit-transform: translate(0) rotate(0); -ms-transform: translate(0) rotate(0); transform: translate(0) rotate(0); position: relative; top: 0; right: 0; color: var(--tj-theme-primary); } .service-item.style-10 .left-box { width: calc(100% - 90px); } .service-item.style-10 .left-box .services-content { max-width: 540px; width: 100%; } .service-item.style-10 .left-box .services-content .service-title { font-size: 20px; font-weight: var(--tj-fw-sbold); text-transform: uppercase; margin-bottom: 24px; } .service-item.style-10 .left-box .services-content p { margin-bottom: 0; color: var(--tj-grey-1); -webkit-transition: 0.5s; transition: 0.5s; } .service-item.style-10 .service-arrow { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 70px; height: 70px; line-height: 1; color: var(--tj-white); -webkit-transition: 0.5s; transition: 0.5s; border: 1px solid rgba(255, 255, 255, 0.1); background: transparent; border-radius: 50%; } .service-item.style-10 .service-arrow i { color: var(--tj-white); position: initial; -webkit-transform: translateY(0) rotate(0deg); -ms-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); } .service-item.style-10:hover .services-content p { color: var(--tj-white); } .service-item.style-10:hover.current .service-arrow { background: var(--tj-theme-primary); } .service-item.style-10:hover.current .service-icon { -webkit-transition: 0.5s; transition: 0.5s; } .service-item.style-10:hover.current .service-icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .service-item.style-10:hover .service-icon img { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } .service-item.style-10:hover .service-arrow { background-color: var(--tj-theme-primary); } .service-item.style-10:hover .service-arrow i { -webkit-transform: translateY(0) rotate(45deg); -ms-transform: translateY(0) rotate(45deg); transform: translateY(0) rotate(45deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .service-item.style-10 { padding: 0px 15px; } .service-item.style-10 .left-box .services-content .service-title { margin-bottom: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .service-item.style-10 { padding: 0px 15px; } .service-item.style-10 .left-box { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .service-item.style-10 .left-box .service-icon { margin-bottom: 15px; } .service-item.style-10 .left-box .services-content .service-title { margin-bottom: 15px; } } .services-widget.style-10 .active-bg { border-radius: 15px; } .services-widget.style-10 .service-item.current.mleave i { -webkit-transform: translateY(0) rotate(0deg); -ms-transform: translateY(0) rotate(0deg); transform: translateY(0) rotate(0deg); color: var(--tj-white); } /* !END: Theme Services CSS */ /**---------------------------------------- START: Testimonial CSS ----------------------------------------*/ .tj-testimonial-7-area.style-10 { padding-top: 0px; background-color: var(--tj-theme-accent-1); } .tj-testimonial-7-area.style-10 .section-header { margin-bottom: 60px; } .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next, .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-prev { left: -70px; top: 38%; -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); } .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next { left: auto; right: -70px; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next, .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-prev { left: -30px; } .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next { left: auto; right: -30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next, .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-prev { left: -30px; } .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next { left: auto; right: -30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next, .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-prev { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-testimonial-7-area.style-10 { padding-bottom: 80px; } .tj-testimonial-7-area.style-10 .section-header { margin-bottom: 40px; } .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-next, .tj-testimonial-7-area.style-10 .tj-testimonial-7-arrow-box .slider-prev { display: none; } .tj-testimonial-7-area.style-10 .tj-testimonial-7-pagination-box { margin-top: 35px; } } .tj-testimonial-7-wrapper.style-10 { background-color: var(--tj-black-2); border: 1px solid rgba(255, 255, 255, 0.1); } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-thumb { height: auto; } @media only screen and (min-width: 1400px) and (max-width: 1600px) { .tj-testimonial-7-wrapper.style-10 { padding: 30px 20px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-content { max-width: 420px; width: 100%; margin-left: 30px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-paragraph { font-size: 22px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tj-testimonial-7-wrapper.style-10 { padding: 30px 20px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-content { max-width: 420px; width: 100%; margin-left: 30px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-paragraph { font-size: 22px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-testimonial-7-wrapper.style-10 { padding: 25px 15px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-content { max-width: 420px; width: 100%; margin-left: 30px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-paragraph { font-size: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-testimonial-7-wrapper.style-10 { padding: 25px 15px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-content { max-width: 450px; width: 100%; margin-left: 30px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-paragraph { font-size: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tj-testimonial-7-wrapper.style-10 { padding: 25px 15px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-content { max-width: 100%; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-paragraph { font-size: 20px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-thumb { max-width: 100%; max-width: 100%; } } @media (max-width: 575px) { .tj-testimonial-7-wrapper.style-10 { padding: 25px 15px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-content { max-width: 100%; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-paragraph { font-size: 18px; } .tj-testimonial-7-wrapper.style-10 .tj-testimonial-7-thumb { max-width: 100%; max-width: 100%; } } /* !END: Testimonial CSS *//*# sourceMappingURL=gerold-main.css.map */