.woosw-list .woosw-item, .woosw-list td, .footer__widget ul li a::after, .footer__info .tp-link-btn-text::after, .footer__lang-selected-lang, .footer__lang-selected-lang::after, ul#footer-list-inline-3 li a::before, ul.footer-list-inline-3 li a::before, .footer__area .zoom-instagram-widget__item a::before, .blog__item-4, .blog__thumb-6, .blog__grid-item .blog__meta-10 span, .postbox__more-menu span, .sidebar__widget ul li a::after, .sidebar__widget ul li a span, .profile__tab .tp-tab-line, .profile__main-thumb-edit label, .error__thumb svg, .error__thumb svg path, .job__tag span, .job__form-btn label, .newsletter-popup, .newsletter-overlay, .newsletter__area, .newsletter__close-btn svg, .newsletter__close-btn i, .product__features-thumb::after, .product__features-thumb::before, .product__tab .nav-tabs .nav-item .nav-link::after, .product__thumb img, .product__details-tab-nav .tp-tab-line, .product-action-btn .product-action-tooltip, .biography__year p, .biography__year p::after, .biography__year p .tp-biography-bg, .vision__tab .nav-tabs .nav-item .nav-link::after, .vision__tab .nav-tabs .nav-item .nav-link span, .donate__more .tp-btn-7, .features__item::after, .features__content-9::after, .features__offer p a::after, .features__list-item::after, .features__tab .nav-tabs .nav-item .nav-link h3::after, .features__tab .nav-tabs .nav-item .nav-link h3::before, .contact__list-content-9 p a::after, .history__list-meta span, .video__play-btn .video-play-bg, .instagram__item::after, .instagram__btn, .pricing__feature-info-details span, .subscribe__thumb-animation-1, .subscribe__thumb-animation-2, .award__icon > span, .award__style-2 .award__title-9 a, .brand__item-3, .brand__item-3::after, .brand__item-5, .testimonial__item-5, .testimonial__item-6::after, .portfolio__item-2::after, .portfolio__item-2::before, .portfolio__item-5::after, .portfolio__thumb-3::before, .portfolio__tag-5, .portfolio__tag-9 span, .portfolio__title-9, .portfolio__content-5, .portfolio__content-8::after, .portfolio__content-9::after, .portfolio__text, .portfolio__view-5, .portfolio__grid-show-project, .portfolio__grid-category, .portfolio__grid-popup, .portfolio__masonary-btn-2 button::after, .portfolio-horizontal-dot .swiper-pagination-bullet, .portfolio__details-arrow button span, .portfolio__details-arrow button i, .portfolio__more-menu span, .faq__wrapper .accordion-button .accordion-btn, .faq__wrapper .accordion-button .accordion-btn::after, .faq__wrapper .accordion-button .accordion-btn::before, .faq__tab .nav-link, .faq__tab-2 .nav-link::after, .faq__style-2 .accordion-button .accordion-btn, .faq__style-2 .accordion-button .accordion-btn::after, .faq__style-2 .accordion-button .accordion-btn::before, .team__item-8::after, .team__social-4, .team__contact-overlay, .event__thumb-10-overlay .event-thumb-shape, .event__thumb-10-overlay span, .services__item-inner, .services__item-4::after, .services__item-5::after, .services__item-9::after, .services__icon span, .services__icon-4 span, .services__shape-1, .services__shape-2, .services__list-title, .services-tab-link-btn, .services-tab-link-btn::after, .services__widget-tab .nav-tabs .nav-item .nav-link, .services__widget-tab-2 ul li a, .services-link-btn i, .counter__border-animation::after, .counter__border-animation::before, .about__thumb-5 .video-play-bg, .about__tab-nav .nav-link, .about__tab-nav .tp-tab-line, .about__education-des p a::after, .about__play-btn .video-play-bg, .about__gallery-arrow button span, .slider__thumb-9::after, .slider__thumb-10 .thumb-border::after, .slider__thumb-10 .thumb-border::before, .slider__thumb-13-circle-1, .slider__thumb-13-circle-2, .slider__product-thumb-single, .slider__product-thumb-sm::after, .main-slider-dot .swiper-pagination-bullet, .main-slider-dot-8 .swiper-pagination-bullet, .mean-container .mean-nav ul li > a.mean-expand i, .main-menu ul li.has-dropdown > a::after, .main-menu ul li .submenu, .main-menu ul li .submenu li a::before, .main-menu ul li .mega-menu, .main-menu ul li .mega-menu li ul li a::before, .main-menu-4 ul li a::before, .main-menu-9 ul li a::before, .main-menu-11 ul li a::before, .main-menu-12 ul li a::before, .header__info ul li a, .header__info ul li span, .header__lang-selected-lang, .header__lang-selected-lang::after, .header__btn-12 .header-btn-12-icon span, .search__input, .search__input::after, .tp-accordion .accordion-button::after, .offcanvas__instagram-thumb a::after, .offcanvas__full, .offcanvas__full-menu ul li.has-dropdown > a::after, .offcanvas__full-menu ul li .submenu, .tp-swiper-dot .swiper-pagination-bullet, .tp-swiper-dot .swiper-pagination-bullet::after, .tp-swiper-dot-2 .swiper-pagination-bullet, .tp-pulse-border::after, .tp-pulse-border::before, .hamburger-btn span, .hamburger-btn-text::after, .hamburger-btn-text span, .hamburger-btn-8::after, .hamburger-btn-8::before, .tp-custom-arrow::after, .tp-custom-arrow::before, .tp-btn-5::after, .tp-btn-border-9::after, .tp-theme-color-btn::before, .tp-theme-color-input label, h1, h2, h3, h4, h5, h6, a, .btn, p, button, input, select, textarea, li, img, .transition-3, .body-overlay, .nice-select::after, .tp-cart-plus, .tp-cart-minus, .back-to-top-wrapper { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } :root { /** @font family declaration */ --tp-ff-body: 'Inter', sans-serif; --tp-ff-heading: 'Space Grotesk', sans-serif; --tp-ff-p: 'Inter', sans-serif; --tp-ff-inter: 'Inter', sans-serif; --tp-ff-roboto: 'Roboto', sans-serif ; --tp-ff-oswald: 'Oswald', sans-serif; --tp-ff-poppins: 'Poppins', sans-serif; --tp-ff-space: 'Space Grotesk', sans-serif; --tp-ff-play: 'Playfair Display', serif;; --tp-ff-syne: 'Syne', sans-serif;; --tp-ff-rajdhani: 'Rajdhani', sans-serif;; --tp-ff-fontawesome: "Font Awesome 6 Pro"; /** @color declaration */ --tp-common-white: #ffffff; --tp-common-white-op-7: rgba(255, 255, 255, 0.7019607843); --tp-common-white-op-3: rgba(255, 255, 255, 0.3019607843); --tp-common-white-op-03: rgba(255, 255, 255, 0.3019607843); --tp-common-white-op-1: rgba(255, 255, 255, 0.1019607843); --tp-common-black-solid: #000; --tp-common-black: #03041C; --tp-common-black-2: #152E27; --tp-common-black-3: #101D2D; --tp-common-black-4: #2C2D3C; --tp-common-black-5: #090E38; --tp-common-black-6: #171C44; --tp-common-black-7: #12173E; --tp-common-black-8: #141637; --tp-common-black-9: #0D121E; --tp-common-black-10: #414651; --tp-common-black-11: #04121F; --tp-common-black-12: #111428; --tp-common-black-13: #0C0F21; --tp-common-black-14: #1F2235; --tp-common-black-15: #051214; --tp-common-black-16: #06071C; --tp-common-black-17: #0D1031; --tp-common-black-18: #050616; --tp-common-black-19: #383840; --tp-common-blue: #171871; --tp-common-blue-2: #3242EE; --tp-common-blue-3: #306AFA; --tp-common-blue-4: #2160FE; --tp-common-blue-5: #0057FC; --tp-common-blue-dark: #1B2BD7; --tp-common-khaki: #E0D1B4; --tp-common-khaki-2: #FFE4D4; --tp-common-khaki-3: #FCD2B9; --tp-common-khaki-4: #FF904F; --tp-common-purple: #6364DB; --tp-common-purple-2: #5557F3; --tp-common-purple-3: #7B62FF; --tp-common-purple-4: #7C6ADD; --tp-common-purple-5: #9542F4; --tp-common-purple-6: #5672FF; --tp-common-purple-7: #5253CE; --tp-common-purple-light: #EDEFF9; --tp-common-purple-dark: #1D1D4D; --tp-common-footer-bg: #1D1D4D; --tp-common-footer-bg-dark: #090E38; --tp-common-footer-bg-black: #12173E; --tp-common-footer-bg-black-2: #0D121E; --tp-common-footer-bg-black-3: #1F2235; --tp-common-footer-bg-black-4: #050616; --tp-common-footer-bg-green: #022B26; --tp-common-footer-bg-green-dark: #002E24; --tp-common-footer-bg-grey: #F3F3F5; --tp-common-footer-bg-grey-4: #F0F0F5; --tp-common-footer-bg-blue: #1D1D4C; --tp-common-green: #008080; --tp-common-green-2: #08AF5C; --tp-common-green-3: #03A191; --tp-common-green-4: #5EB74B; --tp-common-green-5: #14B789; --tp-common-green-6: #C9CDAA; --tp-common-green-7: #1BA930; --tp-common-green-dark: #0E3531; --tp-common-green-dark-2: #09554D; --tp-common-green-light: #7ABB8D; --tp-common-green-light-2: #E7F2F2; --tp-common-green-light-3: #E2F3F0; --tp-common-green-light-4: #DFF1EE; --tp-common-green-light-5: #D9E7DB; --tp-common-pink: #F96B6A; --tp-common-pink-2: #FF3975; --tp-common-pink-3: #F21C83; --tp-common-pink-4: #E349E3; --tp-common-pink-light: #FFEEF1; --tp-common-yellow: #FFB422; --tp-common-yellow-2: #E99A4E; --tp-common-yellow-3: #FFC062; --tp-common-yellow-4: #FFFF2B; --tp-common-yellow-5: #FFB21D; --tp-common-orange: #F46A35; --tp-common-orange-2: #EA7B50; --tp-common-orange-3: #FF8045; --tp-common-orange-4: #FF8848; --tp-common-brown: #F1E2CB; --tp-common-brown-dark: #D96800; --tp-common-brown-dark-2: #D93D1E; --tp-common-brown-light: #E8EBF0; --tp-heading-primary: #03041C; --tp-grey-1: #F1F1F1; --tp-grey-2: #F5F6F8; --tp-grey-3: #E6E6EC; --tp-grey-4: #F0F0F5; --tp-grey-5: #D4D4DD; --tp-grey-6: #D5D5DF; --tp-grey-7: #F5F5F5; --tp-grey-8: #F8F8F8; --tp-grey-9: #F3F3F3; --tp-grey-10: #F4F5FA; --tp-grey-11: #EFF1F8; --tp-grey-12: #F3F3F5; --tp-grey-13: #F8F4EE; --tp-grey-14: #F9F9F9; --tp-grey-15: #F5F5F8; --tp-grey-16: #F7F7F7; --tp-grey-17: #F0F2EE; --tp-grey-18: #F2F3F5; --tp-text-body: #525258; --tp-text-1: #525258; --tp-text-2: #A3A3AA; --tp-text-3: #B0B0B8; --tp-text-4: #BDBDC6; --tp-text-5: #EAEAEA; --tp-text-6: #5E6167; --tp-text-7: #9598B5; --tp-text-8: #898DA9; --tp-text-9: #8D90AA; --tp-text-10: #85858B; --tp-text-11: #B2B8B7; --tp-text-12: #C2C7C6; --tp-text-13: #6C6C7C; --tp-text-14: #717388; --tp-text-15: #81849B; --tp-text-16: #CACBD2; --tp-text-17: #898A94; --tp-text-18: #5E626A; --tp-text-19: #787D87; --tp-text-20: #8F98AA; --tp-text-21: #8A8D94; --tp-text-22: #7D8995; --tp-text-23: #858585; --tp-text-24: #C0C9C7; --tp-text-25: #B7B7BB; --tp-theme-1: #F50963; --tp-theme-1-dark: #C3004B; --tp-theme-2: #008080; --tp-theme-2-dark: #065454; --tp-theme-3: #F31E5E; --tp-theme-4: #AB6C56; --tp-theme-4-dark: #844B37; --tp-theme-5: #4353FF; --tp-theme-6: #3661FC; --tp-theme-7: #2CAE76; --tp-theme-8: #FF5A1B; --tp-theme-9: #03041C; --tp-theme-10: #ED212C; --tp-rgb-theme-1: 245, 9, 99; --tp-rgb-theme-1-dark: 195, 0, 75; --tp-rgb-theme-2: 0, 128, 128; --tp-rgb-theme-2-dark: 6, 84, 84; --tp-rgb-theme-3: 243, 30, 94; --tp-rgb-theme-4: 171, 108, 86; --tp-rgb-theme-4-dark: 132, 75, 55; --tp-rgb-theme-5: 67, 83, 255; --tp-rgb-theme-6: 54, 97, 252; --tp-rgb-theme-7: 44, 174, 118; --tp-rgb-theme-8: 255, 90, 27; --tp-rgb-theme-9: 3, 4, 28; --tp-rgb-theme-10: 237, 33, 44; --tp-rgb-purple: 99, 100, 219; --tp-border-1: rgba(255, 255, 255, 0.1019607843); --tp-border-2: #EAEAF0; --tp-border-3: rgba(255, 255, 255, 0.2); --tp-border-4: #EFEFF5; --tp-border-5: #EAEAEF; --tp-border-6: #CFD0DA; --tp-border-7: #E8E9F1; --tp-border-8: #F1F1F1; --tp-border-9: #EFEFEF; /** @font weight declaration */ --tp-fw-normal: normal; --tp-fw-elight: 200; --tp-fw-light: 300; --tp-fw-regular: 400; --tp-fw-medium: 500; --tp-fw-sbold: 600; --tp-fw-bold: 700; --tp-fw-ebold: 800; --tp-fw-black: 900; /** @font size declaration */ --tp-fz-body: 14px; --tp-fz-p: 14px; --tp-fz-h1: 40px; --tp-fz-h2: 36px; --tp-fz-h3: 24px; --tp-fz-h4: 20px; --tp-fz-h5: 16px; --tp-fz-h6: 14px; } /*----------------------------------------------------------------------------------- Template Name: Harry - Creative Agency & Portfolio WordPress Theme Author: Theme_Pure Support: themepurebd@gmail.com Description: Harry - Creative Agency & Portfolio WordPress Theme Version: 1.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** 01. THEME DEFAULT CSS 02. LOGO CSS 03. HEADER CSS 04. MENU CSS 05. MEAN MENU CSS 06. SLIDER CSS 07. ABOUT CSS 08. COUNTER CSS 09. SERVICES CSS 10. EVENT CSS 11. TEAM CSS 12. FAQ CSS 13. PORTFOLIO CSS 14. TESTIMONIAL CSS 15. BRAND CSS 16. SKILL CSS 17. AWARD CSS 18. CTA CSS 19. PRICING CSS 20. REVIEW CSS 21. INSTAGRAM CSS 22. CASE CSS 23. VIDEO CSS 24. HISTORY CSS 25. CONTACT CSS 26. TICKET CSS 27. FEATURES CSS 28. SUPPORT CSS 29. DONATE CSS 30. VISION CSS 31. BIOGRAPHY CSS 32. PRODUCT CSS 33. NEWSLETTER CSS 34. JOB CSS 35. LOGIN CSS 36. ERROR CSS 37. COMING CSS 38. POLICY CSS 39. HELP CSS 40. ARTICLE CSS 41. BANNER CSS 42. PROFILE CSS 43. BLOG CSS 44. FOOTER CSS **********************************************/ /*----------------------------------------*/ /* 01. THEME DEFAULT CSS START /*----------------------------------------*/ * { margin: 0; padding: 0; box-sizing: border-box; } /*--------------------------------- typography css start ---------------------------------*/ body { font-family: var(--tp-ff-body); font-size: var(--tp-fz-body); font-weight: var(--tp-fw-regular); color: var(--tp-text-body); line-height: 26px; scroll-behavior: smooth; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--tp-ff-heading); color: var(--tp-heading-primary); margin-top: 0px; font-weight: var(--tp-fw-bold); line-height: 1.2; } h1 { font-size: var(--tp-fz-h1); } h2 { font-size: var(--tp-fz-h2); } h3 { font-size: var(--tp-fz-h3); } h4 { font-size: var(--tp-fz-h4); } h5 { font-size: var(--tp-fz-h5); } h6 { font-size: var(--tp-fz-h6); } ul { margin: 0px; padding: 0px; } p { font-family: var(--tp-ff-p); font-size: var(--tp-fz-p); font-weight: var(--tp-fw-regular); color: var(--tp-text-body); margin-bottom: 15px; line-height: 26px; } a:focus, .button:focus { text-decoration: none; outline: none; } a:focus, a:hover { color: inherit; text-decoration: none; } a, button { color: inherit; outline: none; border: none; background: transparent; } button:hover { cursor: pointer; } button:focus { outline: 0; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } input[type=text], input[type=email], input[type=tel], input[type=number], input[type=password], input[type=url], textarea { outline: none; background-color: #EFF0F2; height: 54px; width: 100%; line-height: 54px; font-size: 16px; border: 2px solid #EFF0F2; color: var(--tp-common-black); padding-left: 29px; padding-right: 29px; } [dir=rtl] input[type=text], [dir=rtl] input[type=email], [dir=rtl] input[type=tel], [dir=rtl] input[type=number], [dir=rtl] input[type=password], [dir=rtl] input[type=url], [dir=rtl] textarea { text-align: right; } input[type=text]::-webkit-input-placeholder, input[type=email]::-webkit-input-placeholder, input[type=tel]::-webkit-input-placeholder, input[type=number]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder, input[type=url]::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #84848B; } input[type=text]:-moz-placeholder, input[type=email]:-moz-placeholder, input[type=tel]:-moz-placeholder, input[type=number]:-moz-placeholder, input[type=password]:-moz-placeholder, input[type=url]:-moz-placeholder, textarea:-moz-placeholder { color: #84848B; } input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=url]::-moz-placeholder, textarea::-moz-placeholder { color: #84848B; } input[type=text]:-ms-input-placeholder, input[type=email]:-ms-input-placeholder, input[type=tel]:-ms-input-placeholder, input[type=number]:-ms-input-placeholder, input[type=password]:-ms-input-placeholder, input[type=url]:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #84848B; } textarea { height: 160px; line-height: 1.2; padding-top: 20px; resize: none; } input[type=color] { appearance: none; -moz-appearance: none; -webkit-appearance: none; background: none; border: 0; cursor: pointer; height: 100%; width: 100%; padding: 0; border-radius: 50%; } *::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::-moz-selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } ::selection { background: var(--tp-common-black); color: var(--tp-common-white); text-shadow: none; } *::-moz-placeholder { color: var(--tp-common-black); font-size: var(--tp-fz-body); opacity: 1; } *::placeholder { color: var(--tp-common-black); font-size: var(--tp-fz-body); opacity: 1; } /*--------------------------------- common classes css start ---------------------------------*/ .w-img img { width: 100%; } .m-img img { max-width: 100%; } .fix { overflow: hidden; } .clear { clear: both; } .z-index-1 { z-index: 1; } .z-index-11 { z-index: 11; } .overflow-y-visible { overflow-x: hidden; overflow-y: visible; } .p-relative { position: relative; } .p-absolute { position: absolute; } .include-bg { background-position: center; background-size: cover; background-repeat: no-repeat; } .background-fixed { background-attachment: fixed; } /*---------------------------------------- Body Overlay -----------------------------------------*/ .body-overlay { background-color: var(--tp-common-black); height: 100%; width: 100%; position: fixed; top: 0; z-index: 999; left: 0; opacity: 0; visibility: hidden; } .body-overlay:hover { cursor: pointer; } .body-overlay.opened { opacity: 0.7; visibility: visible; } /*---------------------------------------- Progress Wrap -----------------------------------------*/ @media (max-width: 575px) { .progress-wrap { right: 15px; bottom: 15px; } } .tp-pagination ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .tp-pagination ul li { list-style: none; margin-bottom: 20px; transition: none; } .tp-pagination ul li:not(:last-child) { margin-right: 5px; } [dir=rtl] .tp-pagination ul li:not(:last-child) { margin-right: 0; margin-left: 5px; } .tp-pagination ul li a, .tp-pagination ul li span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 20px; color: var(--tp-text-1); min-height: 44px; min-width: 44px; line-height: 44px; text-align: center; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .tp-pagination ul li a:hover, .tp-pagination ul li a.current, .tp-pagination ul li span:hover, .tp-pagination ul li span.current { background: var(--tp-theme-1); color: var(--tp-common-white); border-color: var(--tp-theme-1); } .tp-pagination ul li a svg, .tp-pagination ul li a i, .tp-pagination ul li span svg, .tp-pagination ul li span i { margin-left: 2px; } [dir=rtl] .tp-pagination ul li a svg, [dir=rtl] .tp-pagination ul li a i, [dir=rtl] .tp-pagination ul li span svg, [dir=rtl] .tp-pagination ul li span i { margin-right: 2px; margin-left: 0; } .tp-pagination ul li a svg, .tp-pagination ul li span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-pagination ul li a.page-numbers { padding: 12px 19px; line-height: 1.2; } .tp-pagination ul li a.tp-pagination-prev svg, .tp-pagination ul li a.tp-pagination-prev i { margin-left: 0; margin-right: 2px; } .tp-pagination-style-2 ul li a, .tp-pagination-style-2 ul li span { border: 1px solid #EAEAEF; line-height: 42px; box-shadow: none; } .tp-pagination.tp-pagination-style-2.mt-20 { margin-top: 0; } .tp-pagination.tp-pagination-style-2.mt-20 ul { margin-top: 20px; } .tp-pagination.mt-20 { margin-top: 0; } .tp-pagination.mt-20 ul { margin-top: 20px; } .tp-blog-area .tp-pagination ul { padding-left: 0; margin-bottom: 0; } [dir=rtl] .nice-select { float: right; text-align: right !important; } .nice-select::after { border: none; background-color: transparent; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); margin-top: 0; right: 0; content: "\f107"; font-family: var(--tp-ff-fontawesome); transform-origin: center; color: var(--tp-common-black); font-weight: 500; height: auto; width: auto; } [dir=rtl] .nice-select::after { right: auto; left: 0; } [dir=rtl] .nice-select .option { text-align: right; } .nice-select.open::after { -webkit-transform: translateY(-50%) rotate(-180deg); -moz-transform: translateY(-50%) rotate(-180deg); -ms-transform: translateY(-50%) rotate(-180deg); -o-transform: translateY(-50%) rotate(-180deg); transform: translateY(-50%) rotate(-180deg); } .tp-thumb-overlay { position: absolute; content: ""; top: 0; left: 0%; width: 0%; height: 100%; background-color: var(--tp-grey-4); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: tpoverlay; animation-name: tpoverlay; animation-delay: 0.3s; animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86); animation-duration: 1s; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: both; z-index: 99; } @-webkit-keyframes tpoverlay { 0%, 100% { width: 0%; left: 0%; } 50% { width: 100%; left: 0%; } 100% { left: 100%; } } @-moz-keyframes tpoverlay { 0%, 100% { width: 0%; left: 0%; } 50% { width: 100%; left: 0%; } 100% { left: 100%; } } @-ms-keyframes tpoverlay { 0%, 100% { width: 0%; left: 0%; } 50% { width: 100%; left: 0%; } 100% { left: 100%; } } @keyframes tpoverlay { 0%, 100% { width: 0%; left: 0%; } 50% { width: 100%; left: 0%; } 100% { left: 100%; } } .tp-gx-6 { --bs-gutter-x: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-gx-6 { --bs-gutter-x: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-gx-6 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-gx-6 { --bs-gutter-x: 30px; } } @media (max-width: 575px) { .tp-gx-6 { --bs-gutter-x: 15px; } } .tp-gx-6 [class*=col-] { padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .tp-gx-4 { --bs-gutter-x: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-gx-4 { --bs-gutter-x: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-gx-4 { --bs-gutter-x: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-gx-4 { --bs-gutter-x: 30px; } } @media (max-width: 575px) { .tp-gx-4 { --bs-gutter-x: 15px; } } .tp-gx-4 [class*=col-] { padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .tp-gx-20 { --bs-gutter-x: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-gx-20 { --bs-gutter-x: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-gx-20 { --bs-gutter-x: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-gx-20 { --bs-gutter-x: 15px; } } @media (max-width: 575px) { .tp-gx-20 { --bs-gutter-x: 10px; } } .tp-gx-20 [class*=col-] { padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } .bg-luminosity { background-blend-mode: luminosity; } .tp-bg-no-repeat { background-repeat: no-repeat; background-repeat: repeat-x; } .tp-product-quantity { width: 148px; position: relative; } .tp-cart-plus, .tp-cart-minus { width: 45px; height: 44px; line-height: 44px; display: inline-block; text-align: center; font-size: 16px; color: var(--tp-common-black); position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .tp-cart-plus::after, .tp-cart-minus::after { position: absolute; content: ""; width: 1px; height: 26px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 0; background-color: #DADCE0; } .tp-cart-plus svg, .tp-cart-minus svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-cart-plus:hover, .tp-cart-minus:hover { cursor: pointer; color: var(--tp-theme-1); } .tp-cart-plus.tp-cart-plus, .tp-cart-minus.tp-cart-plus { left: auto; right: 0; } .tp-cart-plus.tp-cart-plus::after, .tp-cart-minus.tp-cart-plus::after { left: 0; right: auto; } .tp-cart-input[type=text] { height: 44px; text-align: center; font-size: 14px; border: 1px solid #DADCE0; background-color: var(--tp-common-white); padding: 0 45px; } [dir=rtl] .tp-cart-input[type=text] { text-align: center; } .tp-cart-input[type=text]:focus { outline: none; } .back-to-top-wrapper { position: fixed; right: 50px; bottom: 0; height: 44px; width: 44px; cursor: pointer; display: block; border-radius: 50%; z-index: 99; opacity: 0; visibility: hidden; } [dir=rtl] .back-to-top-wrapper { right: auto; left: 50px; } @media (max-width: 575px) { .back-to-top-wrapper { right: 20px; bottom: 20px; } [dir=rtl] .back-to-top-wrapper { right: auto; left: 20px; } } .back-to-top-wrapper.back-to-top-btn-show { visibility: visible; opacity: 1; bottom: 50px; } .back-to-top-btn { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; background: var(--tp-common-black); box-shadow: 0px 8px 16px rgba(3, 4, 28, 0.3); color: var(--tp-common-white); border-radius: 50%; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .back-to-top-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .back-to-top-btn:hover { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } .tp-separator { width: 100%; height: 1px; background-color: var(--tp-border-5); } .tp-separator-white { background-color: var(--tp-common-white); } div.tp-height-100vh { height: 100vh; } /* event plugin css */ .etn-single-event-ticket-wrap, .etn-widget.etn-add-calender-url, .etn-widget.etn-event-organizers { margin-top: 30px; } .etn-event-form-parent.etn-ticket-variation .ticket-header { color: var(--tp-theme-1); } .etn-widget.etn-add-calender-url { margin-top: 35px; } .etn-widget.etn-add-calender-url ul li a:hover { background-color: var(--tp-theme-1); } .etn-widget.etn-add-calender-url ul li a:hover p { color: #fff; } div.etn-variable-ticket-widget .etn-variable-total-price { border-color: var(--tp-theme-1); } input.etn-btn.etn-primary { background-color: var(--tp-theme-1); } input.etn-btn.etn-primary:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } /* donation plugin */ .tp-donation { background-color: #f0f0f5; } .tp-donation .give-form-title, .tp-donation .give-goal-progress, .tp-donation .give_error.give_warning { display: none; } .tp-donation .give-donation-level-btn { display: inline-block; min-width: 90px; height: 60px; line-height: 60px; text-align: center; background: var(--tp-common-white); border: 0; outline: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); border-radius: 6px; font-size: 18px; font-family: var(--tp-ff-space); padding: 0 15px; color: var(--tp-text-body); } .tp-donation .give-donation-level-btn.give-default-level, .tp-donation .give-donation-level-btn:hover { box-shadow: 0px 30px 40px rgba(3, 4, 28, 0.1); } .tp-donation [id*=give-form].give-display-modal .give-btn, .tp-donation [id*=give-form].give-display-reveal .give-btn { padding: 0 15px; } .tp-donation .give-form { display: flex; align-items: center; justify-content: center; padding: 0 13px; flex-wrap: wrap; } .tp-donation .give-btn:not(.give-donation-level-btn) { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; text-align: center; color: var(--tp-common-white); box-shadow: 0px 6px 10px rgba(133, 24, 36, 0.3); border-radius: 6px; padding: 18px 31px 20px !important; background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); position: relative; z-index: 1; transition: transform 0.2s ease-in-out; margin-bottom: 36px !important; } .tp-donation .give-btn:not(.give-donation-level-btn):hover { box-shadow: 0px 4px 10px rgba(150, 21, 35, 0.3); color: var(--tp-common-white); -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } .tp-donation div.give-donation-amount { display: inline-block; min-width: 90px; height: 60px; line-height: 60px; text-align: center; background: var(--tp-common-white); border: 0; outline: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); border-radius: 6px; font-size: 18px; font-family: var(--tp-ff-space); padding: 0 10px; padding-right: 7px; } form[id*=give-form] .give-donation-amount input#give-amount { border: 0; padding: 0; } form[id*=give-form] .give-donation-amount .give-currency-symbol.give-currency-position-before { padding: 0; background-color: var(--tp-common-white); border: 0; margin-right: 3px; color: var(--tp-text-body); } form[id*=give-form] .give-donation-amount input.give-amount-top { width: 60px; min-width: 60px; padding: 0 15px; } div.give-donation-amount.form-row-wide { display: flex; align-items: center; justify-content: center; margin-bottom: 35px; } form[id*=give-form] .give-donation-amount #give-amount, form[id*=give-form] .give-donation-amount #give-amount-text { color: var(--tp-text-body); min-width: 60px; background: transparent; } div.give-total-wrap { margin-right: 20px; } [dir=rtl] div.give-total-wrap { margin-right: 0; margin-left: 20px; } #give-donation-level-button-wrap > li { margin-right: 18px; } [dir=rtl] #give-donation-level-button-wrap > li { margin-right: 0; margin-left: 18px; } form[id*=give-form] .form-row input[type=text][id*=give-first], form[id*=give-form] .form-row input[type=text][id*=give-last] { width: 100%; height: 60px; border: 1px solid var(--tp-grey-15); outline: 0; background-color: var(--tp-grey-15); color: var(--tp-common-black); padding: 0 25px; } form[id*=give-form] .form-row input[type=text][id*=give-first]:focus, form[id*=give-form] .form-row input[type=text][id*=give-last]:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } form[id*=give-form] .form-row input[type=email][id*=give-email] { width: 100%; height: 60px; border: 1px solid var(--tp-grey-15); outline: 0; background-color: var(--tp-grey-15); color: var(--tp-common-black); padding: 0 25px; } form[id*=give-form] .form-row input[type=email][id*=give-email]:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } input[id*=give-purchase-button] { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; text-align: center; color: var(--tp-common-white); box-shadow: 0px 6px 10px rgba(133, 24, 36, 0.3); border-radius: 6px; padding: 14px 31px 16px; background: none; background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); position: relative; z-index: 1; transition: transform 0.2s ease-in-out; border: 0; } input[id*=give-purchase-button]:hover { color: var(--tp-common-white); -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); background: transparent; background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); } form[id*=give-form] #give-final-total-wrap .give-donation-total-label { background-color: transparent; border: none; box-sizing: border-box; color: #333; float: left; font-size: 18px; height: 35px; line-height: 35px; margin: 0; padding: 0 0; } form[id*=give-form] #give-final-total-wrap .give-final-total-amount { background: transparent; border: 0; padding: 0 0; margin-left: 7px; } form.give-form-wrap { padding: 50px; } .give_error, .give_success, .give_warning { width: 100%; } .zoom-instagram .zoom-instagram-widget__items.layout-fullwidth { display: block !important; } .zoom-instagram-widget__item { transition: inherit !important; } .instagram__open-icon .zoom-instagram-widget__item .zoom-instagram-widget__item-inner-wrap .zoom-instagram-icon-wrap a.zoom-svg-instagram-stroke { display: inline-block; position: absolute; top: 70%; left: 50%; width: 0; height: 0; z-index: 1; line-height: 0; border: 0; text-align: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; color: var(--tp-common-white); visibility: hidden; opacity: 0; background: none; } .zoom-instagram-widget__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; } /*-- - Spacing -----------------------------------------*/ .header-box-plr-55 { padding-left: 55px; padding-right: 55px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-box-plr-55 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-box-plr-55 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-box-plr-55 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .header-box-plr-55 { padding-left: 0; padding-right: 0; } } .header-box-plr-245 { padding-left: 245px; padding-right: 245px; } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .header-box-plr-245 { padding-left: 120px; padding-right: 120px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .header-box-plr-245 { padding-left: 100px; padding-right: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-box-plr-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-box-plr-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-box-plr-245 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-box-plr-245 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-box-plr-245 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .header-box-plr-245 { padding-left: 0; padding-right: 0; } } /* for home 5 */ .header-box-plr-5-245 { padding-left: 245px; padding-right: 245px; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .header-box-plr-5-245 { padding-left: 200px; padding-right: 200px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .header-box-plr-5-245 { padding-left: 160px; padding-right: 160px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .header-box-plr-5-245 { padding-left: 100px; padding-right: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header-box-plr-5-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-box-plr-5-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header-box-plr-5-245 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header-box-plr-5-245 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header-box-plr-5-245 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .header-box-plr-5-245 { padding-left: 0; padding-right: 0; } } /* for home 6 */ .box-plr-6-245 { padding-left: 245px; padding-right: 245px; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .box-plr-6-245 { padding-left: 200px; padding-right: 200px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .box-plr-6-245 { padding-left: 160px; padding-right: 160px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .box-plr-6-245 { padding-left: 100px; padding-right: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .box-plr-6-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .box-plr-6-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .box-plr-6-245 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .box-plr-6-245 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .box-plr-6-245 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .box-plr-6-245 { padding-left: 0; padding-right: 0; } } /* for home 3*/ .box-plr-245 { padding-left: 245px; padding-right: 245px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .box-plr-245 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .box-plr-245 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .box-plr-245 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .box-plr-245 { padding-left: 0; padding-right: 0; } } /* for home 5*/ .box-plr-5-245 { padding-left: 245px; padding-right: 245px; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .box-plr-5-245 { padding-left: 200px; padding-right: 200px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .box-plr-5-245 { padding-left: 160px; padding-right: 160px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .box-plr-5-245 { padding-left: 100px; padding-right: 100px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .box-plr-5-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .box-plr-5-245 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .box-plr-5-245 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .box-plr-5-245 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .box-plr-5-245 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .box-plr-5-245 { padding-left: 0; padding-right: 0; } } .box-plr-55 { padding-left: 55px; padding-right: 55px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .box-plr-55 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .box-plr-55 { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .box-plr-55 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .box-plr-55 { padding-left: 0; padding-right: 0; } } .box-plr-15 { padding-left: 15px; padding-right: 15px; } @media (max-width: 575px) { .box-plr-15 { padding-left: 0; padding-right: 0; } } /* for home 8*/ .box-plr-145 { padding-left: 145px; padding-right: 145px; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .box-plr-145 { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .box-plr-145 { padding-left: 65px; padding-right: 65px; } } @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) { .box-plr-145 { padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .box-plr-145 { padding-left: 0; padding-right: 0; } } .slider-mt-50 { margin-top: -51px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider-mt-50 { margin-top: 0; } } .pt-220 { padding-top: 220px; } .pt-210 { padding-top: 210px; } .mb-8 { margin-bottom: 8px; } .mt--30 { margin-top: -30px; } .pt-13 { padding-top: 13px; } /*----------------------------------------*/ /* SETTINGS CSS START /*----------------------------------------*/ .tp-theme-settings-area { position: fixed; top: 50%; left: 0; width: 240px; background-color: #fff; border: 1px solid #EAEAEF; -webkit-transform: translateY(-50%) translateX(-100%); -moz-transform: translateY(-50%) translateX(-100%); -ms-transform: translateY(-50%) translateX(-100%); -o-transform: translateY(-50%) translateX(-100%); transform: translateY(-50%) translateX(-100%); z-index: 991; direction: ltr; border-bottom-right-radius: 4px; } .tp-theme-settings-area.settings-opened { -webkit-transform: translateY(-50%) translateX(0%); -moz-transform: translateY(-50%) translateX(0%); -ms-transform: translateY(-50%) translateX(0%); -o-transform: translateY(-50%) translateX(0%); transform: translateY(-50%) translateX(0%); } .tp-theme-settings-area.settings-opened .tp-theme-settings-gear { opacity: 0; } .tp-theme-settings-area.settings-opened .tp-theme-settings-close { opacity: 1; } .tp-theme-settings-open { position: absolute; top: -1px; left: 100%; } .tp-theme-settings-open button { background-color: var(--tp-common-white); border: 1px solid #EAEAEF; border-left: 0; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 24px; color: var(--tp-common-black); position: relative; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .tp-theme-settings-gear { display: inline-block; -webkit-animation: spin 4s linear infinite; -moz-animation: spin 4s linear infinite; animation: spin 4s linear infinite; } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .tp-theme-settings-close { display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; } .tp-theme-header-title { font-size: 16px; font-weight: 600; margin-bottom: 30px; } .tp-theme-wrapper { padding: 20px 30px 30px; } .tp-theme-toggle { text-align: center; } .tp-theme-toggle-main { display: inline-block; width: 160px; margin: auto; position: relative; z-index: 1; background-color: #f0f0f5; padding: 4px; border-radius: 20px; } .tp-theme-toggle-light, .tp-theme-toggle-dark { display: inline-block; width: 48%; height: 26px; line-height: 26px; } .tp-theme-toggle input { display: none; } .tp-theme-toggle:hover { cursor: pointer; } .tp-theme-toggle label { color: var(--tp-common-black); font-size: 14px; font-weight: 500; } .tp-theme-toggle label:hover { cursor: pointer; } .tp-theme-toggle #tp-theme-toggler { display: none; } .tp-theme-toggle #tp-theme-toggler:checked + i { right: calc(50% - 4px); } .tp-theme-toggle-slide { position: absolute; top: 50%; right: 4px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 50%; height: 26px; color: var(--tp-common-black); background-color: var(--tp-common-white); border-radius: 30px; -webkit-transform: translate3d(0, 0); transform: translate3d(0, 0); -webkit-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); -o-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1; } .tp-theme-dir { text-align: center; } .tp-theme-dir-main { display: inline-block; width: 160px; margin: auto; position: relative; z-index: 1; background-color: #f0f0f5; padding: 4px; border-radius: 20px; } .tp-theme-dir-ltr, .tp-theme-dir-rtl { display: inline-block; width: 48%; height: 26px; line-height: 26px; } .tp-theme-dir input { display: none; } .tp-theme-dir:hover { cursor: pointer; } .tp-theme-dir label { color: var(--tp-common-black); font-size: 14px; font-weight: 500; } .tp-theme-dir label:hover { cursor: pointer; } .tp-theme-dir #tp-dir-toggler { display: none; } .tp-theme-dir #tp-dir-toggler:checked + i { right: calc(50% - 4px); } .tp-theme-dir-slide { position: absolute; top: 50%; right: 4px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 50%; height: 26px; color: var(--tp-common-black); background-color: var(--tp-common-white); border-radius: 30px; -webkit-transform: translate3d(0, 0); transform: translate3d(0, 0); -webkit-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); -o-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1; } .tp-theme-color-item.active button::before { opacity: 1; visibility: visible; } .tp-theme-color-btn { width: 100%; height: 40px; line-height: 40px; text-align: center; position: relative; } .tp-theme-color-btn::before { position: absolute; content: "\f00c"; font-weight: 600; font-family: var(--tp-ff-fontawesome); color: var(--tp-common-white); font-size: 16px; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; visibility: hidden; } .tp-theme-color-btn.tp-color-settings-btn[data-color="#F50963"] { background-color: #F50963; } .tp-theme-color-btn.tp-color-settings-btn[data-color="#008080"] { background-color: #008080; } .tp-theme-color-btn.tp-color-settings-btn[data-color="#F31E5E"] { background-color: var(--tp-theme-3); } .tp-theme-color-btn.tp-color-settings-btn[data-color="#AB6C56"] { background-color: var(--tp-theme-4); color: black; } .tp-theme-color-btn.tp-color-settings-btn[data-color="#4353FF"] { background-color: var(--tp-theme-5); } .tp-theme-color-btn.tp-color-settings-btn[data-color="#3661FC"] { background-color: var(--tp-theme-6); } .tp-theme-color-btn.tp-color-settings-btn[data-color="#2CAE76"] { background-color: var(--tp-theme-7); } .tp-theme-color-btn.tp-color-settings-btn[data-color="#FF5A1B"] { background-color: var(--tp-theme-8); } .tp-theme-color-btn.tp-color-settings-btn[data-color="#03041C"] { background-color: var(--tp-theme-9); } .tp-theme-color-btn.tp-color-settings-btn[data-color="#ED212C"] { background-color: var(--tp-theme-10); } .tp-theme-color-input { margin-top: 15px; } .tp-theme-color-input h6 { font-size: 14px; font-weight: 600; margin-bottom: 5px; } .tp-theme-color-input label { display: inline-block; width: 100%; height: 40px; line-height: 40px; text-align: center; background-color: var(--tp-theme-1); } .tp-theme-color-input label:hover { cursor: pointer; } .tp-theme-color-input input { display: none; } /*----------------------------------------*/ /* ALL Button CSS START /*----------------------------------------*/ /* pulse btn */ .pulse-btn { display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; background-color: var(--tp-common-white); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; color: var(--tp-common-black); animation: pulse 2s infinite; } .pulse-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-black); } .pulse-btn i { padding-left: 2px; } .tp-pulse-border { border-radius: 50%; z-index: 1; } .tp-pulse-border::after, .tp-pulse-border::before { position: absolute; content: ""; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); animation: borderanimate2 2s linear infinite; animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; z-index: -1; } .tp-pulse-border::before { animation-delay: 0.7s; } .tp-pulse-btn-2 { position: relative; } .tp-pulse-btn-2-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } .tp-pulse-btn-2::after, .tp-pulse-btn-2::before, .tp-pulse-btn-2-inner::after { content: " "; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; -webkit-animation: tp-pulse-btn-effect 3s infinite; animation: tp-pulse-btn-effect 3s infinite; opacity: 0.6; z-index: -1; -webkit-animation-delay: 0.9s; animation-delay: 0.9s; } .tp-pulse-btn-2::after { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; } .tp-pulse-btn-2-inner::after { -webkit-animation-delay: 0s; animation-delay: 0s; } /* hambur btn */ .hamburger-btn { width: 34px; height: 24px; position: relative; cursor: pointer; background: transparent; border: 0; outline: 0; } .hamburger-btn span { display: inline-block; position: absolute; left: 0; background: var(--tp-common-white); height: 2px; width: 25px; opacity: 1; z-index: 1; border-radius: 10px; } .hamburger-btn span:nth-child(1) { top: 0; } .hamburger-btn span:nth-child(2) { top: 10px; width: 14px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .hamburger-btn span:nth-child(3) { top: 20px; right: 0; left: auto; } .hamburger-btn:hover span:nth-child(1) { left: 10px; } .hamburger-btn:hover span:nth-child(3) { right: 10px; } .hamburger-btn-black { height: 15px; width: 30px; top: -4px; } .hamburger-btn-black span { background-color: var(--tp-common-black-2); } .hamburger-btn-black span:nth-child(1) { top: 0; } .hamburger-btn-black span:nth-child(2) { top: 7px; } .hamburger-btn-black span:nth-child(3) { top: 14px; } .hamburger-btn-black:hover span { background-color: var(--tp-theme-1); } .hamburger-btn-brown { height: 15px; width: 30px; top: -4px; } .hamburger-btn-brown span { background-color: var(--tp-theme-4); } .hamburger-btn-brown span:nth-child(1) { top: 0; } .hamburger-btn-brown span:nth-child(2) { top: 7px; } .hamburger-btn-brown span:nth-child(3) { top: 14px; } .hamburger-btn-red { height: 15px; width: 30px; top: -4px; } .hamburger-btn-red span:nth-child(1) { top: 0; } .hamburger-btn-red span:nth-child(2) { top: 7px; } .hamburger-btn-red span:nth-child(3) { top: 14px; } .hamburger-btn-red:hover span { background-color: var(--tp-theme-10); } .hamburger-btn-blue:hover span { background-color: var(--tp-theme-5); } .hamburger-btn-text { position: relative; margin-left: 50px; width: 32px; height: 12px; top: -5px; } .hamburger-btn-text::after { position: absolute; content: attr(data-menu-text); top: 1px; left: -50px; font-size: 13px; font-weight: 600; color: var(--tp-common-black); text-transform: uppercase; font-family: var(--tp-ff-syne); line-height: 1; } .hamburger-btn-text span { display: inline-block; position: absolute; left: 0; background: var(--tp-common-black); height: 2px; width: 23px; opacity: 1; z-index: 1; border-radius: 10px; } .hamburger-btn-text span:nth-child(1) { top: 0; } .hamburger-btn-text span:nth-child(2) { top: 6px; width: 12px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .hamburger-btn-text span:nth-child(3) { top: 12px; right: 0; left: auto; width: 24px; } .hamburger-btn-text:hover { color: var(--tp-common-white); } .hamburger-btn-text:hover::after { color: var(--tp-common-white); } .hamburger-btn-text:hover span { background: var(--tp-common-white); } .hamburger-btn-8 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 20px; color: #FFFFFF; position: relative; cursor: pointer; padding-right: 35px; } .hamburger-btn-8::after, .hamburger-btn-8::before { position: absolute; content: ""; right: 0; bottom: 5px; width: 22px; height: 2px; background-color: var(--tp-common-white); border-radius: 5px; } .hamburger-btn-8::after { top: 6px; bottom: auto; width: 10px; } .hamburger-btn-8:hover::after { width: 22px; } .hamburger-btn-8:hover::before { width: 10px; } .hamburger-btn-8-black { font-family: var(--tp-ff-syne); color: var(--tp-common-black); } .hamburger-btn-8-black::after, .hamburger-btn-8-black::before { background-color: var(--tp-common-black); } .tp-link-btn-circle span { display: inline-block; position: relative; margin-left: 5px; width: 34px; height: 34px; line-height: 29px; text-align: center; border: 2px solid rgba(3, 4, 28, 0.1); border-radius: 50%; overflow: hidden; -webkit-transform: translateY(12px); -moz-transform: translateY(12px); -ms-transform: translateY(12px); -o-transform: translateY(12px); transform: translateY(12px); } .tp-link-btn-circle span i, .tp-link-btn-circle span svg { transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; } .tp-link-btn-circle span i:last-child, .tp-link-btn-circle span svg:last-child { position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-20px); opacity: 0; } .tp-link-btn-circle:hover span i:first-child, .tp-link-btn-circle:hover span svg:first-child { -webkit-transform: translateX(15px); -moz-transform: translateX(15px); -ms-transform: translateX(15px); -o-transform: translateX(15px); transform: translateX(15px); opacity: 0; } .tp-link-btn-circle:hover span i:last-child, .tp-link-btn-circle:hover span svg:last-child { -webkit-transform: translateY(-51%) translateX(-53%); -moz-transform: translateY(-51%) translateX(-53%); -ms-transform: translateY(-51%) translateX(-53%); -o-transform: translateY(-51%) translateX(-53%); transform: translateY(-51%) translateX(-53%); opacity: 1; } .tp-link-btn-2 { position: relative; display: inline-block; } .tp-link-btn-2::after, .tp-link-btn-2::before { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--tp-common-black); } [dir=rtl] .tp-link-btn-2::after, [dir=rtl] .tp-link-btn-2::before { left: auto; right: 0; } .tp-link-btn-2::before { width: 0%; background-color: var(--tp-theme-1); transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; } .tp-link-btn-2 span { margin-left: 2px; } [dir=rtl] .tp-link-btn-2 span { margin-left: 0; margin-right: 2px; } .tp-link-btn-2 i, .tp-link-btn-2 svg { transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1); } .tp-link-btn-2 svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-link-btn-2:hover { color: var(--tp-theme-1); } .tp-link-btn-2:hover::before { width: 100%; } .tp-link-btn-2:hover i { -webkit-transform: translateX(5px); -moz-transform: translateX(5px); -ms-transform: translateX(5px); -o-transform: translateX(5px); transform: translateX(5px); } [dir=rtl] .tp-link-btn-2:hover i { -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -ms-transform: translateX(-5px); -o-transform: translateX(-5px); transform: translateX(-5px); } .tp-link-btn-2:hover svg { -webkit-transform: translate(5px, -2px); -moz-transform: translate(5px, -2px); -ms-transform: translate(5px, -2px); -o-transform: translate(5px, -2px); transform: translate(5px, -2px); } [dir=rtl] .tp-link-btn-2:hover svg { -webkit-transform: translate(-5px, -2px); -moz-transform: translate(-5px, -2px); -ms-transform: translate(-5px, -2px); -o-transform: translate(-5px, -2px); transform: translate(-5px, -2px); } .tp-link-btn-2.tp-link-btn-white { color: rgba(255, 255, 255, 0.7); padding-bottom: 3px; } .tp-link-btn-2.tp-link-btn-white::after { background-color: rgba(255, 255, 255, 0.7); } .tp-link-btn-2.tp-link-btn-white::before { background-color: var(--tp-common-white); } .tp-link-btn-2.tp-link-btn-white:hover { color: var(--tp-common-white); } .tp-custom-arrow { display: inline-block; position: relative; padding: 5px 0; min-width: 60px; } .tp-custom-arrow::after { position: absolute; content: ""; width: 16px; height: 16px; background-color: transparent; border-top: 2px solid var(--tp-common-black-16); border-right: 2px solid var(--tp-common-black-16); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); right: 0; top: 0; } [dir=rtl] .tp-custom-arrow::after { left: 0; right: auto; border-right: 0; border-left: 2px solid var(--tp-common-black-16); } .tp-custom-arrow::before { position: absolute; content: ""; width: 20px; height: 2px; background-color: var(--tp-common-black-16); top: 7px; right: -1px; } .tp-custom-arrow:hover::before { width: 60px; } /* link btn style 1 */ .tp-link-btn span { position: relative; margin-left: 5px; } .tp-link-btn span i, .tp-link-btn span svg { transition: transform 0.2s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.2s cubic-bezier(0.77, 0, 0.175, 1); margin: 0; } .tp-link-btn span i:last-child, .tp-link-btn span svg:last-child { position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-48%) translateX(-15px); -moz-transform: translateY(-48%) translateX(-15px); -ms-transform: translateY(-48%) translateX(-15px); -o-transform: translateY(-48%) translateX(-15px); transform: translateY(-48%) translateX(-15px); opacity: 0; } .tp-link-btn span svg:first-child { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .tp-link-btn.tp-link-btn-arrow span { margin-left: 0; } .tp-link-btn:hover span i:first-child, .tp-link-btn:hover span svg:first-child { -webkit-transform: translateX(15px) translateY(-1px); -moz-transform: translateX(15px) translateY(-1px); -ms-transform: translateX(15px) translateY(-1px); -o-transform: translateX(15px) translateY(-1px); transform: translateX(15px) translateY(-1px); opacity: 0; } .tp-link-btn:hover span i:last-child, .tp-link-btn:hover span svg:last-child { -webkit-transform: translateY(-48%) translateX(0); -moz-transform: translateY(-48%) translateX(0); -ms-transform: translateY(-48%) translateX(0); -o-transform: translateY(-48%) translateX(0); transform: translateY(-48%) translateX(0); opacity: 1; } /* load more btn */ .tp-load-more-btn { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; color: var(--tp-common-black); background: #FFFFFF; border: 1px solid #EAEAEF; padding: 13px 112px; } .tp-load-more-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .tp-load-more-btn svg, .tp-load-more-btn i { margin-right: 8px; } .tp-load-more-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } @media (max-width: 575px) { .tp-load-more-btn { padding-left: 50px; padding-right: 50px; } } /* mouse scroll icon */ .mouse-scroll-icon { display: inline-block; width: 24px; height: 40px; border: 2px solid rgba(3, 4, 28, 0.2); border-radius: 30px; outline: none; position: relative; } .mouse-scroll-icon:focus { border: 2px solid rgba(3, 4, 28, 0.2); } .mouse-scroll-icon::before { position: absolute; content: ""; top: 7px; left: 8px; width: 4px; height: 8px; background: #414651; border-radius: 50%; animation: scroll 1s infinite ease-in-out alternate; -webkit-animation: scroll 1s infinite ease-in-out alternate; } .mouse-scroll-icon:hover { border-color: var(--tp-common-black-3); } .mouse-scroll-icon-4 { -webkit-transform: rotate(90deg) translate(1px, 23px) !important; -moz-transform: rotate(90deg) translate(1px, 23px) !important; -ms-transform: rotate(90deg) translate(1px, 23px) !important; -o-transform: rotate(90deg) translate(1px, 23px) !important; transform: rotate(90deg) translate(1px, 23px) !important; border-color: rgba(255, 255, 255, 0.2); } .mouse-scroll-icon-4::before { position: absolute; content: ""; top: 8px; left: 7px; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: scroll 1s infinite ease-in-out alternate; -webkit-animation: scroll 1s infinite ease-in-out alternate; } .mouse-scroll-icon-4:hover { border-color: var(--tp-common-white); } .mouse-scroll-icon-4:focus { border-color: var(--tp-common-white); } .mouse-scroll { position: absolute; bottom: 30px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 1; } .mouse-scroll-btn { display: inline-block; width: 24px; height: 40px; border: 2px solid var(--tp-border-3); border-radius: 30px; outline: none; } .mouse-scroll-btn:focus { border: 2px solid var(--tp-common-white); } .mouse-scroll-btn::before { position: absolute; content: ""; top: 8px; left: 9px; width: 6px; height: 6px; background: #fff; border-radius: 50%; animation: scroll 1s infinite ease-in-out alternate; -webkit-animation: scroll 1s infinite ease-in-out alternate; } .mouse-scroll-btn:hover { border-color: var(--tp-common-white); } .mouse-scroll-btn-2 { border-color: rgba(3, 4, 28, 0.2); } .mouse-scroll-8 { left: 25%; bottom: 40px; } @media (max-width: 575px) { .mouse-scroll-8 { left: 7%; } } /* theme btn */ .tp-btn { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background: var(--tp-theme-1); text-align: center; font-family: var(--tp-ff-space); padding: 10px 30px; position: relative; z-index: 1; overflow: hidden; letter-spacing: -0.02em; } .tp-btn i, .tp-btn svg { margin-left: 5px; } [dir=rtl] .tp-btn i, [dir=rtl] .tp-btn svg { margin-left: 0; margin-right: 5px; } .tp-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-purple); } .tp-btn:focus { color: var(--tp-common-white); } .tp-btn-black { background-color: var(--tp-common-black); color: var(--tp-common-white); font-size: 15px; padding: 8px 29px 10px; } .tp-btn-black:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .tp-btn-2 { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background: var(--tp-theme-3); text-align: center; font-family: var(--tp-ff-space); padding: 17px 56px; position: relative; z-index: 1; overflow: hidden; } .tp-btn-2 i { padding-left: 5px; } .tp-btn-2:hover { color: var(--tp-common-black-5); background-color: var(--tp-common-white); } .tp-btn-2:focus { color: var(--tp-common-white); } .tp-btn-3 { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background: var(--tp-theme-3); text-align: center; font-family: var(--tp-ff-space); padding: 15px 40px; position: relative; z-index: 1; overflow: hidden; text-transform: capitalize; border: 2px solid var(--tp-theme-3); } .tp-btn-3 i { padding-left: 5px; } .tp-btn-3:hover { color: var(--tp-common-black-5); background-color: var(--tp-common-white); } .tp-btn-3:focus { color: var(--tp-common-white); } .tp-btn-3.--hover-style-2:hover { color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.14); background-color: transparent; } .tp-btn-4 { display: inline-block; font-size: 18px; font-weight: 500; color: var(--tp-common-white); background: var(--tp-theme-8); text-align: center; font-family: var(--tp-ff-space); padding: 13px 41px 15px; position: relative; z-index: 1; } .tp-btn-4 i { padding-left: 5px; } .tp-btn-4:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-btn-4:focus { color: var(--tp-common-white); } .tp-btn-5 { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--tp-common-white); background-color: var(--tp-common-black); padding: 17px 33px; position: relative; } .tp-btn-5::after { position: absolute; content: ""; left: 8px; top: 8px; width: 100%; height: 100%; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); z-index: -1; } .tp-btn-5 i, .tp-btn-5 svg { margin-left: 5px; } .tp-btn-5:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-btn-5:hover::after { top: 0; left: 0; } .tp-btn-5-white { padding: 14px 31px; background-color: var(--tp-common-white); color: var(--tp-common-black); } .tp-btn-5-white:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); } .tp-btn-6 { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 700; font-size: 13px; text-transform: uppercase; color: var(--tp-common-white); background-color: var(--tp-common-black); padding: 15px 33px; border: 2px solid var(--tp-common-black); } .tp-btn-6 i, .tp-btn-6 svg { margin-left: 5px; } .tp-btn-6:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-btn-7 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; text-align: center; color: var(--tp-common-white); box-shadow: 0px 6px 10px rgba(133, 24, 36, 0.3); border-radius: 6px; padding: 14px 31px 16px; background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); position: relative; z-index: 1; transition: transform 0.2s ease-in-out; } .tp-btn-7 i, .tp-btn-7 svg { margin-left: 5px; } .tp-btn-7:hover { color: var(--tp-common-white); -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } .tp-btn-7-sm { padding: 13px 36px 15px; } .tp-btn-8 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; text-align: center; color: var(--tp-common-white); padding: 14px 33px 16px; background: var(--tp-common-purple-7); border-radius: 6px; } .tp-btn-8 i, .tp-btn-8 svg { margin-left: 5px; } .tp-btn-8:hover { color: var(--tp-common-white); background-position: 200% 200%; box-shadow: 0px 6px 10px rgba(99, 9, 19, 0.3); } .tp-btn-9 { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-black); border: 1px solid var(--tp-common-black); padding: 18px 30px 18px; } .tp-btn-9 span { margin-left: 5px; } .tp-btn-9 svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .tp-btn-9:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-btn-10 { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-white); border: 1px solid var(--tp-theme-1); background-color: var(--tp-theme-1); padding: 19px 30px 19px; } .tp-btn-10 span { margin-left: 5px; } .tp-btn-10 svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-btn-10:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); } .tp-btn-11 { display: inline-block; font-weight: 500; font-size: 15px; color: var(--tp-common-black-11); background: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(4, 18, 31, 0.1); border-radius: 25px; padding: 10px 34px; } .tp-btn-11:hover { background-color: var(--tp-theme-7); color: var(--tp-common-white); } .tp-btn-green { display: inline-block; font-size: 16px; font-weight: 500; color: var(--tp-common-white); background: var(--tp-theme-2); text-align: center; font-family: var(--tp-ff-oswald); padding: 12px 42px; position: relative; z-index: 1; overflow: hidden; text-transform: uppercase; } .tp-btn-green i { padding-left: 5px; } .tp-btn-green:hover { color: var(--tp-common-white); background: var(--tp-theme-2-dark); } .tp-btn-green:focus { color: var(--tp-common-white); } .tp-btn-white { display: inline-block; font-size: 16px; font-weight: 400; color: var(--tp-common-black); background: var(--tp-common-white); text-align: center; font-family: var(--tp-ff-oswald); padding: 7px 29px 8px; position: relative; z-index: 1; text-transform: uppercase; box-shadow: 0px 2px 2px rgba(0, 128, 128, 0.1); } .tp-btn-white i { padding-left: 5px; } .tp-btn-white:hover { color: var(--tp-common-white); background-color: var(--tp-theme-2); } .tp-btn-white:focus { color: var(--tp-common-white); } .tp-btn-white-2 { display: inline-block; font-size: 15px; font-weight: 500; color: var(--tp-common-black-3); background: var(--tp-common-white); text-align: center; padding: 12px 31px; position: relative; z-index: 1; text-transform: capitalize; font-family: var(--tp-ff-roboto); } .tp-btn-white-2 i { padding-left: 5px; } [dir=rtl] .tp-btn-white-2 i { padding-left: 0; padding-right: 5px; } .tp-btn-white-2:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); } .tp-btn-white-2:focus { color: var(--tp-common-white); } .tp-btn-white-sm { display: inline-block; font-size: 14px; font-weight: 500; color: var(--tp-common-black); background: var(--tp-common-white); text-align: center; padding: 8px 25px; position: relative; z-index: 1; border-radius: 8px; } .tp-btn-white-sm i { padding-left: 5px; } .tp-btn-white-sm:hover { box-shadow: 0px 6px 10px rgba(21, 0, 133, 0.2); color: var(--tp-common-black); } .tp-btn-white-sm:focus { color: var(--tp-common-white); } .tp-btn-purple { display: inline-block; font-size: 16px; font-weight: 400; color: var(--tp-common-white); background: var(--tp-common-purple-2); text-align: center; font-family: var(--tp-ff-oswald); padding: 7px 29px 8px; position: relative; z-index: 1; text-transform: uppercase; box-shadow: 0px 2px 2px rgba(0, 128, 128, 0.1); } .tp-btn-purple i { padding-left: 5px; } .tp-btn-purple:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-btn-purple:focus { color: var(--tp-common-white); } .tp-btn-brown { display: inline-block; font-size: 14px; color: var(--tp-common-white); padding: 11px 28px 13px; background-color: var(--tp-theme-4); font-weight: 600; letter-spacing: -0.02em; } .tp-btn-brown:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4-dark); } .tp-btn-orange { display: inline-block; font-size: 15px; color: var(--tp-common-white); padding: 12px 30px 12px; background-color: var(--tp-common-orange); font-weight: 500; letter-spacing: -0.02em; text-align: center; border-radius: 8px; } .tp-btn-orange:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); } .tp-btn-orange-2 { display: inline-block; font-size: 16px; color: var(--tp-common-white); padding: 22px 52px 21px; background-color: var(--tp-common-orange-2); font-weight: 600; letter-spacing: -0.02em; text-align: center; border-radius: 8px; } .tp-btn-orange-2:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); box-shadow: 0px 6px 10px rgba(4, 10, 72, 0.2); } .tp-btn-blue { display: inline-block; font-size: 16px; font-weight: 500; color: var(--tp-common-white); padding: 16px 45px 18px; background-color: var(--tp-theme-5); letter-spacing: -0.02em; text-align: center; border-radius: 8px; } .tp-btn-blue:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-btn-blue-2 { display: inline-block; font-size: 15px; font-weight: 500; color: var(--tp-common-white); background-color: var(--tp-theme-5); padding: 9px 24px; font-family: var(--tp-ff-roboto); } .tp-btn-blue-2 span { margin-left: 4px; } .tp-btn-blue-2:hover { color: var(--tp-common-white); background-color: var(--tp-common-black-9); } .tp-btn-blue-sm { display: inline-block; font-size: 15px; color: var(--tp-common-white); padding: 11px 30px 13px; background-color: var(--tp-theme-5); font-weight: 500; letter-spacing: -0.02em; text-align: center; border-radius: 8px; } .tp-btn-blue-sm:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-btn-grey { display: inline-block; font-size: 15px; font-weight: 500; color: var(--tp-common-black); padding: 9px 45px 9px; background-color: var(--tp-grey-10); text-align: center; border-radius: 8px; } .tp-btn-grey:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); } .tp-header-btn { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); text-transform: capitalize; padding: 22px 36px 23px; background-color: var(--tp-theme-3); } .tp-header-btn:hover { color: var(--tp-common-black-5); background-color: var(--tp-common-white); } .tp-header-btn-2 { display: inline-block; font-size: 16px; font-weight: 400; color: var(--tp-common-black); text-transform: capitalize; } .tp-header-btn-2 i { margin-right: 5px; } .tp-header-btn-2:hover { color: var(--tp-theme-7); } .tp-header-btn-3 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; text-align: center; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 6px; padding: 8px 30px 9px; } .tp-header-btn-3 i { margin-right: 5px; } .tp-header-btn-3:hover { color: var(--tp-theme-10); background-color: var(--tp-common-white); border-color: var(--tp-common-white); } .tp-btn-app { display: inline-block; font-size: 14px; font-weight: 500; color: var(--tp-text-3); padding: 0 16px; border: 2px solid var(--tp-border-1); text-align: center; min-width: 110px; } .tp-btn-app svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); margin-right: 2px; } .tp-btn-app:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); border-color: var(--tp-common-white); } .tp-btn-border { display: inline-block; font-size: 14px; font-weight: 500; color: var(--tp-common-black); font-family: var(--tp-ff-space); padding: 6px 18px; border: 1px solid var(--tp-border-5); text-align: center; } .tp-btn-border i { margin-left: 7px; margin-left: 0; margin-right: 7px; } .tp-btn-border:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .tp-btn-border-2 { display: inline-block; font-size: 16px; font-weight: 700; font-family: var(--tp-ff-space); color: var(--tp-common-white); padding: 14px 37px 16px; border: 2px solid rgba(255, 255, 255, 0.14); text-transform: capitalize; } .tp-btn-border-2 i { margin-left: 7px; } .tp-btn-border-2:hover { color: var(--tp-common-white); background-color: var(--tp-theme-3); border-color: var(--tp-theme-3); } .tp-btn-border-3 { display: inline-block; font-size: 18px; font-weight: 700; font-family: var(--tp-ff-space); color: var(--tp-common-white); padding: 14px 48px 16px; border: 2px solid rgba(255, 255, 255, 0.14); text-transform: capitalize; } .tp-btn-border-3 i { margin-left: 7px; } .tp-btn-border-3:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); border-color: var(--tp-common-white); } .tp-btn-border-4 { display: inline-block; font-size: 16px; font-weight: 700; font-family: var(--tp-ff-space); color: var(--tp-common-white); padding: 11px 43px 13px; border: 2px solid rgba(255, 255, 255, 0.14); text-transform: capitalize; } .tp-btn-border-4 i { margin-left: 7px; } .tp-btn-border-4:hover { color: var(--tp-common-white); background-color: var(--tp-theme-3); border-color: var(--tp-theme-3); } .tp-btn-border-5 { display: inline-block; font-size: 15px; font-weight: 500; color: var(--tp-common-black-9); padding: 10px 25px 10px 26px; border: 2px solid rgba(13, 18, 30, 0.1019607843); text-transform: capitalize; font-family: var(--tp-ff-roboto); } .tp-btn-border-5 span { margin-left: 3px; } .tp-btn-border-5:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); border-color: var(--tp-theme-6); } .tp-btn-border-6 { display: inline-block; font-size: 15px; font-weight: 500; color: var(--tp-common-black-9); padding: 10px 24px 11px 24px; border: 2px solid rgba(13, 18, 30, 0.1019607843); text-transform: capitalize; } .tp-btn-border-6:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); border-color: var(--tp-theme-6); } .tp-btn-border-7 { display: inline-block; padding: 11px 31px 11px 31px; border: 1.5px solid rgba(255, 255, 255, 0.1019607843); font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .tp-btn-border-7:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); border-color: var(--tp-theme-8); } .tp-btn-border-8 { display: inline-block; padding: 14px 33px 16px 33px; border: 2px solid rgba(255, 255, 255, 0.1019607843); font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: var(--tp-common-white); letter-spacing: -0.02em; } .tp-btn-border-8:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); border-color: var(--tp-theme-8); } .tp-btn-border-9 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; text-align: center; color: var(--tp-common-black); border: 2px solid #EAEAEF; position: relative; padding: 4px 30px 6px; border-radius: 6px; z-index: 1; } .tp-btn-border-9::after { position: absolute; content: ""; left: -2px; top: -2px; width: calc(100% + 4px); height: calc(100% + 4px); background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); border-radius: 6px; z-index: -1; opacity: 0; visibility: hidden; } .tp-btn-border-9:hover { color: var(--tp-common-white); box-shadow: 0px 4px 10px rgba(150, 21, 35, 0.3); -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } .tp-btn-border-9:hover::after { opacity: 1; visibility: visible; } .tp-btn-border-pink { display: inline-block; font-size: 14px; font-weight: 500; color: var(--tp-common-black); font-family: var(--tp-ff-space); padding: 6px 23px 6px; border: 1px solid var(--tp-border-5); letter-spacing: -0.02em; } .tp-btn-border-pink i, .tp-btn-border-pink svg { margin-left: 7px; } [dir=rtl] .tp-btn-border-pink i, [dir=rtl] .tp-btn-border-pink svg { margin-left: 0; margin-right: 7px; } .tp-btn-border-pink svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tp-btn-border-pink:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .tp-btn-border-pink-2 { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-theme-3); font-family: var(--tp-ff-space); padding: 17px 35px; border: 2px solid var(--tp-theme-3); border-radius: 2px; } .tp-btn-border-pink-2 i { margin-left: 7px; } .tp-btn-border-pink-2:hover { color: var(--tp-common-white); background-color: var(--tp-theme-3); border-color: var(--tp-theme-3); } .tp-btn-border-green { display: inline-block; font-size: 16px; font-weight: 400; color: var(--tp-common-black); background: transparent; text-align: center; font-family: var(--tp-ff-oswald); padding: 5px 26px 6px; position: relative; z-index: 1; text-transform: uppercase; border: 2px solid var(--tp-border-8); } .tp-btn-border-green i { padding-left: 5px; } .tp-btn-border-green:hover { color: var(--tp-common-white); background-color: var(--tp-theme-2); border-color: var(--tp-theme-2); } .tp-btn-border-green:focus { color: var(--tp-common-white); } .tp-btn-border-green-2 { display: inline-block; font-size: 16px; font-weight: 400; color: var(--tp-common-black); background: transparent; text-align: center; font-family: var(--tp-ff-oswald); padding: 5px 34px 6px; position: relative; z-index: 1; text-transform: uppercase; border: 2px solid var(--tp-border-8); } .tp-btn-border-green-2 i { padding-left: 5px; } .tp-btn-border-green-2:hover { color: var(--tp-common-white); background-color: var(--tp-theme-2); border-color: var(--tp-theme-2); } .tp-btn-border-green-2:focus { color: var(--tp-common-white); } .tp-btn-border-brown { display: inline-block; font-size: 14px; font-weight: 700; color: var(--tp-common-black); background: transparent; text-align: center; font-family: var(--tp-ff-space); padding: 10px 31px; letter-spacing: -0.02em; position: relative; z-index: 1; text-transform: capitalize; border: 2px solid var(--tp-border-5); } .tp-btn-border-brown i { padding-left: 5px; } .tp-btn-border-brown:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } .tp-btn-border-brown:focus { color: var(--tp-common-black); } .tp-btn-border-brown-sm { display: inline-block; font-size: 14px; font-weight: 700; color: var(--tp-common-black); background: transparent; text-align: center; font-family: var(--tp-ff-space); padding: 5px 23px; letter-spacing: -0.02em; position: relative; z-index: 1; text-transform: capitalize; border: 2px solid var(--tp-border-5); } .tp-btn-border-brown-sm i { padding-left: 5px; } [dir=rtl] .tp-btn-border-brown-sm i { padding-left: 0; padding-right: 5px; } .tp-btn-border-brown-sm:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } .tp-btn-border-brown-sm:focus { color: var(--tp-common-black); } .tp-btn-transparent { display: inline-block; font-size: 14px; font-weight: 700; color: var(--tp-common-white); background: transparent; text-align: center; font-family: var(--tp-ff-space); padding: 9px 31px 10px; letter-spacing: -0.02em; position: relative; z-index: 1; text-transform: capitalize; border: 2px solid rgba(255, 255, 255, 0.1); } .tp-btn-transparent i { padding-left: 5px; } [dir=rtl] .tp-btn-transparent i { padding-left: 0; padding-right: 5px; } .tp-btn-transparent:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } .tp-btn-transparent:focus { color: var(--tp-common-white); background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } .tp-btn-round { display: inline-block; color: var(--tp-theme-5); background-color: var(--tp-grey-10); font-size: 15px; font-weight: 500; text-align: center; padding: 12px 82px; border-radius: 8px; position: relative; z-index: 1; } .tp-btn-round i { padding-left: 5px; } [dir=rtl] .tp-btn-round i { padding-left: 0; padding-right: 5px; } .tp-btn-round:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); } .tp-btn-round:focus { color: var(--tp-common-black); } .tp-btn-offcanvas { display: inline-block; font-size: 14px; font-weight: 600; color: var(--tp-common-white); background: var(--tp-theme-1); text-align: center; font-family: var(--tp-ff-space); padding: 9px 22px; letter-spacing: -0.02em; position: relative; z-index: 1; text-transform: capitalize; } .tp-btn-offcanvas i { padding-left: 5px; } [dir=rtl] .tp-btn-offcanvas i { padding-left: 0; padding-right: 5px; } .tp-btn-offcanvas:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-btn-offcanvas-green { display: inline-block; font-size: 16px; font-weight: 400; color: var(--tp-common-white); background-color: var(--tp-theme-2); text-align: center; font-family: var(--tp-ff-oswald); text-transform: uppercase; padding: 9px 27px; letter-spacing: -0.02em; position: relative; z-index: 1; } .tp-btn-offcanvas-green i { padding-left: 5px; } [dir=rtl] .tp-btn-offcanvas-green i { padding-left: 0; padding-right: 5px; } .tp-btn-offcanvas-green:hover { background-color: var(--tp-theme-2-dark); color: var(--tp-common-white); } .tp-btn-offcanvas-pink { display: inline-block; font-size: 16px; font-weight: 600; color: var(--tp-common-white); background: var(--tp-theme-1); text-align: center; font-family: var(--tp-ff-space); text-transform: capitalize; padding: 11px 42px 13px; letter-spacing: -0.02em; position: relative; z-index: 1; } .tp-btn-offcanvas-pink i { padding-left: 5px; } [dir=rtl] .tp-btn-offcanvas-pink i { padding-left: 0; padding-right: 5px; } .tp-btn-offcanvas-pink:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); } .tp-btn-offcanvas-white { display: inline-block; font-size: 16px; font-weight: 500; color: var(--tp-common-black); background: var(--tp-common-white); text-align: center; font-family: var(--tp-ff-space); text-transform: capitalize; padding: 12px 42px; letter-spacing: -0.02em; position: relative; z-index: 1; border-radius: 6px; } .tp-btn-offcanvas-white i { padding-left: 5px; } [dir=rtl] .tp-btn-offcanvas-white i { padding-left: 0; padding-right: 5px; } .tp-btn-offcanvas-white:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-btn-offcanvas-blue { display: inline-block; font-size: 14px; font-weight: 600; color: var(--tp-common-white); background: var(--tp-theme-5); text-align: center; text-transform: capitalize; padding: 8px 37px 10px; letter-spacing: -0.02em; position: relative; z-index: 1; border-radius: 6px; } .tp-btn-offcanvas-blue i { padding-left: 5px; } [dir=rtl] .tp-btn-offcanvas-blue i { padding-left: 0; padding-right: 5px; } .tp-btn-offcanvas-blue:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .tp-btnr { display: inline-block; font-weight: 500; font-size: 16px; text-align: center; color: var(--tp-common-white); border-radius: 30px; padding: 10px 35px 10px; background-color: var(--tp-theme-7); overflow: hidden; position: relative; z-index: 1; } .tp-btnr:after { background: var(--tp-common-white); content: ""; height: 155px; left: -75px; opacity: 0.2; position: absolute; top: -50px; -webkit-transform: rotate(35deg); -moz-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); transform: rotate(35deg); transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1); width: 50px; z-index: -1; } .tp-btnr:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-btnr:hover:after { left: 76%; } .tp-btn-shine-effect::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.4s; transition: all 0.4s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0); } .tp-btn-shine-effect:hover::after { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0); } .tp-btn-shine-effect.effect-delay-3::after { transition: all 0.6s; transition-delay: 0.3s; } .tp-btnr-2 { display: inline-block; font-weight: 500; font-size: 15px; text-align: center; color: var(--tp-common-white); border-radius: 30px; padding: 10px 29px 10px; background-color: var(--tp-theme-7); overflow: hidden; position: relative; z-index: 1; border: 2px solid var(--tp-theme-7); } .tp-btnr-2:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .tp-btnr-yellow { display: inline-block; font-weight: 500; font-size: 15px; text-align: center; color: var(--tp-common-black-11); border-radius: 30px; padding: 13px 39px 11px; background-color: var(--tp-common-yellow-3); overflow: hidden; position: relative; z-index: 1; } .tp-btnr-border { display: inline-block; font-weight: 500; font-size: 15px; text-align: center; color: var(--tp-common-black-11); border-radius: 30px; padding: 13px 39px 14px; padding-right: 39px; background-color: transparent; overflow: hidden; position: relative; z-index: 1; border: 2px solid rgba(4, 18, 31, 0.1); border-radius: 30px; } .tp-btnr-border i { margin-left: 5px; } .tp-btnr-border:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black-11); } .tp-btnr-border-2 { display: inline-block; font-weight: 500; font-size: 15px; text-align: center; color: var(--tp-common-black-11); border-radius: 30px; padding: 10px 33px 10px 36px; background-color: transparent; overflow: hidden; position: relative; z-index: 1; border: 2px solid rgba(4, 18, 31, 0.1); border-radius: 30px; } .tp-btnr-border-2 i { margin-left: 5px; } .tp-btnr-border-2:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black-11); } .tp-cta-btn { display: inline-block; font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--tp-common-white); background-color: var(--tp-theme-7); border-radius: 30px; padding: 35px 40px 32px 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-cta-btn { padding: 35px 25px 32px 25px; } } .tp-cta-btn i { margin-left: 17px; font-size: 26px; } [dir=rtl] .tp-cta-btn i { margin-left: 0; margin-right: 17px; } .tp-cta-btn:hover { background-color: var(--tp-common-black-11); color: var(--tp-common-white); } .tp-cta-btn-yellow { display: inline-block; font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--tp-common-black-11); background-color: var(--tp-common-yellow-3); border-radius: 30px; padding: 35px 40px 32px 35px; } .tp-cta-btn-yellow i { margin-left: 17px; font-size: 26px; } [dir=rtl] .tp-cta-btn-yellow i { margin-left: 0; margin-right: 17px; } .tp-cta-btn-yellow:hover { background-color: var(--tp-common-black-11); color: var(--tp-common-white); } .tp-link-btn-3 span { margin-left: 5px; } [dir=rtl] .tp-link-btn-3 span { margin-left: 0; margin-right: 5px; } .tp-link-btn-3 i, .tp-link-btn-3 svg { margin-left: 0; } .tp-link-btn-3:hover i { animation: tp_arrow 0.2s linear; } .tp-link-btn-3:hover svg { animation: tp_arrow_svg 0.2s linear; } .tp-link-btn-4 span { margin-left: 0; } .tp-link-btn-4 i, .tp-link-btn-4 svg { margin-left: 0; } .tp-link-btn-4:hover i { animation: tp_arrow 0.2s linear; } .tp-link-btn-4:hover svg { animation: tp_arrow_svg 0.2s linear; } .tp-button-demo .tp-link-btn-2 { color: var(--tp-common-black); } .tp-button-demo .tp-link-btn-2:hover { color: var(--tp-theme-1); } .tp-button-demo .tp-link-btn-circle { color: var(--tp-common-black); } /*----------------------------------------*/ /* KEYFRAME CSS START /*----------------------------------------*/ /* pulse effect animation */ @-webkit-keyframes pulse { 0% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -webkit-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @keyframes pulse { 0% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4); } 70% { -moz-box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); box-shadow: 0 0 0 45px rgba(255, 255, 255, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } } @-webkit-keyframes scroll { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); } } @-moz-keyframes scroll { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); } } @-ms-keyframes scroll { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); } } @keyframes scroll { 0% { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } 100% { -webkit-transform: translateY(16px); -moz-transform: translateY(16px); -ms-transform: translateY(16px); -o-transform: translateY(16px); transform: translateY(16px); } } @-webkit-keyframes about-text { 0% { width: 0%; } 100% { width: 100%; } } @-moz-keyframes about-text { 0% { width: 0%; } 100% { width: 100%; } } @-ms-keyframes about-text { 0% { width: 0%; } 100% { width: 100%; } } @keyframes about-text { 0% { width: 0%; } 100% { width: 100%; } } @-webkit-keyframes faq-text { 0% { width: 0; } 100% { width: 100%; } } @-moz-keyframes faq-text { 0% { width: 0; } 100% { width: 100%; } } @-ms-keyframes faq-text { 0% { width: 0; } 100% { width: 100%; } } @keyframes faq-text { 0% { width: 0; } 100% { width: 100%; } } @-webkit-keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-moz-keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-ms-keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes sliderTitle3 { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-webkit-keyframes sectionPreTitle { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-moz-keyframes sectionPreTitle { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-ms-keyframes sectionPreTitle { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes sectionPreTitle { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-webkit-keyframes aboutGradient { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-moz-keyframes aboutGradient { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-ms-keyframes aboutGradient { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes aboutGradient { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-webkit-keyframes tprotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-moz-keyframes tprotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes tprotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes tprotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes tptranslateY { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); } } @-moz-keyframes tptranslateY { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); } } @-ms-keyframes tptranslateY { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); } } @keyframes tptranslateY { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(100px); -moz-transform: translateY(100px); -ms-transform: translateY(100px); -o-transform: translateY(100px); transform: translateY(100px); } } @-webkit-keyframes tptranslateY2 { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-moz-keyframes tptranslateY2 { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-ms-keyframes tptranslateY2 { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @keyframes tptranslateY2 { 0% { -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } 100% { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); } } @-webkit-keyframes tptranslateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } } @-moz-keyframes tptranslateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } } @-ms-keyframes tptranslateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } } @keyframes tptranslateX { 0% { -webkit-transform: translateX(-80px); -moz-transform: translateX(-80px); -ms-transform: translateX(-80px); -o-transform: translateX(-80px); transform: translateX(-80px); } 100% { -webkit-transform: translateX(30px); -moz-transform: translateX(30px); -ms-transform: translateX(30px); -o-transform: translateX(30px); transform: translateX(30px); } } @-webkit-keyframes tptranslateX2 { 0% { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @-moz-keyframes tptranslateX2 { 0% { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @-ms-keyframes tptranslateX2 { 0% { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @keyframes tptranslateX2 { 0% { -webkit-transform: translateX(-40px); -moz-transform: translateX(-40px); -ms-transform: translateX(-40px); -o-transform: translateX(-40px); transform: translateX(-40px); } 100% { -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @-webkit-keyframes pulse-2 { 0% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); } 70% { -moz-box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); } } @-moz-keyframes pulse-2 { 0% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); } 70% { -moz-box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); } } @-ms-keyframes pulse-2 { 0% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); } 70% { -moz-box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); } } @keyframes pulse-2 { 0% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0.1); } 70% { -moz-box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); box-shadow: 0 0 0 20px rgba(21, 165, 150, 0); } 100% { -moz-box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); box-shadow: 0 0 0 0 rgba(21, 165, 150, 0); } } @-webkit-keyframes gadientbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-moz-keyframes gadientbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-ms-keyframes gadientbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes gadientbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-webkit-keyframes borderRadius { 0% { border-radius: 65% 35% 50% 50%/59% 50% 50% 41%; } 100% { border-radius: 33% 67% 43% 57%/69% 24% 76% 31%; } } @-moz-keyframes borderRadius { 0% { border-radius: 65% 35% 50% 50%/59% 50% 50% 41%; } 100% { border-radius: 33% 67% 43% 57%/69% 24% 76% 31%; } } @-ms-keyframes borderRadius { 0% { border-radius: 65% 35% 50% 50%/59% 50% 50% 41%; } 100% { border-radius: 33% 67% 43% 57%/69% 24% 76% 31%; } } @keyframes borderRadius { 0% { border-radius: 65% 35% 50% 50%/59% 50% 50% 41%; } 100% { border-radius: 33% 67% 43% 57%/69% 24% 76% 31%; } } @-webkit-keyframes tpupdown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-moz-keyframes tpupdown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-ms-keyframes tpupdown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @keyframes tpupdown { 0% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); } } @-webkit-keyframes tpleftright { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-moz-keyframes tpleftright { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-ms-keyframes tpleftright { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @keyframes tpleftright { 0% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } 100% { -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } } @-webkit-keyframes tpswing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @-moz-keyframes tpswing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @-ms-keyframes tpswing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @keyframes tpswing { 0% { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); -ms-transform: rotate(6deg); -o-transform: rotate(6deg); transform: rotate(6deg); } 100% { -webkit-transform: rotate(-6deg); -moz-transform: rotate(-6deg); -ms-transform: rotate(-6deg); -o-transform: rotate(-6deg); transform: rotate(-6deg); } } @-webkit-keyframes tpscale { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: rotate(1.05); -moz-transform: rotate(1.05); -ms-transform: rotate(1.05); -o-transform: rotate(1.05); transform: rotate(1.05); } } @-moz-keyframes tpscale { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: rotate(1.05); -moz-transform: rotate(1.05); -ms-transform: rotate(1.05); -o-transform: rotate(1.05); transform: rotate(1.05); } } @-ms-keyframes tpscale { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: rotate(1.05); -moz-transform: rotate(1.05); -ms-transform: rotate(1.05); -o-transform: rotate(1.05); transform: rotate(1.05); } } @keyframes tpscale { 0% { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } 100% { -webkit-transform: rotate(1.05); -moz-transform: rotate(1.05); -ms-transform: rotate(1.05); -o-transform: rotate(1.05); transform: rotate(1.05); } } .animate-border::before, .animate-border::after { content: ""; position: absolute; background-color: var(--tp-theme-8); width: 0; height: 1px; transition: width 0.0375s; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .animate-border::before { top: 0; left: 0; transition-delay: 0.6s; } .animate-border::after { right: 0; bottom: 0; left: auto; transition-delay: 0.2s; } .animate-border .services-border::before, .animate-border .services-border::after { content: ""; position: absolute; background-color: var(--tp-theme-8); height: 0; width: 1px; transition: height 0.0375s; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .animate-border .services-border::before { transition-delay: 0s; bottom: 0; left: 0; } .animate-border .services-border::after { top: 0; right: 0; transition-delay: 0.4s; } .animate-border:hover::after, .animate-border:hover::before { width: 100%; } .animate-border:hover::before { transition-delay: 0s; } .animate-border:hover::after { transition-delay: 0.4s; } .animate-border:hover .services-border::after, .animate-border:hover .services-border::before { height: 100%; } .animate-border:hover .services-border::before { transition-delay: 0.6s; } .animate-border:hover .services-border::after { transition-delay: 0.2s; } .animate-border-2::before, .animate-border-2::after { content: ""; position: absolute; background-color: var(--tp-theme-8); width: 0; height: 1px; transition: width 0.0375s; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .animate-border-2::before { top: 0; left: 0; } .animate-border-2::after { right: 0; bottom: 0; left: auto; } .animate-border-2 .services-border-2::before, .animate-border-2 .services-border-2::after { content: ""; position: absolute; background-color: var(--tp-theme-8); height: 0; width: 1px; transition: height 0.0375s; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .animate-border-2 .services-border-2::before { top: 0; left: 0; } .animate-border-2 .services-border-2::after { top: auto; bottom: 0; right: 0; } .animate-border-2:hover::after, .animate-border-2:hover::before { width: 100%; } .animate-border-2:hover .services-border-2::after, .animate-border-2:hover .services-border-2::before { height: 100%; } @-webkit-keyframes tp_slide_up { 0% { -webkit-transform: translateY(3.25rem); transform: translateY(3.25rem); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-moz-keyframes tp_slide_up { 0% { -webkit-transform: translateY(3.25rem); transform: translateY(3.25rem); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-ms-keyframes tp_slide_up { 0% { -webkit-transform: translateY(3.25rem); transform: translateY(3.25rem); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes tp_slide_up { 0% { -webkit-transform: translateY(3.25rem); transform: translateY(3.25rem); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes tp_slide_left { 0% { -webkit-transform: translateX(3.25rem); transform: translateX(3.25rem); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-moz-keyframes tp_slide_left { 0% { -webkit-transform: translateX(3.25rem); transform: translateX(3.25rem); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @-ms-keyframes tp_slide_left { 0% { -webkit-transform: translateX(3.25rem); transform: translateX(3.25rem); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes tp_slide_left { 0% { -webkit-transform: translateX(3.25rem); transform: translateX(3.25rem); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .tp-border-loader svg { transform: rotate(-90deg); } .tp-border-loader svg circle { stroke: rgba(255, 255, 255, 0.4); } .tp-border-loader svg circle:last-child { stroke: #fff; stroke-dashoffset: -356px; stroke-dasharray: 0px, 366px; } @-webkit-keyframes tp-border-loader { 0% { stroke-dashoffset: -356px; stroke-dasharray: 356px, 366px; } 95% { stroke-dashoffset: 0; stroke-dasharray: 356px, 366px; } 100% { stroke-dashoffset: 0; stroke-dasharray: 0, 366px; } } @-moz-keyframes tp-border-loader { 0% { stroke-dashoffset: -356px; stroke-dasharray: 356px, 366px; } 95% { stroke-dashoffset: 0; stroke-dasharray: 356px, 366px; } 100% { stroke-dashoffset: 0; stroke-dasharray: 0, 366px; } } @-ms-keyframes tp-border-loader { 0% { stroke-dashoffset: -356px; stroke-dasharray: 356px, 366px; } 95% { stroke-dashoffset: 0; stroke-dasharray: 356px, 366px; } 100% { stroke-dashoffset: 0; stroke-dasharray: 0, 366px; } } @keyframes tp-border-loader { 0% { stroke-dashoffset: -356px; stroke-dasharray: 356px, 366px; } 95% { stroke-dashoffset: 0; stroke-dasharray: 356px, 366px; } 100% { stroke-dashoffset: 0; stroke-dasharray: 0, 366px; } } @-webkit-keyframes tp-pulse-btn-effect { 70% { -webkit-box-shadow: 0 0 0 40px currentColor; box-shadow: 0 0 0 40px currentColor; opacity: 0; } 100% { -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; opacity: 0; } } @-moz-keyframes tp-pulse-btn-effect { 70% { -webkit-box-shadow: 0 0 0 40px currentColor; box-shadow: 0 0 0 40px currentColor; opacity: 0; } 100% { -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; opacity: 0; } } @-ms-keyframes tp-pulse-btn-effect { 70% { -webkit-box-shadow: 0 0 0 40px currentColor; box-shadow: 0 0 0 40px currentColor; opacity: 0; } 100% { -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; opacity: 0; } } @keyframes tp-pulse-btn-effect { 70% { -webkit-box-shadow: 0 0 0 40px currentColor; box-shadow: 0 0 0 40px currentColor; opacity: 0; } 100% { -webkit-box-shadow: 0 0 0 0 currentColor; box-shadow: 0 0 0 0 currentColor; opacity: 0; } } @-webkit-keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @-moz-keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @-ms-keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @keyframes borderanimate2 { 0% { transform: translate(-50%, -50%) scale(0.8); } 60% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } @-webkit-keyframes borderanimate3 { 0% { transform: scale(0.8); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } @-moz-keyframes borderanimate3 { 0% { transform: scale(0.8); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } @-ms-keyframes borderanimate3 { 0% { transform: scale(0.8); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } @keyframes borderanimate3 { 0% { transform: scale(0.8); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } } @-webkit-keyframes tp_arrow { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @-moz-keyframes tp_arrow { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @-ms-keyframes tp_arrow { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @keyframes tp_arrow { 49% { transform: translateX(30%); } 50% { opacity: 0; transform: translateX(-30%); } 51% { opacity: 1; } } @-webkit-keyframes tp_arrow_svg { 49% { transform: translateX(30%) translateY(-1px); } 50% { opacity: 0; transform: translateX(-30%) translateY(-1px); } 51% { opacity: 1; } } @-moz-keyframes tp_arrow_svg { 49% { transform: translateX(30%) translateY(-1px); } 50% { opacity: 0; transform: translateX(-30%) translateY(-1px); } 51% { opacity: 1; } } @-ms-keyframes tp_arrow_svg { 49% { transform: translateX(30%) translateY(-1px); } 50% { opacity: 0; transform: translateX(-30%) translateY(-1px); } 51% { opacity: 1; } } @keyframes tp_arrow_svg { 49% { transform: translateX(30%) translateY(-1px); } 50% { opacity: 0; transform: translateX(-30%) translateY(-1px); } 51% { opacity: 1; } } @-webkit-keyframes tp-hotspot { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @-moz-keyframes tp-hotspot { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @-ms-keyframes tp-hotspot { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @keyframes tp-hotspot { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @-webkit-keyframes tp-hotspot-2 { 0% { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @-moz-keyframes tp-hotspot-2 { 0% { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @-ms-keyframes tp-hotspot-2 { 0% { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } @keyframes tp-hotspot-2 { 0% { -webkit-transform: scale(0.1); -moz-transform: scale(0.1); -ms-transform: scale(0.1); -o-transform: scale(0.1); transform: scale(0.1); opacity: 0; } 70% { opacity: 1; } 100% { -webkit-transform: scale(1.3); -moz-transform: scale(1.3); -ms-transform: scale(1.3); -o-transform: scale(1.3); transform: scale(1.3); opacity: 0; } } .mfp-with-zoom .mfp-container, .mfp-with-zoom.mfp-bg { opacity: 0; -webkit-backface-visibility: hidden; /* ideally, transition speed should match zoom duration */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .mfp-with-zoom.mfp-ready .mfp-container { opacity: 1; } .mfp-with-zoom.mfp-ready.mfp-bg { opacity: 0.8; } .mfp-with-zoom.mfp-removing .mfp-container, .mfp-with-zoom.mfp-removing.mfp-bg { opacity: 0; } /*----------------------------------------*/ /* PRELOADER CSS START /*----------------------------------------*/ .post-type-archive-product #loading { display: none; } #loading { background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 999999; margin-top: 0px; top: 0px; } #loading-center { width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } #loading { background-color: #fff; height: 100%; width: 100%; position: fixed; z-index: 999999; margin-top: 0px; top: 0px; } #loading-center { width: 100%; height: 100%; position: relative; } #loading-center-absolute { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .preloader__bar { width: 270px; height: 4px; background-color: #E2E2E8; margin: auto; margin-bottom: 50px; position: relative; overflow: hidden; } .preloader__bar-inner { position: absolute; left: 0; top: 0; width: 0%; height: 100%; background-image: -webkit-linear-gradient(90deg, #F50963 0%, #6A6BFF 100%); background-image: -moz-linear-gradient(90deg, #F50963 0%, #6A6BFF 100%); background-image: -ms-linear-gradient(90deg, #F50963 0%, #6A6BFF 100%); background-image: -o-linear-gradient(90deg, #F50963 0%, #6A6BFF 100%); background-image: linear-gradient(90deg, #F50963 0%, #6A6BFF 100%); -webkit-transition: all 1s ease-out 0s; -moz-transition: all 1s ease-out 0s; -ms-transition: all 1s ease-out 0s; -o-transition: all 1s ease-out 0s; transition: all 1s ease-out 0s; } .preloader__logo { margin-bottom: 40px; } .preloader__logo img.logo-blink { animation: tp-blink 0.7s ease-in-out 0.1s infinite; } @-webkit-keyframes tp-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-moz-keyframes tp-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @-ms-keyframes tp-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } @keyframes tp-blink { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } } .preloader__title { font-size: 170px; line-height: 1; text-transform: uppercase; position: relative; color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px) { .preloader__title { font-size: 140px; } } @media (max-width: 575px) { .preloader__title { font-size: 70px; } } .preloader__title-2 { font-size: 170px; line-height: 1; font-weight: 700; text-transform: uppercase; position: relative; color: var(--tp-grey-1); } .preloader__title-2::before { position: absolute; content: attr(data-text-preloader); top: 22px; left: 0; color: var(--tp-common-black); opacity: 0; -webkit-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-animation: letters-loading 3s infinite; animation: letters-loading 3s infinite; } .preloader__title-2:nth-child(2)::before { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; } .preloader__title-2:nth-child(3)::before { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; } .preloader__title-2:nth-child(4)::before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; } .preloader__title-2:nth-child(5)::before { -webkit-animation-delay: 0.8s; animation-delay: 0.8s; } .preloader__title-2:nth-child(6)::before { -webkit-animation-delay: 1s; animation-delay: 1s; } .preloader__loading { font-family: var(--tp-ff-space); font-weight: 700; font-size: 16px; line-height: 1; letter-spacing: 0.9em; text-transform: uppercase; color: var(--tp-common-black); } .preloader__with-text { display: none; } @-webkit-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @-moz-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @-ms-keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes letters-loading { 0%, 75%, 100% { opacity: 0; -webkit-transform: rotateY(-90deg); -moz-transform: rotateY(-90deg); -ms-transform: rotateY(-90deg); -o-transform: rotateY(-90deg); transform: rotateY(-90deg); } 25%, 50% { opacity: 1; -webkit-transform: rotateY(0deg); -moz-transform: rotateY(0deg); -ms-transform: rotateY(0deg); -o-transform: rotateY(0deg); transform: rotateY(0deg); } } @keyframes loading { 0% { width: 0%; } 100% { width: 100%; } } /*-- - Background color -----------------------------------------*/ .grey-bg { background-color: var(--tp-grey-1); } .grey-bg-2 { background-color: var(--tp-grey-2); } .grey-bg-4 { background-color: var(--tp-grey-4); } .grey-bg-7 { background-color: var(--tp-grey-7); } .grey-bg-8 { background-color: var(--tp-grey-8); } .grey-bg-10 { background-color: var(--tp-grey-10); } .grey-bg-12 { background-color: var(--tp-grey-12); } .grey-bg-13 { background-color: var(--tp-grey-13); } .grey-bg-14 { background-color: var(--tp-grey-14); } .grey-bg-15 { background-color: var(--tp-grey-15); } .grey-bg-17 { background-color: var(--tp-grey-17); } .grey-bg-18 { background-color: var(--tp-grey-18); } .white-bg { background-color: var(--tp-common-white); } .black-bg { background-color: var(--tp-common-black); } .black-bg-5 { background-color: var(--tp-common-black-5); } .black-bg-12 { background-color: var(--tp-common-black-12); } .black-bg-13 { background-color: var(--tp-common-black-13); } .black-bg-14 { background-color: var(--tp-common-black-14); } .black-bg-17 { background-color: var(--tp-common-black-17); } .black-bg-18 { background-color: var(--tp-common-black-18); } .blue-bg { background-color: var(--tp-common-blue); } .blue-bg-2 { background-color: var(--tp-common-blue-2); } .blue-bg-5 { background-color: var(--tp-common-blue-5); } .cta-blue-bg { background-color: var(--tp-common-blue-dark); } .purple-bg { background-color: var(--tp-common-purple); } .theme-bg-6 { background-color: var(--tp-theme-6); } .green-light-bg-2 { background-color: var(--tp-common-green-light-2); } .green-light-bg-4 { background-color: var(--tp-common-green-light-4); } .green-bg-6 { background-color: var(--tp-common-green-6); } .khaki-bg { background-color: var(--tp-common-khaki); } .khaki-bg-2 { background-color: var(--tp-common-khaki-2); } .gradient-bg-dark { background: radial-gradient(50.53% 50.53% at 50.23% 49.47%, #414D59 0%, #1D2631 100%); } /*-- - data bg color css ------------------------------------------*/ [data-bg-color=theme-2] { background-color: var(--tp-theme-2); } [data-bg-color=theme-5] { background-color: var(--tp-theme-5); } [data-bg-color=black-7] { background-color: var(--tp-common-blue-dark); } [data-bg-color=blue-dark] { background-color: var(--tp-common-blue-dark); } [data-bg-color=green-dark] { background-color: var(--tp-common-green-dark); } [data-bg-color=green-dark-2] { background-color: var(--tp-common-green-dark-2); } [data-bg-color=green-light-3] { background-color: var(--tp-common-green-light-3); } [data-bg-color=purple-bg-3] { background-color: var(--tp-common-purple-3); } [data-bg-color=blue-bg-2] { background-color: var(--tp-common-blue-2); } [data-bg-color=footer-bg] { background-color: var(--tp-common-footer-bg); } [data-bg-color=footer-bg-white] { background-color: var(--tp-common-white); } [data-bg-color=footer-bg-dark] { background-color: var(--tp-common-footer-bg-dark); } [data-bg-color=footer-bg-black] { background-color: var(--tp-common-footer-bg-black); } [data-bg-color=footer-bg-black-2] { background-color: var(--tp-common-footer-bg-black-2); } [data-bg-color=footer-bg-black-3] { background-color: var(--tp-common-footer-bg-black-3); } [data-bg-color=footer-bg-black-4] { background-color: var(--tp-common-footer-bg-black-4); } [data-bg-color=footer-bg-green] { background-color: var(--tp-common-footer-bg-green); } [data-bg-color=footer-bg-green-dark] { background-color: var(--tp-common-footer-bg-green-dark); } [data-bg-color=footer-bg-grey] { background-color: var(--tp-common-footer-bg-grey); } [data-bg-color=footer-bg-grey-4] { background-color: var(--tp-common-footer-bg-grey-4); } [data-bg-color=footer-bg-blue] { background-color: var(--tp-common-footer-bg-blue); } /*-- - data overlay color css ------------------------------------------*/ [data-overlay=white] { background-color: var(--tp-common-white); } [data-overlay=black] { background-color: var(--tp-common-black); } [data-overlay=theme] { background-color: var(--tp-theme-1); } /*-- - data overlay css ------------------------------------------*/ [data-overlay] { position: relative; z-index: 1; } [data-overlay]::before { position: absolute; content: ""; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; } /*-- Overlay Color --*/ [data-overlay=light]::before { background-color: var(--tp-common-white); } [data-overlay=dark]::before { background-color: var(--tp-common-black); } [data-overlay=green] { position: relative; z-index: 1; } [data-overlay=green]::before { background-color: var(--tp-theme-2); z-index: -1; } [data-overlay=footer-bg]::before { background-color: var(--tp-common-black); } /*-- Overlay Opacity --*/ [data-overlay-opacity="1"]::before { opacity: 0.1; } [data-overlay-opacity="2"]::before { opacity: 0.2; } [data-overlay-opacity="3"]::before { opacity: 0.3; } [data-overlay-opacity="4"]::before { opacity: 0.4; } [data-overlay-opacity="5"]::before { opacity: 0.5; } [data-overlay-opacity="6"]::before { opacity: 0.6; } [data-overlay-opacity="7"]::before { opacity: 0.7; } [data-overlay-opacity="8"]::before { opacity: 0.8; } [data-overlay-opacity="9"]::before { opacity: 0.9; } .backdrop-bg { background-color: var(--tp-grey-1); } /* tp range slider css */ .tp-range-slider .inside-slider { padding-left: 7px; padding-right: 17px; } .tp-range-slider .noUi-target { background-color: #191C3C; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; -ms-border-radius: 12px; border-radius: 12px; border: 0; box-shadow: none; } .tp-range-slider .noUi-connect { background-color: var(--tp-theme-1); } .tp-range-slider .noUi-horizontal { height: 6px; } .tp-range-slider .noUi-handle { height: 24px; width: 24px; background-color: var(--tp-theme-1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; border: 4px solid var(--tp-common-white); box-shadow: 0px 4px 10px rgba(5, 9, 43, 0.3); top: -9px; } .tp-range-slider .noUi-handle:hover { cursor: pointer; } .tp-range-slider .noUi-handle::before, .tp-range-slider .noUi-handle::after { display: none; } .tp-range-slider-dark .noUi-handle { border: 4px solid #2D314B; } /* tp swiper slider dot */ .tp-swiper-dot .swiper-pagination-bullet { width: 8px; height: 8px; background-color: var(--tp-grey-5); opacity: 1; margin: 0 9px; position: relative; } .tp-swiper-dot .swiper-pagination-bullet::after { position: absolute; content: ""; left: 50%; top: 50%; width: calc(100% + 16px); height: calc(100% + 16px); background-color: transparent; border: 1px solid transparent; border-radius: 50%; transform: translate(-50%, -50%) scale(0); } .tp-swiper-dot .swiper-pagination-bullet button { font-size: 0; } .tp-swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-1); } .tp-swiper-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-theme-1); transform: translate(-50%, -50%) scale(1); } .tp-swiper-dot-2 .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.3); width: 8px; height: 8px; margin: 0 7px; font-size: 0; } .tp-swiper-dot-2 .swiper-pagination-bullet::after { display: none; } .tp-swiper-dot-2 .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 30px; border-radius: 50px; background-color: var(--tp-theme-8); } .tp-swiper-fraction span { font-family: var(--tp-ff-body); font-weight: 700; font-size: 30px; line-height: 1; color: var(--tp-common-white); } .tp-swiper-fraction-divide { position: relative; display: inline-block; width: 40px; height: 23px; } .tp-swiper-fraction-divide::after { position: absolute; content: ""; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 40px; height: 1px; background-color: var(--tp-common-white); } /*----------------------------------------*/ /* OFFCANVAS CSS START /*----------------------------------------*/ .offcanvas__area { position: fixed; right: 0; top: 0; width: 360px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); background: var(--tp-common-white) none repeat scroll 0 0; -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; z-index: 1000; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } .offcanvas__area::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } [dir=rtl] .offcanvas__area { right: auto; left: 0; -webkit-transform: translateX(calc(-100% - 80px)); -moz-transform: translateX(calc(-100% - 80px)); -ms-transform: translateX(calc(-100% - 80px)); -o-transform: translateX(calc(-100% - 80px)); transform: translateX(calc(-100% - 80px)); } .offcanvas__area.offcanvas-opened { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); opacity: 1; } @media (max-width: 575px) { .offcanvas__area { width: 100%; } } .offcanvas__area-1 .mean-container .mean-nav ul li a { font-family: var(--tp-ff-space); } .offcanvas__area-2 .mean-container .mean-nav ul li a { font-family: var(--tp-ff-oswald); font-weight: 500; } .offcanvas__area-2 .mean-container .mean-nav ul li.dropdown-opened > a, .offcanvas__area-2 .mean-container .mean-nav ul li.dropdown-opened > span { color: var(--tp-theme-2); } .offcanvas__area-2 .mean-container .mean-nav ul li a:hover, .offcanvas__area-2 .mean-container .mean-nav ul li span:hover { color: var(--tp-theme-2); } .offcanvas__area-2 .mean-container .mean-nav ul li a.mean-expand:hover, .offcanvas__area-2 .mean-container .mean-nav ul li span.mean-expand:hover { background-color: var(--tp-theme-2); color: var(--tp-common-white); } .offcanvas__area-2 .mean-container .mean-nav ul li.dropdown-opened > a.mean-expand.mean-clicked { background-color: var(--tp-theme-2); color: var(--tp-common-white); } .offcanvas__area-2 .offcanvas__text p { margin-bottom: 13px; } .offcanvas__area-2 .offcanvas__social { padding-bottom: 0; margin-bottom: 0; border: 0; } .offcanvas__area-2 .offcanvas__social a:hover { background-color: var(--tp-theme-2); border-color: var(--tp-theme-2); } .offcanvas__area-2 .offcanvas__close-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-2); border-color: var(--tp-theme-2); } .offcanvas__area-3 { background-color: var(--tp-common-black-8); } .offcanvas__area-3 .offcanvas__close-btn { border: 0; color: #fff; opacity: 0.4; } .offcanvas__area-3 .offcanvas__close-btn:hover { opacity: 1; } .offcanvas__area-3 .offcanvas__menu ul li a { color: var(--tp-text-17); } .offcanvas__area-3 .offcanvas__menu ul li:hover > a { color: var(--tp-common-white); } .offcanvas__area-3 .mean-container .mean-nav ul li a { font-family: var(--tp-ff-space); color: var(--tp-common-white); border-color: var(--tp-border-1); } .offcanvas__area-3 .mean-container .mean-nav ul li a.mean-expand { border: none !important; color: var(--tp-common-white); } .offcanvas__area-3 .mean-container .mean-nav ul li a.mean-expand.mean-clicked { background-color: var(--tp-common-white); color: var(--tp-common-black); } .offcanvas__area-3 .mean-container .mean-nav ul li.dropdown-opened > a { color: var(--tp-common-white); } .offcanvas__area-4 { background-color: var(--tp-common-purple); } .offcanvas__area-4 .offcanvas__top { margin-bottom: 50px; } .offcanvas__area-4 .offcanvas__close-btn { border: 0; color: #fff; opacity: 0.5; font-size: 24px; } .offcanvas__area-4 .offcanvas__close-btn:hover { opacity: 1; background-color: transparent; border-color: transparent; } .offcanvas__area-4 .offcanvas__menu ul li a { font-family: var(--tp-ff-inter); color: var(--tp-common-white); font-size: 16px; } .offcanvas__area-4 .offcanvas__menu ul li:hover > a { color: var(--tp-common-white); } .offcanvas__area-4 .offcanvas__contact-call { color: var(--tp-common-white); } .offcanvas__area-4 .offcanvas__contact-call a:hover { color: var(--tp-common-black); } .offcanvas__area-4 .offcanvas__contact-mail { color: var(--tp-common-white); } .offcanvas__area-4 .offcanvas__contact-mail a:hover { color: var(--tp-common-black); } .offcanvas__area-4 .mean-container .mean-nav ul li a { font-family: var(--tp-ff-space); color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.1); } .offcanvas__area-4 .mean-container .mean-nav ul li a:hover { color: var(--tp-common-black); } .offcanvas__area-4 .mean-container .mean-nav ul li a.mean-expand { border: none !important; color: var(--tp-common-white); } .offcanvas__area-4 .mean-container .mean-nav ul li a.mean-expand:hover, .offcanvas__area-4 .mean-container .mean-nav ul li span.mean-expand:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .offcanvas__area-4 .mean-container .mean-nav ul li.dropdown-opened > a.mean-expand.mean-clicked { background-color: var(--tp-common-black); color: var(--tp-common-white); } .offcanvas__area-4 .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { color: var(--tp-common-white); } .offcanvas__area-4 .mean-container .mean-nav ul li.dropdown-opened > a { color: var(--tp-common-black); } .offcanvas__area-5 .mean-container .mean-nav ul li.dropdown-opened > a, .offcanvas__area-5 .mean-container .mean-nav ul li.dropdown-opened > span { color: var(--tp-theme-5); } .offcanvas__area-5 .mean-container .mean-nav ul li a:hover, .offcanvas__area-5 .mean-container .mean-nav ul li span:hover { color: var(--tp-theme-5); } .offcanvas__area-5 .mean-container .mean-nav ul li a.mean-expand:hover, .offcanvas__area-5 .mean-container .mean-nav ul li span.mean-expand:hover { background-color: var(--tp-theme-5); color: var(--tp-common-white); } .offcanvas__area-5 .mean-container .mean-nav ul li.dropdown-opened > a.mean-expand.mean-clicked { background-color: var(--tp-theme-5); color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .offcanvas__top { margin-bottom: 30px; } } .offcanvas__wrapper { position: relative; padding: 50px 40px 145px; z-index: 1; min-height: 100%; } @media (max-width: 575px) { .offcanvas__wrapper { padding: 20px; } } .offcanvas__wrapper-3 { padding: 50px 50px 57px; } @media (max-width: 575px) { .offcanvas__wrapper-3 { padding-left: 30px; padding-right: 30px; } } .offcanvas__wrapper-5 { padding: 50px 40px 90px; } @media (max-width: 575px) { .offcanvas__wrapper-5 { padding-left: 30px; padding-right: 30px; } } .offcanvas__close { position: absolute; top: 30px; right: 30px; } [dir=rtl] .offcanvas__close { left: 30px; right: auto; } @media (max-width: 575px) { .offcanvas__close { right: 20px; top: 20px; } [dir=rtl] .offcanvas__close { right: auto; left: 20px; } } .offcanvas__close-btn { display: inline-block; font-size: 16px; height: 44px; width: 44px; line-height: 40px; border: 2px solid var(--tp-border-5); background-color: transparent; color: var(--tp-text-1); border-radius: 50%; } .offcanvas__close-btn:hover { background-color: var(--tp-theme-1); border-color: transparent; color: var(--tp-common-white); } .offcanvas__close-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .offcanvas__close-btn-2 { background-color: #F7F7F9; color: var(--tp-common-black); border: 0; line-height: 44px; } .offcanvas__close-btn-3 { color: var(--tp-common-white); opacity: 0.4; } .offcanvas__close-btn-3:hover { opacity: 1; } .offcanvas__close-btn-4 { color: var(--tp-common-white); background-color: transparent; border: 0; line-height: 16px; width: 16px; height: 16px; opacity: 0.5; } .offcanvas__close-btn-4:hover { opacity: 1; background-color: transparent; border-color: none; } .offcanvas__close-btn-5 { color: #9D9DA3; background-color: transparent; border: 0; line-height: 16px; width: 16px; height: 16px; } .offcanvas__close-btn-5:hover { color: var(--tp-theme-5); background-color: transparent; border-color: none; } .offcanvas__color { margin-bottom: 40px; } .offcanvas__color h5 { font-size: 22px; margin-bottom: 15px; } .offcanvas__color input { display: none; } .offcanvas__color label { width: 100%; height: 60px; background-color: var(--tp-theme-1); } .offcanvas__color label:hover { cursor: pointer; } .offcanvas__color-2 label { background-color: var(--tp-theme-2); } .offcanvas__inner h4 { font-family: var(--tp-ff-space); font-size: 24px; color: var(--tp-common-white); line-height: 1.3; margin-bottom: 15px; } .offcanvas__inner p { font-family: var(--tp-ff-inter); font-size: 16px; line-height: 22px; color: var(--tp-common-white); margin-bottom: 30px; } .offcanvas__inner > img { margin-bottom: 30px; } .offcanvas__search { position: relative; } .offcanvas__search input { width: 100%; height: 40px; line-height: 40px; padding-right: 20px; background: transparent; border: none; outline: none; border-bottom: 1px solid #D5D5D5; font-size: 14px; color: var(--tp-common-black); } [dir=rtl] .offcanvas__search input { padding-left: 20px; padding-right: 0; } .offcanvas__search input::placeholder { color: var(--tp-text-3); } .offcanvas__search input:focus { border-color: var(--tp-theme-1); } .offcanvas__search button { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 14px; color: var(--tp-text-1); } [dir=rtl] .offcanvas__search button { right: auto; left: 0; } .offcanvas__text p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; line-height: 1.7; letter-spacing: 0.01em; color: var(--tp-common-black-4); margin-bottom: 25px; } .offcanvas__contact-call { font-family: var(--tp-ff-space); font-weight: 700; font-size: 20px; color: var(--tp-common-black); margin-bottom: 5px; } .offcanvas__contact-call a:hover { color: var(--tp-theme-1); } .offcanvas__contact-mail { font-family: var(--tp-ff-space); font-weight: 400; font-size: 16px; color: var(--tp-text-1); } .offcanvas__contact-mail a:hover { color: var(--tp-theme-1); } .offcanvas__social { margin-bottom: 22px; padding-bottom: 40px; border-bottom: 1px solid var(--tp-border-5); } .offcanvas__social-title { font-family: var(--tp-ff-space); font-size: 18px; font-family: var(--tp-ff-space); } .offcanvas__social-title-5 { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; line-height: 10px; text-transform: uppercase; color: var(--tp-common-black); margin-bottom: 10px; } .offcanvas__social a { display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; background: transparent; color: var(--tp-common-black); margin-right: 5px; border: 2px solid var(--tp-border-5); } [dir=rtl] .offcanvas__social a { margin-right: 0; margin-left: 5px; } .offcanvas__social a:hover { background: var(--tp-theme-1); color: var(--tp-common-white); border-color: var(--tp-theme-1); } .offcanvas__social-3 a { display: inline-block; width: 50px; height: 50px; line-height: 44px; text-align: center; background: transparent; color: var(--tp-common-white); margin-right: 5px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; } [dir=rtl] .offcanvas__social-3 a { margin-right: 0; margin-left: 5px; } .offcanvas__social-3 a:hover { background: var(--tp-theme-1); color: var(--tp-common-white); border-color: var(--tp-theme-1); } .offcanvas__social-4 a { display: inline-block; width: 44px; height: 44px; line-height: 40px; text-align: center; background-color: transparent; color: var(--tp-common-white); margin-right: 5px; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; } [dir=rtl] .offcanvas__social-4 a { margin-right: 0; margin-left: 5px; } .offcanvas__social-4 a:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); border-color: var(--tp-common-white); } .offcanvas__social-5 a { display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; background-color: transparent; color: var(--tp-common-black); margin-right: 5px; border: 2px solid var(--tp-border-5); border-radius: 6px; } [dir=rtl] .offcanvas__social-5 a { margin-right: 0; margin-left: 5px; } .offcanvas__social-5 a:hover { background-color: var(--tp-theme-5); color: var(--tp-common-white); border-color: var(--tp-theme-5); } .offcanvas__btn { margin-bottom: 125px; } .offcanvas__btn a { margin-bottom: 20px; } .offcanvas__btn-2 { margin-bottom: 50px; } .offcanvas__btn-3 { margin-bottom: 85px; } .offcanvas__btn-3 .tp-btn-offcanvas-pink { border-radius: 6px; } .offcanvas__menu { margin-bottom: 40px; } .offcanvas__menu ul li { list-style: none; margin-bottom: 10px; } .offcanvas__menu ul li:last-child { margin-bottom: 0; } .offcanvas__menu ul li a { font-weight: 700; font-size: 20px; color: var(--tp-common-black); } .offcanvas__menu ul li:hover > a { color: var(--tp-theme-1); } .offcanvas__menu-ff-space ul li a { font-family: var(--tp-ff-space); } .offcanvas__menu-ff-oswald ul li a { font-family: var(--tp-ff-oswald); font-weight: 500; } .offcanvas__menu-ff-oswald ul li:hover > a { color: var(--tp-theme-2); } .offcanvas__menu-ff-inter ul li a { font-family: var(--tp-ff-inter); font-weight: 700; } .offcanvas__menu-ff-inter ul li:hover > a { color: var(--tp-theme-5); } .offcanvas__menu-3 { margin-bottom: 70px; margin-top: 60px; } .offcanvas__menu-3 > p { font-family: var(--tp-ff-space); font-style: normal; font-weight: 600; font-size: 14px; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: #FFFFFF; margin-bottom: 35px; } .offcanvas__menu-3 ul li { margin-bottom: 17px; } .offcanvas__menu-3 ul li a { font-family: var(--tp-ff-space); font-weight: 700; font-size: 30px; color: #898A94; } .offcanvas__menu-3 ul li a:hover { color: var(--tp-common-white); } .offcanvas__menu-5 ul li a { font-family: var(--tp-ff-inter); font-weight: 700; font-size: 20px; color: var(--tp-common-black); text-transform: uppercase; } .offcanvas__menu-5 ul li a:hover { color: var(--tp-theme-5); } .offcanvas__shape-1 { position: absolute; bottom: 0; right: 0; z-index: -1; width: 100%; } [dir=rtl] .offcanvas__shape-1 { right: auto; left: 0; } .offcanvas__shape-2 { position: absolute; top: 4%; left: 0; max-width: 100%; opacity: 0.06; z-index: -1; } [dir=rtl] .offcanvas__shape-2 { right: 0; left: auto; } .offcanvas__shape-3 { position: absolute; bottom: 0; right: 0; z-index: -1; width: 100%; } [dir=rtl] .offcanvas__shape-3 { right: auto; left: 0; } .offcanvas__link-btn { padding-bottom: 40px; border-bottom: 1px solid var(--tp-border-5); } .offcanvas__link-btn .tp-link-btn-circle { font-family: var(--tp-ff-oswald); font-weight: 500; font-size: 16px; line-height: 20px; letter-spacing: 0.02em; color: var(--tp-common-black); display: flex; align-items: center; } .offcanvas__link-btn .tp-link-btn-circle span { width: 44px; height: 44px; line-height: 42px; background-color: var(--tp-common-pink); margin-left: 0; border: 0; color: var(--tp-common-white); margin-right: 9px; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } [dir=rtl] .offcanvas__link-btn .tp-link-btn-circle span { margin-right: 0; margin-left: 9px; } .offcanvas__link-btn .tp-link-btn-circle:hover { color: var(--tp-common-pink); } .offcanvas__info-item { margin-bottom: 38px; } .offcanvas__info-item-title { font-family: var(--tp-ff-space); font-weight: 700; font-size: 18px; color: var(--tp-common-white); margin-bottom: 12px; } .offcanvas__info-item p { font-size: 16px; color: var(--tp-text-16); margin-bottom: 0; line-height: 22px; } .offcanvas__info-item p a:hover { color: var(--tp-theme-1); } .offcanvas__instagram-title { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; line-height: 10px; text-transform: uppercase; color: var(--tp-common-black); position: relative; padding-bottom: 15px; margin-bottom: 15px; } .offcanvas__instagram-title svg { position: absolute; bottom: 0; left: 0; color: var(--tp-theme-1); } [dir=rtl] .offcanvas__instagram-title svg { right: 0; left: auto; } .offcanvas__instagram-title svg path { stroke: currentColor; fill: currentColor; } .offcanvas__instagram-thumb a { display: inline-block; position: relative; } .offcanvas__instagram-thumb a::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--tp-common-black); opacity: 0; } [dir=rtl] .offcanvas__instagram-thumb a::after { right: 0; left: auto; } .offcanvas__instagram-thumb a:hover::after { opacity: 0.3; } .offcanvas__full { position: fixed; right: 0; top: 0; width: 100%; height: 100%; background: #161727; -webkit-transform: translateY(30%); -moz-transform: translateY(30%); -ms-transform: translateY(30%); -o-transform: translateY(30%); transform: translateY(30%); z-index: 9999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; opacity: 0; visibility: hidden; } [dir=rtl] .offcanvas__full { right: auto; left: 0; } .offcanvas__full::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } .offcanvas__full.offcanvas-full-opened { opacity: 0.98; visibility: visible; opacity: 1; -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(1) { transition-delay: 0.1s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(2) { transition-delay: 0.2s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(3) { transition-delay: 0.3s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(4) { transition-delay: 0.4s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(5) { transition-delay: 0.5s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(6) { transition-delay: 0.6s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(7) { transition-delay: 0.7s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(8) { transition-delay: 0.8s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(9) { transition-delay: 0.9s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(10) { transition-delay: 1s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li:nth-child(11) { transition-delay: 1.1s; } .offcanvas__full.offcanvas-full-opened .offcanvas__full-menu nav > ul > li { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .offcanvas__full-inner { padding: 140px 150px 170px; } @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) { .offcanvas__full-inner { padding: 140px 40px 170px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas__full-inner { padding: 100px 20px 130px; } } @media (max-width: 575px) { .offcanvas__full-inner { padding: 100px 15px 130px; } } @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) { .offcanvas__full-right { margin-bottom: 25px; } } .offcanvas__full-close-btn { color: var(--tp-common-white); opacity: 0.4; } .offcanvas__full-close-btn:hover { opacity: 1; } .offcanvas__full .offcanvas__close { top: 60px; right: 60px; } [dir=rtl] .offcanvas__full .offcanvas__close { right: auto; left: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .offcanvas__full .offcanvas__close { top: 30px; right: 30px; } [dir=rtl] .offcanvas__full .offcanvas__close { left: 60px; right: auto; } } .offcanvas__full .offcanvas__close-btn { font-size: 30px; border: 0; color: #fff; opacity: 0.4; } .offcanvas__full .offcanvas__close-btn:hover { opacity: 1; background-color: transparent; border-color: transparent; } .offcanvas__full .offcanvas__menu ul li a { color: var(--tp-text-17); } .offcanvas__full .offcanvas__menu ul li:hover > a { color: var(--tp-common-white); } .offcanvas__full .offcanvas__info-item { margin-right: 100px; margin-bottom: 0; } [dir=rtl] .offcanvas__full .offcanvas__info-item { margin-right: 0; margin-left: 100px; } @media (max-width: 575px) { .offcanvas__full .offcanvas__info-item { margin-bottom: 30px; } } .offcanvas__full .offcanvas__info-item:last-child { margin-right: 0; } [dir=rtl] .offcanvas__full .offcanvas__info-item:last-child { margin-left: 0; } .offcanvas__full-menu ul { display: inline-block; min-width: 315px; } .offcanvas__full-menu ul li { list-style: none; padding-left: 25px; position: relative; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); visibility: hidden; opacity: 0; } [dir=rtl] .offcanvas__full-menu ul li { padding-left: 0; padding-right: 25px; } .offcanvas__full-menu ul li:nth-child(1) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(2) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(3) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(4) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(5) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(6) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(7) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(8) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(9) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(10) { transition-delay: 0; } .offcanvas__full-menu ul li:nth-child(11) { transition-delay: 0; } .offcanvas__full-menu ul li::after { position: absolute; counter-increment: count; content: "0" counter(count); left: 0; top: 10px; color: #75757A; font-size: 16px; font-family: var(--tp-ff-inter); font-weight: 500; } [dir=rtl] .offcanvas__full-menu ul li::after { left: auto; right: 0; } .offcanvas__full-menu ul li.has-dropdown > a { position: relative; } .offcanvas__full-menu ul li.has-dropdown > a::after { position: absolute; content: "+"; right: 0; top: 50%; color: #75757A; font-family: var(--tp-ff-fontawesome); font-weight: 500; font-size: 18px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .offcanvas__full-menu ul li.has-dropdown > a::after { left: 0; right: auto; } .offcanvas__full-menu ul li a { display: inline-block; font-weight: 700; font-size: 50px; line-height: 1.4; color: var(--tp-common-white); width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas__full-menu ul li a { font-size: 38px; } } .offcanvas__full-menu ul li .submenu { position: absolute; left: 100%; top: 10%; visibility: hidden; opacity: 0; } [dir=rtl] .offcanvas__full-menu ul li .submenu { left: auto; right: 100%; } .offcanvas__full-menu ul li .submenu li::after { display: none; } .offcanvas__full-menu ul li .submenu li:nth-child(1) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(2) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(3) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(4) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(5) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(6) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(7) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(8) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(9) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(10) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li:nth-child(11) { transition-delay: 0; } .offcanvas__full-menu ul li .submenu li a { font-weight: 500; font-size: 30px; line-height: 1.6; color: #75757A; } .offcanvas__full-menu ul li .submenu li:hover > a { color: var(--tp-common-white); } .offcanvas__full-menu ul li:hover > a { color: #88888C; } .offcanvas__full-menu ul li:hover > a::after { -webkit-transform: translateY(-50%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); transform: translateY(-50%) rotate(45deg); } .offcanvas__full-menu nav > ul li:hover > .submenu { top: 4%; visibility: visible; opacity: 1; } .offcanvas__full-menu nav > ul li:hover > .submenu li { visibility: visible; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(1) { transition-delay: 0.1s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(2) { transition-delay: 0.2s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(3) { transition-delay: 0.3s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(4) { transition-delay: 0.4s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(5) { transition-delay: 0.5s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(6) { transition-delay: 0.6s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(7) { transition-delay: 0.7s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(8) { transition-delay: 0.8s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(9) { transition-delay: 0.9s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(10) { transition-delay: 1s; } .offcanvas__full-menu nav > ul li:hover > .submenu li:nth-child(11) { transition-delay: 1.1s; } .offcanvas__full .menu-counter { counter-reset: count; } @media only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas__full .mean-container .mean-nav { width: 90%; } } @media (max-width: 575px) { .offcanvas__full .mean-container .mean-nav { width: 100%; } } .offcanvas__full .mean-container .mean-nav ul li { position: relative; padding-left: 25px; } [dir=rtl] .offcanvas__full .mean-container .mean-nav ul li { padding-left: 0; padding-right: 25px; } @media (max-width: 575px) { .offcanvas__full .mean-container .mean-nav ul li { width: 90%; } } .offcanvas__full .mean-container .mean-nav ul li::after { position: absolute; counter-increment: count; content: "0" counter(count); left: 0; top: -1px; color: #75757A; font-size: 16px; font-family: var(--tp-ff-inter); font-weight: 500; } [dir=rtl] .offcanvas__full .mean-container .mean-nav ul li::after { right: 0; left: auto; } .offcanvas__full .mean-container .mean-nav ul li.dropdown-opened a { color: #88888C; } .offcanvas__full .mean-container .mean-nav ul li.dropdown-opened.mean-clicked { color: #88888C; background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li.dropdown-opened.mean-clicked i { color: #88888C; background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li a { font-family: var(--tp-ff-inter); color: var(--tp-common-white); border: 0; border-color: red; font-size: 50px; font-weight: 700; text-transform: capitalize; width: inherit; float: none; padding: 0; padding-bottom: 20px; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas__full .mean-container .mean-nav ul li a { font-size: 40px; } } @media (max-width: 575px) { .offcanvas__full .mean-container .mean-nav ul li a { font-size: 35px; } } .offcanvas__full .mean-container .mean-nav ul li a:hover { color: #88888C; } .offcanvas__full .mean-container .mean-nav ul li a.mean-clicked { color: var(--tp-common-white); background-color: transparent !important; } .offcanvas__full .mean-container .mean-nav ul li a.mean-clicked i { color: var(--tp-common-white); background-color: transparent !important; } .offcanvas__full .mean-container .mean-nav ul li a.mean-expand { border: none !important; color: #88888C; top: 6px; right: 30px; } .offcanvas__full .mean-container .mean-nav ul li a.mean-expand:hover { color: var(--tp-common-white); background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li a.mean-expand.mean-clicked { color: #88888C; background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { color: #88888C; background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li .submenu li, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li { padding-left: 20px; width: 96%; } [dir=rtl] .offcanvas__full .mean-container .mean-nav ul li .submenu li, [dir=rtl] .offcanvas__full .mean-container .mean-nav ul li .mega-menu li { padding-left: 0; padding-right: 20px; } .offcanvas__full .mean-container .mean-nav ul li .submenu li::after, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li::after { display: none; } @media (max-width: 575px) { .offcanvas__full .mean-container .mean-nav ul li .submenu li, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li { width: 95%; padding-left: 15px; } [dir=rtl] .offcanvas__full .mean-container .mean-nav ul li .submenu li, [dir=rtl] .offcanvas__full .mean-container .mean-nav ul li .mega-menu li { padding-left: 0; padding-right: 15px; } } .offcanvas__full .mean-container .mean-nav ul li .submenu li .mean-expand, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li .mean-expand { top: -4px; } .offcanvas__full .mean-container .mean-nav ul li .submenu li .mean-expand:hover, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li .mean-expand:hover { color: var(--tp-common-white); background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li .submenu li .mean-expand.mean-clicked, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li .mean-expand.mean-clicked { color: var(--tp-common-white); background-color: transparent !important; } .offcanvas__full .mean-container .mean-nav ul li .submenu li .mean-expand.mean-clicked i, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li .mean-expand.mean-clicked i { color: var(--tp-common-white); background-color: transparent !important; } .offcanvas__full .mean-container .mean-nav ul li .submenu li.dropdown-opened > a, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li.dropdown-opened > a { color: var(--tp-common-white); } .offcanvas__full .mean-container .mean-nav ul li .submenu li a, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li a { font-weight: 500; font-size: 20px; line-height: 1.6; color: #75757A; } .offcanvas__full .mean-container .mean-nav ul li .submenu li a:hover, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li a:hover { color: var(--tp-common-white); } .offcanvas__full .mean-container .mean-nav ul li .submenu li:hover > .mean-expand, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li:hover > .mean-expand { color: var(--tp-common-white); background-color: transparent; } .offcanvas__full .mean-container .mean-nav ul li .submenu li:hover > .mean-expand i, .offcanvas__full .mean-container .mean-nav ul li .mega-menu li:hover > .mean-expand i { color: var(--tp-common-white); background-color: transparent; } .offcanvas__full-wrapper { height: 100%; } .offcanvas__full-footer { padding: 30px 100px 50px 150px; border-top: 1px solid rgba(255, 255, 255, 0.08); position: relative; bottom: 0; left: 0; width: 100%; } [dir=rtl] .offcanvas__full-footer { padding: 30px 150px 50px 100px; right: 0; left: auto; } @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) { .offcanvas__full-footer { padding: 29px 40px 50px 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .offcanvas__full-footer { padding: 29px 20px 50px 20px; } } @media (max-width: 575px) { .offcanvas__full-footer { padding: 29px 15px 50px 15px; } } .offcanvas__full-social { margin-left: 100px; } [dir=rtl] .offcanvas__full-social { margin-left: 0; margin-right: 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) { .offcanvas__full-social { margin-left: 0; margin-top: 30px; } [dir=rtl] .offcanvas__full-social { margin-right: 0; } } .offcanvas__full-social a { line-height: 46px; } .offcanvas__full-social a:hover { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .offcanvas__full-link a { font-size: 16px; font-family: var(--tp-ff-inter); color: #75757A; display: inline-block; margin-right: 13px; } [dir=rtl] .offcanvas__full-link a { margin-right: 0; margin-left: 13px; } .offcanvas__full-link a:last-child { margin-right: 0; } [dir=rtl] .offcanvas__full-link a:last-child { margin-left: 0; } .offcanvas__full-link a:hover { color: var(--tp-common-white); } .cartmini__area { position: fixed; right: 0; top: 0; width: 360px; height: 100%; -webkit-transform: translateX(calc(100% + 80px)); -moz-transform: translateX(calc(100% + 80px)); -ms-transform: translateX(calc(100% + 80px)); -o-transform: translateX(calc(100% + 80px)); transform: translateX(calc(100% + 80px)); background: var(--tp-common-white) none repeat scroll 0 0; -webkit-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; -moz-transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; transition: transform 0.45s ease-in-out, opacity 0.45s ease-in-out; z-index: 999; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } [dir=rtl] .cartmini__area { right: auto; left: 0; -webkit-transform: translateX(calc(-100% - 80px)); -moz-transform: translateX(calc(-100% - 80px)); -ms-transform: translateX(calc(-100% - 80px)); -o-transform: translateX(calc(-100% - 80px)); transform: translateX(calc(-100% - 80px)); } .cartmini__area::-webkit-scrollbar { display: none; /* for Chrome, Safari, and Opera */ } .cartmini__area.cartmini-opened { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .cartmini__wrapper { position: relative; min-height: 100%; } .cartmini__title { padding: 20px 20px; border-bottom: 1px solid var(--tp-border-5); box-shadow: 0 0 10px 0 rgba(129, 129, 129, 0.2); } .cartmini__title h4 { font-size: 16px; text-transform: uppercase; font-weight: 600; margin-bottom: 0; } .cartmini__close { position: absolute; top: 17px; right: 20px; } [dir=rtl] .cartmini__close { right: auto; left: 20px; } .cartmini__close-btn { background: transparent; color: var(--tp-common-black); font-size: 22px; } .cartmini__close-btn:hover { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .cartmini__widget { height: 100%; } .cartmini__widget-item { position: relative; display: flex; padding: 20px; padding-right: 35px; border-bottom: 1px solid rgba(129, 129, 129, 0.2); transition: background-color 0.3s; } [dir=rtl] .cartmini__widget-item { padding-right: 20px; padding-left: 35px; } .cartmini__thumb { margin-right: 15px; } [dir=rtl] .cartmini__thumb { margin-right: 0; margin-left: 15px; } .cartmini__thumb img { width: 70px; height: 90px; } .cartmini__content h5 { font-size: 15px; margin-bottom: 12px; font-weight: 500; } .cartmini__content h5 a:hover { color: var(--tp-theme-1); } .cartmini__content .tp-product-quantity { width: 75px; padding: 0; } .cartmini__content .tp-product-quantity .tp-cart-input[type=text] { height: 30px; text-align: center; font-size: 13px; border: 1px solid var(--tp-border-5); background-color: var(--tp-common-white); padding: 0; } .cartmini__content .tp-product-quantity .tp-cart-plus, .cartmini__content .tp-product-quantity .tp-cart-minus { width: 20px; height: 30px; line-height: 30px; display: inline-block; text-align: center; font-size: 13px; left: 3px; } [dir=rtl] .cartmini__content .tp-product-quantity .tp-cart-plus, [dir=rtl] .cartmini__content .tp-product-quantity .tp-cart-minus { left: auto; right: 3px; } .cartmini__content .tp-product-quantity .tp-cart-plus svg, .cartmini__content .tp-product-quantity .tp-cart-minus svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); width: 10px; } .cartmini__content .tp-product-quantity .tp-cart-plus::after, .cartmini__content .tp-product-quantity .tp-cart-minus::after { display: none; } .cartmini__content .tp-product-quantity .tp-cart-plus { left: auto; right: 3px; } [dir=rtl] .cartmini__content .tp-product-quantity .tp-cart-plus { left: 3px; right: auto; } .cartmini__del { position: absolute; top: 10px; right: 10px; width: 25px; height: 25px; line-height: 25px; text-align: center; color: var(--tp-common-black); font-size: 12px; } [dir=rtl] .cartmini__del { right: auto; left: 10px; } .cartmini__del:hover { color: var(--tp-theme-1); } .cartmini__checkout { padding: 20px; padding-bottom: 85px; width: 100%; background: var(--tp-common-white); border-top: 2px solid var(--tp-border-5); } .cartmini__checkout-title h4 { font-size: 18px; display: inline-block; font-weight: 600; margin-bottom: 0; } .cartmini__checkout-title span { float: right; font-size: 20px; color: var(--tp-common-black); font-weight: 600; color: var(--tp-theme-1); } [dir=rtl] .cartmini__checkout-title span { float: left; } .cartmini__checkout-btn .tp-btn { background-color: var(--tp-grey-1); font-size: 15px; text-transform: capitalize; color: var(--tp-common-black); padding: 10px 30px; } .cartmini__checkout-btn .tp-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .cartmini__checkout-btn .tp-btn-border { padding: 10px 30px; font-size: 15px; text-transform: capitalize; } .cartmini__price { font-size: 14px; font-weight: 500; color: var(--tp-theme-1); } .cartmini__quantity { font-size: 12px; font-weight: 500; } .cartmini__empty { margin-top: 150px; } .cartmini__empty img { margin-bottom: 30px; } .cartmini__empty p { font-size: 16px; color: var(--tp-common-black); margin-bottom: 15px; } .cartmini__empty .tp-btn { background-color: var(--tp-grey-1); font-size: 15px; text-transform: capitalize; color: var(--tp-common-black); padding: 10px 30px; } .cartmini__empty .tp-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } /*----------------------------------------*/ /* BREADCRUMB CSS START /*----------------------------------------*/ .breadcrumbs__title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs__title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__title { font-size: 55px; } } @media (max-width: 575px) { .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__title-pre { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-white); margin-bottom: 27px; } .breadcrumbs__title-2 { font-size: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs__title-2 { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__title-2 { font-size: 40px; } } @media (max-width: 575px) { .breadcrumbs__title-2 { font-size: 30px; } } .breadcrumbs__list span { font-family: var(--tp-ff-space); font-weight: 400; font-size: 15px; line-height: 19px; color: #6B6B7B; display: inline-block; } .breadcrumbs__list span.dvdr { font-size: 6px; -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); display: inline-block; color: var(--tp-common-black); padding: 0 12px; } .breadcrumbs__list span:nth-last-child(2).dvdr { color: #6B6B7B; } .breadcrumbs__list span:last-child { color: var(--tp-common-black); } .breadcrumbs__list span a span { -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .breadcrumbs__list span a:hover span { color: var(--tp-theme-1); } .breadcrumbs__content p { font-size: 20px; line-height: 1.3; color: #343438; } .breadcrumbs__content-2 p { font-size: 18px; line-height: 1.56; color: #F0F0F5; } .breadcrumbs__overlay { position: relative; } .breadcrumbs__overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(3, 4, 28, 0.56); } .breadcrumbs__video-btn { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 18px; color: var(--tp-common-white); background-color: var(--tp-common-black); border-radius: 50%; } .breadcrumbs__video-btn svg { -webkit-transform: translate(3px, -2px); -moz-transform: translate(3px, -2px); -ms-transform: translate(3px, -2px); -o-transform: translate(3px, -2px); transform: translate(3px, -2px); } .breadcrumbs__video-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .breadcrumbs__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-blue); opacity: 0.4; } .breadcrumbs__bg-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .breadcrumbs__bg-3 { background-image: -webkit-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -moz-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -ms-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -o-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); } .breadcrumbs__bg-4 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; } .breadcrumbs__bg-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(3, 4, 28, 0.3); } .breadcrumbs__bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: luminosity; opacity: 0.7; } .breadcrumbs__spacing { padding-top: 220px; padding-bottom: 180px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__spacing { padding-top: 170px; padding-bottom: 140px; } } @media (max-width: 575px) { .breadcrumbs__spacing { padding-top: 150px; padding-bottom: 120px; } } .breadcrumbs__spacing-2 { padding-top: 200px; padding-bottom: 235px; } .breadcrumbs__shape-1 { position: absolute; bottom: 20%; left: 8%; z-index: -1; -moz-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; } .breadcrumbs__shape-2 { position: absolute; top: 28%; right: 7%; z-index: -1; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } .breadcrumbs__shape-3 { position: absolute; top: 39%; left: 3%; z-index: -1; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } .breadcrumbs__shape-4 { position: absolute; bottom: 10%; left: 13%; z-index: -1; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } .breadcrumbs__shape-5 { position: absolute; bottom: 20%; right: 39%; z-index: -1; -moz-animation: tprotate 6s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 6s ease-in-out 1s forwards infinite alternate; animation: tprotate 6s ease-in-out 1s forwards infinite alternate; } .breadcrumbs__shape-6 { position: absolute; top: 40%; right: 25%; z-index: -1; -moz-animation: tptranslateX 8s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 8s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 8s ease-in-out 1s forwards infinite alternate; } .breadcrumbs__shape-7 { position: absolute; top: 0; right: 0; z-index: -1; } .breadcrumbs__border { border-bottom: 1px solid var(--tp-border-5); } .breadcrumbs__style-2 .breadcrumbs__title { display: none; } .breadcrumbs__style-3 .breadcrumbs__list { margin-bottom: 5px; } .breadcrumbs__style-3 .breadcrumbs__list span { font-weight: 500; font-size: 16px; color: var(--tp-text-1); } .breadcrumbs__style-3 .breadcrumbs__list span.dvdr { font-size: 6px; color: var(--tp-text-1); } .breadcrumbs__style-3 .breadcrumbs__title { margin-bottom: 18px; } .breadcrumbs__style-4 .breadcrumbs__list { margin-bottom: 6px; } .breadcrumbs__style-4 .breadcrumbs__list span { font-weight: 500; font-size: 16px; color: var(--tp-text-1); } .breadcrumbs__style-4 .breadcrumbs__list span.dvdr { font-size: 6px; color: var(--tp-text-1); } .breadcrumbs__style-4 .breadcrumbs__title { font-size: 90px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__style-4 .breadcrumbs__title { font-size: 65px; } } @media (max-width: 575px) { .breadcrumbs__style-4 .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__style-5.has-breadcrumb-list .breadcrumbs__list { display: block; } .breadcrumbs__style-5 .breadcrumbs__list { margin-bottom: 20px; display: none; } .breadcrumbs__style-5 .breadcrumbs__list span { font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .breadcrumbs__style-5 .breadcrumbs__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumbs__style-5 .breadcrumbs__title { font-size: 70px; color: #F0F0F5; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__style-5 .breadcrumbs__title { font-size: 65px; } } @media (max-width: 575px) { .breadcrumbs__style-5 .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__style-6 .breadcrumbs__list { margin-bottom: 20px; } .breadcrumbs__style-6 .breadcrumbs__list span { font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .breadcrumbs__style-6 .breadcrumbs__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumbs__style-6 .breadcrumbs__list span:nth-last-child(2).dvdr { color: rgba(255, 255, 255, 0.6980392157); } .breadcrumbs__style-6 .breadcrumbs__list span:last-child { color: rgba(255, 255, 255, 0.6980392157); } .breadcrumbs__style-6 .breadcrumbs__title { font-size: 70px; color: #F0F0F5; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs__style-6 .breadcrumbs__title { font-size: 64px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__style-6 .breadcrumbs__title { font-size: 50px; } } @media (max-width: 575px) { .breadcrumbs__style-6 .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__style-7 .breadcrumbs__list { margin-bottom: 20px; } .breadcrumbs__style-7 .breadcrumbs__list span { font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .breadcrumbs__style-7 .breadcrumbs__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumbs__style-7 .breadcrumbs__list span:nth-last-child(2).dvdr { color: rgba(255, 255, 255, 0.8); } .breadcrumbs__style-7 .breadcrumbs__list span:last-child { color: rgba(255, 255, 255, 0.8); } .breadcrumbs__style-7 .breadcrumbs__title { color: #FFFFFF; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumbs__style-7 .breadcrumbs__title { font-size: 64px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumbs__style-7 .breadcrumbs__title { font-size: 50px; } } @media (max-width: 575px) { .breadcrumbs__style-7 .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__style-8 .breadcrumbs__list { margin-bottom: 20px; } .breadcrumbs__style-8 .breadcrumbs__list span { font-weight: 500; font-size: 16px; color: var(--tp-common-black); } .breadcrumbs__style-8 .breadcrumbs__list span.dvdr { font-size: 6px; color: #86868B; } .breadcrumbs__style-8 .breadcrumbs__list span:nth-last-child(2).dvdr { color: #86868B; } .breadcrumbs__style-8 .breadcrumbs__list span:last-child { color: var(--tp-text-1); } .breadcrumbs__style-8 .breadcrumbs__title { color: var(--tp-common-black); font-size: 50px; margin-bottom: 13px; } @media (max-width: 575px) { .breadcrumbs__style-8 .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__style-9 .breadcrumbs__list { margin-bottom: 20px; } .breadcrumbs__style-9 .breadcrumbs__list.has-icon { position: relative; padding-left: 24px; } [dir=rtl] .breadcrumbs__style-9 .breadcrumbs__list.has-icon { padding-left: 0; padding-right: 24px; } .breadcrumbs__style-9 .breadcrumbs__list.has-icon .breadcrumb-icon { position: absolute; left: 0; top: 4px; } .breadcrumbs__style-9 .breadcrumbs__list.has-icon .breadcrumb-icon svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } [dir=rtl] .breadcrumbs__style-9 .breadcrumbs__list.has-icon .breadcrumb-icon { left: auto; right: 0; } .breadcrumbs__style-9 .breadcrumbs__list span { font-weight: 400; font-size: 14px; color: var(--tp-text-1); font-family: var(--tp-ff-roboto); display: inline-block; } .breadcrumbs__style-9 .breadcrumbs__list span.dvdr { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); color: var(--tp-text-1); padding: 0 8px; } .breadcrumbs__style-9 .breadcrumbs__list span:nth-last-child(2).dvdr { color: var(--tp-text-1); } .breadcrumbs__style-9 .breadcrumbs__list span:last-child { color: var(--tp-text-1); } .breadcrumbs__style-9 .breadcrumbs__title { color: var(--tp-common-black); font-size: 50px; margin-bottom: 13px; } @media (max-width: 575px) { .breadcrumbs__style-9 .breadcrumbs__title { font-size: 40px; } } .breadcrumbs__style-10 .breadcrumbs__list { margin-bottom: 20px; } .breadcrumbs__style-10 .breadcrumbs__list.has-icon { position: relative; padding-left: 24px; } .breadcrumbs__style-10 .breadcrumbs__list.has-icon .breadcrumb-icon { position: absolute; left: 0; top: 4px; } .breadcrumbs__style-10 .breadcrumbs__list.has-icon .breadcrumb-icon svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .breadcrumbs__style-10 .breadcrumbs__list span { font-weight: 400; font-size: 14px; color: var(--tp-common-white); } .breadcrumbs__style-10 .breadcrumbs__list span.dvdr { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); color: var(--tp-common-white); font-size: 6px; padding: 0 12px; } .breadcrumbs__style-10 .breadcrumbs__list span:nth-last-child(2).dvdr { color: var(--tp-common-white); } .breadcrumbs__style-10 .breadcrumbs__list span:last-child { color: var(--tp-common-white); } .breadcrumbs__style-10 .breadcrumbs__title { color: var(--tp-common-white); margin-bottom: 27px; font-size: 70px; } @media (max-width: 575px) { .breadcrumbs__style-10 .breadcrumbs__title { font-size: 40px; } } .breadcrumb__title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb__title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__title { font-size: 55px; } } @media (max-width: 575px) { .breadcrumb__title { font-size: 40px; } } .breadcrumb__title-pre { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-white); margin-bottom: 27px; } .breadcrumb__title-2 { font-size: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb__title-2 { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__title-2 { font-size: 40px; } } @media (max-width: 575px) { .breadcrumb__title-2 { font-size: 30px; } } .breadcrumb__list span { font-family: var(--tp-ff-space); font-weight: 400; font-size: 15px; line-height: 19px; color: #6B6B7B; display: inline-block; } .breadcrumb__list span.dvdr { font-size: 6px; -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); display: inline-block; color: var(--tp-common-black); padding: 0 12px; } .breadcrumb__list span:nth-last-child(2).dvdr { color: #6B6B7B; } .breadcrumb__list span:last-child { color: var(--tp-common-black); } .breadcrumb__list span a span { -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; color: #6B6B7B; } .breadcrumb__list span a:hover span { color: var(--tp-theme-1); } .breadcrumb__content p { font-size: 20px; line-height: 1.3; color: #343438; } .breadcrumb__content-2 p { font-size: 18px; line-height: 1.56; color: #F0F0F5; } .breadcrumb__overlay { position: relative; } .breadcrumb__overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(3, 4, 28, 0.56); } .breadcrumb__video-btn { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 18px; color: var(--tp-common-white); background-color: var(--tp-common-black); border-radius: 50%; } .breadcrumb__video-btn svg { -webkit-transform: translate(3px, -2px); -moz-transform: translate(3px, -2px); -ms-transform: translate(3px, -2px); -o-transform: translate(3px, -2px); transform: translate(3px, -2px); } .breadcrumb__video-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .breadcrumb__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-blue); opacity: 0.4; } .breadcrumb__bg-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .breadcrumb__bg-3 { background-image: -webkit-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -moz-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -ms-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -o-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); } .breadcrumb__bg-4 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; } .breadcrumb__bg-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(3, 4, 28, 0.3); } .breadcrumb__bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: luminosity; opacity: 0.7; } .breadcrumb__spacing { padding-top: 220px; padding-bottom: 180px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__spacing { padding-top: 170px; padding-bottom: 140px; } } @media (max-width: 575px) { .breadcrumb__spacing { padding-top: 150px; padding-bottom: 120px; } } .breadcrumb__spacing-2 { padding-top: 200px; padding-bottom: 235px; } .breadcrumb__shape-1 { position: absolute; bottom: 20%; left: 8%; z-index: -1; -moz-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; } .breadcrumb__shape-2 { position: absolute; top: 28%; right: 7%; z-index: -1; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } .breadcrumb__shape-3 { position: absolute; top: 39%; left: 3%; z-index: -1; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } .breadcrumb__shape-4 { position: absolute; bottom: 10%; left: 13%; z-index: -1; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } .breadcrumb__shape-5 { position: absolute; bottom: 20%; right: 39%; z-index: -1; -moz-animation: tprotate 6s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 6s ease-in-out 1s forwards infinite alternate; animation: tprotate 6s ease-in-out 1s forwards infinite alternate; } .breadcrumb__shape-6 { position: absolute; top: 40%; right: 25%; z-index: -1; -moz-animation: tptranslateX 8s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 8s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 8s ease-in-out 1s forwards infinite alternate; } .breadcrumb__shape-7 { position: absolute; top: 0; right: 0; z-index: -1; } .breadcrumb__border { border-bottom: 1px solid var(--tp-border-5); } .breadcrumb__style-2 .breadcrumb__title { display: none; } .breadcrumb__style-3 .breadcrumb__list { margin-bottom: 5px; } .breadcrumb__style-3 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: var(--tp-text-1); } .breadcrumb__style-3 .breadcrumb__list span.dvdr { font-size: 6px; color: var(--tp-text-1); } .breadcrumb__style-3 .breadcrumb__title { margin-bottom: 18px; } .breadcrumb__style-4 .breadcrumb__list { margin-bottom: 6px; } .breadcrumb__style-4 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: var(--tp-text-1); } .breadcrumb__style-4 .breadcrumb__list span.dvdr { font-size: 6px; color: var(--tp-text-1); } .breadcrumb__style-4 .breadcrumb__title { font-size: 90px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__style-4 .breadcrumb__title { font-size: 65px; } } @media (max-width: 575px) { .breadcrumb__style-4 .breadcrumb__title { font-size: 40px; } } .breadcrumb__style-5.has-breadcrumb-list .breadcrumb__list { display: block; } .breadcrumb__style-5 .breadcrumb__list { margin-bottom: 20px; display: none; } .breadcrumb__style-5 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .breadcrumb__style-5 .breadcrumb__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumb__style-5 .breadcrumb__title { font-size: 70px; color: #F0F0F5; } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__style-5 .breadcrumb__title { font-size: 65px; } } @media (max-width: 575px) { .breadcrumb__style-5 .breadcrumb__title { font-size: 40px; } } .breadcrumb__style-6 .breadcrumb__list { margin-bottom: 20px; } .breadcrumb__style-6 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, 0.7); } .breadcrumb__style-6 .breadcrumb__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumb__style-6 .breadcrumb__list span:nth-last-child(2).dvdr { color: rgba(255, 255, 255, 0.6980392157); } .breadcrumb__style-6 .breadcrumb__list span:last-child { color: #FFF; } .breadcrumb__style-6 .breadcrumb__title { font-size: 70px; color: #F0F0F5; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb__style-6 .breadcrumb__title { font-size: 64px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__style-6 .breadcrumb__title { font-size: 50px; } } @media (max-width: 575px) { .breadcrumb__style-6 .breadcrumb__title { font-size: 40px; } } .breadcrumb__style-7 .breadcrumb__list { margin-bottom: 20px; } .breadcrumb__style-7 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .breadcrumb__style-7 .breadcrumb__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumb__style-7 .breadcrumb__list span:nth-last-child(2).dvdr { color: rgba(255, 255, 255, 0.8); } .breadcrumb__style-7 .breadcrumb__list span:last-child { color: rgba(255, 255, 255, 0.8); } .breadcrumb__style-7 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, 0.7); } .breadcrumb__style-7 .breadcrumb__list span.dvdr { font-size: 6px; color: var(--tp-common-white); } .breadcrumb__style-7 .breadcrumb__list span:nth-last-child(2).dvdr { color: rgba(255, 255, 255, 0.6980392157); } .breadcrumb__style-7 .breadcrumb__list span:last-child { color: #FFF; } .breadcrumb__style-7 .breadcrumb__title { color: #FFFFFF; } @media only screen and (min-width: 768px) and (max-width: 991px) { .breadcrumb__style-7 .breadcrumb__title { font-size: 64px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .breadcrumb__style-7 .breadcrumb__title { font-size: 50px; } } @media (max-width: 575px) { .breadcrumb__style-7 .breadcrumb__title { font-size: 40px; } } .breadcrumb__style-8 .breadcrumb__list { margin-bottom: 20px; } .breadcrumb__style-8 .breadcrumb__list span { font-weight: 500; font-size: 16px; color: var(--tp-text-1); } .breadcrumb__style-8 .breadcrumb__list span.dvdr { font-size: 6px; color: #86868B; } .breadcrumb__style-8 .breadcrumb__list span:nth-last-child(2).dvdr { color: #86868B; } .breadcrumb__style-8 .breadcrumb__list span:last-child { color: var(--tp-common-black); } .breadcrumb__style-8 .breadcrumb__title { color: var(--tp-common-black); font-size: 50px; margin-bottom: 13px; } @media (max-width: 575px) { .breadcrumb__style-8 .breadcrumb__title { font-size: 40px; } } .breadcrumb__style-9 .breadcrumb__list { margin-bottom: 20px; } .breadcrumb__style-9 .breadcrumb__list.has-icon { position: relative; padding-left: 24px; } [dir=rtl] .breadcrumb__style-9 .breadcrumb__list.has-icon { padding-left: 0; padding-right: 24px; } .breadcrumb__style-9 .breadcrumb__list.has-icon .breadcrumb-icon { position: absolute; left: 0; top: 4px; } .breadcrumb__style-9 .breadcrumb__list.has-icon .breadcrumb-icon svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } [dir=rtl] .breadcrumb__style-9 .breadcrumb__list.has-icon .breadcrumb-icon { left: auto; right: 0; } .breadcrumb__style-9 .breadcrumb__list span { font-weight: 400; font-size: 14px; color: var(--tp-text-1); font-family: var(--tp-ff-roboto); display: inline-block; } .breadcrumb__style-9 .breadcrumb__list span.dvdr { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); color: var(--tp-text-1); padding: 0 8px; } .breadcrumb__style-9 .breadcrumb__list span:nth-last-child(2).dvdr { color: var(--tp-text-1); } .breadcrumb__style-9 .breadcrumb__list span:last-child { color: var(--tp-text-1); } .breadcrumb__style-9 .breadcrumb__title { color: var(--tp-common-black); font-size: 50px; margin-bottom: 13px; } @media (max-width: 575px) { .breadcrumb__style-9 .breadcrumb__title { font-size: 40px; } } .breadcrumb__style-10 .breadcrumb__list { margin-bottom: 20px; } .breadcrumb__style-10 .breadcrumb__list.has-icon { position: relative; padding-left: 24px; } .breadcrumb__style-10 .breadcrumb__list.has-icon .breadcrumb-icon { position: absolute; left: 0; top: 4px; } .breadcrumb__style-10 .breadcrumb__list.has-icon .breadcrumb-icon svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .breadcrumb__style-10 .breadcrumb__list > span { font-weight: 400; font-size: 14px; color: var(--tp-common-white); } .breadcrumb__style-10 .breadcrumb__list > span a span { color: var(--tp-common-white); } .breadcrumb__style-10 .breadcrumb__list > span.dvdr { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); color: var(--tp-common-white); font-size: 6px; padding: 0 12px; } .breadcrumb__style-10 .breadcrumb__list > span:nth-last-child(2).dvdr { color: rgba(255, 255, 255, 0.7); } .breadcrumb__style-10 .breadcrumb__list > span:last-child { color: rgba(255, 255, 255, 0.7); } .breadcrumb__style-10 .breadcrumb__list > span:last-child span { color: rgba(255, 255, 255, 0.7); } .breadcrumb__style-10 .breadcrumb__title { color: var(--tp-common-white); margin-bottom: 27px; font-size: 70px; } @media (max-width: 575px) { .breadcrumb__style-10 .breadcrumb__title { font-size: 40px; } } body.single.single-post .breadcrumb__area { display: none; } body.single.single-post .breadcrumb__area.tp-postbox-breadcrumb { display: block; } .tp-woo-breadcrumb__list { display: inline-block; margin-bottom: 20px; } .tp-woo-breadcrumb__list a:hover { color: var(--tp-theme-1); } .tp-woo-breadcrumb__list span { font-family: var(--tp-ff-space); font-weight: 400; font-size: 15px; line-height: 19px; color: #6B6B7B; display: inline-block; } .tp-woo-breadcrumb__list span.dvdr { font-size: 6px; -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); display: inline-block; color: var(--tp-common-black); padding: 0 12px; } .tp-woo-breadcrumb__list span:nth-last-child(2).dvdr { color: #6B6B7B; } .tp-woo-breadcrumb__list span:last-child { color: var(--tp-common-black); } .tp-woo-breadcrumb__list span a span { -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .tp-woo-breadcrumb__list span a:hover span { color: var(--tp-theme-1); } .tp-woo-breadcrumb__list.has-icon { position: relative; padding-left: 24px; } [dir=rtl] .tp-woo-breadcrumb__list.has-icon { padding-left: 0; padding-right: 24px; } .tp-woo-breadcrumb__list.has-icon .breadcrumb-icon { position: absolute; left: 0; top: 4px; } .tp-woo-breadcrumb__list.has-icon .breadcrumb-icon svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } [dir=rtl] .tp-woo-breadcrumb__list.has-icon .breadcrumb-icon { left: auto; right: 0; } .tp-woo-breadcrumb__list span { font-weight: 400; font-size: 14px; color: var(--tp-text-1); font-family: var(--tp-ff-roboto); display: inline-block; } .tp-woo-breadcrumb__list span.dvdr { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); color: var(--tp-text-1); padding: 0 8px; font-size: 14px; } .tp-woo-breadcrumb__list span:nth-last-child(2).dvdr { color: var(--tp-text-1); } .tp-woo-breadcrumb__list span:last-child { color: var(--tp-text-1); } .breadcrumb-icon svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } /*----------------------------------------*/ /* ACCORDION CSS START /*----------------------------------------*/ .tp-accordion .accordion-item { background-color: transparent; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } .tp-accordion .accordion-item:first-of-type .accordion-button { border-top-left-radius: 0; border-top-right-radius: 0; } .tp-accordion .accordion-item:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .tp-accordion .accordion-item:last-of-type .accordion-button.collapsed { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .tp-accordion .accordion-button { padding: 30px 0; padding-right: 15px; font-size: 24px; font-weight: 500; color: var(--tp-common-white); background-color: transparent; } .tp-accordion .accordion-button::after { position: absolute; content: "\f107"; font-family: var(--tp-ff-fontawesome); background-image: none; top: 28%; right: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); color: var(--tp-theme-1); width: auto; height: auto; font-weight: 500; } .tp-accordion .accordion-button.collapsed::after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); color: var(--tp-common-white); } .tp-accordion .accordion-button:not(.collapsed) { color: var(--tp-theme-1); background-color: transparent; box-shadow: none; } .tp-accordion .accordion-button:focus { box-shadow: none; } .tp-accordion .accordion-button:hover { color: var(--tp-theme-1); } .tp-accordion .accordion-button:hover::after { color: var(--tp-theme-1); } .tp-accordion .accordion-body { padding: 0 0 25px; } .tp-accordion .accordion-body p { font-size: 16px; color: var(--tp-text-1); } /*----------------------------------------*/ /* NAV TAB CSS START /*----------------------------------------*/ .tp-tab .nav-tabs { padding: 0; margin: 0; border: 0; } .tp-tab .nav-item { padding: 0; margin: 0; border: 0; } .tp-tab .nav-link { padding: 0; margin: 0; border: 0; } /*----------------------------------------*/ /* MODAL CSS START /*----------------------------------------*/ .search__modal .modal-dialog { max-width: 700px; } .search__modal-form { padding: 50px 50px 55px; position: relative; } .search__modal-box p { font-size: 18px; color: #555555; font-weight: 400; margin-bottom: 40px; } .search__modal-box p span { font-weight: 600; } .search__modal-input { position: relative; } .search__modal-input input { width: 100%; height: 55px; line-height: 55px; border: none; border-bottom-color: currentcolor; border-bottom-style: none; border-bottom-width: medium; border-bottom: 2px solid #dadada; outline: none; font-size: 20px; padding-right: 38px; } .search__modal-input input::-webkit-input-placeholder { color: var(--tp-text-3); } .search__modal-input input:-moz-placeholder { color: var(--tp-text-3); } .search__modal-input input::-moz-placeholder { color: var(--tp-text-3); } .search__modal-input input:-ms-input-placeholder { color: var(--tp-text-3); } .search__modal-input input:focus { border-color: var(--tp-theme-1); } .search__modal-input .search-modal-btn { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tp-text-1); } .search__modal-input .search-modal-btn:hover { color: var(--tp-theme-1); } .search-modal-close { position: absolute; top: 20px; right: 20px; font-size: 16px; color: var(--tp-common-black); } .search-modal-close:hover { color: var(--tp-theme-1); } .elements-modal .tp-btn-border { padding: 9px 30px; } /*----------------------------------------*/ /* SEARCH CSS START /*----------------------------------------*/ .search__popup { padding-top: 70px; padding-bottom: 100px; position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 380px; background-color: var(--tp-common-black); z-index: 999; -webkit-transform: translateY(calc(-100% - 80px)); -moz-transform: translateY(calc(-100% - 80px)); -ms-transform: translateY(calc(-100% - 80px)); -o-transform: translateY(calc(-100% - 80px)); transform: translateY(calc(-100% - 80px)); -webkit-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; -moz-transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; transition: transform 0.6s ease-in-out, opacity 0.6s ease-in-out; transition-delay: 0.7s; } .search__popup.search-opened { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); transition-delay: 0s; } .search__popup.search-opened .search__input { -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); opacity: 1; transition-delay: 0.3s; } .search__popup.search-opened .search__input::after { width: 100%; transition-delay: 0.5s; } .search__popup-2 { background-color: var(--tp-common-black-13); } .search__popup-2 .search__input .search-input-field ~ .search-focus-border { background-color: var(--tp-theme-8); } .search__popup-3 .search__input .search-input-field ~ .search-focus-border { background-color: var(--tp-theme-10); } .search__top { margin-bottom: 80px; } .search__input { position: relative; height: 80px; -webkit-transform: translateY(-40px); -moz-transform: translateY(-40px); -ms-transform: translateY(-40px); -o-transform: translateY(-40px); transform: translateY(-40px); transition-delay: 0.5s; opacity: 0; } .search__input::after { position: absolute; content: ""; left: 0; bottom: 0; width: 0%; height: 1px; background-color: rgba(255, 255, 255, 0.3); transition-delay: 0.3s; } .search__input input { width: 100%; height: 100%; background-color: transparent; border: 0; outline: 0; font-size: 24px; color: var(--tp-common-white); border-bottom: 1px solid transparent; padding: 0; padding-right: 30px; } .search__input input::-webkit-input-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search__input input:-moz-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search__input input::-moz-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search__input input:-ms-input-placeholder { color: rgba(255, 255, 255, 0.5); font-size: 24px; } .search__input button { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: var(--tp-common-white); } .search__input .search-input-field ~ .search-focus-border { position: absolute; bottom: 0; left: auto; right: 0; width: 0; height: 1px; background-color: var(--tp-theme-1); -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .search__input .search-input-field:focus ~ .search-focus-border { width: 100%; left: 0; right: auto; -webkit-transition: all 0.5s ease-out 0s; -moz-transition: all 0.5s ease-out 0s; -ms-transition: all 0.5s ease-out 0s; -o-transition: all 0.5s ease-out 0s; transition: all 0.5s ease-out 0s; } .search__close-btn { font-size: 25px; color: rgba(255, 255, 255, 0.3); } .search__close-btn:hover { color: var(--tp-common-white); } .search__result-title { font-size: 50px; letter-spacing: -0.04em; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .search__result-title { font-size: 40px; } } @media (max-width: 575px) { .search__result-title { font-size: 35px; } } .search__result-title span { color: var(--tp-theme-1); display: inline-block; } .search__result-content p { font-size: 16px; line-height: 1.62; color: var(--tp-text-1); } .search__result-input { position: relative; } .search__result-input-box { position: relative; margin-bottom: 20px; } .search__result-input-box button { position: absolute; top: 0; right: 0; padding: 22px 43px; } @media (max-width: 575px) { .search__result-input-box button { position: relative; margin-top: 15px; } } .search__result-input-box button:hover { background-color: var(--tp-common-black); } .search__result-input input { width: 100%; height: 70px; padding-left: 60px; padding-right: 177px; background-color: var(--tp-common-white); border: 1px solid var(--tp-common-white); box-shadow: -3px 0px 0px var(--tp-theme-1), 0px 1px 2px rgba(3, 4, 28, 0.14); } @media (max-width: 575px) { .search__result-input input { padding-right: 25px; } } .search__result-input span { position: absolute; top: 50%; left: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: #A0A0B5; } .search__result-input span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .search__result-tags a { display: inline-block; font-family: var(--tp-ff-space); font-size: 13px !important; font-weight: 500; border: 1px solid #D5D5DD; padding: 5px 18px; line-height: 1; margin-right: 2px; margin-bottom: 7px; text-transform: capitalize; } .search__result-tags a:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .search__blog-item { padding: 50px 50px; border: 1px solid #EAEAEF; } [dir=rtl] .search__blog-item { text-align: center; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .search__blog-item { padding: 30px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .search__blog-item { padding: 25px; } } @media (max-width: 575px) { .search__blog-item { padding: 20px; } } .search__blog-title { font-size: 30px; line-height: 1.2; letter-spacing: -0.04em; margin-bottom: 13px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .search__blog-title { font-size: 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .search__blog-title { font-size: 21px; } .search__blog-title br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .search__blog-title br { display: none; } } @media (max-width: 575px) { .search__blog-title { font-size: 25px; } } .search__blog-title a:hover { color: var(--tp-theme-1); } .search__blog-tag { margin-bottom: 10px; } [dir=rtl] .search__blog-tag { margin-right: 0; margin-left: 15px; } .search__blog-tag a { display: inline-block; background-color: rgba(99, 100, 219, 0.06); font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; line-height: 1; color: var(--tp-common-purple); padding: 4px 12px; } .search__blog-tag a:hover { background-color: var(--tp-common-purple); color: var(--tp-common-white); } .search__blog-meta span { color: var(--tp-text-1); margin-right: 15px; margin-bottom: 10px; display: inline-block; } .search__blog-meta span i, .search__blog-meta span svg { margin-right: 2px; } [dir=rtl] .search__blog-meta span i, [dir=rtl] .search__blog-meta span svg { margin-right: 2px; margin-left: 2px; } .search__blog-meta span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .search__blog-meta span svg path { stroke: #7A7E83; } .search__blog-meta-author { margin-bottom: 10px; } [dir=rtl] .search__blog-meta-author { margin-right: 0; margin-left: 45px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .search__blog-meta-author { margin-right: 20px; } [dir=rtl] .search__blog-meta-author { margin-right: 0; margin-left: 20px; } } .search__blog-meta-author-thumb img { width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; } [dir=rtl] .search__blog-meta-author-thumb img { margin-right: 0; margin-left: 10px; } .search__blog-meta-author-content span { display: inline-block; font-family: var(--tp-ff-inter); font-size: 14px; color: #7A7E83; } .search__blog-meta-author-content span a { color: var(--tp-common-black-11); font-weight: 500; } .search__blog-meta-author-content span a:hover { color: var(--tp-theme-1); } .search__blog-content p { font-size: 15px; line-height: 1.47; color: var(--tp-text-1); margin-bottom: 20px; } .search__blog-btn .tp-btn-border { padding: 8px 29px; } .search__blog-btn .tp-btn-border svg, .search__blog-btn .tp-btn-border i { margin-left: 5px; } [dir=rtl] .search__blog-btn .tp-btn-border svg, [dir=rtl] .search__blog-btn .tp-btn-border i { margin-left: 5px; margin-right: 5px; } .search__blog-btn .tp-btn-border svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .search__blog-btn .tp-btn-border:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .search.search-results .breadcrumb__area { display: none; } .no-results { padding: 73px 100px 95px; border: 2px solid #EAEAEF; background-color: var(--tp-common-white); } .no-results-title { font-weight: 500; font-size: 30px; letter-spacing: -0.04em; margin-bottom: 10px; } .no-results .sidebar__widget-px .sidebar__search input { width: 100%; height: 60px; border: 1px solid var(--tp-grey-15); outline: 0; background-color: var(--tp-grey-15); color: var(--tp-common-black); padding: 0 25px; } .no-results .sidebar__widget-px .sidebar__search input:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .no-results .sidebar__widget-px .sidebar__search input::-webkit-input-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .no-results .sidebar__widget-px .sidebar__search input:-moz-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .no-results .sidebar__widget-px .sidebar__search input::-moz-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .no-results .sidebar__widget-px .sidebar__search input:-ms-input-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .no-results .sidebar__widget-px .sidebar__search button { background-color: transparent; } .no-results .blog-search-content p { margin-bottom: 25px; } .search__result-item-area .tp-pagination ul { padding-left: 0; margin-bottom: 0; } /*----------------------------------------*/ /* SECTION TITLE CSS START /*----------------------------------------*/ .section__title { font-size: 70px; color: var(--tp-common-black); font-weight: var(--tp-fw-bold); line-height: 1; font-family: var(--tp-ff-space); letter-spacing: -0.04em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title { font-size: 45px; } } @media (max-width: 575px) { .section__title { font-size: 35px; } } .section__title-wrapper.section-title-sm .section__title { font-size: 60px; } .section__title-wrapper.is-white p { color: rgba(255, 255, 255, 0.8); } .section__title-white { color: var(--tp-common-white); } .section__title-1-2 { font-size: 60px; color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-1-2 { font-size: 45px; } } @media (max-width: 575px) { .section__title-1-2 { font-size: 35px; } } .section__title-1-2 .section__title-1-pre { color: var(--tp-common-white); } .section__title-1-2 .section__title-highlight { color: var(--tp-common-white); } .section__title-highlight { color: var(--tp-theme-1); position: relative; } .section__title-highlight svg { position: absolute; bottom: -12%; left: 0%; width: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section__title-highlight svg { bottom: -20%; } } .section__title-highlight svg path { stroke: currentColor; fill: currentColor; fill-opacity: 0; stroke-width: 0.2; stroke-dasharray: 800; stroke-dashoffset: 800; -moz-animation: section-highlight 1s ease-in-out 0.3s forwards; -webkit-animation: section-highlight 1s ease-in-out 0.3s forwards; animation: section-highlight 1s ease-in-out 0.3s forwards; } .section__title-pre { font-size: 12px; font-weight: var(--tp-fw-bold); color: var(--tp-common-black); display: inline-block; text-transform: uppercase; padding-left: 13px; position: relative; font-family: var(--tp-ff-space); letter-spacing: 1px; } .section__title-pre::after, .section__title-pre::before { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--tp-theme-1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } .section__title-pre::before { left: auto; right: 0; display: none; } .section__title-pre.is-center { padding-right: 13px; } .section__title-pre.is-center::before { display: block; } .section__title-pre.is-white { color: var(--tp-common-white); } .section__title-pre.is-white::after, .section__title-pre.is-white::before { background-color: var(--tp-common-white); } .section__title-pre-1-2 { color: var(--tp-common-white); padding-left: 0; font-size: 16px; font-weight: 500; text-transform: capitalize; } .section__title-pre-1-2::after { display: none; } .section__title-pre-1-3 { font-size: 14px; font-weight: 500; padding-left: 14px; height: 20px; margin-bottom: 9px; display: inline-block; } [dir=rtl] .section__title-pre-1-3 { padding-left: 0; padding-right: 14px; } .section__title-pre-1-3::after { top: 61%; width: 3px; height: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; -ms-border-radius: 0; border-radius: 0; } [dir=rtl] .section__title-pre-1-3::after { left: auto; right: 0; } .section__title-2 { font-size: 60px; font-weight: 600; font-family: var(--tp-ff-oswald); text-transform: capitalize; color: var(--tp-common-black); } @media (max-width: 575px) { .section__title-2 { font-size: 40px; } } .section__title-pre-2 { font-size: 110px; font-weight: 600; color: var(--tp-text-5); position: absolute; top: -40px; line-height: 1; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: -1; width: 100%; text-align: center; text-transform: uppercase; font-family: var(--tp-ff-oswald); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-pre-2 { font-size: 80px; top: -12px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-pre-2 { font-size: 65px; top: 1px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-pre-2 { font-size: 60px; top: 5px; } } @media (max-width: 575px) { .section__title-pre-2 { font-size: 40px; top: 4px; } } .section__title-wrapper-2 { position: relative; z-index: 1; } .section__title-wrapper-2 p { font-size: 16px; font-family: var(--tp-ff-inter); color: var(--tp-text-6); } .section__title-3 { font-size: 60px; font-weight: 700; font-family: var(--tp-ff-space); text-transform: capitalize; color: var(--tp-common-white); letter-spacing: -0.04em; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-3 { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-3 { font-size: 50px; } } @media (max-width: 575px) { .section__title-3 { font-size: 32px; } .section__title-3 br { display: none; } } .section__title-3.has-gradient span { display: inline-block; background-image: -webkit-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -moz-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -ms-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -o-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; -moz-animation: sectionPreTitle 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: sectionPreTitle 3s ease-in-out 1s forwards infinite alternate; animation: sectionPreTitle 3s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } .section__title-3-2 { font-size: 46px; line-height: 0.96; } @media (max-width: 575px) { .section__title-3-2 { font-size: 35px; } } .section__title-pre-3 { font-size: 12px; font-weight: 500; color: var(--tp-common-white); text-transform: uppercase; font-family: var(--tp-ff-space); opacity: 0.6; display: inline-block; margin-bottom: 10px; position: relative; padding-right: 20px; } [dir=rtl] .section__title-pre-3 { padding-right: 0; padding-left: 20px; } .section__title-pre-3::after { position: absolute; content: ""; top: 49%; left: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 300px; height: 1px; background-image: -webkit-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -moz-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -ms-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -o-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); opacity: 0.3; } [dir=rtl] .section__title-pre-3::after { left: auto; right: 100%; background-image: -webkit-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-pre-3::after { width: 185px; } } @media (max-width: 575px) { .section__title-pre-3::after { width: 75px; } } .section__title-pre-3.has-center { padding-left: 20px; } [dir=rtl] .section__title-pre-3.has-center { padding-right: 20px; } .section__title-pre-3.has-center::before { position: absolute; content: ""; top: 49%; right: 100%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 300px; height: 1px; opacity: 0.3; background-image: -webkit-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -moz-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -ms-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -o-linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: linear-gradient(-90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); } [dir=rtl] .section__title-pre-3.has-center::before { right: auto; left: 100%; background-image: -webkit-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -moz-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -ms-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: -o-linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); background-image: linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100.5%); } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-pre-3.has-center::before { width: 185px; } } @media (max-width: 575px) { .section__title-pre-3.has-center::before { width: 75px; } } .section__title-wrapper-3 > p { font-size: 16px; color: var(--tp-common-white); } .section__title-4 { font-size: 60px; font-weight: 700; font-family: var(--tp-ff-space); color: var(--tp-common-black-solid); letter-spacing: -0.04em; line-height: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-4 { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-4 { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-4 { font-size: 40px; } } @media (max-width: 575px) { .section__title-4 { font-size: 32px; } .section__title-4 br { display: none; } } .section__title-4-2 { font-size: 50px; font-family: var(--tp-ff-space); color: var(--tp-common-black-solid); letter-spacing: -0.04em; line-height: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-4-2 { font-size: 40px; } } @media (max-width: 575px) { .section__title-4-2 { font-size: 35px; } } .section__title-4-white { color: var(--tp-common-white); } .section__title-pre-4 { font-size: 14px; font-weight: 700; color: var(--tp-theme-4); text-transform: uppercase; font-family: var(--tp-ff-space); display: inline-block; margin-bottom: 10px; position: relative; letter-spacing: 0.1em; } .section__title-pre-4-white { color: var(--tp-common-white); } .section__title-5 { font-family: var(--tp-ff-space); font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-5 { font-size: 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-5 { font-size: 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-5 { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-5 { font-size: 40px; } } @media (max-width: 575px) { .section__title-5 { font-size: 40px; } } .section__title-5 .has-light { font-family: var(--tp-ff-inter); font-weight: 200; font-size: 50px; letter-spacing: -0.04em; text-transform: uppercase; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-5 .has-light { font-size: 45px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-5 .has-light { font-size: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-5 .has-light { font-size: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-5 .has-light { font-size: 30px; } } @media (max-width: 575px) { .section__title-5 .has-light { font-size: 30px; } } .section__title-pre-5 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-theme-5); } .section__title-wrapper-6 > p { font-size: 16px; line-height: 24px; color: var(--tp-text-18); font-family: var(--tp-ff-roboto); } .section__title-wrapper-6-white > p { color: var(--tp-common-white); font-size: 18px; } .section__title-wrapper-6-white .section__title-6 { color: var(--tp-common-white); } .section__title-wrapper-6-white .section__title-6-highlight { color: var(--tp-common-white); } .section__title-6 { font-size: 46px; color: var(--tp-common-black); font-weight: var(--tp-fw-bold); line-height: 1; font-family: var(--tp-ff-roboto); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-6 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-6 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-6 { font-size: 45px; } } @media (max-width: 575px) { .section__title-6 { font-size: 35px; } } .section__title-6-white { color: var(--tp-common-white); } .section__title-6-white .section__title-6-highlight { color: var(--tp-common-white); } .section__title-6-highlight { color: var(--tp-theme-6); position: relative; display: inline-block; } .section__title-6-highlight svg { position: absolute; bottom: -12%; left: 1%; width: 110%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section__title-6-highlight svg { bottom: -20%; } } .section__title-6-highlight svg path { stroke: currentColor; fill: currentColor; fill-opacity: 0; stroke-width: 0.2; stroke-dasharray: 800; stroke-dashoffset: 800; -moz-animation: section-highlight 1s ease-in-out 0.3s forwards; -webkit-animation: section-highlight 1s ease-in-out 0.3s forwards; animation: section-highlight 1s ease-in-out 0.3s forwards; } .section__title-pre-6 { display: inline-block; font-weight: 500; font-size: 13px; letter-spacing: 0.2em; color: var(--tp-theme-6); font-family: var(--tp-ff-roboto); } .section__title-pre-6.is-white { color: var(--tp-common-white); } .section__title-wrapper-7 { position: relative; z-index: 1; } .section__title-wrapper-7 > p { font-family: var(--tp-ff-inter); font-size: 20px; line-height: 1.5; color: var(--tp-text-1); } @media (max-width: 575px) { .section__title-wrapper-7 > p br { display: none; } } .section__title-wrapper-7-white > p { color: var(--tp-common-white); font-size: 18px; } .section__title-wrapper-7-white .section__title-6 { color: var(--tp-common-white); } .section__title-wrapper-7-white .section__title-6-highlight { color: var(--tp-common-white); } .section__title-7 { font-size: 60px; color: var(--tp-common-black); font-weight: var(--tp-fw-bold); line-height: 1.1; font-family: var(--tp-ff-play); margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-7 { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-7 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-7 { font-size: 45px; } } @media (max-width: 575px) { .section__title-7 { font-size: 35px; } } .section__title-7-white { color: var(--tp-common-white); } .section__title-7-highlight { position: relative; display: inline-block; } .section__title-7-highlight svg { position: absolute; bottom: -5%; left: 1%; width: 0%; z-index: -1; -moz-animation: section-highlight-4 1s ease-in-out 0.3s forwards; -webkit-animation: section-highlight-4 1s ease-in-out 0.3s forwards; animation: section-highlight-4 1s ease-in-out 0.3s forwards; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .section__title-7-highlight svg { bottom: -20%; } } .section__title-7-highlight svg path { stroke: var(--tp-common-yellow-3); fill: var(--tp-common-yellow-3); stroke-dasharray: 560; stroke-dashoffset: 560; animation: section_stroke 3s linear forwards infinite, section_stroke_fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s forwards; -webkit-animation: section_stroke 3s linear forwards infinite, section_stroke_fill 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.5s forwards; } @-webkit-keyframes section_stroke { 0% { stroke-dashoffset: 560; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -560; } } @-moz-keyframes section_stroke { 0% { stroke-dashoffset: 560; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -560; } } @-ms-keyframes section_stroke { 0% { stroke-dashoffset: 560; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -560; } } @keyframes section_stroke { 0% { stroke-dashoffset: 560; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -560; } } @-webkit-keyframes section_stroke { 0% { fill: transparent; } 50% { fill: var(--tp-common-yellow-3); } 100% { fill: transparent; } } @-moz-keyframes section_stroke { 0% { fill: transparent; } 50% { fill: var(--tp-common-yellow-3); } 100% { fill: transparent; } } @-ms-keyframes section_stroke { 0% { fill: transparent; } 50% { fill: var(--tp-common-yellow-3); } 100% { fill: transparent; } } @keyframes section_stroke { 0% { fill: transparent; } 50% { fill: var(--tp-common-yellow-3); } 100% { fill: transparent; } } .section__title-pre-7 { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 18px; color: var(--tp-theme-7); margin-bottom: 7px; display: inline-block; } .section__title-wrapper-8 { position: relative; z-index: 1; } .section__title-wrapper-8 p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); } .section__title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 70px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-8 { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-8 { font-size: 56px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-8 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-8 { font-size: 45px; } } @media (max-width: 575px) { .section__title-8 { font-size: 35px; } } .section__title-highlight-8 { position: relative; } .section__title-highlight-8 svg { position: absolute; bottom: 6%; left: -3%; z-index: -1; width: 100%; } .section__title-highlight-8 svg path { stroke: var(--tp-theme-8); stroke-width: 6; } .section__title-pre-8 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; color: var(--tp-theme-8); display: inline-block; margin-bottom: 10px; } .section__title-wrapper-9 { position: relative; z-index: 1; } .section__title-wrapper-9.is-center { text-align: center; } .section__title-wrapper-9.is-center .section__title-pre-9 { padding-top: 7px; padding-left: 0; } [dir=rtl] .section__title-wrapper-9.is-center .section__title-pre-9 { padding-right: 0; } .section__title-wrapper-9.is-center .section__title-pre-9::after { width: 40px; height: 3px; left: 50%; top: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } [dir=rtl] .section__title-wrapper-9.is-center .section__title-pre-9::after { left: auto; right: 50%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); } .section__title-wrapper-9 p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); } .section__title-wrapper-9.has-black-p p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; color: var(--tp-text-1); margin-top: 25px; } .section__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 80px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-9 { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-9 { font-size: 56px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-9 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-9 { font-size: 45px; } } @media (max-width: 575px) { .section__title-9 { font-size: 35px; } } .section__title-pre-9 { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 600; font-size: 14px; text-transform: uppercase; color: var(--tp-common-black); position: relative; padding-left: 13px; } [dir=rtl] .section__title-pre-9 { padding-left: 0; padding-right: 13px; } .section__title-pre-9::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 20px; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); } [dir=rtl] .section__title-pre-9::after { left: auto; right: 0; } .section__title-wrapper-10 { position: relative; z-index: 1; } .section__title-wrapper-10 p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; } .section__title-wrapper-10.is-white .section__title-10 { color: var(--tp-common-white); } .section__title-10 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-10 { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-10 { font-size: 56px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-10 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-10 { font-size: 45px; } } @media (max-width: 575px) { .section__title-10 { font-size: 35px; } } .section__title-pre-10 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; color: var(--tp-common-orange-4); margin-bottom: 6px; } .section__title-wrapper-11 { position: relative; z-index: 1; } .section__title-wrapper-11 p { font-family: var(--tp-ff-syne); font-size: 16px; line-height: 1.5; } .section__title-wrapper-11.is-white .section__title-10 { color: var(--tp-common-white); } .section__title-11 { font-family: var(--tp-ff-rajdhani); font-size: 70px; line-height: 1; letter-spacing: -0.02em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .section__title-11 { font-size: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .section__title-11 { font-size: 56px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .section__title-11 { font-size: 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .section__title-11 { font-size: 45px; } } @media (max-width: 575px) { .section__title-11 { font-size: 35px; } } .section__title-pre-11 { display: inline-block; font-family: var(--tp-ff-syne); font-size: 13px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-common-black-15); padding-left: 11px; position: relative; } .section__title-pre-11::after { position: absolute; content: ""; left: 0; top: 46%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 2px; height: 108%; background-color: var(--tp-theme-1); } .section__title-wrapper-13 { position: relative; z-index: 1; } .section__title-13 { font-family: var(--tp-ff-roboto); font-size: 30px; line-height: 1; position: relative; padding-left: 16px; } [dir=rtl] .section__title-13 { padding-left: 0; padding-right: 16px; } .section__title-13::after { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 3px; background-color: var(--tp-theme-1); } [dir=rtl] .section__title-13::after { left: auto; right: 0; } .tp-section-spacing { padding-top: 90px; padding-bottom: 265px; } .tp-section-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .tp-section-wrapper p { font-size: 16px; line-height: 1.62; padding-left: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-wrapper p { padding-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-section-wrapper p { padding-left: 0; margin-top: 30px; } } .tp-section-wrapper-2.tp-section-wrapper-2-sm .tp-section-title-2 { font-size: 50px; margin-bottom: 17px; } @media (max-width: 575px) { .tp-section-wrapper-2.tp-section-wrapper-2-sm .tp-section-title-2 { font-size: 35px; } } .tp-section-wrapper-2.tp-section-wrapper-2-sm p { font-size: 18px; color: var(--tp-text-1); } .tp-section-wrapper-2 p { font-size: 16px; line-height: 1.62; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-section-wrapper-2 p br { display: none; } } .tp-section-wrapper-3 p { font-size: 16px; } .tp-section-wrapper-5 p { font-size: 18px; } .tp-section-subtitle { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-theme-1); } .tp-section-subtitle-2 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--tp-common-black); } .tp-section-subtitle-2.is-uppercase { text-transform: uppercase; } .tp-section-subtitle-2.subtitle-mb-2 { margin-bottom: 2px; } .tp-section-subtitle-2.subtitle-mb-7 { margin-bottom: 7px; } .tp-section-subtitle-2.subtitle-mb-9 { margin-bottom: 9px; } .tp-section-subtitle-2.subtitle-mb-12 { margin-bottom: 12px; } .tp-section-subtitle-3 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--tp-common-black); text-transform: uppercase; } .tp-section-subtitle-5 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-purple); background-color: rgba(99, 100, 219, 0.06); padding: 10px 20px; margin-bottom: 17px; } .tp-section-title { font-size: 34px; line-height: 1; letter-spacing: -0.04em; } .tp-section-title-2 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-title-2 { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-section-title-2 { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-section-title-2 { font-size: 45px; } } @media (max-width: 575px) { .tp-section-title-2 { font-size: 30px; } } .tp-section-title-2.font-70 { font-size: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-title-2.font-70 { font-size: 48px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-section-title-2.font-70 { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .tp-section-title-2.font-70 { font-size: 45px; } } @media (max-width: 575px) { .tp-section-title-2.font-70 { font-size: 30px; } } .tp-section-title-2.font-40 { font-size: 40px; } @media (max-width: 575px) { .tp-section-title-2.font-40 { font-size: 30px; } } .tp-section-title-3 { font-size: 50px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 11px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-section-title-3 { font-size: 43px; } } @media (max-width: 575px) { .tp-section-title-3 { font-size: 40px; } } .tp-section-title-4 { font-size: 40px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); } @media (max-width: 575px) { .tp-section-title-4 { font-size: 25px; } } .tp-section-title-4 img { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); margin-right: 10px; } [dir=rtl] .tp-section-title-4 img { margin-right: 0; margin-left: 10px; } .tp-section-title-5 { font-size: 50px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 22px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-section-title-5 { font-size: 45px; } } @-webkit-keyframes section-highlight { 0% { stroke-dashoffset: 800; } 80% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @-moz-keyframes section-highlight { 0% { stroke-dashoffset: 800; } 80% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @-ms-keyframes section-highlight { 0% { stroke-dashoffset: 800; } 80% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @keyframes section-highlight { 0% { stroke-dashoffset: 800; } 80% { stroke-dashoffset: 0; fill-opacity: 0; } 100% { stroke-dashoffset: 0; fill-opacity: 1; } } @-webkit-keyframes section-highlight-2 { 0%, 100% { stroke-dashoffset: 800; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @-moz-keyframes section-highlight-2 { 0%, 100% { stroke-dashoffset: 800; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @-ms-keyframes section-highlight-2 { 0%, 100% { stroke-dashoffset: 800; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @keyframes section-highlight-2 { 0%, 100% { stroke-dashoffset: 800; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } } @-webkit-keyframes section-highlight-3 { 100% { stroke-dashoffset: -900; } } @-moz-keyframes section-highlight-3 { 100% { stroke-dashoffset: -900; } } @-ms-keyframes section-highlight-3 { 100% { stroke-dashoffset: -900; } } @keyframes section-highlight-3 { 100% { stroke-dashoffset: -900; } } @-webkit-keyframes section-highlight-4 { 100% { width: 100%; } } @-moz-keyframes section-highlight-4 { 100% { width: 100%; } } @-ms-keyframes section-highlight-4 { 100% { width: 100%; } } @keyframes section-highlight-4 { 100% { width: 100%; } } /*----------------------------------------*/ /* 02. LOGO CSS START /*----------------------------------------*/ /* logo css */ .logo .logo-dark { display: none; } .logo-2 { padding-top: 8px; padding-bottom: 8px; } .logo-border { position: relative; padding: 8px 0; } .logo-border::after { position: absolute; content: ""; right: 23%; top: 0; width: 1px; height: 102%; background-color: var(--tp-border-1); } [dir=rtl] .logo-border::after { right: auto; left: 23%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .logo-border::after { display: none; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .logo-border::after { right: 0; } [dir=rtl] .logo-border::after { right: auto; left: 0; } } /*----------------------------------------*/ /* 03. HEADER CSS START /*----------------------------------------*/ .header__transparent { position: absolute !important; left: 0; margin: auto; top: 0; width: 100%; z-index: 99; background: transparent; } .header__top-5 { margin-top: 5px; } .header__top-10 { background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); box-shadow: 0px 4px 10px rgba(150, 21, 35, 0.3); } .header__bottom-border { border-top: 1px solid var(--tp-border-1); border-bottom: 1px solid var(--tp-border-1); } .header__bottom-border-2 { border-bottom: 1px solid var(--tp-border-5); } .header__bottom-border-3 { border-bottom: 1px solid var(--tp-border-1); } .header__bottom-border-4 { border-bottom: 1px solid #E2E2E2; } .header__bottom-3 { position: relative; z-index: 99; background-color: var(--tp-common-black-5); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__bottom-3 { padding-top: 25px; padding-bottom: 25px; } } .header__bottom-4 { background-color: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); position: relative; z-index: 9; } .header__bottom-8 { padding-left: 65px; padding-right: 65px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__bottom-8 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .header__bottom-8 { padding-top: 20px; padding-bottom: 20px; padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .header__bottom-8 { padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .header__bottom-8 { padding-top: 20px; padding-bottom: 20px; padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__bottom-9 { padding-top: 20px; padding-bottom: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__bottom-10 { padding-top: 20px; padding-bottom: 20px; } } .header__bottom-11 { padding-left: 87px; padding-right: 87px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .header__bottom-11 { padding-left: 57px; padding-right: 57px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header__bottom-11 { padding-left: 47px; padding-right: 47px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__bottom-11 { padding-left: 37px; padding-right: 37px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__bottom-11 { padding-left: 10px; padding-right: 10px; padding-top: 20px; padding-bottom: 20px; } } .header__bottom-12 { padding-left: 40px; padding-right: 40px; padding-top: 25px; padding-bottom: 25px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .header__bottom-12 { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .header__bottom-12 { padding-left: 0; padding-right: 0; } } .header__bottom-12 .hamburger-btn-8:hover { color: var(--tp-common-white); } .header__bottom-12 .hamburger-btn-8:hover span { background-color: var(--tp-common-white); } .header__bottom-12 .hamburger-btn-8:hover::after, .header__bottom-12 .hamburger-btn-8:hover::before { background-color: var(--tp-common-white); } .header__bottom-12.header__white-slider .hamburger-btn-8:hover { color: var(--tp-common-white); } .header__bottom-12.header__white-slider .hamburger-btn-8:hover::after, .header__bottom-12.header__white-slider .hamburger-btn-8:hover::before { background-color: var(--tp-common-white); } .header__bottom-12.header__white-slider .header__info-12 ul li span a:hover { color: var(--tp-common-white); } .header__bottom-12.header__white-slider .header-btn-12:hover { color: var(--tp-common-white); } .header__bottom-12.header__white-slider .header-btn-12:hover .header-btn-12-icon span { color: var(--tp-common-black); background-color: var(--tp-common-white); } .header__bottom-13-white .header__search-13 input { border: 1px solid #E7E7E7; box-shadow: none; } .header__bottom-13-white .header__search-13 input:focus { border-color: var(--tp-common-black); } .header__bottom-13-white .header__action-13 ul li a .tp-item-count, .header__bottom-13-white .header__action-13 ul li a .cart__count, .header__bottom-13-white .header__action-13 ul li button .tp-item-count, .header__bottom-13-white .header__action-13 ul li button .cart__count { border-color: var(--tp-common-white); } .header__bottom-13-white .cart__count { border-color: var(--tp-common-white); } .header__bottom-14 .header__search-13 input { box-shadow: none; border: 1px solid #E7E7E7; } .header__bottom-14 .header__action-13 ul li button .tp-item-count { border-color: var(--tp-common-white); } .header__bottom-left-11 { margin-left: -90px; } [dir=rtl] .header__bottom-left-11 { margin-left: 0; margin-right: -90px; } [dir=rtl] .header__bottom-right { padding-left: 0; padding-right: 30px; } [dir=rtl] .header__bottom-right-6 { padding-left: 0; padding-right: 30px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header__bottom-right-6 { padding-left: 0; } [dir=rtl] .header__bottom-right-6 { padding-right: 0; } } .header__info ul li { list-style: none; display: inline-block; margin-right: 14px; padding: 4px 0; padding-right: 20px; position: relative; } [dir=rtl] .header__info ul li { margin-right: 0; margin-left: 14px; padding-right: 0; padding-left: 20px; } .header__info ul li::after { position: absolute; content: ""; top: 0; right: 0; width: 1px; height: 104%; background-color: var(--tp-border-1); } [dir=rtl] .header__info ul li::after { right: auto; left: 0; } .header__info ul li a, .header__info ul li span { color: var(--tp-common-white-op-7); font-size: 14px; font-weight: 500; } .header__info ul li a:hover, .header__info ul li span:hover { color: var(--tp-theme-1); } .header__info ul li a:hover span, .header__info ul li span:hover span { color: var(--tp-common-white); } .header__info ul li a span, .header__info ul li span span { margin-right: 4px; color: var(--tp-common-white); } [dir=rtl] .header__info ul li a span, [dir=rtl] .header__info ul li span span { margin-right: 0; margin-left: 4px; } .header__info ul li a span svg, .header__info ul li span span svg { width: 16px; height: 16px; -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .header__info-item { margin-right: 60px; } [dir=rtl] .header__info-item { margin-right: 0; margin-left: 60px; } .header__info-item:last-child { margin-right: 0; } [dir=rtl] .header__info-item:last-child { margin-left: 0; } .header__info-icon span { display: inline-block; width: 50px; height: 50px; line-height: 46px; text-align: center; border: 1.5px solid var(--tp-theme-4); font-size: 18px; color: var(--tp-theme-4); border-radius: 50%; margin-right: 10px; } [dir=rtl] .header__info-icon span { margin-right: 0; margin-left: 10px; } .header__info-icon span svg { width: 18px; height: 18px; } .header__info-content h4 { font-size: 18px; font-weight: 700; margin-bottom: 3px; color: var(--tp-common-black-solid); } .header__info-content p { font-size: 14px; margin-bottom: 0; line-height: 1; } .header__info-content p a:hover { color: var(--tp-theme-4); } [dir=rtl] .header__info-8 { margin-right: 0; margin-left: 90px; } .header__info-8 ul li { list-style: none; display: inline-block; } .header__info-8 ul li:last-child { margin-right: 0; } [dir=rtl] .header__info-8 ul li:last-child { margin-left: 0; } .header__info-8 ul li span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: #FFFFFF; } .header__info-8 ul li span i { margin-right: 5px; } [dir=rtl] .header__info-8 ul li span i { margin-right: 0; margin-left: 5px; } .header__info-8 ul li span svg { margin-right: 5px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .header__info-8 ul li span svg { margin-right: 0; margin-left: 5px; } .header__info-10 ul li { padding-top: 5px; padding-bottom: 7px; } .header__info-10 ul li::after { height: 100%; background-color: rgba(255, 255, 255, 0.16); } .header__info-10 ul li a { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 1; color: rgba(255, 255, 255, 0.8); } .header__info-10 ul li a:hover { color: var(--tp-common-white); } .header__info-11 ul li:last-child { margin-right: 0; } [dir=rtl] .header__info-11 ul li:last-child { margin-left: 0; } .header__info-11 ul li span { font-family: var(--tp-ff-syne); color: var(--tp-common-black); text-transform: uppercase; font-size: 14px; font-weight: 600; } .header__info-11 ul li span i { margin-right: 5px; } [dir=rtl] .header__info-11 ul li span i { margin-right: 0; margin-left: 5px; } .header__info-11 ul li span svg { margin-right: 5px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .header__info-11 ul li span svg { margin-right: 0; margin-left: 5px; } .header__info-11 ul li span a span { color: var(--tp-common-black); } .header__info-11 ul li span a:hover { color: var(--tp-common-black); } .header__info-12 ul li::after { display: none; } .header__info-12 ul li:last-child { margin-right: 0; } [dir=rtl] .header__info-12 ul li:last-child { margin-left: 0; } .header__info-12 ul li span, .header__info-12 ul li a { font-family: var(--tp-ff-inter); color: var(--tp-common-white); font-size: 16px; font-weight: 500; } .header__info-12 ul li span i, .header__info-12 ul li a i { margin-right: 5px; } [dir=rtl] .header__info-12 ul li span i, [dir=rtl] .header__info-12 ul li a i { margin-right: 0; margin-left: 5px; } .header__info-12 ul li span svg, .header__info-12 ul li a svg { margin-right: 5px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .header__info-12 ul li span svg, [dir=rtl] .header__info-12 ul li a svg { margin-right: 0; margin-left: 5px; } .header__info-12 ul li span a, .header__info-12 ul li a a { color: var(--tp-common-white); } .header__info-12 ul li span a span, .header__info-12 ul li a a span { color: var(--tp-common-black); } .header__info-12 ul li span a:hover, .header__info-12 ul li a a:hover { color: var(--tp-common-white); } .header__info-12 ul li .hamburger-btn-8:hover { color: var(--tp-common-white); } .header__info-12 ul li .hamburger-btn-8:hover::after, .header__info-12 ul li .hamburger-btn-8:hover::before { background-color: var(--tp-common-white); } .header__border { border-bottom: 1px solid rgba(3, 18, 32, 0.07); } .header__border-3 { border-bottom: 1px solid var(--tp-border-1); } .header__search-input { position: relative; } .header__search-input input { width: 100%; height: 40px; background-color: var(--tp-grey-1); border: 1px solid var(--tp-grey-1); padding: 0 20px; padding-right: 60px; } [dir=rtl] .header__search-input input { padding-left: 60px; padding-right: 20px; } .header__search-input input::-webkit-input-placeholder { color: var(--tp-text-3); } .header__search-input input:-moz-placeholder { color: var(--tp-text-3); } .header__search-input input::-moz-placeholder { color: var(--tp-text-3); } .header__search-input input:-ms-input-placeholder { color: var(--tp-text-3); } .header__search-btn { position: absolute; top: 46%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 15px; font-size: 16px; color: var(--tp-common-black); padding-left: 17px; background-color: var(--tp-grey-1); } [dir=rtl] .header__search-btn { padding-left: 0; padding-right: 17px; right: auto; left: 15px; } .header__search-btn::after { position: absolute; content: ""; left: 0; top: 57%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 100%; width: 1px; background-color: rgba(3, 18, 32, 0.1); } [dir=rtl] .header__search-btn::after { left: auto; right: 0; } .header__search-2 { margin-left: 13px; } [dir=rtl] .header__search-2 { margin-left: 0; margin-right: 13px; } .header__search-2 input { height: 44px; line-height: 44px; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px; background-color: var(--tp-grey-5); } .header__search-2 input::-webkit-input-placeholder { color: var(--tp-text-10); } .header__search-2 input:-moz-placeholder { color: var(--tp-text-10); } .header__search-2 input::-moz-placeholder { color: var(--tp-text-10); } .header__search-2 input:-ms-input-placeholder { color: var(--tp-text-10); } .header__search-2 button::after { background-color: rgba(62, 132, 84, 0.14); } .header__search-3 button svg path { stroke: var(--tp-theme-3); } .header__search-13 { position: relative; } .header__search-13 input { width: 320px; height: 46px; background-color: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.1); border-radius: 30px; border: 0; outline: 0; padding: 0 25px; } .header__search-13 button { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .header__search-13 button { right: auto; left: 20px; } .header__search-13 button svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .header__hamburger { margin-left: 0; margin-right: 50px; } .header__hamburger-2 { margin-top: 0; margin-left: 18px; } [dir=rtl] .header__hamburger-2 { margin-left: 0; margin-right: 18px; } .header__hamburger-2 .hamburger-btn-black:hover span { background-color: var(--tp-theme-2); } .header__hamburger-5 { margin-top: 0; } .header__hamburger-5 .hamburger-btn-black { top: -5px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__hamburger-5 .hamburger-btn-black { top: -6px; } } .header__action ul { display: flex; align-items: center; position: relative; } .header__action ul::before { position: absolute; content: ""; top: 0; right: 0; width: 1px; height: 100%; background-color: var(--tp-border-1); } [dir=rtl] .header__action ul::before { right: auto; left: 0; } .header__action ul li { list-style: none; position: relative; height: 58px; width: 70px; line-height: 56px; text-align: center; } .header__action ul li::after { position: absolute; content: ""; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--tp-border-1); } [dir=rtl] .header__action ul li::after { left: auto; right: 0; } .header__action ul li:last-child { margin-right: 0; padding-right: 0; } [dir=rtl] .header__action ul li:last-child { margin-left: 0; padding-left: 0; } .header__action ul li a, .header__action ul li button { display: inline-block; text-align: center; font-size: 20px; color: var(--tp-common-white); } .header__action ul li a:hover, .header__action ul li button:hover { border-color: var(--tp-common-black-3); } .header__action ul li a svg, .header__action ul li button svg { width: 18px; height: 18px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .header__action ul li .hamburger-btn { top: -4px; } .header__action-8 ul li { display: inline-block; list-style: none; margin-right: 23px; } [dir=rtl] .header__action-8 ul li { margin-right: 0; margin-left: 23px; } .header__action-8 ul li:last-child { margin-right: 0; } [dir=rtl] .header__action-8 ul li:last-child { margin-left: 0; } .header__action-8 ul li a { color: var(--tp-common-white); font-size: 16px; } .header__action-8 ul li a svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .header__action-10 ul li { display: inline-block; list-style: none; margin-right: 25px; } [dir=rtl] .header__action-10 ul li { margin-right: 0; margin-left: 25px; } .header__action-10 ul li:last-child { margin-right: 0; } [dir=rtl] .header__action-10 ul li:last-child { margin-left: 0; } .header__action-10 ul li a { color: var(--tp-common-white); font-size: 16px; } .header__action-10 ul li a svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .header__action-10 ul li a:hover { color: var(--tp-theme-10); } .header__action-11 ul li:last-child { margin-right: 0; } [dir=rtl] .header__action-11 ul li:last-child { margin-left: 0; } .header__action-11 ul li a { color: var(--tp-common-black); font-size: 16px; } .header__action-11 ul li a:hover { color: var(--tp-common-black); } .header__action-11 ul li .hamburger-btn { color: var(--tp-common-black); } .header__action-11 ul li .hamburger-btn::after { color: var(--tp-common-black); } .header__action-11 ul li .hamburger-btn span { background-color: var(--tp-common-black); } .header__action-13 { margin-left: 42px; } [dir=rtl] .header__action-13 { margin-left: 0; margin-right: 42px; } .header__action-13 ul li { list-style: none; display: inline-block; margin-right: 19px; } [dir=rtl] .header__action-13 ul li { margin-right: 0; margin-left: 19px; } .header__action-13 ul li:last-child { margin-right: 0; } [dir=rtl] .header__action-13 ul li:last-child { margin-left: 0; } .header__action-13 ul li a, .header__action-13 ul li button { font-size: 18px; display: inline-block; position: relative; } .header__action-13 ul li a .tp-item-count, .header__action-13 ul li a .cart__count, .header__action-13 ul li button .tp-item-count, .header__action-13 ul li button .cart__count { position: absolute; top: -6px; right: -12px; display: inline-block; font-size: 12px; font-weight: 700; color: var(--tp-common-white); background-color: var(--tp-theme-1); width: 23px; height: 23px; line-height: 17px; border: 3px solid #F0F2EE; text-align: center; border-radius: 50%; } .header__action-13 ul li a svg, .header__action-13 ul li button svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .header__action-13 ul li a:hover, .header__action-13 ul li button:hover { color: var(--tp-common-black); } .header__sticky.header-sticky { position: fixed !important; left: 0; margin: auto; top: 0; width: 100%; box-shadow: 0 0 60px 0 rgba(0, 0, 0, 0.07); z-index: 99; -webkit-animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; animation: 500ms ease-in-out 0s normal none 1 running fadeInDown; -webkit-box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1); box-shadow: 0px 4px 10px rgba(3, 4, 28, 0.1); background: var(--tp-common-white); /* logo change on sticky active */ /* header border */ /* for white header sticky */ /* for header sticky home 4 lawyer */ /* menu css on sticky active */ /* menu css for home 4 lawyer */ /* menu css for home 5 */ /* menu css for home 6 */ /* menu css for home 7 */ /* menu css for home 8 */ /* menu css for home 8 */ /* menu css for home 8 */ } .header__sticky.header-sticky.header-sticky-blur { background-color: rgba(255, 255, 255, 0.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.12); } .header__sticky.header-sticky .header__action ul li button { color: var(--tp-common-black); } .header__sticky.header-sticky .logo-dark { display: block; } .header__sticky.header-sticky .logo-light { display: none; } .header__sticky.header-sticky .logo-border { padding: 14px 0; } .header__sticky.header-sticky .logo-border::after { background-color: #EAEAEF; height: 100%; } .header__sticky.header-sticky .hamburger-btn span { background-color: var(--tp-common-black); } .header__sticky.header-sticky.header__bottom-border { border: 0 !important; } .header__sticky.header-sticky .tp-header-btn-3 { border-color: rgba(3, 4, 28, 0.14); color: var(--tp-common-black); } .header__sticky.header-sticky .tp-header-btn-3:hover { background-color: var(--tp-common-black); border-color: var(--tp-common-black); color: var(--tp-common-white); } .header__sticky.header-sticky.header__sticky-black { background: var(--tp-common-black); /* menu css for home 8 */ } .header__sticky.header-sticky.header__sticky-black .hamburger-btn span { background-color: var(--tp-common-white); } .header__sticky.header-sticky.header__sticky-black .main-menu ul li a { color: var(--tp-common-white); padding: 22px 0; } .header__sticky.header-sticky.header__sticky-black .main-menu ul li a::after { color: var(--tp-common-white); } .header__sticky.header-sticky.header__sticky-black .main-menu ul li .submenu li a { color: var(--tp-common-black); padding: 0 25px; padding-bottom: 1px; } .header__sticky.header-sticky.header__sticky-black .main-menu ul li .submenu li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky.header__sticky-black .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-3); } .header__sticky.header-sticky.header__sticky-black .main-menu ul li .submenu li:hover > a::after { color: var(--tp-theme-3); } .header__sticky.header-sticky.header__sticky-black .main-menu ul li:hover > a { color: var(--tp-theme-3); } .header__sticky.header-sticky.header__sticky-black .main-menu ul li:hover > a::after { color: var(--tp-theme-3); } .header__sticky.header-sticky.header__sticky-black .main-menu-3 ul li .submenu li a { color: var(--tp-common-white); } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li a { padding: 22px 0; } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li a::before { bottom: 0; } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu { background-color: var(--tp-common-black-13); border: 1px solid rgba(255, 255, 255, 0.1); } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; color: var(--tp-common-white); } [dir=rtl] .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu li a::after { color: var(--tp-common-white); } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu li:hover > a { padding-left: 43px; color: var(--tp-theme-8); } [dir=rtl] .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .submenu li:hover > a::after { color: var(--tp-theme-8); } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li .mega-menu { background-color: var(--tp-common-black-13); border: 1px solid rgba(255, 255, 255, 0.1); } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li:hover > a { color: var(--tp-theme-8); } .header__sticky.header-sticky.header__sticky-black .main-menu-8 ul li:hover > a::after { color: var(--tp-theme-8); } .header__sticky.header-sticky.header__sticky-black-2 { background-color: var(--tp-common-black-13); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header__sticky.header-sticky.header__style-4 { display: block; } .header__sticky.header-sticky.header__style-4 .hamburger-btn span { background-color: var(--tp-theme-4); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__sticky.header-sticky.header__style-4 { padding-top: 15px; padding-bottom: 15px; } } .header__sticky.header-sticky.header__style-4 .main-menu-4 ul li:last-child { margin-right: 0; } [dir=rtl] .header__sticky.header-sticky.header__style-4 .main-menu-4 ul li:last-child { margin-left: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__sticky.header-sticky.header__style-4 .main-menu-4 ul li { margin-right: 15px; } [dir=rtl] .header__sticky.header-sticky.header__style-4 .main-menu-4 ul li { margin-right: 0; margin-left: 15px; } } .header__sticky.header-sticky.header__bottom-3 { background-color: var(--tp-common-black-5); } .header__sticky.header-sticky .header__sticky-white { background-color: var(--tp-common-white); } .header__sticky.header-sticky .header__action ul::before { background-color: #EAEAEF; } .header__sticky.header-sticky .header__action ul li { height: 70px; width: 70px; line-height: 66px; } .header__sticky.header-sticky .header__action ul li::after { background-color: #EAEAEF; } .header__sticky.header-sticky .header__action ul li a { color: var(--tp-common-black); } .header__sticky.header-sticky .header__action ul li a:hover { color: var(--tp-theme-1); } .header__sticky.header-sticky .header__action ul li .hamburger-btn { color: var(--tp-common-black); } .header__sticky.header-sticky .header__action ul li .hamburger-btn span { background-color: var(--tp-common-black); } .header__sticky.header-sticky .header__action ul li .hamburger-btn:hover { color: var(--tp-theme-1); } .header__sticky.header-sticky .header__action ul li .hamburger-btn:hover span { color: var(--tp-theme-1); } .header__sticky.header-sticky .header__action-10 ul li a { color: var(--tp-common-black); } .header__sticky.header-sticky .header__action-13 ul li a .tp-item-count, .header__sticky.header-sticky .header__action-13 ul li button .tp-item-count { border-color: var(--tp-common-white); } .header__sticky.header-sticky .header__search-13 input { box-shadow: none; border: 1px solid #E7E7E7; } .header__sticky.header-sticky .header__search-13 input:focus { border-color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu ul li .submenu li a { padding-right: 25px; padding-left: 43px; } .header__sticky.header-sticky .main-menu ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu ul li .mega-menu li a { padding: 0; } .header__sticky.header-sticky .main-menu ul li .mega-menu li:hover > .mega-menu-title { padding-left: 0; } [dir=rtl] .header__sticky.header-sticky .main-menu ul li .mega-menu li:hover > .mega-menu-title { padding-right: 0; } .header__sticky.header-sticky .main-menu ul li .mega-menu li:hover > a { padding-left: 18px; } [dir=rtl] .header__sticky.header-sticky .main-menu ul li .mega-menu li:hover > a { padding-left: 0; padding-right: 18px; } .header__sticky.header-sticky .main-menu ul li:hover > a { color: var(--tp-theme-1); } .header__sticky.header-sticky .main-menu ul li:hover > a::after { color: var(--tp-theme-1); } .header__sticky.header-sticky .main-menu-4 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-4 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-4 ul li a::before { bottom: 0; } .header__sticky.header-sticky .main-menu-4 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-4 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-4 ul li .submenu li a::before { background-color: var(--tp-theme-4); } .header__sticky.header-sticky .main-menu-4 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-4 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-4 ul li:hover > a { color: var(--tp-theme-4); } .header__sticky.header-sticky .main-menu-4 ul li:hover > a::after { color: var(--tp-theme-4); } .header__sticky.header-sticky .main-menu-5 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-5 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-5 ul li a::before { bottom: 0; } .header__sticky.header-sticky .main-menu-5 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-5 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-5 ul li .submenu li a::before { background-color: var(--tp-theme-5); } .header__sticky.header-sticky .main-menu-5 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-5 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-5 ul li:hover > a { color: var(--tp-theme-5); } .header__sticky.header-sticky .main-menu-5 ul li:hover > a::after { color: var(--tp-theme-5); } .header__sticky.header-sticky .main-menu-6 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-6 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-6 ul li a::before { bottom: 0; } .header__sticky.header-sticky .main-menu-6 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-6 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-6 ul li .submenu li a::before { background-color: var(--tp-theme-6); } .header__sticky.header-sticky .main-menu-6 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-6 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-6 ul li:hover > a { color: var(--tp-theme-6); } .header__sticky.header-sticky .main-menu-6 ul li:hover > a::after { color: var(--tp-theme-6); } .header__sticky.header-sticky .main-menu-7 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-7 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-7 ul li a::before { bottom: 0; } .header__sticky.header-sticky .main-menu-7 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-7 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-7 ul li .submenu li a::before { background-color: var(--tp-theme-7); } .header__sticky.header-sticky .main-menu-7 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-7 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-7 ul li:hover > a { color: var(--tp-theme-7); } .header__sticky.header-sticky .main-menu-7 ul li:hover > a::after { color: var(--tp-theme-7); } .header__sticky.header-sticky .main-menu-8 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-8 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-8 ul li a::before { bottom: 0; } .header__sticky.header-sticky .main-menu-8 ul li .submenu { background-color: var(--tp-common-black-13); border: 1px solid rgba(255, 255, 255, 0.1); } .header__sticky.header-sticky .main-menu-8 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-8 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-8 ul li .submenu li a::before { background-color: var(--tp-theme-8); } .header__sticky.header-sticky .main-menu-8 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-8 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-8 ul li:hover > a { color: var(--tp-theme-8); } .header__sticky.header-sticky .main-menu-8 ul li:hover > a::after { color: var(--tp-theme-8); } .header__sticky.header-sticky .main-menu-9 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-9 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-9 ul li a::before { bottom: 25px; } .header__sticky.header-sticky .main-menu-9 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-9 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-9 ul li .submenu li a::before { background-color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-9 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-9 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-9 ul li:hover > a { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-9 ul li:hover > a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-10 ul li a { color: var(--tp-common-black); padding: 22px 0; } .header__sticky.header-sticky .main-menu-10 ul li a::after { color: var(--tp-common-black); } .header__sticky.header-sticky .main-menu-10 ul li .submenu li a { padding-top: 0; padding-left: 25px; padding-bottom: 1px; } [dir=rtl] .header__sticky.header-sticky .main-menu-10 ul li .submenu li a { padding-left: 0; padding-right: 25px; } .header__sticky.header-sticky .main-menu-10 ul li .submenu li a::before { background-color: var(--tp-theme-10); } .header__sticky.header-sticky .main-menu-10 ul li .submenu li:hover > a { padding-left: 43px; } [dir=rtl] .header__sticky.header-sticky .main-menu-10 ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .header__sticky.header-sticky .main-menu-10 ul li:hover > a { color: var(--tp-theme-10); } .header__sticky.header-sticky .main-menu-10 ul li:hover > a::after { color: var(--tp-theme-10); } .header__sticky.header-sticky .cart__count { border-color: var(--tp-common-white); } .header__lang { padding: 4px 28px; padding-right: 0; position: relative; z-index: 99; } [dir=rtl] .header__lang { margin-left: 0; padding-left: 0; padding-right: 28px; } [dir=rtl] [dir=rtl] .header__lang { margin-right: 0; padding-right: 0; padding-left: 28px; } .header__lang .nice-select { padding: 0; padding-right: 18px; padding-left: 28px; font-size: 14px; border: 0; color: var(--tp-common-white); background-color: transparent; } [dir=rtl] .header__lang .nice-select { padding-right: 28px; padding-left: 28px; } .header__lang .nice-select .current { color: var(--tp-common-white); font-size: 14px; font-weight: 500; } .header__lang .nice-select .list { border-radius: 0; margin-top: 0; left: auto; right: 0; } [dir=rtl] .header__lang .nice-select .list { left: 0; right: auto; } .header__lang .nice-select .list .option { color: var(--tp-text-1); } .header__lang .nice-select .list .option:hover, .header__lang .nice-select .list .option.selected.focus { color: var(--tp-theme-1); } .header__lang-selected-lang { color: var(--tp-common-white-op-7); font-size: 14px; font-weight: 500; background-color: transparent; position: relative; padding-right: 15px; } [dir=rtl] .header__lang-selected-lang { padding-left: 15px; padding-right: 0; } .header__lang-selected-lang:hover { cursor: pointer; color: var(--tp-theme-1); } .header__lang-selected-lang:hover::after { color: var(--tp-theme-1); } .header__lang-selected-lang::after { position: absolute; content: "\f107"; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: var(--tp-common-white); font-size: 14px; font-family: var(--tp-ff-fontawesome); } [dir=rtl] .header__lang-selected-lang::after { right: auto; left: -15px; } .header__lang-list { position: absolute; top: 120%; right: 0; background-color: var(--tp-common-white); z-index: 11; padding: 15px 15px; min-width: 100px; visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } [dir=rtl] .header__lang-list { right: auto; left: 0; } .header__lang-list.tp-lang-list-open { visibility: visible; opacity: 1; top: 100%; } .header__lang-list li { list-style: none; color: var(--tp-common-black); text-align: left; } .header__lang-list li:hover { color: var(--tp-theme-1); cursor: pointer; } .header__lang-10 { padding-left: 0; padding-top: 3px; padding-bottom: 4px; } .header__lang-10 .header__lang { margin-left: 0; padding-left: 0; } [dir=rtl] .header__lang-10 { margin-left: 0; padding-right: 20px; } .header__lang-10 .header__lang-selected-lang { padding-top: 5px; padding-bottom: 5px; color: var(--tp-common-white); font-family: var(--tp-ff-space); } .header__lang-10 .header__lang-list { border-radius: 4px; } .header__lang-10 .header__lang-list li:hover { color: var(--tp-theme-10); } .header__lang-10:hover .header__lang-selected-lang { color: var(--tp-common-white); } .header__lang-10:hover .header__lang-selected-lang::after { color: var(--tp-common-white); } .header__social ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .header__social ul li { list-style: none; text-align: center; } .header__social ul li a { display: inline-block; font-size: 14px; color: var(--tp-common-white); border-left: 1px solid var(--tp-border-1); padding: 22px 20px; width: 54px; } [dir=rtl] .header__social ul li a { border-left: 0; border-right: 1px solid var(--tp-border-1); } .header__social ul li a:hover { background-color: rgba(255, 255, 255, 0.03); color: var(--tp-theme-3); } .header__social-10 ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .header__social-10 ul li { list-style: none; position: relative; } .header__social-10 ul li::after { position: absolute; content: ""; top: 0; right: 0; width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.16); } [dir=rtl] .header__social-10 ul li::after { left: 0; right: auto; } .header__social-10 ul li a { color: rgba(255, 255, 255, 0.7); display: inline-block; width: 54px; text-align: center; padding: 6px 0; } .header__social-10 ul li a:hover { color: var(--tp-common-white); } .header__intro p { font-size: 14px; font-weight: 500; color: var(--tp-common-black-2); text-transform: uppercase; margin-bottom: 0; } [dir=rtl] .header__btn-5 { margin-left: 0; margin-right: 30px; } [dir=rtl] .header__btn-7 a:last-child { margin-right: 30px; margin-left: 0; } [dir=rtl] .header__btn-10 { margin-left: 0; margin-right: 30px; } [dir=rtl] .header__btn-12 { margin-left: 0; margin-right: 70px; } .header__btn-12 .header-btn-12 { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; line-height: 1; color: var(--tp-common-white); } .header__btn-12 .header-btn-12-icon span { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 18px; color: var(--tp-common-black); background-color: var(--tp-common-white); border-radius: 50%; margin-left: 15px; } [dir=rtl] .header__btn-12 .header-btn-12-icon span { margin-left: 0; margin-right: 15px; } .header__btn-12 .header-btn-12-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .header__btn-12 .header-btn-12:hover { color: var(--tp-common-white); } .header__btn-12 .header-btn-12:hover .header-btn-12-icon span { color: var(--tp-common-black); background-color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header__welcome { margin-left: -35px; } [dir=rtl] .header__welcome { margin-left: 0; margin-right: -35px; } } .header__welcome p { display: inline-block; font-size: 14px; font-weight: 500; margin-bottom: 0; position: relative; padding-right: 20px; margin-right: 15px; } [dir=rtl] .header__welcome p { padding-right: 0; margin-right: 0; padding-left: 20px; margin-left: 15px; } .header__welcome p:last-child { margin-right: 0; padding-right: 0; } [dir=rtl] .header__welcome p:last-child { margin-left: 0; padding-left: 0; } .header__welcome p:last-child::after { display: none; } .header__welcome p::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tp-text-1); width: 1px; height: 34px; opacity: 0.2; } [dir=rtl] .header__welcome p::after { right: auto; left: 0; } .header__welcome p i { color: var(--tp-theme-4); margin-right: 3px; } [dir=rtl] .header__welcome p i { margin-right: 0; margin-left: 3px; } .header__padding-2 { padding-top: 6px; padding-bottom: 6px; } .header__padding-4 { padding-top: 25px; padding-bottom: 25px; background-color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__padding-5 { padding-top: 25px; padding-bottom: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .header__padding-6 { padding-top: 25px; padding-bottom: 25px; } } .header__padding-7 { padding-left: 185px; padding-right: 185px; } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .header__padding-7 { padding-left: 145px; padding-right: 145px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .header__padding-7 { padding-left: 60px; padding-right: 60px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .header__padding-7 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .header__padding-7 { padding-top: 20px; padding-bottom: 20px; padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .header__padding-7 { padding-top: 20px; padding-bottom: 20px; padding-left: 15px; padding-right: 15px; } } @media (max-width: 575px) { .header__padding-7 { padding-top: 20px; padding-bottom: 20px; padding-left: 0; padding-right: 0; } } .header__call-icon span { display: inline-block; font-size: 24px; color: var(--tp-theme-5); margin-right: 13px; margin-top: 5px; } [dir=rtl] .header__call-icon span { margin-right: 0; margin-left: 13px; } .header__call-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .header__call-content p { color: var(--tp-text-15); margin-bottom: 0; font-size: 13px; font-weight: 500; font-family: var(--tp-ff-space); line-height: 1.3; } .header__call-content h4 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; margin-bottom: 0; } .header__gradient-bg { position: absolute; top: 0; left: 0; width: 100%; height: 4px; background-image: -webkit-linear-gradient(-90deg, #4353FF 0%, #02D1FF 34.9%, #FFC56D 69.27%, #FD5C2D 100%); background-image: -moz-linear-gradient(-90deg, #4353FF 0%, #02D1FF 34.9%, #FFC56D 69.27%, #FD5C2D 100%); background-image: -ms-linear-gradient(-90deg, #4353FF 0%, #02D1FF 34.9%, #FFC56D 69.27%, #FD5C2D 100%); background-image: -o-linear-gradient(-90deg, #4353FF 0%, #02D1FF 34.9%, #FFC56D 69.27%, #FD5C2D 100%); background-image: linear-gradient(-90deg, #4353FF 0%, #02D1FF 34.9%, #FFC56D 69.27%, #FD5C2D 100%); -moz-animation: gadientbg 2s ease-in-out 1s forwards infinite alternate; -webkit-animation: gadientbg 2s ease-in-out 1s forwards infinite alternate; animation: gadientbg 2s ease-in-out 1s forwards infinite alternate; background-size: 200% 200%; } .header__style-4 { display: none; } .header__white .logo .logo-dark { display: block; } .header__white .logo .logo-light { display: none; } .header__white.header__white-slider .logo .logo-dark { display: none; } .header__white.header__white-slider .logo .logo-light { display: block; } .header__white.header__white-slider .main-menu ul li a { color: var(--tp-common-white); } .header__white.header__white-slider .main-menu ul li a::after { color: var(--tp-common-white); } .header__white.header__white-slider .main-menu ul li .submenu li a { color: var(--tp-common-black); } .header__white.header__white-slider .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-1); } .header__white.header__white-slider .main-menu ul li .mega-menu li a { color: var(--tp-common-black); } .header__white.header__white-slider .main-menu ul li .mega-menu li a.mega-menu-title { color: #7D7D82; } .header__white.header__white-slider .main-menu ul li .mega-menu li:hover > a { color: var(--tp-theme-1); } .header__white.header__white-slider .header__info-11 ul li span { color: var(--tp-common-white); } .header__white.header__white-slider .header__info-11 ul li span a:hover { color: var(--tp-theme-1); } .header__white.header__white-slider .header__action-11 ul li a { color: var(--tp-common-white); } .header__white.header__white-slider .header__action-11 ul li a:hover { color: var(--tp-theme-1); } .header__white.header__white-slider .hamburger-btn-text span { background-color: var(--tp-common-white); color: var(--tp-common-white); } .header__white.header__white-slider .hamburger-btn-text::after { color: var(--tp-common-white); } .header__white.header__white-slider .hamburger-btn-text:hover::after { color: var(--tp-theme-1); } .header__white.header__white-slider .hamburger-btn-text:hover span { background-color: var(--tp-theme-1); } .header__black .logo-border::after { background-color: rgba(3, 4, 28, 0.08); } .header__black .logo .logo-dark { display: block; } .header__black .logo .logo-light { display: none; } .header__black .header__bottom-border { border-top: 0; border-color: rgba(3, 4, 28, 0.08); } .header__black .main-menu ul li a { color: var(--tp-common-black); } .header__black .main-menu ul li a::after { color: var(--tp-common-black); } .header__black .main-menu ul li.has-dropdown a::after { color: var(--tp-common-black); } .header__black .main-menu ul li .submenu li a { color: var(--tp-common-black); } .header__black .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-1); } .header__black .main-menu ul li .mega-menu li a { color: var(--tp-common-black); } .header__black .main-menu ul li .mega-menu li a.mega-menu-title { color: #7D7D82; } .header__black .main-menu ul li .mega-menu li:hover > a { color: var(--tp-theme-1); } .header__black .main-menu ul li:hover a::after { color: var(--tp-theme-1); } .header__black .header__action ul::before { background-color: rgba(3, 4, 28, 0.08); } .header__black .header__action ul li::after { background-color: rgba(3, 4, 28, 0.08); } .header__black .header__action ul li a, .header__black .header__action ul li button { color: var(--tp-common-black); } .header__black .header__action ul li a:hover, .header__black .header__action ul li button:hover { color: var(--tp-theme-1); } .header__black .hamburger-btn-black:hover span { background-color: var(--tp-theme-1); } .header__black-3 .main-menu ul li a { color: var(--tp-text-1); } .header__black-3 .main-menu ul li a::after { color: var(--tp-text-1); } .header__black-3 .main-menu ul li.has-dropdown a::after { color: var(--tp-text-1); } .header__black-3 .main-menu ul li .submenu li a { color: var(--tp-text-1); } .header__black-3 .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-1); } .header__black-3 .main-menu ul li .mega-menu li a { color: var(--tp-text-1); } .header__black-3 .main-menu ul li .mega-menu li a.mega-menu-title { color: #7D7D82; } .header__black-3 .main-menu ul li .mega-menu li:hover > a { color: var(--tp-theme-1); } .header__black-3 .main-menu ul li:hover a::after { color: var(--tp-theme-1); } .header__black-3 .header__action ul::before { background-color: rgba(3, 4, 28, 0.08); } .header__black-3 .header__action ul li::after { background-color: rgba(3, 4, 28, 0.08); } .header__black-3 .header__action ul li a { color: var(--tp-common-black); } .header__black-3 .header__action ul li a:hover { color: var(--tp-theme-1); } .header__black-3 .hamburger-btn-black:hover span { background-color: var(--tp-theme-1); } .header__white-solid { box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.12); background-color: var(--tp-common-white); position: relative; z-index: 9; } .header__white-solid .hamburger-btn span { background-color: var(--tp-common-black); } .header__white-solid .hamburger-btn:hover span { background-color: var(--tp-theme-1); } .header__white-solid .main-menu ul li.has-dropdown > a::after { color: var(--tp-common-black); } .header__white-solid .main-menu ul li a { color: var(--tp-common-black); padding: 19px 0; } .header__white-solid .main-menu ul li a::after { color: var(--tp-common-black); } .header__white-solid .main-menu ul li .submenu li a { color: var(--tp-common-black); } .header__white-solid .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-1); } .header__white-solid .main-menu ul li .mega-menu li a { color: var(--tp-common-black); } .header__white-solid .main-menu ul li .mega-menu li a.mega-menu-title { color: #7D7D82; } .header__white-solid .main-menu ul li .mega-menu li:hover > a { color: var(--tp-theme-1); } .header__white-solid .main-menu ul li:hover > a::after { color: var(--tp-theme-1); } .header__white-solid .logo-border { padding: 12px 0; } .header__white-solid .logo-border::after { background-color: #EAEAEF; top: 0; height: 100%; } .header__white-solid .logo .logo-light { display: none; } .header__white-solid .logo .logo-dark { display: none; } .header__white-solid .header__action ul::before { background-color: #EAEAEF; } .header__white-solid .header__action ul li { height: 66px; width: 70px; line-height: 64px; } .header__white-solid .header__action ul li::after { background-color: #EAEAEF; } .header__white-solid .header__action ul li a, .header__white-solid .header__action ul li button { color: var(--tp-common-black); } .header__white-solid .header__action ul li a:hover, .header__white-solid .header__action ul li button:hover { color: var(--tp-theme-1); } .header__white-solid .header__info ul li { padding: 5px 0; padding-right: 20px; } [dir=rtl] .header__white-solid .header__info ul li { padding-left: 20px; padding-right: 0; } .header__white-solid .header__info ul li::after { background-color: #EAEAEF; } .header__white-solid .header__info ul li a, .header__white-solid .header__info ul li span { color: var(--tp-text-1); font-weight: 400; } .header__white-solid .header__info ul li a:hover, .header__white-solid .header__info ul li span:hover { color: var(--tp-theme-1); } .header__white-solid .header__info ul li a:hover span, .header__white-solid .header__info ul li span:hover span { color: var(--tp-theme-1); } .header__white-solid .header__lang { position: relative; padding: 4px 28px; padding-right: 0; z-index: 99; } [dir=rtl] .header__white-solid .header__lang { padding-left: 0; padding-right: 28px; } .header__white-solid .header__lang .nice-select { padding: 0; padding-right: 18px; padding-left: 28px; font-size: 14px; border: 0; color: var(--tp-common-white); background-color: transparent; } [dir=rtl] .header__white-solid .header__lang .nice-select { padding-right: 28px; padding-left: 18px; } .header__white-solid .header__lang .nice-select .current { color: var(--tp-common-white); font-size: 14px; font-weight: 500; } .header__white-solid .header__lang .nice-select .list { border-radius: 0; margin-top: 0; left: auto; right: 0; } [dir=rtl] .header__white-solid .header__lang .nice-select .list { left: 0; right: auto; } .header__white-solid .header__lang .nice-select .list .option { color: var(--tp-text-1); } .header__white-solid .header__lang .nice-select .list .option:hover, .header__white-solid .header__lang .nice-select .list .option.selected.focus { color: var(--tp-theme-1); } .header__white-solid .header__lang-selected-lang { color: rgba(82, 82, 88, 0.8); } .header__white-solid .header__lang-selected-lang:hover { cursor: pointer; color: var(--tp-theme-1); } .header__white-solid .header__lang-selected-lang:hover::after { color: var(--tp-theme-1); } .header__white-solid .header__lang-selected-lang::after { color: var(--tp-text-1); } .header__white-solid .header__lang-list { box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.12); } .header__white-solid .header__lang-list li:hover { color: var(--tp-theme-1); cursor: pointer; } .header__white-solid .header__lang:hover .header__white-solid .header__lang-selected-lang { color: var(--tp-theme-1); } .header__white-solid .header__lang:hover .header__white-solid .header__lang-selected-lang::after { color: var(--tp-theme-1); } .header__white-solid .header__lang:hover .header__white-solid .header__lang-list { visibility: visible; opacity: 1; -webkit-transform: perspective(400px) rotateX(0deg); -moz-transform: perspective(400px) rotateX(0deg); -ms-transform: perspective(400px) rotateX(0deg); -o-transform: perspective(400px) rotateX(0deg); transform: perspective(400px) rotateX(0deg); } .header__white-solid-2 { background-color: transparent; } .header__simple { background-color: var(--tp-common-white); padding-top: 25px; } .header__simple .hamburger-btn-black { top: -7px; } .header__shadow { box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.12); } .header__white-solid.header__white-solid-2 .logo .logo-light { display: none; } .header__white-solid.header__white-solid-2 .logo .logo-dark { display: block; } /*----------------------------------------*/ /* 04. MENU CSS START /*----------------------------------------*/ [dir=rtl] .main-menu { padding-left: 0; padding-right: 55px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-menu { padding-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu { padding-left: 0; } [dir=rtl] .main-menu { padding-left: 0; padding-right: 30px; } } .main-menu ul li { position: relative; list-style: none; display: inline-block; margin-right: 20px; /* submenu css start */ /* mega menu start */ } [dir=rtl] .main-menu ul li { margin-right: 0; margin-left: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu ul li { margin-right: 13px; } [dir=rtl] .main-menu ul li { margin-left: 15px; margin-right: 0; } } .main-menu ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu ul li:last-child { margin-left: 0; } .main-menu ul li.menu-last .submenu { right: 0; left: auto; } .main-menu ul li.menu-last .submenu li .submenu { right: 100%; left: auto; } .main-menu ul li a { display: inline-block; font-size: 16px; font-weight: 500; color: var(--tp-common-white); padding: 16px 0; text-align: left; } [dir=rtl] .main-menu ul li a { text-align: right; } .main-menu ul li.has-dropdown > a { position: relative; } .main-menu ul li.has-dropdown > a::after { content: "\f107"; -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); -o-transform: translateY(1px); transform: translateY(1px); font-size: 14px; color: var(--tp-common-white); font-family: var(--tp-ff-fontawesome); font-weight: 400; margin-left: 5px; display: inline-block; } [dir=rtl] .main-menu ul li.has-dropdown > a::after { margin-right: 5px; margin-left: 0; } .main-menu ul li.has-mega-menu { position: static; } .main-menu ul li.mega-menu-full .mega-menu { width: 100%; } .main-menu ul li .submenu { position: absolute; top: 100%; left: 0; min-width: 230px; background: var(--tp-common-white); z-index: 99; visibility: hidden; opacity: 0; transform-origin: top center; padding: 25px 0 30px; background: var(--tp-common-white); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); -webkit-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); -moz-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); -ms-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); -o-box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); } [dir=rtl] .main-menu ul li .submenu { left: auto; right: 0; } .main-menu ul li .submenu li { display: block; width: 100%; margin: 0; padding: 0; line-height: 1; } .main-menu ul li .submenu li:not(:last-child) { margin-bottom: 11px; } .main-menu ul li .submenu li.has-dropdown > a::after { position: absolute; top: 50%; right: 25px; -webkit-transform: translateY(-50%) rotate(-90deg); -moz-transform: translateY(-50%) rotate(-90deg); -ms-transform: translateY(-50%) rotate(-90deg); -o-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); color: var(--tp-common-black); } [dir=rtl] .main-menu ul li .submenu li.has-dropdown > a::after { right: auto; left: 25px; } .main-menu ul li .submenu li a { position: relative; z-index: 11; color: var(--tp-common-black); font-weight: 400; font-size: 14px; padding: 0 25px; padding-bottom: 1px; width: 100%; line-height: 1.2; } .main-menu ul li .submenu li a::before { position: absolute; content: ""; left: 25px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 1px; background-color: var(--tp-theme-1); } [dir=rtl] .main-menu ul li .submenu li a::before { left: auto; right: 25px; } .main-menu ul li .submenu li .submenu { left: 100%; top: 0; visibility: hidden; opacity: 0; } [dir=rtl] .main-menu ul li .submenu li .submenu { left: auto; right: 100%; } .main-menu ul li .submenu li:hover > a { color: var(--tp-theme-1); padding-left: 43px; } [dir=rtl] .main-menu ul li .submenu li:hover > a { padding-left: 0; padding-right: 43px; } .main-menu ul li .submenu li:hover > a::before { width: 12px; } .main-menu ul li .submenu li:hover > a::after { color: var(--tp-theme-1); } .main-menu ul li .submenu li:hover > .submenu { -webkit-transform: translateY(1); -moz-transform: translateY(1); -ms-transform: translateY(1); -o-transform: translateY(1); transform: translateY(1); visibility: visible; opacity: 1; } .main-menu ul li .mega-menu { position: absolute; top: 100%; left: 0; padding: 30px 40px; background: #FFFFFF; box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); visibility: hidden; opacity: 0; -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); transform-origin: top center; z-index: 99; } [dir=rtl] .main-menu ul li .mega-menu { right: 0; left: auto; } .main-menu ul li .mega-menu li { float: left; width: 25%; margin-right: 0; text-align: left; } [dir=rtl] .main-menu ul li .mega-menu li { float: right; margin-left: 0; text-align: right; } .main-menu ul li .mega-menu li .mega-menu-title { font-weight: 500; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #7D7D82; cursor: text; padding: 0; display: inline-block; margin-bottom: 10px; } .main-menu ul li .mega-menu li .mega-menu-title::before { display: none; } .main-menu ul li .mega-menu li .mega-menu-title::after { display: none; } .main-menu ul li .mega-menu li ul li { width: 100%; float: none; margin-bottom: 2px; } .main-menu ul li .mega-menu li ul li:last-child { margin-bottom: 0; } .main-menu ul li .mega-menu li ul li a { font-weight: 400; font-size: 14px; color: var(--tp-common-black); padding: 0; position: relative; width: 100%; } .main-menu ul li .mega-menu li ul li a::before { position: absolute; content: ""; left: 0; right: auto; top: 50%; bottom: auto; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 1px; background-color: var(--tp-theme-1); } [dir=rtl] .main-menu ul li .mega-menu li ul li a::before { right: 0; left: auto; } .main-menu ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-1); padding-left: 0; } [dir=rtl] .main-menu ul li .mega-menu li:hover > .mega-menu-title { padding-right: 0; } .main-menu ul li .mega-menu li:hover > a { color: var(--tp-theme-1); padding-left: 18px; } [dir=rtl] .main-menu ul li .mega-menu li:hover > a { padding-left: 0; padding-right: 18px; } .main-menu ul li .mega-menu li:hover > a::before { width: 12px; } .main-menu ul li:hover > a { color: var(--tp-theme-1); } .main-menu ul li:hover > a::after { color: var(--tp-theme-1); } .main-menu ul li:hover > .submenu { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .main-menu ul li:hover .mega-menu { visibility: visible; opacity: 1; -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .main-menu-ff-space ul li a { font-family: var(--tp-ff-space); } .main-menu-ff-syne ul li a { font-family: var(--tp-ff-syne); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-2 { padding-left: 0; } [dir=rtl] .main-menu-2 { padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-3 { padding-left: 0; } [dir=rtl] .main-menu-3 { padding-right: 0; } } .main-menu-3 ul li { margin-right: 25px; } [dir=rtl] .main-menu-3 ul li { margin-right: 0; margin-left: 25px; } .main-menu-3 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-3 ul li:last-child { margin-left: 0; } .main-menu-3 ul li a { color: var(--tp-common-white); padding: 21px 0; } .main-menu-3 ul li .submenu { background-color: var(--tp-common-black-5); border: 1px solid var(--tp-border-1); } .main-menu-3 ul li .submenu li a { color: var(--tp-common-white); } .main-menu-3 ul li .submenu li.has-dropdown > a::after { color: var(--tp-common-white); } .main-menu-3 ul li .submenu li.has-dropdown:hover > a::after { color: var(--tp-theme-3); } .main-menu-3 ul li .mega-menu { background-color: var(--tp-common-black-5); border: 1px solid var(--tp-border-1); } .main-menu-3 ul li .mega-menu li .mega-menu-title { color: rgba(255, 255, 255, 0.7); } .main-menu-3 ul li .mega-menu li ul li a { color: var(--tp-common-white); } .main-menu-3 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-3); } .main-menu-3 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-3); } .main-menu-3 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-3); } .main-menu-3 ul li:hover > a { color: var(--tp-theme-3); } .main-menu-3 ul li:hover > a::after { color: var(--tp-theme-3); } [dir=rtl] .main-menu-4 { padding-right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-4 { padding-left: 0; } [dir=rtl] .main-menu-4 { padding-right: 0; } } .main-menu-4 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-4 ul li:last-child { margin-left: 0; } .main-menu-4 ul li a { color: var(--tp-common-white); padding: 11px 0; } .main-menu-4 ul li a::before { position: absolute; content: ""; left: auto; right: 0; bottom: -2px; width: 0%; height: 1px; background-color: var(--tp-theme-4); } [dir=rtl] .main-menu-4 ul li a::before { left: 0; right: auto; } .main-menu-4 ul li.has-dropdown a::after { color: var(--tp-common-white); } .main-menu-4 ul li .submenu li a { color: var(--tp-common-black); } .main-menu-4 ul li .submenu li a::before { background-color: var(--tp-theme-4); } .main-menu-4 ul li .submenu li:hover > a { color: var(--tp-theme-4); } .main-menu-4 ul li .submenu li:hover > a::after { color: var(--tp-theme-4); } .main-menu-4 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-4); } .main-menu-4 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-4); } .main-menu-4 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-4); } .main-menu-4 ul li:hover > a { color: var(--tp-theme-4); } .main-menu-4 ul li:hover > a::after { color: var(--tp-theme-4); } .main-menu-4 ul li:hover > a::before { width: 100%; left: 0; right: auto; } [dir=rtl] .main-menu-4 ul li:hover > a::before { left: auto; right: 0; } .main-menu-5 { margin-left: -66px; padding-right: 0; } [dir=rtl] .main-menu-5 { margin-left: 0; margin-right: -66px; padding-right: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-5 { margin-left: -50px; } [dir=rtl] .main-menu-5 { margin-left: 0; margin-right: -50px; padding-right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .main-menu-5 { margin-left: -45px; } [dir=rtl] .main-menu-5 { margin-left: 0; margin-right: -45px; padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-5 { padding-left: 0; } [dir=rtl] .main-menu-5 { padding-right: 0; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-5 ul li { margin-right: 25px; } [dir=rtl] .main-menu-5 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-5 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-5 ul li:last-child { margin-left: 0; } .main-menu-5 ul li a { color: var(--tp-common-black); padding: 25px 0; } .main-menu-5 ul li.has-dropdown a::after { color: var(--tp-common-black); } .main-menu-5 ul li .submenu li a { color: var(--tp-common-black); } .main-menu-5 ul li .submenu li a::before { background-color: var(--tp-theme-5); } .main-menu-5 ul li .submenu li:hover > a { color: var(--tp-theme-5); } .main-menu-5 ul li .submenu li:hover > a::after { color: var(--tp-theme-5); } .main-menu-5 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-5); } .main-menu-5 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-5); } .main-menu-5 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-5); } .main-menu-5 ul li:hover > a { color: var(--tp-theme-5); } .main-menu-5 ul li:hover > a::after { color: var(--tp-theme-5); } .main-menu-6 { margin-left: 20px; } [dir=rtl] .main-menu-6 { margin-left: 0; margin-right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-6 { padding-left: 0; margin-left: 0; } [dir=rtl] .main-menu-6 { padding-right: 0; margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-6 ul li { margin-right: 25px; } [dir=rtl] .main-menu-6 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-6 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-6 ul li:last-child { margin-left: 0; } .main-menu-6 ul li a { color: var(--tp-common-black-10); padding: 25px 0; font-size: 15px; font-family: var(--tp-ff-roboto); } .main-menu-6 ul li.has-dropdown a::after { color: var(--tp-common-black-10); } .main-menu-6 ul li .submenu li a { color: var(--tp-common-black-10); } .main-menu-6 ul li .submenu li a::before { background-color: var(--tp-theme-6); } .main-menu-6 ul li .submenu li:hover > a { color: var(--tp-theme-6); } .main-menu-6 ul li .submenu li:hover > a::after { color: var(--tp-theme-6); } .main-menu-6 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-6); } .main-menu-6 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-6); } .main-menu-6 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-6); } .main-menu-6 ul li:hover > a { color: var(--tp-theme-6); } .main-menu-6 ul li:hover > a::after { color: var(--tp-theme-6); } [dir=rtl] .main-menu-7 { padding-right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-7 { padding-left: 0; } [dir=rtl] .main-menu-7 { padding-right: 0; } } .main-menu-7 ul li { margin-right: 40px; } [dir=rtl] .main-menu-7 ul li { margin-right: 0; margin-left: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-7 ul li { margin-right: 25px; } [dir=rtl] .main-menu-7 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-7 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-7 ul li:last-child { margin-left: 0; } .main-menu-7 ul li a { color: var(--tp-common-black); padding: 25px 0; font-size: 16px; font-weight: 400; } .main-menu-7 ul li.has-dropdown a::after { color: var(--tp-common-black); } .main-menu-7 ul li .submenu li a { color: var(--tp-common-black); } .main-menu-7 ul li .submenu li a::before { background-color: var(--tp-theme-7); } .main-menu-7 ul li .submenu li:hover > a { color: var(--tp-theme-7); } .main-menu-7 ul li .submenu li:hover > a::after { color: var(--tp-theme-7); } .main-menu-7 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-7); } .main-menu-7 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-7); } .main-menu-7 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-7); } .main-menu-7 ul li:hover > a { color: var(--tp-theme-7); } .main-menu-7 ul li:hover > a::after { color: var(--tp-theme-7); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1400px) and (max-width: 1599px), (max-width: 575px) { .main-menu-8 { padding-left: 0; } [dir=rtl] .main-menu-8 { padding-right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-8 ul li { margin-right: 30px; } [dir=rtl] .main-menu-8 ul li { margin-right: 0; margin-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-8 ul li { margin-right: 25px; } [dir=rtl] .main-menu-8 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-8 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-8 ul li:last-child { margin-left: 0; } .main-menu-8 ul li a { color: var(--tp-common-white); padding: 35px 0; font-size: 16px; font-weight: 500; font-family: var(--tp-ff-space); } .main-menu-8 ul li.has-dropdown a::after { color: var(--tp-common-white); } .main-menu-8 ul li .submenu li a::before { background-color: var(--tp-theme-8); } .main-menu-8 ul li .submenu li:hover > a { color: var(--tp-theme-8); } .main-menu-8 ul li .submenu li:hover > a::after { color: var(--tp-theme-8); } .main-menu-8 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-8); } .main-menu-8 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-8); } .main-menu-8 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-8); } .main-menu-8 ul li:hover > a { color: var(--tp-theme-8); } .main-menu-8 ul li:hover > a::after { color: var(--tp-theme-8); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-9 { padding-left: 0; } [dir=rtl] .main-menu-9 { padding-right: 0; } } .main-menu-9 ul li { margin-right: 35px; } [dir=rtl] .main-menu-9 ul li { margin-right: 0; margin-left: 35px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-9 ul li { margin-right: 30px; } [dir=rtl] .main-menu-9 ul li { margin-right: 0; margin-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-9 ul li { margin-right: 25px; } [dir=rtl] .main-menu-9 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-9 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-9 ul li:last-child { margin-left: 0; } .main-menu-9 ul li a { font-family: var(--tp-ff-syne); font-weight: 500; font-size: 16px; color: rgba(5, 18, 20, 0.8); padding: 30px 0; } .main-menu-9 ul li a::before { position: absolute; content: ""; left: 0; right: 0; margin: auto; bottom: 34px; width: 0; height: 1px; background-color: var(--tp-common-black); } .main-menu-9 ul li.has-dropdown a::after { color: rgba(5, 18, 20, 0.8); } .main-menu-9 ul li .submenu li.has-dropdown a::after { color: rgba(5, 18, 20, 0.8); } .main-menu-9 ul li .submenu li a { color: rgba(5, 18, 20, 0.8); } .main-menu-9 ul li .submenu li a::before { right: auto; left: 25px; background-color: var(--tp-common-black); } .main-menu-9 ul li .submenu li:hover > a { color: var(--tp-common-black); } .main-menu-9 ul li .submenu li:hover > a::after { color: var(--tp-common-black); } .main-menu-9 ul li .submenu li:hover > a::before { width: 12px; } .main-menu-9 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-9); } .main-menu-9 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-9); } .main-menu-9 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-9); } .main-menu-9 ul li:hover > a { color: var(--tp-common-black); } .main-menu-9 ul li:hover > a::after { color: var(--tp-common-black); } .main-menu-9 ul li:hover > a::before { width: 100%; } .main-menu-10 { padding-left: 0; } [dir=rtl] .main-menu-10 { padding-left: 0; padding-right: 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .main-menu-10 { padding-left: 0; } [dir=rtl] .main-menu-10 { padding-right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-10 ul li { margin-right: 30px; } [dir=rtl] .main-menu-10 ul li { margin-right: 0; margin-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-10 ul li { margin-right: 25px; } [dir=rtl] .main-menu-10 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-10 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-10 ul li:last-child { margin-left: 0; } .main-menu-10 ul li a { padding: 27px 0; } .main-menu-10 ul li.has-dropdown a::after { color: white; } .main-menu-10 ul li .submenu li a::before { right: auto; left: 25px; background-color: var(--tp-theme-10); } [dir=rtl] .main-menu-10 ul li .submenu li a::before { right: 25px; left: auto; } .main-menu-10 ul li .submenu li:hover > a { color: var(--tp-theme-10); } .main-menu-10 ul li .submenu li:hover > a::after { color: var(--tp-theme-10); } .main-menu-10 ul li .submenu li:hover > a::before { width: 12px; } .main-menu-10 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-10); } .main-menu-10 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-10); } .main-menu-10 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-10); } .main-menu-10 ul li:hover > a { color: var(--tp-theme-10); } .main-menu-10 ul li:hover > a::after { color: var(--tp-theme-10); } .main-menu-10 ul li:hover > a::before { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-11 { padding-left: 0; } [dir=rtl] .main-menu-11 { padding-right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-11 ul li { margin-right: 30px; } [dir=rtl] .main-menu-11 ul li { margin-right: 0; margin-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-11 ul li { margin-right: 25px; } [dir=rtl] .main-menu-11 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-11 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-11 ul li:last-child { margin-left: 0; } .main-menu-11 ul li a { padding: 27px 0; color: var(--tp-common-black-19); } .main-menu-11 ul li a::before { position: absolute; content: ""; left: 0; right: 0; margin: auto; bottom: 30px; width: 0; height: 1px; background-color: var(--tp-common-black); } .main-menu-11 ul li.has-dropdown a::after { color: var(--tp-common-black-19); } .main-menu-11 ul li .submenu li a::before { right: auto; left: 25px; background-color: var(--tp-theme-10); } [dir=rtl] .main-menu-11 ul li .submenu li a::before { left: auto; right: 25px; } .main-menu-11 ul li .submenu li:hover > a { color: var(--tp-theme-10); } .main-menu-11 ul li .submenu li:hover > a::after { color: var(--tp-theme-10); } .main-menu-11 ul li .submenu li:hover > a::before { width: 12px; } .main-menu-11 ul li .mega-menu li ul li a { color: var(--tp-common-black-19); } .main-menu-11 ul li .mega-menu li ul li:hover > a { color: var(--tp-common-black); } .main-menu-11 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-common-black); } .main-menu-11 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-common-black); } .main-menu-11 ul li:hover > a { color: var(--tp-common-black); } .main-menu-11 ul li:hover > a::after { color: var(--tp-common-black); } .main-menu-11 ul li:hover > a::before { width: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-12 { padding-left: 0; } [dir=rtl] .main-menu-12 { padding-right: 0; } } .main-menu-12 ul li { margin-right: 36px; } [dir=rtl] .main-menu-12 ul li { margin-right: 0; margin-left: 36px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-12 ul li { margin-right: 30px; } [dir=rtl] .main-menu-12 ul li { margin-right: 0; margin-left: 30px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .main-menu-12 ul li { margin-right: 25px; } [dir=rtl] .main-menu-12 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-12 ul li:last-child { margin-right: 0; } [dir=rtl] .main-menu-12 ul li:last-child { margin-left: 0; } .main-menu-12 ul li a { padding: 25px 0; color: var(--tp-common-black-19); } .main-menu-12 ul li a::before { position: absolute; content: ""; left: 0; right: 0; margin: auto; bottom: 30px; width: 0; height: 1px; background-color: var(--tp-common-black); } .main-menu-12 ul li.has-dropdown a::after { color: var(--tp-common-black-19); } .main-menu-12 ul li .submenu li a::before { right: auto; left: 25px; background-color: var(--tp-theme-10); } [dir=rtl] .main-menu-12 ul li .submenu li a::before { right: 25px; left: auto; } .main-menu-12 ul li .submenu li:hover > a { color: var(--tp-theme-10); } .main-menu-12 ul li .submenu li:hover > a::after { color: var(--tp-theme-10); } .main-menu-12 ul li .submenu li:hover > a::before { width: 12px; } .main-menu-12 ul li .mega-menu li ul li:hover > a { color: var(--tp-theme-10); } .main-menu-12 ul li .mega-menu li ul li:hover > a::before { background-color: var(--tp-theme-10); } .main-menu-12 ul li .mega-menu li:hover > .mega-menu-title { color: var(--tp-theme-10); } .main-menu-12 ul li:hover > a { color: var(--tp-common-black); } .main-menu-12 ul li:hover > a::after { color: var(--tp-common-black); } .main-menu-12 ul li:hover > a::before { width: 100%; } .main-menu-13 ul li { margin-right: 30px; } [dir=rtl] .main-menu-13 ul li { margin-right: 0; margin-left: 30px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .main-menu-13 ul li { margin-right: 25px; } [dir=rtl] .main-menu-13 ul li { margin-right: 0; margin-left: 25px; } } .main-menu-13 ul li a { font-size: 15px; padding: 25px 0; } .wp-enable-black-menu .main-menu.main-menu-4-sticky ul li.has-dropdown > a::after { color: var(--tp-common-black); } .wp-enable-black-menu .main-menu.main-menu-4-sticky ul li > a { color: var(--tp-common-black); } .wp-enable-black-menu .main-menu.main-menu-4-sticky ul li:hover > a { color: var(--tp-theme-4); } .wp-enable-black-menu .main-menu.main-menu-4-sticky ul li:hover > a::after { color: var(--tp-theme-4); } /*----------------------------------------*/ /* 05. MEAN MENU CSS START /*----------------------------------------*/ /* mean menu customize */ .mean-container { margin-bottom: 40px; } .mean-container a.meanmenu-reveal { display: none; } .mean-container .mean-nav { background: none; margin-top: 0; } .mean-container .mean-bar { padding: 0; min-height: auto; background: none; } .mean-container .mean-nav > ul { padding: 0; margin: 0; width: 100%; list-style-type: none; display: block !important; } .mean-container a.meanmenu-reveal { display: none !important; } .mean-container .mean-nav ul li a, .mean-container .mean-nav ul li span { width: 100%; padding: 10px 0; color: var(--tp-common-black); border-top: 1px solid #ebebeb; font-size: 14px; line-height: 1.5; font-weight: 700; } [dir=rtl] .mean-container .mean-nav ul li a, [dir=rtl] .mean-container .mean-nav ul li span { float: right; text-align: right; } .mean-container .mean-nav ul li a:hover, .mean-container .mean-nav ul li span:hover { color: var(--tp-theme-1); } .mean-container .mean-nav ul li a:hover i, .mean-container .mean-nav ul li span:hover i { color: var(--tp-common-white); } .mean-container .mean-nav ul li.dropdown-opened > a, .mean-container .mean-nav ul li.dropdown-opened > span { color: var(--tp-theme-1); } .mean-container .mean-nav ul li.dropdown-opened > a.mean-expand.mean-clicked { background: var(--tp-theme-1); color: var(--tp-common-white); border-color: var(--tp-theme-1); } .mean-container .mean-nav ul li.dropdown-opened > a.mean-expand.mean-clicked i { color: var(--tp-common-white); } .mean-container .mean-nav ul li a.mean-expand, .mean-container .mean-nav ul li span.mean-expand { margin-top: 5px; padding: 0 !important; line-height: 14px; border: 1px solid #ebebeb !important; height: 30px; width: 30px; line-height: 30px; color: var(--tp-common-black); line-height: 30px; top: 0; font-weight: 400; } [dir=rtl] .mean-container .mean-nav ul li a.mean-expand, [dir=rtl] .mean-container .mean-nav ul li span.mean-expand { right: auto; left: 0; text-align: center; } .mean-container .mean-nav ul li a.mean-expand:hover, .mean-container .mean-nav ul li span.mean-expand:hover { background: var(--tp-theme-1); color: var(--tp-common-white); border-color: var(--tp-theme-1); } .mean-container .mean-nav ul li a.mean-expand:hover i, .mean-container .mean-nav ul li span.mean-expand:hover i { color: var(--tp-common-white); } .mean-container .mean-nav ul li > a > i { display: none; } .mean-container .mean-nav ul li > a.mean-expand i { display: inline-block; } .mean-container .mean-nav > ul > li:first-child > a { border-top: 0; } .mean-container .mean-nav ul li a.mean-expand.mean-clicked { color: var(--tp-common-white); } .mean-container .mean-nav ul li a.mean-expand.mean-clicked:hover { background: var(--tp-theme-1); color: var(--tp-common-white); border-color: var(--tp-theme-1); } .mean-container .mean-nav ul li a.mean-expand.mean-clicked:hover i { color: var(--tp-common-white); } .mean-container .mean-nav ul li a.mean-expand.mean-clicked i { transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); color: var(--tp-common-black); } /*----------------------------------------*/ /* 06. SLIDER CSS START /*----------------------------------------*/ .slider__active .swiper-slide-active .slider__title, .slider__active .swiper-slide-active .slider__title-pre, .slider__active .swiper-slide-active .slider__content, .slider__active .swiper-slide-active .slider__content p, .slider__active .swiper-slide-active .slider__form { animation-name: fadeInUp; animation-fill-mode: both; } .slider__active .swiper-slide-active .slider__title-8, .slider__active .swiper-slide-active .slider__content-8 p, .slider__active .swiper-slide-active .slider__btn-8 { animation-name: fadeInUp; animation-fill-mode: both; } .slider__active-11 .swiper-slide-active .slider__title-11, .slider__active-11 .swiper-slide-active .slider__content-11 p, .slider__active-11 .swiper-slide-active .slider__product, .slider__active-11 .swiper-slide-active .slider__btn-11, .slider__active-11 .swiper-slide-active .slider__thumb-11 { animation-name: fadeInUp; animation-fill-mode: both; } .slider__active-11 .swiper-slide-active .slider__bg-text h3 { animation-name: fadeInDown; animation-fill-mode: both; } .slider__active-11 .swiper-slide-active .slider .contact__shape-2 { animation-name: fadeInRight; animation-fill-mode: both; } .slider__active-13 .swiper-slide-active .slider__title-13, .slider__active-13 .swiper-slide-active .slider__title-pre-13, .slider__active-13 .swiper-slide-active .slider__content-13 p, .slider__active-13 .swiper-slide-active .slider__btn-13 { animation-name: fadeInUp; animation-fill-mode: both; } .slider__active-13 .swiper-slide-active .slider__thumb-13 img { animation-name: fadeInRight; animation-fill-mode: both; } .slider__active-13 .swiper-slide-active .slider__thumb-13-circle { animation-name: fadeInRight; animation-fill-mode: both; } .slider__item { position: relative; z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__item-9 { -webkit-transform: translateY(-65px); -moz-transform: translateY(-65px); -ms-transform: translateY(-65px); -o-transform: translateY(-65px); transform: translateY(-65px); } } .slider__item-11 { height: 100vh; } .slider__item-11.is-dark { background: radial-gradient(50.53% 50.53% at 50.23% 49.47%, #414D59 0%, #1D2631 100%); } .slider__item-11.is-dark .slider__bg-text h3 { color: #262F3B; } .slider__item-11.is-dark .slider__title-11 { color: var(--tp-common-white); } .slider__item-11.is-dark .slider__content-11 p { color: var(--tp-common-white); } .slider__item-11.is-dark .slider__product-price { color: #34E7F8; } .slider__item-11.is-dark .slider__product-price.old-price { color: rgba(255, 255, 255, 0.6); } .slider__item-11.is-dark .slider__btn-11 .tp-btn-9 { border-color: var(--tp-common-white); color: var(--tp-common-white); } .slider__item-11.is-dark .slider__btn-11 .tp-btn-9:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); } .slider__item-11.is-pink { background: radial-gradient(53.05% 53.05% at 52.29% 45.79%, #F9EEEC 0%, #EBD5CF 100%); } .slider__item-11.is-pink .slider__bg-text h3 { color: #EFDDD8; } .slider__item-11.is-pink .slider__product-price { color: #FF4343; } .slider__item-11.is-pink .slider__product-price.old-price { color: rgba(60, 186, 178, 0.6); } .slider__item-11.is-khaki { background-color: var(--tp-common-khaki); } .slider__item-11.is-khaki .slider__bg-text h3 { color: #E3D7BD; } .slider__item-11.is-white { background-color: #F2F3F5; } .slider__item-11.is-white .slider__bg-text h3 { color: #E8EBF0; } .swiper-slide.swiper-slide-active .slider__item-11 .product__features-thumb::after, .swiper-slide.swiper-slide-active .slider__item-11 .product__features-thumb::before { -webkit-transform: scale(1) !important; -moz-transform: scale(1) !important; -ms-transform: scale(1) !important; -o-transform: scale(1) !important; transform: scale(1) !important; } .swiper-slide.swiper-slide-active .slider__item-11 .subscribe__thumb::after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .swiper-slide.swiper-slide-active .slider__item-11 .subscribe__wrapper-11 p, .swiper-slide.swiper-slide-active .slider__item-11 .subscribe__wrapper-11 > span, .swiper-slide.swiper-slide-active .slider__item-11 .subscribe__title-11, .swiper-slide.swiper-slide-active .slider__item-11 .subscribe__input-11, .swiper-slide.swiper-slide-active .slider__item-11 .subscribe__social { animation-name: fadeInUp; animation-fill-mode: both; } .swiper-slide.swiper-slide-active .slider__item-11 .contact__list-item-11, .swiper-slide.swiper-slide-active .slider__item-11 .contact__form-11 { animation-name: fadeInUp; animation-fill-mode: both; } .swiper-slide.swiper-slide-active .slider__item-11 .contact__shape-2 { animation-name: fadeInRight; animation-fill-mode: both; } .slider__item-12.swiper-slide-active .slider__title-12 { -webkit-animation-name: tp_slide_up; animation-name: tp_slide_up; } .slider__item-12.swiper-slide-active .slider__thumb-12 > img { -webkit-animation-name: tp_slide_up; animation-name: tp_slide_up; } .slider__item-12.swiper-slide-active .slider__thumb-12-shape svg { -webkit-animation-name: tp_slide_left; animation-name: tp_slide_left; } .slider__item-12.swiper-slide-active .slider__content-12-branding { -webkit-animation-name: tp_slide_up; animation-name: tp_slide_up; } .slider__height { min-height: 950px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height { min-height: 800px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height { min-height: 650px; } } @media (max-width: 575px) { .slider__height { min-height: 750px; } } .slider__height-3 { min-height: 880px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-3 { min-height: 700px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height-3 { min-height: 600px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__height-3 { min-height: 500px; } } .slider__height-4 { min-height: 720px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-4 { min-height: 600px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__height-4 { min-height: 500px; } } .slider__height-5 { min-height: 870px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-5 { min-height: 650px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height-5 { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height-5 { min-height: 650px; } } @media (max-width: 575px) { .slider__height-5 { min-height: 750px; } } .slider__height-6 { min-height: 870px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-6 { min-height: 650px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height-6 { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height-6 { min-height: 650px; } } @media (max-width: 575px) { .slider__height-6 { min-height: 750px; } } .slider__height-7 { min-height: 950px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-7 { min-height: 650px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height-7 { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height-7 { min-height: 650px; } } @media (max-width: 575px) { .slider__height-7 { min-height: 750px; } } .slider__height-8 { min-height: 950px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-8 { min-height: 650px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height-8 { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height-8 { min-height: 650px; } } @media (max-width: 575px) { .slider__height-8 { min-height: 750px; } } @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) { .slider__height-9 { padding-top: 80px; } } .slider__height-10 { min-height: 1050px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__height-10 { min-height: 850px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__height-10 { min-height: 750px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__height-10 { min-height: 650px; } } @media (max-width: 575px) { .slider__height-10 { min-height: 750px; } } .slider__height-11 { height: 100vh; } .slider__height-12 { height: 100vh; } .slider__height-13 { min-height: 800px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .slider__height-13 { min-height: 1000px; } } @media (max-width: 575px) { .slider__height-13 { min-height: 700px; } } .slider__overlay { position: relative; z-index: 1; } .slider__overlay::after { position: absolute; content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background-color: var(--tp-common-blue); z-index: -1; opacity: 0.4; } .tp-slider-overlay-freelancer-green { position: absolute; content: ""; top: 0; right: 70px; width: 82.5%; height: 100%; z-index: -1; background-color: #D9EFEF; } [dir=rtl] .tp-slider-overlay-freelancer-green { right: auto; left: 70px; } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .tp-slider-overlay-freelancer-green { width: 87.5%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .tp-slider-overlay-freelancer-green { width: 89.5%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .tp-slider-overlay-freelancer-green { width: 100%; right: 0; } [dir=rtl] .tp-slider-overlay-freelancer-green { right: auto; left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tp-slider-overlay-freelancer-green { width: 100%; right: 0; } [dir=rtl] .tp-slider-overlay-freelancer-green { right: auto; left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tp-slider-overlay-freelancer-green { width: calc(100% - 70px); right: 35px; } [dir=rtl] .tp-slider-overlay-freelancer-green { right: auto; left: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-slider-overlay-freelancer-green { width: 100%; right: 0; } [dir=rtl] .tp-slider-overlay-freelancer-green { right: auto; left: 0; } } .tp-slider-overlay-freelancer { position: absolute; bottom: 0; left: 0; right: 70px; width: 80%; height: 245px; z-index: -2; background-color: var(--tp-grey-7); } [dir=rtl] .tp-slider-overlay-freelancer { left: 70px; right: 0; } .slider__overlay-8::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: #04040C; opacity: 0.4; 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) { .slider__thumb-wrapper-2 { margin-left: 0; margin-top: 50px; } [dir=rtl] .slider__thumb-wrapper-2 { margin-right: 0; } } .slider__thumb-wrapper-6 { position: relative; min-height: 617px; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px) { .slider__thumb-wrapper-6 { padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__thumb-wrapper-6 { padding-left: 0; padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__thumb-wrapper-6 { margin-top: 50px; } } .slider__thumb-wrapper-6::after { position: absolute; content: ""; left: 14%; bottom: 12%; width: 55px; height: 171px; border: 2px solid var(--tp-theme-6); } [dir=rtl] .slider__thumb-wrapper-6::after { left: auto; right: 14%; } .slider__thumb-wrapper-6::before { position: absolute; content: ""; right: -6%; top: 16%; width: 54px; height: 338px; border: 2px solid var(--tp-common-orange-2); } [dir=rtl] .slider__thumb-wrapper-6::before { right: auto; left: -6%; } @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) { .slider__thumb-wrapper-6::before { right: 0; } [dir=rtl] .slider__thumb-wrapper-6::before { right: auto; left: 0; } } .slider__thumb-wrapper-7 { position: relative; } .slider__thumb-wrapper-7::after { position: absolute; content: ""; left: 12%; top: 25%; width: 420px; height: 420px; background-color: #FFC0C0; border-radius: 50%; z-index: -1; } [dir=rtl] .slider__thumb-wrapper-7::after { left: auto; right: 12%; } .slider__thumb-4 { -webkit-transform: translateY(110px); -moz-transform: translateY(110px); -ms-transform: translateY(110px); -o-transform: translateY(110px); transform: translateY(110px); padding-top: 40px; background-color: var(--tp-common-green-dark); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__thumb-4 { margin-right: 76px; } [dir=rtl] .slider__thumb-4 { margin-right: 0; margin-left: 76px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__thumb-4 { padding-top: 0; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .slider__thumb-4 img { background-color: var(--tp-common-green-dark); mix-blend-mode: luminosity; } .slider__thumb-5 { position: relative; z-index: 1; min-height: 530px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__thumb-5 { margin-top: 70px; } } @media (max-width: 575px) { .slider__thumb-5 { padding-bottom: 60px; min-height: 440px; } } .slider__thumb-5::after { position: absolute; content: ""; left: 8%; top: -7%; width: 606px; height: 519px; background-color: rgba(8, 140, 220, 0.1411764706); z-index: -1; border-radius: 65% 35% 50% 50%/59% 50% 50% 41%; -moz-animation: borderRadius 5s ease-in-out 1s forwards infinite alternate; -webkit-animation: borderRadius 5s ease-in-out 1s forwards infinite alternate; animation: borderRadius 5s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .slider__thumb-5::after { left: auto; right: 8%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__thumb-5::after { left: -10%; } [dir=rtl] .slider__thumb-5::after { left: auto; right: -10%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__thumb-5::after { left: -11%; width: 450px; height: 470px; } [dir=rtl] .slider__thumb-5::after { left: auto; right: -11%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__thumb-5::after { left: 8%; top: -7%; width: 406px; height: 419px; } [dir=rtl] .slider__thumb-5::after { left: auto; right: 8%; } } @media (max-width: 575px) { .slider__thumb-5::after { top: 21%; width: 250px; height: 319px; } } .slider__thumb-5 img { -webkit-transition: all 0.1s ease-out 0s; -moz-transition: all 0.1s ease-out 0s; -ms-transition: all 0.1s ease-out 0s; -o-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; } .slider__thumb-5 .one { position: absolute; top: 35%; left: 0%; } [dir=rtl] .slider__thumb-5 .one { left: auto; right: 0%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__thumb-5 .one { left: -13%; } [dir=rtl] .slider__thumb-5 .one { left: auto; right: -13%; } } @media (max-width: 575px) { .slider__thumb-5 .one { display: none; } [dir=rtl] .slider__thumb-5 .one { left: auto; right: -6%; } } .slider__thumb-5 .two { position: absolute; top: 3%; left: 25%; } [dir=rtl] .slider__thumb-5 .two { top: 0%; left: -9%; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .slider__thumb-5 .two { width: 100%; } } @media (max-width: 575px) { .slider__thumb-5 .two { left: 0; } [dir=rtl] .slider__thumb-5 .two { left: auto; right: 0; } } .slider__thumb-5 div.two img { max-width: inherit; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .slider__thumb-5 div.two img { max-width: 100%; } } .slider__thumb-6 { margin-bottom: 8px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__thumb-6 { padding-left: 0; } [dir=rtl] .slider__thumb-6 { margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__thumb-6 { padding-left: 0; } [dir=rtl] .slider__thumb-6 { padding-right: 0; } } div.slider__thumb-6 img { max-width: inherit; transition: none; } .slider__thumb-6.one { position: absolute; top: 19%; left: 3%; } [dir=rtl] .slider__thumb-6.one { left: 42%; } .slider__thumb-6.two { position: absolute; right: 53%; top: 6%; } [dir=rtl] .slider__thumb-6.two { right: auto; left: 0%; } .slider__thumb-6.three { position: absolute; bottom: 33.5%; left: 24%; } [dir=rtl] .slider__thumb-6.three { left: 0; } @media (max-width: 575px) { .slider__thumb-6.three { left: 0; } [dir=rtl] .slider__thumb-6.three { left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__thumb-7 { -webkit-transform: translateX(-55px); -moz-transform: translateX(-55px); -ms-transform: translateX(-55px); -o-transform: translateX(-55px); transform: translateX(-55px); } } div.slider__thumb-7 img { max-width: inherit; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.slider__thumb-7 img { width: 100%; } } .slider__thumb-7-shape-1 { position: absolute; top: 21%; left: 25%; z-index: -1; } [dir=rtl] .slider__thumb-7-shape-1 { left: 8%; } .slider__thumb-7-shape-2 { position: absolute; bottom: 4%; left: -7%; z-index: 1; } [dir=rtl] .slider__thumb-7-shape-2 { left: -38%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__thumb-7-shape-2 { left: auto; bottom: -10%; right: -11%; } [dir=rtl] .slider__thumb-7-shape-2 { right: 0%; } } @media (max-width: 575px) { .slider__thumb-7-shape-2 { display: none; } } .slider__thumb-7-shape-3 { position: absolute; top: 43%; right: -54%; z-index: 1; } [dir=rtl] .slider__thumb-7-shape-3 { right: -12%; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .slider__thumb-7-shape-3 { right: -42%; } [dir=rtl] .slider__thumb-7-shape-3 { right: -12%; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .slider__thumb-7-shape-3 { right: -33%; } [dir=rtl] .slider__thumb-7-shape-3 { right: -12%; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__thumb-7-shape-3 { top: 59%; right: -18%; } [dir=rtl] .slider__thumb-7-shape-3 { right: -12%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__thumb-7-shape-3 { top: 47%; right: -13%; } [dir=rtl] .slider__thumb-7-shape-3 { right: -12%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__thumb-7-shape-3 { display: none; } } .slider__thumb-9 { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__thumb-9 { -webkit-transform: translate(-91px, -155px); -moz-transform: translate(-91px, -155px); -ms-transform: translate(-91px, -155px); -o-transform: translate(-91px, -155px); transform: translate(-91px, -155px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__thumb-9 { text-align: center; } } .slider__thumb-9::after { position: absolute; content: ""; top: 16%; left: 6%; width: 500px; height: 500px; border-radius: 50%; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); z-index: -1; animation: sliderThumb 5s linear infinite alternate; -webkit-animation: sliderThumb 5s linear infinite alternate; } [dir=rtl] .slider__thumb-9::after { left: auto; right: 6%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .slider__thumb-9::after { width: 450px; height: 450px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__thumb-9::after { width: 345px; height: 345px; top: 27%; left: 12%; z-index: -1; } [dir=rtl] .slider__thumb-9::after { left: auto; right: 12%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__thumb-9::after { top: 22%; left: 16%; width: 350px; height: 350px; } [dir=rtl] .slider__thumb-9::after { left: auto; right: 16%; } } @media (max-width: 575px) { .slider__thumb-9::after { top: 20%; left: 0%; width: 300px; height: 300px; } [dir=rtl] .slider__thumb-9::after { left: auto; right: 0%; } } img.slider__thumb-9-main { max-width: inherit !important; width: auto; height: auto; object-fit: contain; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { img.slider__thumb-9-main { max-width: 100%; transform-origin: top right; -webkit-transform: scale(1.093); -moz-transform: scale(1.093); -ms-transform: scale(1.093); -o-transform: scale(1.093); transform: scale(1.093); } [dir=rtl] img.slider__thumb-9-main { transform-origin: top left; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { img.slider__thumb-9-main { width: 443px; height: 650px; transform-origin: top right; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); } [dir=rtl] img.slider__thumb-9-main { transform-origin: top left; } } @media only screen and (min-width: 768px) and (max-width: 991px) { img.slider__thumb-9-main { width: 543px; height: 450px; -webkit-transform: scale(1.345); -moz-transform: scale(1.345); -ms-transform: scale(1.345); -o-transform: scale(1.345); transform: scale(1.345); transform-origin: top right; } [dir=rtl] img.slider__thumb-9-main { transform-origin: top left; } } @media only screen and (min-width: 576px) and (max-width: 767px) { img.slider__thumb-9-main { width: 343px; height: 550px; text-align: center; } } @media (max-width: 575px) { img.slider__thumb-9-main { width: 290px; height: 450px; } } .slider__thumb-10 { position: relative; } .slider__thumb-10 .thumb-border { position: absolute; top: 51%; left: 42%; display: inline-block; height: 600px; width: 600px; } .slider__thumb-10 .thumb-border::after, .slider__thumb-10 .thumb-border::before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.1); background-color: rgba(255, 255, 255, 0.02); animation: borderanimate 4s linear infinite; animation-delay: 0s; -webkit-animation-delay: 0s; animation-delay: 0s; } .slider__thumb-10 .thumb-border::before { animation-delay: 1s; } div.slider__thumb-10 > img { max-width: inherit; width: inherit; -webkit-transform: translate(-65px, -15px); -moz-transform: translate(-65px, -15px); -ms-transform: translate(-65px, -15px); -o-transform: translate(-65px, -15px); transform: translate(-65px, -15px); } [dir=rtl] div.slider__thumb-10 > img { -webkit-transform: translate(65px, 35px); -moz-transform: translate(65px, 35px); -ms-transform: translate(65px, 35px); -o-transform: translate(65px, 35px); transform: translate(65px, 35px); } @media only screen and (min-width: 992px) and (max-width: 1199px) { div.slider__thumb-10 > img { -webkit-transform: translate(-65px, -15px) scale(0.8); -moz-transform: translate(-65px, -15px) scale(0.8); -ms-transform: translate(-65px, -15px) scale(0.8); -o-transform: translate(-65px, -15px) scale(0.8); transform: translate(-65px, -15px) scale(0.8); } [dir=rtl] div.slider__thumb-10 > img { -webkit-transform: translate(65px, 15px) scale(0.8); -moz-transform: translate(65px, 15px) scale(0.8); -ms-transform: translate(65px, 15px) scale(0.8); -o-transform: translate(65px, 15px) scale(0.8); transform: translate(65px, 15px) scale(0.8); } } @media only screen and (min-width: 768px) and (max-width: 991px) { div.slider__thumb-10 > img { -webkit-transform: translate(-120px, -15px) scale(0.7); -moz-transform: translate(-120px, -15px) scale(0.7); -ms-transform: translate(-120px, -15px) scale(0.7); -o-transform: translate(-120px, -15px) scale(0.7); transform: translate(-120px, -15px) scale(0.7); } [dir=rtl] div.slider__thumb-10 > img { -webkit-transform: translate(120px, 15px) scale(0.7); -moz-transform: translate(120px, 15px) scale(0.7); -ms-transform: translate(120px, 15px) scale(0.7); -o-transform: translate(120px, 15px) scale(0.7); transform: translate(120px, 15px) scale(0.7); } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.slider__thumb-10 > img { -webkit-transform: translate(-200px, -14px) scale(0.5); -moz-transform: translate(-200px, -14px) scale(0.5); -ms-transform: translate(-200px, -14px) scale(0.5); -o-transform: translate(-200px, -14px) scale(0.5); transform: translate(-200px, -14px) scale(0.5); } [dir=rtl] div.slider__thumb-10 > img { -webkit-transform: translate(200px, 14px) scale(0.5); -moz-transform: translate(200px, 14px) scale(0.5); -ms-transform: translate(200px, 14px) scale(0.5); -o-transform: translate(200px, 14px) scale(0.5); transform: translate(200px, 14px) scale(0.5); } } @media (max-width: 575px) { div.slider__thumb-10 > img { -webkit-transform: translate(-120px, -15px) scale(0.5); -moz-transform: translate(-120px, -15px) scale(0.5); -ms-transform: translate(-120px, -15px) scale(0.5); -o-transform: translate(-120px, -15px) scale(0.5); transform: translate(-120px, -15px) scale(0.5); } [dir=rtl] div.slider__thumb-10 > img { -webkit-transform: translate(120px, 15px) scale(0.5); -moz-transform: translate(120px, 15px) scale(0.5); -ms-transform: translate(120px, 15px) scale(0.5); -o-transform: translate(120px, 15px) scale(0.5); transform: translate(120px, 15px) scale(0.5); } } .slider__thumb-11 { animation-delay: 0.2s; animation-duration: 1s; position: relative; } div.slider__thumb-11 img { max-width: inherit; } @media only screen and (min-width: 992px) and (max-width: 1199px) { div.slider__thumb-11 img { margin-right: -204px; } [dir=rtl] div.slider__thumb-11 img { margin-right: 0; margin-left: -204px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { div.slider__thumb-11 img { -webkit-transform: scale(0.8) translateY(13%) translateX(-41%); -moz-transform: scale(0.8) translateY(13%) translateX(-41%); -ms-transform: scale(0.8) translateY(13%) translateX(-41%); -o-transform: scale(0.8) translateY(13%) translateX(-41%); transform: scale(0.8) translateY(13%) translateX(-41%); } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.slider__thumb-11 img { -webkit-transform: scale(0.8) translateX(-300px) translateY(105px); -moz-transform: scale(0.8) translateX(-300px) translateY(105px); -ms-transform: scale(0.8) translateX(-300px) translateY(105px); -o-transform: scale(0.8) translateX(-300px) translateY(105px); transform: scale(0.8) translateX(-300px) translateY(105px); } } @media (max-width: 575px) { div.slider__thumb-11 img { -webkit-transform: scale(0.6) translate(-738px, 357px); -moz-transform: scale(0.6) translate(-738px, 357px); -ms-transform: scale(0.6) translate(-738px, 357px); -o-transform: scale(0.6) translate(-738px, 357px); transform: scale(0.6) translate(-738px, 357px); } } .slider__thumb-11::after { position: absolute; content: ""; top: 11%; right: 0; width: 700px; height: 700px; border-radius: 50%; background-image: -webkit-linear-gradient(219.77deg, rgba(255, 255, 255, 0.08) 15.44%, rgba(255, 255, 255, 0.04) 85.89%); background-image: -moz-linear-gradient(219.77deg, rgba(255, 255, 255, 0.08) 15.44%, rgba(255, 255, 255, 0.04) 85.89%); background-image: -ms-linear-gradient(219.77deg, rgba(255, 255, 255, 0.08) 15.44%, rgba(255, 255, 255, 0.04) 85.89%); background-image: -o-linear-gradient(219.77deg, rgba(255, 255, 255, 0.08) 15.44%, rgba(255, 255, 255, 0.04) 85.89%); background-image: linear-gradient(219.77deg, rgba(255, 255, 255, 0.08) 15.44%, rgba(255, 255, 255, 0.04) 85.89%); z-index: -1; } [dir=rtl] .slider__thumb-11::after { left: 0; right: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__thumb-12 { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__thumb-12 { -webkit-transform: scale(0.7) translate(-100px, -20px); -moz-transform: scale(0.7) translate(-100px, -20px); -ms-transform: scale(0.7) translate(-100px, -20px); -o-transform: scale(0.7) translate(-100px, -20px); transform: scale(0.7) translate(-100px, -20px); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__thumb-12 { -webkit-transform: scale(0.7) translate(-100px, -20px); -moz-transform: scale(0.7) translate(-100px, -20px); -ms-transform: scale(0.7) translate(-100px, -20px); -o-transform: scale(0.7) translate(-100px, -20px); transform: scale(0.7) translate(-100px, -20px); } } @media (max-width: 575px) { .slider__thumb-12 { -webkit-transform: scale(0.5) translate(-148px, -20px); -moz-transform: scale(0.5) translate(-148px, -20px); -ms-transform: scale(0.5) translate(-148px, -20px); -o-transform: scale(0.5) translate(-148px, -20px); transform: scale(0.5) translate(-148px, -20px); } } div.slider__thumb-12 > img { max-width: 570px; height: 700px; object-fit: cover; will-change: transform; opacity: 0; animation-delay: 0.5s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .slider__thumb-12-shape svg:first-child { position: absolute; top: 18%; left: -3%; z-index: 1; will-change: transform; opacity: 0; animation-delay: 0.7s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .slider__thumb-12-shape svg:last-child { position: absolute; top: 16%; left: -9%; mix-blend-mode: screen; z-index: -1; will-change: transform; opacity: 0; animation-delay: 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } .slider__thumb-13 { position: relative; z-index: 1; } .slider__thumb-13-circle-1, .slider__thumb-13-circle-2 { position: absolute; top: -30%; right: -25%; width: 550px; height: 550px; border-radius: 50%; background-color: var(--tp-common-white); -webkit-animation: tp-hotspot 3s infinite cubic-bezier(0.4, 0, 1, 1); animation: tp-hotspot 3s infinite cubic-bezier(0.4, 0, 1, 1); animation-delay: 0s; } [dir=rtl] .slider__thumb-13-circle-1, [dir=rtl] .slider__thumb-13-circle-2 { right: auto; left: -25%; } .slider__thumb-13-circle-1 { animation-delay: 1s; } .slider__thumb-13 img { animation-delay: 0.9s; animation-duration: 1s; } @media (max-width: 575px) { .slider__thumb-13 img { width: 58%; } } @media (max-width: 366px) { .slider__thumb-13 img { width: 100%; } } .slider__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: var(--tp-common-blue); background-blend-mode: luminosity; } .slider__bg::after { position: absolute; content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background-color: var(--tp-common-blue); z-index: -1; mix-blend-mode: luminosity; opacity: 0.4; } .slider__bg-3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: var(--tp-common-black-5); background-blend-mode: exclusion; } .slider__bg-8 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .slider__bg-8::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: #04040C; opacity: 0.4; } .slider__bg-10 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-blend-mode: luminosity; opacity: 0.05; z-index: -1; } .slider__bg-12 { position: relative; background: radial-gradient(98.58% 98.5% at 64.83% 79.1%, #FF80FF 0%, #F174FF 19%, #CD53FF 55%, #9721FF 100%); } .slider__bg-12::after { position: absolute; content: ""; left: 50%; top: 50%; width: 1480px; height: 883px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background: radial-gradient(49.82% 49.96% at 50.09% 49.95%, rgba(230, 231, 232, 0.3) 0%, rgba(225, 226, 227, 0.3) 9%, rgba(209, 210, 211, 0.3) 20%, rgba(184, 185, 186, 0.3) 33%, rgba(154, 155, 155, 0.3) 44%, rgba(137, 138, 138, 0.3) 54%, rgba(118, 119, 119, 0.3) 63%, rgba(92, 93, 93, 0.3) 71%, rgba(49, 50, 50, 0.3) 81%, rgba(0, 0, 0, 0.3) 100%); background-blend-mode: screen; mix-blend-mode: screen; } .slider__bg-12.has-yellow-gradient { background: radial-gradient(98.58% 98.5% at 64.83% 79.1%, #FFAE80 0%, #FFA674 19%, #FF9153 55%, #AB5C3B 100%); } .slider__bg-12.has-yellow-gradient::after { background: radial-gradient(49.82% 49.96% at 50.09% 49.95%, rgba(230, 231, 232, 0.4) 0%, rgba(225, 226, 227, 0.4) 9%, rgba(209, 210, 211, 0.4) 20%, rgba(184, 185, 186, 0.4) 33%, rgba(154, 155, 155, 0.4) 44%, rgba(137, 138, 138, 0.4) 54%, rgba(118, 119, 119, 0.4) 63%, rgba(92, 93, 93, 0.4) 71%, rgba(49, 50, 50, 0.4) 81%, rgba(0, 0, 0, 0.4) 100%); } .slider__bg-12.has-red-gradient { background: radial-gradient(98.58% 98.5% at 64.83% 79.1%, #FF8080 0%, #FF7474 19%, #FF5353 55%, #D02B2B 100%); } .slider__bg-12.has-red-gradient::after { width: 1140px; background: radial-gradient(49.82% 49.96% at 50.09% 49.95%, rgba(230, 231, 232, 0.4) 0%, rgba(225, 226, 227, 0.4) 9%, rgba(209, 210, 211, 0.4) 20%, rgba(184, 185, 186, 0.4) 33%, rgba(154, 155, 155, 0.4) 44%, rgba(137, 138, 138, 0.4) 54%, rgba(118, 119, 119, 0.4) 63%, rgba(92, 93, 93, 0.4) 71%, rgba(49, 50, 50, 0.4) 81%, rgba(0, 0, 0, 0.4) 100%); } .slider__bg-12.has-blue-gradient { background: radial-gradient(98.58% 98.5% at 64.83% 79.1%, #80D1FF 0%, #74C5FF 19%, #53ACFF 55%, #2B77D0 100%); } .slider__bg-12.has-blue-gradient::after { width: 1140px; background: radial-gradient(49.82% 49.96% at 50.09% 49.95%, rgba(230, 231, 232, 0.4) 0%, rgba(225, 226, 227, 0.4) 9%, rgba(209, 210, 211, 0.4) 20%, rgba(184, 185, 186, 0.4) 33%, rgba(154, 155, 155, 0.4) 44%, rgba(137, 138, 138, 0.4) 54%, rgba(118, 119, 119, 0.4) 63%, rgba(92, 93, 93, 0.4) 71%, rgba(49, 50, 50, 0.4) 81%, rgba(0, 0, 0, 0.4) 100%); } .slider__bg-12.has-purple-gradient { background: radial-gradient(98.58% 98.5% at 64.83% 79.1%, #808DFF 0%, #7774FF 19%, #7553FF 55%, #422BD0 100%); } .slider__bg-12.has-purple-gradient::after { width: 1140px; background: radial-gradient(49.82% 49.96% at 50.09% 49.95%, rgba(230, 231, 232, 0.4) 0%, rgba(225, 226, 227, 0.4) 9%, rgba(209, 210, 211, 0.4) 20%, rgba(184, 185, 186, 0.4) 33%, rgba(154, 155, 155, 0.4) 44%, rgba(137, 138, 138, 0.4) 54%, rgba(118, 119, 119, 0.4) 63%, rgba(92, 93, 93, 0.4) 71%, rgba(49, 50, 50, 0.4) 81%, rgba(0, 0, 0, 0.4) 100%); } .slider__bg-12.has-black-gradient { background: radial-gradient(98.58% 98.5% at 64.83% 79.1%, #0B0D17 0%, #05021F 19%, #030622 55%, #010316 100%); } .slider__bg-12.has-black-gradient::after { height: 1146px; background: radial-gradient(49.82% 49.96% at 50.09% 49.95%, rgba(230, 231, 232, 0.2) 0%, rgba(225, 226, 227, 0.2) 9%, rgba(209, 210, 211, 0.2) 20%, rgba(184, 185, 186, 0.2) 33%, rgba(154, 155, 155, 0.2) 44%, rgba(137, 138, 138, 0.2) 54%, rgba(118, 119, 119, 0.2) 63%, rgba(92, 93, 93, 0.2) 71%, rgba(49, 50, 50, 0.2) 81%, rgba(0, 0, 0, 0.2) 100%); } .slider__bg-text { position: absolute; top: 43%; left: 0; -webkit-transform: rotate(-90deg) translateY(-475px); -moz-transform: rotate(-90deg) translateY(-475px); -ms-transform: rotate(-90deg) translateY(-475px); -o-transform: rotate(-90deg) translateY(-475px); transform: rotate(-90deg) translateY(-475px); } [dir=rtl] .slider__bg-text { left: auto; right: 0; } .slider__bg-text h3 { font-family: var(--tp-ff-rajdhani); font-weight: 700; font-size: 208px; line-height: 0.58; text-transform: uppercase; color: #CFD3AD; text-shadow: 0px 2px 2px rgba(10, 54, 64, 0.06); animation-delay: 0.5s; animation-duration: 1s; } .slider__border { position: relative; } .slider__border::after { position: absolute; content: ""; bottom: 0; left: 0; right: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.1); } .slider__title { font-size: 100px; color: var(--tp-common-white); font-weight: var(--tp-fw-bold); line-height: 1; font-family: var(--tp-ff-space); letter-spacing: -3px; margin-bottom: 28px; animation-delay: 0.5s; animation-duration: 1s; /* index 2 title css */ /* index 3 title css */ /* index 4 title css */ /* index 5 title css */ /* index 6 title css */ /* index 7 title css*/ /* index 8 title css*/ /* index 9 title css*/ /* index 10 title css*/ } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title { font-size: 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title { font-size: 65px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title { font-size: 55px; } } @media (max-width: 575px) { .slider__title { font-size: 35px; letter-spacing: 0; line-height: 1.2; } } .slider__title-2 { font-size: 100px; font-weight: 600; text-transform: uppercase; font-family: var(--tp-ff-oswald); line-height: 1.05; margin-bottom: 52px; letter-spacing: -0.02em; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-2 { font-size: 85px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-2 { font-size: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-2 { font-size: 75px; } } @media (max-width: 575px) { .slider__title-2 { font-size: 55px; } } .slider__title-3 { font-size: 100px; line-height: 1.06; letter-spacing: -0.06em; background-image: -webkit-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -moz-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -ms-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -o-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; margin-bottom: 40px; -moz-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; -webkit-animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; animation: sliderTitle3 2s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-3 { font-size: 75px; } } @media (max-width: 575px) { .slider__title-3 { font-size: 55px; } } .slider__title-4 { font-size: 80px; line-height: 1; color: var(--tp-common-white); text-transform: capitalize; margin-bottom: 10px; letter-spacing: -0.02em; font-family: var(--tp-ff-space); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-4 { font-size: 61px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-4 { font-size: 51px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-4 { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-4 { font-size: 50px; } } @media (max-width: 575px) { .slider__title-4 { font-size: 30px; } } .slider__title-5 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 86px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 20px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__title-5 { font-size: 75px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-5 { font-size: 68px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-5 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-5 { font-size: 81px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-5 { font-size: 65px; } } @media (max-width: 575px) { .slider__title-5 { font-size: 38px; } } .slider__title-6 { color: var(--tp-common-black-9); font-weight: 800; font-size: 80px; line-height: 1.05; font-family: var(--tp-ff-roboto); } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .slider__title-6 { font-size: 75px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__title-6 { font-size: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-6 { font-size: 68px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-6 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-6 { font-size: 81px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-6 { font-size: 65px; } } @media (max-width: 575px) { .slider__title-6 { font-size: 38px; } } .slider__title-7 { font-family: var(--tp-ff-play); font-weight: 700; font-size: 80px; line-height: 1.12; color: var(--tp-common-black-11); margin-bottom: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-7 br { display: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-7 { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-7 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-7 { font-size: 65px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-7 { font-size: 50px; } } @media (max-width: 575px) { .slider__title-7 { font-size: 40px; } } .slider__title-7 .slider-highlight { position: relative; } .slider__title-7 .slider-highlight svg { position: absolute; bottom: 0; left: 0; z-index: -1; width: 100%; } .slider__title-7 .slider-highlight svg path { stroke: var(--tp-common-yellow-3); fill: var(--tp-common-yellow-3); stroke-dasharray: 800; stroke-dashoffset: 800; } .slider__title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 80px; line-height: 1.12; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 13px; animation-delay: 0.3s; animation-duration: 1s; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-8 br { display: none; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-8 { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-8 { font-size: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-8 { font-size: 65px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-8 { font-size: 50px; } } @media (max-width: 575px) { .slider__title-8 { font-size: 40px; } } .slider__title-8 .slider-highlight { position: relative; } .slider__title-8 .slider-highlight svg { position: absolute; bottom: 0; left: -5px; z-index: -1; width: 100%; } .slider__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 80px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-9 { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-9 { font-size: 48px; } .slider__title-9 br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-9 { font-size: 48px; } .slider__title-9 br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-9 { font-size: 50px; } } @media (max-width: 575px) { .slider__title-9 { font-size: 35px; } } .slider__title-10 { font-size: 100px; line-height: 1; letter-spacing: -0.05em; color: var(--tp-common-white); margin-bottom: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-10 { font-size: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-10 { font-size: 48px; } .slider__title-10 br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-10 { font-size: 48px; } .slider__title-10 br { display: none; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-10 { font-size: 50px; } } @media (max-width: 575px) { .slider__title-10 { font-size: 35px; } } .slider__title-11 { font-family: var(--tp-ff-rajdhani); font-size: 120px; line-height: 0.92; letter-spacing: -0.04em; color: var(--tp-common-black); animation-delay: 0.3s; animation-duration: 1s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-11 { font-size: 85px; } } @media (max-width: 575px) { .slider__title-11 { font-size: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-11-product { font-size: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-11-product { font-size: 65px; } } @media (max-width: 575px) { .slider__title-11-product { font-size: 45px; } } .slider__title-12 { font-family: var(--tp-ff-inter); font-weight: 700; font-size: 180px; line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tp-common-white); will-change: transform; opacity: 0; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__title-12 { font-size: 150px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-12 { font-size: 120px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__title-12 { font-size: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__title-12 { font-size: 80px; } } @media (max-width: 575px) { .slider__title-12 { font-size: 60px; } } .slider__title-13 { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 80px; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 45px; animation-delay: 0.5s; animation-duration: 1s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__title-13 { font-size: 70px; } } @media (max-width: 575px) { .slider__title-13 { font-size: 40px; } } .slider__title-pre { font-size: 16px; font-weight: 500; color: var(--tp-common-white); display: inline-block; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 8px; font-family: var(--tp-ff-space); animation-delay: 0.3s; animation-duration: 1s; /* index 2 title css */ /* index 3 title css */ /* index 4 title css */ /* index 5 title css */ /* index 6 title css */ /* index 9 title css */ /* index 10 title css */ } .slider__title-pre-2 { font-size: 28px; font-family: var(--tp-ff-oswald); position: relative; color: var(--tp-common-black); display: inline-block; margin-bottom: 25px; } .slider__title-pre-2::after { position: absolute; content: ""; bottom: -6px; left: 0; width: 100%; height: 1px; background-color: var(--tp-common-green-light); } .slider__title-pre-3 { font-family: var(--tp-ff-space); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.6); text-transform: uppercase; display: inline-block; margin-bottom: 5px; letter-spacing: 0.1em; } .slider__title-pre-4 { display: inline-block; color: var(--tp-common-white); font-size: 16px; font-weight: 500; font-family: var(--tp-ff-space); letter-spacing: 0.5em; text-transform: uppercase; margin-bottom: 3px; } .slider__title-pre-5 { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; color: #4353FF; background-color: #EEEFFF; padding: 2px 20px; border-radius: 20px; margin-bottom: 10px; } .slider__title-pre-6 { display: inline-block; font-weight: 500; font-size: 13px; letter-spacing: 0.2em; color: var(--tp-theme-6); font-family: var(--tp-ff-roboto); } .slider__title-pre-9 { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 500; font-size: 18px; color: var(--tp-common-black); position: relative; padding-left: 14px; } [dir=rtl] .slider__title-pre-9 { padding-left: 0; padding-right: 14px; } .slider__title-pre-9::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 80%; background-image: -webkit-linear-gradient(66.87deg, #FF91FA -31.45%, #FA6490 44.59%, #F7D86A 126.96%); background-image: -moz-linear-gradient(66.87deg, #FF91FA -31.45%, #FA6490 44.59%, #F7D86A 126.96%); background-image: -ms-linear-gradient(66.87deg, #FF91FA -31.45%, #FA6490 44.59%, #F7D86A 126.96%); background-image: -o-linear-gradient(66.87deg, #FF91FA -31.45%, #FA6490 44.59%, #F7D86A 126.96%); background-image: linear-gradient(66.87deg, #FF91FA -31.45%, #FA6490 44.59%, #F7D86A 126.96%); } [dir=rtl] .slider__title-pre-9::after { left: auto; right: 0; } .slider__title-pre-10 { display: inline-block; font-family: var(--tp-ff-space); font-style: normal; font-weight: 500; font-size: 20px; color: var(--tp-common-white); margin-bottom: 14px; } .slider__title-pre-13 { font-family: var(--tp-ff-roboto); font-size: 16px; letter-spacing: 0.03em; color: var(--tp-text-1); position: relative; padding-left: 13px; display: inline-block; line-height: 1.12; margin-bottom: 11px; animation-delay: 0.3s; animation-duration: 1s; } [dir=rtl] .slider__title-pre-13 { padding-left: 0; padding-right: 13px; } .slider__title-pre-13::after { position: absolute; content: ""; left: 0; top: -2px; width: 2px; height: 37px; background-color: var(--tp-theme-1); } [dir=rtl] .slider__title-pre-13::after { left: auto; right: 0; } .slider__content p { font-size: 18px; line-height: 28px; color: var(--tp-common-white); margin-bottom: 45px; animation-delay: 0.7s; animation-duration: 1s; } .slider__content-2 { margin-top: 3px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-2 { padding-left: 40px; } [dir=rtl] .slider__content-2 { padding-left: 0; padding-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__content-2 { padding-left: 0; } [dir=rtl] .slider__content-2 { padding-right: 0; } } .slider__content-3 p { font-size: 18px; color: var(--tp-common-white); margin-bottom: 45px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__content-4 { margin-top: 115px; margin-bottom: 50px; } } .slider__content-4 > p { font-size: 18px; color: var(--tp-common-white); opacity: 0.7; line-height: 28px; margin-bottom: 30px; padding-right: 100px; } [dir=rtl] .slider__content-4 > p { padding-right: 0; padding-left: 100px; } @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) { .slider__content-4 > p { padding-right: 0; } [dir=rtl] .slider__content-4 > p { padding-left: 0; } } .slider__content-5 { margin-top: 35px; } .slider__content-5 > p { font-size: 18px; line-height: 28px; color: #525258; padding-right: 150px; margin-bottom: 40px; } [dir=rtl] .slider__content-5 > p { padding-right: 0; padding-left: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-5 > p { padding-right: 95px; } [dir=rtl] .slider__content-5 > p { padding-right: 0; padding-left: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-5 > p { padding-right: 40px; } [dir=rtl] .slider__content-5 > p { padding-right: 0; padding-left: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-5 > p { padding-right: 50px; } [dir=rtl] .slider__content-5 > p { padding-right: 0; padding-left: 40px; } } @media (max-width: 575px) { .slider__content-5 > p { padding-right: 0; } [dir=rtl] .slider__content-5 > p { padding-left: 40px; } } .slider__content-6 { margin-top: 105px; } .slider__content-6 > p { font-size: 18px; line-height: 28px; color: var(--tp-common-black-10); margin-bottom: 40px; padding-right: 40px; font-family: var(--tp-ff-roboto); } [dir=rtl] .slider__content-6 > p { padding-right: 0; padding-left: 40px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__content-6 > p { padding-right: 0; } [dir=rtl] .slider__content-6 > p { padding-left: 0; } } .slider__content-7 { margin-bottom: 175px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__content-7 { margin-bottom: 50px; } } .slider__content-7 > p { font-family: var(--tp-ff-inter); font-size: 20px; line-height: 1.6; color: #525258; margin-bottom: 27px; } @media (max-width: 575px) { .slider__content-7 > p { font-size: 17px; } } .slider__content-8 { margin-top: 5px; } .slider__content-8 > p { font-family: var(--tp-ff-space); font-size: 18px; line-height: 1.56; color: var(--tp-common-white); margin-bottom: 40px; padding-right: 280px; animation-delay: 0.5s; animation-duration: 1s; } [dir=rtl] .slider__content-8 > p { padding-right: 0; padding-left: 280px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-8 > p { padding-right: 120px; } [dir=rtl] .slider__content-8 > p { padding-left: 120px; padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-8 > p { padding-right: 80px; } [dir=rtl] .slider__content-8 > p { padding-left: 80px; padding-right: 0; } } @media (max-width: 575px) { .slider__content-8 > p { padding-right: 0; } [dir=rtl] .slider__content-8 > p { padding-left: 0; } } .slider__content-9 { margin-bottom: 110px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-9 { margin-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-9 { margin-bottom: 70px; margin-top: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__content-9 { margin-bottom: 10px; margin-top: 30px; } } .slider__content-9 > p { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 18px; line-height: 1.4; margin-bottom: 40px; padding-right: 140px; } [dir=rtl] .slider__content-9 > p { padding-right: 0; padding-left: 140px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-9 > p { padding-right: 90px; } [dir=rtl] .slider__content-9 > p { padding-right: 0; padding-left: 90px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-9 > p { padding-right: 30px; } [dir=rtl] .slider__content-9 > p { padding-right: 0; padding-left: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-9 > p { padding-right: 80px; } [dir=rtl] .slider__content-9 > p { padding-right: 0; padding-left: 80px; } } @media (max-width: 575px) { .slider__content-9 > p { padding-right: 0; } [dir=rtl] .slider__content-9 > p { padding-right: 0; padding-left: 0; } } .slider__content-10 { position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-10 { margin-bottom: 0; } } @media (max-width: 575px) { .slider__content-10 { -webkit-transform: translateY(-155px); -moz-transform: translateY(-155px); -ms-transform: translateY(-155px); -o-transform: translateY(-155px); transform: translateY(-155px); } } .slider__content-10 > p { font-family: var(--tp-ff-space); font-size: 18px; line-height: 1.11; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 45px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-11 { margin-bottom: 0; margin-top: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-11 { margin-bottom: 0; margin-top: 110px; } } @media (max-width: 575px) { .slider__content-11 { margin-bottom: 0; margin-top: 0; } } .slider__content-11 > p { font-family: var(--tp-ff-rajdhani); font-size: 18px; line-height: 1.11; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 45px; animation-delay: 0.6s; animation-duration: 1s; } .slider__content-11-product { position: relative; z-index: 1; } @media (max-width: 575px) { .slider__content-11-product { margin-top: 0; } } .slider__content-12 { position: absolute; top: 41%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; margin-top: 45px; } .slider__content-12.tp-slider-content-position { left: 5%; } [dir=rtl] .slider__content-12.tp-slider-content-position { left: auto; right: 5%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-12.tp-slider-content-position { left: 7%; top: 47%; } [dir=rtl] .slider__content-12.tp-slider-content-position { left: auto; right: 7%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-12.tp-slider-content-position { top: 45%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-12.tp-slider-content-position { top: 46%; left: 4%; } [dir=rtl] .slider__content-12.tp-slider-content-position { left: auto; right: 4%; } } @media (max-width: 575px) { .slider__content-12.tp-slider-content-position { top: 52%; left: 4%; } [dir=rtl] .slider__content-12.tp-slider-content-position { left: auto; right: 4%; } } .slider__content-12.tp-slider-content-position-2 { left: 1%; } [dir=rtl] .slider__content-12.tp-slider-content-position-2 { left: auto; right: 1%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-12.tp-slider-content-position-2 { left: 7%; } [dir=rtl] .slider__content-12.tp-slider-content-position-2 { left: auto; right: 7%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-12.tp-slider-content-position-2 { left: 10%; top: 45%; } [dir=rtl] .slider__content-12.tp-slider-content-position-2 { left: auto; right: 10%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-12.tp-slider-content-position-2 { left: 15%; } [dir=rtl] .slider__content-12.tp-slider-content-position-2 { left: auto; right: 15%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-12.tp-slider-content-position-2 { left: 22%; } [dir=rtl] .slider__content-12.tp-slider-content-position-2 { left: auto; right: 22%; } } .slider__content-12.tp-slider-content-position-3 { left: 12%; } [dir=rtl] .slider__content-12.tp-slider-content-position-3 { left: auto; right: 12%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-12.tp-slider-content-position-3 { left: 7%; top: 43%; } [dir=rtl] .slider__content-12.tp-slider-content-position-3 { left: auto; right: 7%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-12.tp-slider-content-position-3 { left: 8%; top: 45%; } [dir=rtl] .slider__content-12.tp-slider-content-position-3 { left: auto; right: 8%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-12.tp-slider-content-position-3 { left: 3%; top: 50%; } [dir=rtl] .slider__content-12.tp-slider-content-position-3 { left: auto; right: 3%; } } @media (max-width: 575px) { .slider__content-12.tp-slider-content-position-3 { left: 0%; top: 50%; } [dir=rtl] .slider__content-12.tp-slider-content-position-3 { left: auto; right: 0%; } } .slider__content-12.tp-slider-content-position-4 { left: 11%; } [dir=rtl] .slider__content-12.tp-slider-content-position-4 { left: auto; right: 11%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-12.tp-slider-content-position-4 { left: 8%; top: 44%; } [dir=rtl] .slider__content-12.tp-slider-content-position-4 { left: auto; right: 8%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-12.tp-slider-content-position-4 { left: 5%; top: 49%; } [dir=rtl] .slider__content-12.tp-slider-content-position-4 { left: auto; right: 5%; } } @media (max-width: 575px) { .slider__content-12.tp-slider-content-position-4 { left: 0%; top: 52%; } [dir=rtl] .slider__content-12.tp-slider-content-position-4 { left: auto; right: 0%; } } .slider__content-12.tp-slider-content-position-5 { left: 5%; } [dir=rtl] .slider__content-12.tp-slider-content-position-5 { left: auto; right: 5%; } @media (max-width: 575px) { .slider__content-12.tp-slider-content-position-5 { left: 0%; top: 52%; } [dir=rtl] .slider__content-12.tp-slider-content-position-5 { left: auto; right: 0%; } } .slider__content-12.tp-slider-content-position-6 { left: 13%; } [dir=rtl] .slider__content-12.tp-slider-content-position-6 { left: auto; right: 13%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-12.tp-slider-content-position-6 { left: 3%; top: 48%; } [dir=rtl] .slider__content-12.tp-slider-content-position-6 { left: auto; right: 3%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-12.tp-slider-content-position-6 { left: 6%; top: 48%; } [dir=rtl] .slider__content-12.tp-slider-content-position-6 { left: auto; right: 6%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-12.tp-slider-content-position-6 { left: 2%; top: 52%; } [dir=rtl] .slider__content-12.tp-slider-content-position-6 { left: auto; right: 2%; } } @media (max-width: 575px) { .slider__content-12.tp-slider-content-position-6 { left: 0%; top: 54%; } [dir=rtl] .slider__content-12.tp-slider-content-position-6 { left: auto; right: 0%; } } .slider__content-12-wrapper { margin-top: 30px; padding-left: 40px; } [dir=rtl] .slider__content-12-wrapper { padding-left: 0; padding-right: 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__content-12-wrapper { margin-left: 90px; } [dir=rtl] .slider__content-12-wrapper { margin-left: 0; margin-right: 90px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-12-wrapper { padding-left: 0; } [dir=rtl] .slider__content-12-wrapper { padding-right: 0; } } @media (max-width: 575px) { .slider__content-12-wrapper { padding-left: 0; -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } [dir=rtl] .slider__content-12-wrapper { padding-right: 0; } } .slider__content-12-branding { position: absolute; top: 38px; left: -73px; will-change: transform; opacity: 0; animation-delay: 0.7s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); -o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1); } [dir=rtl] .slider__content-12-branding { left: auto; right: -73px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__content-12-branding { top: 108px; left: 0; } [dir=rtl] .slider__content-12-branding { left: auto; right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__content-12-branding { top: 130px; left: -40px; } [dir=rtl] .slider__content-12-branding { left: auto; right: -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__content-12-branding { left: 6px; top: 60px; } [dir=rtl] .slider__content-12-branding { left: auto; right: 6px; } } @media (max-width: 575px) { .slider__content-12-branding { left: 0; top: 115px; } [dir=rtl] .slider__content-12-branding { left: auto; right: 0; } } .slider__content-12-branding p { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 18px; line-height: 1.11; letter-spacing: 0.16em; color: var(--tp-common-white); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__content-12-branding p { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .slider__content-12-branding p br { display: none; } } .slider__content-13 { position: relative; z-index: 11; } .slider__content-13 .tp-btn-border { color: var(--tp-common-black); border: 1.5px solid var(--tp-common-black); font-size: 14px; font-weight: 500; font-family: var(--tp-ff-roboto); padding: 7px 33px; } .slider__content-13 .tp-btn-border span { margin-left: 2px; } [dir=rtl] .slider__content-13 .tp-btn-border span { margin-left: 0; margin-right: 2px; } .slider__content-13 .tp-btn-border svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .slider__content-13 .tp-btn-border:hover { color: var(--tp-common-white); } .slider__wrapper .slider-pagination-btn { position: absolute; bottom: 0; left: 0; width: 80px; height: 80px; line-height: 80px; font-size: 20px; text-align: center; background-color: var(--tp-common-white); color: var(--tp-common-black); z-index: 1; } [dir=rtl] .slider__wrapper .slider-pagination-btn { left: auto; right: 0; } .slider__wrapper .slider-pagination-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .slider__wrapper .slider-pagination-btn.slider-button-next { left: auto; right: 0; } [dir=rtl] .slider__wrapper .slider-pagination-btn.slider-button-next { left: 0; right: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__pagination { display: none; } } .slider__dot { position: absolute; bottom: 0; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); z-index: 9; text-align: center; } .slider__dot .swiper-pagination-bullet { width: 8px; height: 8px; background-color: var(--tp-common-white); margin: 0 8px; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .slider__form { animation-delay: 0.9s; animation-duration: 1s; width: 770px; margin: 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) { .slider__form { width: 100%; } } .slider__form-wrapper { background-color: var(--tp-common-white); border-radius: 40px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__form-wrapper { padding: 20px; } } .slider__form-input { width: 200px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__form-input { width: 173px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__form-input { width: 47%; margin: 0 6px; } } @media (max-width: 575px) { .slider__form-input { width: 100%; } } .slider__form-input.has-select { width: 160px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__form-input.has-select { width: 173px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__form-input.has-select { width: 47%; margin: 0 8px; } } @media (max-width: 575px) { .slider__form-input.has-select { width: 100%; } } .slider__form-input:first-child input { border-top-left-radius: 40px; border-bottom-left-radius: 40px; } .slider__form-input input { width: 100%; height: 70px; line-height: 70px; font-size: 14px; font-weight: 400; color: var(--tp-common-black); border: 0; outline: 0; padding: 0 26px; border-right: 1px solid var(--tp-border-2); font-family: var(--tp-ff-space); background-color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__form-input input { width: 160px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__form-input input { width: 100%; border-radius: 40px; border-right: 0; border: 1px solid var(--tp-border-2); margin-bottom: 15px; height: 50px; line-height: 50px; } } .slider__form-input input::-webkit-input-placeholder { color: var(--tp-common-black); font-size: 14px; text-transform: capitalize; font-weight: 500; } .slider__form-input input:-moz-placeholder { color: var(--tp-common-black); font-size: 14px; text-transform: capitalize; font-weight: 500; } .slider__form-input input::-moz-placeholder { color: var(--tp-common-black); font-size: 14px; text-transform: capitalize; font-weight: 500; } .slider__form-input input:-ms-input-placeholder { color: var(--tp-common-black); font-size: 14px; text-transform: capitalize; font-weight: 500; } .slider__form-input .nice-select { min-width: 160px; font-family: var(--tp-ff-space); color: var(--tp-common-black); font-size: 14px; border: 0; padding-left: 26px; padding-right: 50px; font-weight: 500; } [dir=rtl] .slider__form-input .nice-select { padding-right: 26px; padding-left: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__form-input .nice-select { width: 100%; border-radius: 40px; border: 1px solid var(--tp-border-2); height: 50px; line-height: 50px; } } .slider__form-input .nice-select::after { right: 5px; } [dir=rtl] .slider__form-input .nice-select::after { right: auto; left: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__form-input .nice-select::after { right: 25px; } [dir=rtl] .slider__form-input .nice-select::after { right: auto; left: 15px; } } .slider__form-input .nice-select .list { margin-top: 14px; border-radius: 0; width: 100%; padding-bottom: 10px; padding-top: 9px; } @media (max-width: 575px) { .slider__form-input .nice-select .list { margin-top: 0; } } .slider__form-input .nice-select .list .option { line-height: 29px; min-height: 29px; padding-left: 18px; padding-right: 18px; } .slider__form-input .nice-select .list .option:first-child { display: none !important; } .slider__form-input .nice-select .list .option:hover { color: var(--tp-theme-1); } .slider__form-input .nice-select .list .option.selected { color: var(--tp-theme-1); } .slider__review { margin-top: 213px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .slider__review { margin-top: 100px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__review { margin-top: 50px; } } .slider__review-icon { font-size: 15px; color: var(--tp-theme-2); margin-right: 5px; -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); display: inline-block; } [dir=rtl] .slider__review-icon { margin-right: 0; margin-left: 5px; } .slider__review p { font-size: 15px; text-transform: uppercase; font-family: var(--tp-ff-oswald); display: inline-block; margin-right: 5px; } [dir=rtl] .slider__review p { margin-right: 0; margin-left: 5px; } .slider__review p span { color: var(--tp-common-black-3); } .slider__portfolio-btn { position: absolute; top: 50%; left: -20px; -webkit-transform: rotate(-90deg) translateX(80px); -moz-transform: rotate(-90deg) translateX(80px); -ms-transform: rotate(-90deg) translateX(80px); -o-transform: rotate(-90deg) translateX(80px); transform: rotate(-90deg) translateX(80px); } [dir=rtl] .slider__portfolio-btn { left: auto; right: -20px; -webkit-transform: rotate(-90deg) translateX(-80px); -moz-transform: rotate(-90deg) translateX(-80px); -ms-transform: rotate(-90deg) translateX(-80px); -o-transform: rotate(-90deg) translateX(-80px); transform: rotate(-90deg) translateX(-80px); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__portfolio-btn { top: auto; bottom: 50px; -webkit-transform: rotate(0deg) translateX(47px); -moz-transform: rotate(0deg) translateX(47px); -ms-transform: rotate(0deg) translateX(47px); -o-transform: rotate(0deg) translateX(47px); transform: rotate(0deg) translateX(47px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__portfolio-btn { top: 22%; left: -40px; } [dir=rtl] .slider__portfolio-btn { left: auto; right: -40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__portfolio-btn { right: -30px; left: auto; top: 22%; } [dir=rtl] .slider__portfolio-btn { right: auto; left: -30px; } } @media (max-width: 575px) { .slider__portfolio-btn { right: -30px; left: auto; top: 22%; } [dir=rtl] .slider__portfolio-btn { left: -30px; right: auto; } } .slider__mouse-scroll { position: absolute; top: 50%; right: -20px; -webkit-transform: rotate(-90deg) translateX(80px); -moz-transform: rotate(-90deg) translateX(80px); -ms-transform: rotate(-90deg) translateX(80px); -o-transform: rotate(-90deg) translateX(80px); transform: rotate(-90deg) translateX(80px); z-index: 9; } [dir=rtl] .slider__mouse-scroll { left: -20px; right: auto; -webkit-transform: rotate(-90deg) translateX(-80px); -moz-transform: rotate(-90deg) translateX(-80px); -ms-transform: rotate(-90deg) translateX(-80px); -o-transform: rotate(-90deg) translateX(-80px); transform: rotate(-90deg) translateX(-80px); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__mouse-scroll { right: -35px; } [dir=rtl] .slider__mouse-scroll { right: auto; left: -35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__mouse-scroll { right: 48%; top: auto; bottom: 0; } [dir=rtl] .slider__mouse-scroll { right: auto; left: 48%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__mouse-scroll { top: 22%; right: -37px; } [dir=rtl] .slider__mouse-scroll { right: auto; left: -37px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__mouse-scroll { top: 35%; right: -30px; } [dir=rtl] .slider__mouse-scroll { right: auto; left: -30px; } } @media (max-width: 575px) { .slider__mouse-scroll { right: -30px; } [dir=rtl] .slider__mouse-scroll { right: auto; left: -30px; } } .slider__mouse-scroll p { font-weight: 500; text-transform: uppercase; font-size: 12px; font-family: var(--tp-ff-inter); color: var(--tp-common-black-3); margin-bottom: 0; } [dir=rtl] .slider__mouse-scroll p { -webkit-transform: translateX(120px); -moz-transform: translateX(120px); -ms-transform: translateX(120px); -o-transform: translateX(120px); transform: translateX(120px); } .slider__mouse-scroll .mouse-scroll-icon { -webkit-transform: rotate(90deg) translate(1px, 17px); -moz-transform: rotate(90deg) translate(1px, 17px); -ms-transform: rotate(90deg) translate(1px, 17px); -o-transform: rotate(90deg) translate(1px, 17px); transform: rotate(90deg) translate(1px, 17px); } .slider__mouse-scroll-4 { top: 85%; } .slider__mouse-scroll-4 p { font-family: var(--tp-ff-space); font-weight: 400; font-size: 12px; line-height: 15px; letter-spacing: 0.5em; text-transform: uppercase; color: #FFFFFF; opacity: 0.7; } [dir=rtl] .slider__mouse-scroll-4 p { -webkit-transform: translateX(180px); -moz-transform: translateX(180px); -ms-transform: translateX(180px); -o-transform: translateX(180px); transform: translateX(180px); } .slider__shape-camera { position: absolute; bottom: 12%; left: -13.5%; mix-blend-mode: exclusion; opacity: 0.5; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__shape-camera { left: -33.5%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__shape-camera { bottom: -11%; left: -42.5%; } } @media (max-width: 575px) { .slider__shape-camera { bottom: -11%; left: -84.5%; } } .slider__shape-2-1 { position: absolute; top: 14%; right: 10%; -moz-animation: tptranslateY 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY 3s ease-in-out 1s forwards infinite alternate; } @media (max-width: 575px) { .slider__shape-2-1 { top: 5%; display: none; } } [dir=rtl] .slider__shape-2-1 { right: auto; left: 10%; } .slider__shape-2-2 { position: absolute; top: 44%; right: 12%; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } @media (max-width: 575px) { .slider__shape-2-2 { top: 25%; right: 5%; } } [dir=rtl] .slider__shape-2-2 { right: auto; left: 12%; } .slider__shape-2-3 { position: absolute; bottom: 15%; right: 16%; -moz-animation: tptranslateX2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX2 3s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .slider__shape-2-3 { right: auto; left: 16%; } .slider__shape-4-1 { position: absolute; bottom: 0; right: 0; z-index: -1; height: 100%; } [dir=rtl] .slider__shape-4-1 { width: 100%; } .slider__shape-4-2 { position: absolute; top: 16%; left: 4%; z-index: -1; -moz-animation: tprotate 3s ease-in-out 3s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 3s forwards infinite alternate; animation: tprotate 3s ease-in-out 3s forwards infinite alternate; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__shape-4-2 { top: 4%; } } .slider__shape-4-3 { position: absolute; top: 34%; left: 9%; z-index: -1; -moz-animation: tpupdown 2.3s ease-in-out 2.3s forwards infinite alternate; -webkit-animation: tpupdown 2.3s ease-in-out 2.3s forwards infinite alternate; animation: tpupdown 2.3s ease-in-out 2.3s forwards infinite alternate; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__shape-4-3 { left: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__shape-4-3 { top: 22%; left: 2%; } } @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) { .slider__shape-4-3 { display: none; } } .slider__shape-5 { position: absolute; top: 15%; left: 2%; -moz-animation: tpupdown 1.5s ease-in-out 1.5s forwards infinite alternate; -webkit-animation: tpupdown 1.5s ease-in-out 1.5s forwards infinite alternate; animation: tpupdown 1.5s ease-in-out 1.5s forwards infinite alternate; } .slider__shape-6 { position: absolute; bottom: 32%; left: 6%; -moz-animation: tprotate 3s ease-in-out 3s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 3s forwards infinite alternate; animation: tprotate 3s ease-in-out 3s forwards infinite alternate; } .slider__shape-7 { position: absolute; bottom: 14%; right: 38%; -moz-animation: tpupdown 1.5s ease-in-out 1.5s forwards infinite alternate; -webkit-animation: tpupdown 1.5s ease-in-out 1.5s forwards infinite alternate; animation: tpupdown 1.5s ease-in-out 1.5s forwards infinite alternate; } .slider__shape-8 { position: absolute; top: 19%; left: 37%; -moz-animation: tprotate 3s ease-in-out 3s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 3s forwards infinite alternate; animation: tprotate 3s ease-in-out 3s forwards infinite alternate; } .slider__shape-9 { position: absolute; top: 30%; left: 42%; z-index: -1; -moz-animation: tpswing 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpswing 1s ease-in-out 1s forwards infinite alternate; animation: tpswing 1s ease-in-out 1s forwards infinite alternate; transform-origin: left center; } .slider__shape-10 { position: absolute; top: 0; left: 0; z-index: -1; } @media (max-width: 575px) { .slider__shape-10 { width: 100%; } } .slider__shape-11 { position: absolute; bottom: 27%; left: 4%; z-index: -1; -moz-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; } .slider__shape-12 { position: absolute; bottom: 10%; right: 6%; z-index: -1; -moz-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; } .slider__shape-13 { position: absolute; top: 10%; right: 48%; z-index: -1; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } @media (max-width: 575px) { .slider__shape-13 { top: 2%; } } .slider__shape-14 { position: absolute; top: 8%; right: 6%; z-index: -1; } .slider__shape-15 { position: absolute; top: 3%; right: 31%; z-index: -1; } .slider__shape-16 { position: absolute; top: 15%; right: 0; z-index: -1; } .slider__shape-17 { position: absolute; top: -7%; right: 11%; z-index: -1; } .slider__shape-18 { position: absolute; top: 34%; right: 38%; 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) { .slider__shape-18 { display: none; } } .slider__shape-19 { position: absolute; top: 20%; left: 0; z-index: -1; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__shape-19 { top: 3%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__shape-19 { top: 10%; width: 7%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__shape-19 { top: 12%; width: 10%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__shape-19 { top: 5%; left: auto; right: 0; -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); } [dir=rtl] .slider__shape-19 { left: 0; right: auto; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } } @media (max-width: 575px) { .slider__shape-19 { width: 22%; } } .slider__shape-20 { position: absolute; top: 30%; right: -24%; z-index: -1; } [dir=rtl] .slider__shape-20 { right: -5%; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .slider__shape-20 { top: 20%; right: -18%; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__shape-20 { top: 7%; right: -7%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__shape-20 { top: 1%; right: -2%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__shape-20 { top: 10%; left: 83%; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__shape-20 { top: 15%; right: 11%; } } @media (max-width: 575px) { .slider__shape-20 { top: 0; right: -7%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } } .slider__shape-21 { position: absolute; top: 17%; left: 14%; } div.slider__shape-21 img { max-width: inherit; } [dir=rtl] .slider__shape-21 { top: 22%; left: -3%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__shape-21 { top: 30%; left: 13%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__shape-21 { top: 22%; left: 18%; } } @media (max-width: 575px) { .slider__shape-21 { top: 17%; left: 14%; -webkit-transform: scale(0.7) translateX(-39px); -moz-transform: scale(0.7) translateX(-39px); -ms-transform: scale(0.7) translateX(-39px); -o-transform: scale(0.7) translateX(-39px); transform: scale(0.7) translateX(-39px); } } .slider__btn-4 .tp-btn-brown { border: 2px solid var(--tp-theme-4); padding: 10px 33px; } .slider__btn-4 .tp-btn-brown:hover { color: var(--tp-common-white); background-color: transparent; border-color: rgba(255, 255, 255, 0.1); } .slider__btn-8 { animation-delay: 0.7s; animation-duration: 1s; } .slider__btn-8 .tp-style-border { border: 2px solid var(--tp-theme-8); padding: 11px 41px 13px; } .slider__btn-8 .tp-style-border:hover { color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.2); background-color: transparent; } .slider__btn-11 { animation-delay: 0.9s; animation-duration: 1s; } .slider__btn-13 { animation-delay: 0.7s; animation-duration: 1s; } .slider__user { margin-top: 150px; display: flex; 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) { .slider__user { margin-top: 50px; } } .slider__user p { font-size: 12px; font-weight: 500; color: var(--tp-common-black-9); line-height: 14px; margin-bottom: 0; margin-left: 10px; font-family: var(--tp-ff-roboto); } [dir=rtl] .slider__user p { margin-left: 0; margin-right: 10px; } .slider__user ul li { list-style: none; display: inline-block; margin-left: -15px; } [dir=rtl] .slider__user ul li { margin-left: 0; margin-right: -15px; } .slider__user ul li:first-child { margin-left: 0; } [dir=rtl] .slider__user ul li:first-child { margin-right: 0; } .slider__user ul li a img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--tp-common-white); box-shadow: 0px 1px 2px rgba(13, 18, 30, 0.1); } .slider__subscribe { padding-right: 75px; } [dir=rtl] .slider__subscribe { padding-right: 0; padding-left: 75px; } @media (max-width: 575px) { .slider__subscribe { padding-right: 0; } [dir=rtl] .slider__subscribe { padding-left: 0; } } .slider__subscribe-input { position: relative; margin-bottom: 16px; } .slider__subscribe-input input { width: 100%; height: 70px; box-shadow: 0px 2px 3px rgba(4, 36, 30, 0.1); border-radius: 40px; background-color: var(--tp-common-white); border: 0; outline: 0; padding: 0 180px; padding-left: 57px; } [dir=rtl] .slider__subscribe-input input { padding-left: 180px; padding-right: 57px; text-align: right; } @media (max-width: 575px) { .slider__subscribe-input input { padding-right: 30px; } [dir=rtl] .slider__subscribe-input input { padding-right: 0; padding-left: 30px; } } .slider__subscribe-input input::-webkit-input-placeholder { font-family: var(--tp-ff-inter); font-size: 15px; color: var(--tp-text-22); } .slider__subscribe-input input:-moz-placeholder { font-family: var(--tp-ff-inter); font-size: 15px; color: var(--tp-text-22); } .slider__subscribe-input input::-moz-placeholder { font-family: var(--tp-ff-inter); font-size: 15px; color: var(--tp-text-22); } .slider__subscribe-input input:-ms-input-placeholder { font-family: var(--tp-ff-inter); font-size: 15px; color: var(--tp-text-22); } .slider__subscribe-input i, .slider__subscribe-input .slider__subscribe-input-icon { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); left: 30px; font-size: 15px; color: var(--tp-text-22); z-index: 1; } [dir=rtl] .slider__subscribe-input i, [dir=rtl] .slider__subscribe-input .slider__subscribe-input-icon { left: auto; right: 30px; } .slider__subscribe-input svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .slider__subscribe-input-box { position: relative; } .slider__subscribe-input-box button { position: absolute; top: 10px; right: 10px; } [dir=rtl] .slider__subscribe-input-box button { right: auto; left: 10px; } @media (max-width: 575px) { .slider__subscribe-input-box button { position: relative; top: 0; right: auto; left: 0; margin-bottom: 20px; } [dir=rtl] .slider__subscribe-input-box button { left: auto; right: 0; } } .slider__subscribe-list ul li { list-style: none; display: inline-block; margin-right: 25px; } [dir=rtl] .slider__subscribe-list ul li { margin-right: 0; margin-left: 25px; } @media (max-width: 575px) { .slider__subscribe-list ul li { margin-bottom: 15px; } } .slider__subscribe-list ul li i { display: inline-block; background-image: -webkit-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: -moz-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: -ms-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: -o-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); box-shadow: 0px 1px 2px rgba(6, 138, 75, 0.3); width: 20px; height: 20px; line-height: 20px; text-align: center; color: var(--tp-common-white); font-size: 10px; border-radius: 50%; margin-right: 5px; } [dir=rtl] .slider__subscribe-list ul li i { margin-right: 0; margin-left: 5px; } .slider__social { position: absolute; top: 40%; left: 75px; z-index: 9; } [dir=rtl] .slider__social { left: auto; right: 75px; } .slider__social ul li { list-style: none; } .slider__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; border: 2px solid rgba(255, 255, 255, 0.2); color: var(--tp-common-white); border-radius: 50%; margin-bottom: 8px; } .slider__social ul li a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); border-color: var(--tp-theme-8); } .slider__social ul li a.tw { font-size: 13px; } .slider__social span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: #FFFFFF; -webkit-transform: rotate(-90deg) translate(-38px, -28px); -moz-transform: rotate(-90deg) translate(-38px, -28px); -ms-transform: rotate(-90deg) translate(-38px, -28px); -o-transform: rotate(-90deg) translate(-38px, -28px); transform: rotate(-90deg) translate(-38px, -28px); position: relative; padding-right: 25px; } [dir=rtl] .slider__social span { padding-right: 0; padding-left: 25px; -webkit-transform: rotate(-90deg) translate(-38px, 28px); -moz-transform: rotate(-90deg) translate(-38px, 28px); -ms-transform: rotate(-90deg) translate(-38px, 28px); -o-transform: rotate(-90deg) translate(-38px, 28px); transform: rotate(-90deg) translate(-38px, 28px); } .slider__social span::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 14px; height: 2px; background-color: var(--tp-common-white); } [dir=rtl] .slider__social span::after { right: auto; left: 0; } .slider__social-9 > span { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 16px; line-height: 16px; color: var(--tp-common-black); display: inline-block; margin-right: 10px; margin-bottom: 15px; } [dir=rtl] .slider__social-9 > span { margin-right: 0; margin-left: 10px; } .slider__social-9 ul { margin-bottom: 15px; } .slider__social-9 ul li { list-style: none; display: inline-block; margin-right: 5px; } [dir=rtl] .slider__social-9 ul li { margin-right: 0; margin-left: 5px; } .slider__social-9 ul li:last-child { margin-right: 0; } [dir=rtl] .slider__social-9 ul li:last-child { margin-left: 0; } .slider__social-9 ul li a { display: inline-block; width: 50px; height: 50px; line-height: 48px; text-align: center; border: 1px solid #EAEAEF; border-radius: 50%; font-size: 18px; } .slider__social-9 ul li a svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .slider__social-9 ul li a:hover { background-color: var(--tp-common-black); border-color: var(--tp-common-black); color: var(--tp-common-white); } .slider__social-12 { position: absolute; bottom: 43px; left: 50px; z-index: 1; } [dir=rtl] .slider__social-12 { left: auto; right: 50px; } @media (max-width: 575px) { .slider__social-12 { left: 15px; } [dir=rtl] .slider__social-12 { left: auto; right: 15px; } } .slider__social-12 span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; color: var(--tp-common-white); margin-right: 3px; } [dir=rtl] .slider__social-12 span { margin-right: 0; margin-left: 3px; } .slider__social-12 a { color: var(--tp-common-white-op-7); margin-right: 5px; } [dir=rtl] .slider__social-12 a { margin-right: 0; margin-left: 5px; } .slider__social-12 a:last-child { margin-right: 0; } [dir=rtl] .slider__social-12 a:last-child { margin-left: 0; } .slider__social-12 a:hover { color: var(--tp-common-white); } .slider__nav { width: 650px; position: absolute; bottom: 0; right: 0; z-index: 9; height: 120px; } [dir=rtl] .slider__nav { right: auto; left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__nav { bottom: -18px; right: -98px; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } [dir=rtl] .slider__nav { right: auto; left: -98px; } } .slider__nav-content { padding: 20px 40px 16px; padding-right: 109px; background-color: var(--tp-theme-8); min-width: 380px; height: 120px; } [dir=rtl] .slider__nav-content { padding-right: 40px; padding-left: 109px; } .slider__nav-content span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 18px; color: #FFFFFF; margin-bottom: 2px; animation-delay: 0.2s; animation-duration: 0.5s; } .slider__nav-content .slider-nav-title { font-family: var(--tp-ff-space); font-weight: 700; font-size: 20px; line-height: 24px; letter-spacing: -0.04em; color: var(--tp-common-white); animation-delay: 0.4s; animation-duration: 0.5s; } .slider__nav-thumb { height: 120px; } .slider__nav-thumb img { height: 100%; object-fit: cover; } .slider__nav-arrow { position: absolute; top: 0; right: calc(100% + 1px); z-index: 11; } [dir=rtl] .slider__nav-arrow { right: auto; left: calc(100% + 1px); } .slider__nav-arrow button { display: inline-block; width: 60px; height: 59.5px; line-height: 60px; text-align: center; background-color: var(--tp-common-white); color: var(--tp-common-black-12); font-size: 18px; margin-top: 0.5px; } .slider__nav-arrow button:hover { background-color: var(--tp-theme-8); color: var(--tp-common-white); } .slider__nav-arrow button.slider-button-8-next { margin-bottom: 0.5px; height: 59.5px; margin-top: 0; } .slider__nav-arrow button.slider-button-8-next:hover { border-color: var(--tp-theme-8); } .slider__nav-arrow-12 button { position: absolute; top: 50%; left: 50px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 50px; line-height: 46px; text-align: center; border: 2px solid rgba(255, 255, 255, 0.1); z-index: 9; color: var(--tp-common-white); } [dir=rtl] .slider__nav-arrow-12 button { left: auto; right: 50px; } .slider__nav-arrow-12 button.slider-button-12-next { left: auto; right: 50px; } [dir=rtl] .slider__nav-arrow-12 button.slider-button-12-next { left: 50px; right: auto; } .slider__nav-arrow-12 button:hover { color: var(--tp-common-black); background-color: var(--tp-common-white); border-color: var(--tp-common-white); } .slider__nav .swiper-slide-active .slider__nav-content span, .slider__nav .swiper-slide-active .slider__nav-content .slider-nav-title { animation-name: fadeInUp; animation-fill-mode: both; } .slider__product { animation-delay: 0.6s; animation-duration: 1s; } .slider__product-price { font-family: var(--tp-ff-rajdhani); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-yellow-4); position: relative; } .slider__product-price svg { position: absolute; bottom: -3px; left: 0; } [dir=rtl] .slider__product-price svg { left: auto; right: 0; } .slider__product-price.old-price { color: var(--tp-common-black-19); font-size: 18px; font-weight: 500; margin-left: 3px; text-decoration-line: line-through; } [dir=rtl] .slider__product-price.old-price { margin-left: 0; margin-right: 3px; } .slider__product-tooltip .tp-tooltip-single { position: absolute; text-align: center; width: 70px; height: 70px; top: 39%; right: 21%; z-index: 1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__product-tooltip .tp-tooltip-single { top: 48%; right: 2%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-tooltip .tp-tooltip-single { top: 45%; right: 60%; } } @media (max-width: 575px) { .slider__product-tooltip .tp-tooltip-single { display: none; } } .slider__product-tooltip .tp-tooltip-single.tp-tooltip-two { right: 11%; top: 18%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__product-tooltip .tp-tooltip-single.tp-tooltip-two { right: 6%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__product-tooltip .tp-tooltip-single.tp-tooltip-two { right: 71%; top: 43%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .slider__product-tooltip .tp-tooltip-single.tp-tooltip-two { display: none; } } .slider__product-tooltip .tp-tooltip-single:hover .tp-tooltip-content { visibility: visible; opacity: 1; -webkit-transform: translate(-45%, 36px); -moz-transform: translate(-45%, 36px); -ms-transform: translate(-45%, 36px); -o-transform: translate(-45%, 36px); transform: translate(-45%, 36px); } .slider__product-tooltip .tp-tooltip-circle { width: 24px; height: 24px; background-color: var(--tp-theme-1); border: 9px solid var(--tp-common-white); border-radius: 50%; box-shadow: 0px 6px 14px rgba(9, 22, 24, 0.3); position: relative; } .slider__product-tooltip .tp-tooltip-circle .tp-tooltip-effect-1, .slider__product-tooltip .tp-tooltip-circle .tp-tooltip-effect-2 { position: absolute; left: -32px; top: -32px; width: 70px; height: 70px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.4); backdrop-filter: blur(6px); border-radius: 50%; z-index: -1; -webkit-animation: tp-hotspot-2 2s infinite cubic-bezier(0.4, 0, 1, 1); animation: tp-hotspot-2 2s infinite cubic-bezier(0.4, 0, 1, 1); animation-delay: 0s; } .slider__product-tooltip .tp-tooltip-circle .tp-tooltip-effect-2 { animation-delay: 0.4s; } .slider__product-tooltip .tp-tooltip-content { background-color: var(--tp-common-white); position: relative; min-width: 220px; padding: 15px 20px; -webkit-transform: translate(-45%, 50px); -moz-transform: translate(-45%, 50px); -ms-transform: translate(-45%, 50px); -o-transform: translate(-45%, 50px); transform: translate(-45%, 50px); transform-origin: top center; visibility: hidden; opacity: 0; } .slider__product-tooltip .tp-tooltip-content::after { position: absolute; content: ""; left: 0; top: 0; width: 14px; height: 14px; background-color: var(--tp-common-white); top: 0; left: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); -moz-transform: translate(-50%, -50%) rotate(45deg); -ms-transform: translate(-50%, -50%) rotate(45deg); -o-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } .slider__product-tooltip .tp-tooltip-content h5 { font-family: var(--tp-ff-syne); font-weight: 600; font-size: 18px; line-height: 1; margin-bottom: 3px; text-align: center; color: var(--tp-common-black-15); } .slider__product-tooltip .tp-tooltip-content p { font-family: var(--tp-ff-syne); font-size: 15px; letter-spacing: 0.04em; color: #4E5657; line-height: 1; margin-bottom: 0; } .slider__product-wrapper { margin-left: -30px; } [dir=rtl] .slider__product-wrapper { margin-left: 0; margin-right: -30px; } #product_wrapper { position: relative; width: 540px; height: 614px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { #product_wrapper { margin-left: -180px; } [dir=rtl] #product_wrapper { margin-left: 0; margin-right: -180px; } } #product_wrapper::after { position: absolute; content: ""; left: -19%; top: -1%; width: 700px; height: 700px; background-image: -webkit-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 100%); border-radius: 50%; } [dir=rtl] #product_wrapper::after { left: auto; right: -19%; } #product_wrapper .slider__product-thumb-single { visibility: hidden; opacity: 0; } #product_wrapper.product-img-1 .product-img-1 { visibility: visible; opacity: 1; } #product_wrapper.product-img-2 .product-img-2 { visibility: visible; opacity: 1; } #product_wrapper.product-img-3 .product-img-3 { visibility: visible; opacity: 1; } #product_wrapper.product-img-4 .product-img-4 { visibility: visible; opacity: 1; } #product_wrapper.product-img-5 .product-img-5 { visibility: visible; opacity: 1; } #product_wrapper.product-img-6 .product-img-6 { visibility: visible; opacity: 1; } #product_wrapper.product-img-7 .product-img-7 { visibility: visible; opacity: 1; } #product_wrapper.product-img-8 .product-img-8 { visibility: visible; opacity: 1; } #product_wrapper.product-img-9 .product-img-9 { visibility: visible; opacity: 1; } #product_wrapper.product-img-10 .product-img-10 { visibility: visible; opacity: 1; } #product_wrapper.product-img-11 .product-img-11 { visibility: visible; opacity: 1; } #product_wrapper.product-img-12 .product-img-12 { visibility: visible; opacity: 1; } #product_wrapper.product-img-13 .product-img-13 { visibility: visible; opacity: 1; } #product_wrapper.product-img-14 .product-img-14 { visibility: visible; opacity: 1; } #product_wrapper.product-img-15 .product-img-15 { visibility: visible; opacity: 1; } #product_wrapper.product-img-16 .product-img-16 { visibility: visible; opacity: 1; } #product_wrapper.product-img-17 .product-img-17 { visibility: visible; opacity: 1; } #product_wrapper.product-img-18 .product-img-18 { visibility: visible; opacity: 1; } #product_wrapper.product-img-19 .product-img-19 { visibility: visible; opacity: 1; } #product_wrapper.product-img-20 .product-img-20 { visibility: visible; opacity: 1; } #product_wrapper.product-img-21 .product-img-21 { visibility: visible; opacity: 1; } #product_wrapper.product-img-22 .product-img-22 { visibility: visible; opacity: 1; } #product_wrapper.product-img-23 .product-img-23 { visibility: visible; opacity: 1; } #product_wrapper.product-img-24 .product-img-24 { visibility: visible; opacity: 1; } .slider__product-thumb-single { position: absolute; top: -7%; left: -16%; } [dir=rtl] .slider__product-thumb-single { left: auto; right: -16%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__product-thumb-single { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__product-thumb-single { left: -60%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } [dir=rtl] .slider__product-thumb-single { left: auto; right: -60%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__product-thumb-single { left: -48%; -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); -o-transform: scale(0.6); transform: scale(0.6); } [dir=rtl] .slider__product-thumb-single { left: auto; right: -48%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-thumb-single { top: 0; left: -71%; -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); } [dir=rtl] .slider__product-thumb-single { left: auto; right: -71%; } } @media (max-width: 575px) { .slider__product-thumb-single { top: 0; left: 0%; -webkit-transform: scale(0.3) translate(-950px, -150px); -moz-transform: scale(0.3) translate(-950px, -150px); -ms-transform: scale(0.3) translate(-950px, -150px); -o-transform: scale(0.3) translate(-950px, -150px); transform: scale(0.3) translate(-950px, -150px); } [dir=rtl] .slider__product-thumb-single { left: auto; right: 0%; } } .slider__product-thumb-nav { position: absolute; right: 12%; top: 22%; width: 220px; height: 540px; z-index: 1; } [dir=rtl] .slider__product-thumb-nav { right: auto; left: 12%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .slider__product-thumb-nav { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .slider__product-thumb-nav { right: 9%; top: 22%; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); -o-transform: scale(0.7); transform: scale(0.7); } [dir=rtl] .slider__product-thumb-nav { right: auto; left: 9%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider__product-thumb-nav { bottom: 0; top: auto; right: 0; width: 540px; height: 220px; -webkit-transform: scale(0.6) translateY(50px); -moz-transform: scale(0.6) translateY(50px); -ms-transform: scale(0.6) translateY(50px); -o-transform: scale(0.6) translateY(50px); transform: scale(0.6) translateY(50px); } [dir=rtl] .slider__product-thumb-nav { right: auto; left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-thumb-nav { bottom: 0; top: auto; right: 0; width: 540px; height: 220px; -webkit-transform: scale(0.6) translateY(90px); -moz-transform: scale(0.6) translateY(90px); -ms-transform: scale(0.6) translateY(90px); -o-transform: scale(0.6) translateY(90px); transform: scale(0.6) translateY(90px); } [dir=rtl] .slider__product-thumb-nav { right: auto; left: 0; } } @media (max-width: 575px) { .slider__product-thumb-nav { bottom: 0; top: auto; right: 0; width: inherit; height: 220px; -webkit-transform: scale(0.6) translate(98px, -120px); -moz-transform: scale(0.6) translate(98px, -120px); -ms-transform: scale(0.6) translate(98px, -120px); -o-transform: scale(0.6) translate(98px, -120px); transform: scale(0.6) translate(98px, -120px); } [dir=rtl] .slider__product-thumb-nav { right: auto; left: 0; } } .slider__product-thumb-nav-border { position: absolute; top: 7%; left: 2%; } [dir=rtl] .slider__product-thumb-nav-border { left: auto; right: 2%; -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 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) { .slider__product-thumb-nav-border { display: none; } } .slider__product-thumb-nav .product-img-sm-1 { position: absolute; top: -25px; left: 0; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-1 { left: auto; right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-thumb-nav .product-img-sm-1 { position: relative; left: inherit; top: inherit; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-1 { left: auto; right: inherit; } } @media (max-width: 575px) { .slider__product-thumb-nav .product-img-sm-1 { position: relative; left: inherit; top: inherit; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-1 { left: auto; right: inherit; } } .slider__product-thumb-nav .product-img-sm-2 { position: absolute; right: -18%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .slider__product-thumb-nav .product-img-sm-2 { right: auto; left: -18%; } .slider__product-thumb-nav .product-img-sm-2::after { background-image: -webkit-linear-gradient(216.8deg, #9795F0 23.15%, #FBC8D4 74.43%); background-image: -moz-linear-gradient(216.8deg, #9795F0 23.15%, #FBC8D4 74.43%); background-image: -ms-linear-gradient(216.8deg, #9795F0 23.15%, #FBC8D4 74.43%); background-image: -o-linear-gradient(216.8deg, #9795F0 23.15%, #FBC8D4 74.43%); background-image: linear-gradient(216.8deg, #9795F0 23.15%, #FBC8D4 74.43%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-thumb-nav .product-img-sm-2 { position: relative; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); top: inherit; right: inherit; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-2 { right: auto; left: inherit; } } @media (max-width: 575px) { .slider__product-thumb-nav .product-img-sm-2 { position: relative; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); top: inherit; right: inherit; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-2 { right: auto; left: inherit; } } .slider__product-thumb-nav .product-img-sm-3 { position: absolute; bottom: -10px; left: 0; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-3 { left: auto; right: 0; } .slider__product-thumb-nav .product-img-sm-3::after { background-image: -webkit-linear-gradient(223.95deg, #FFDD71 16.77%, #FF7750 83.83%); background-image: -moz-linear-gradient(223.95deg, #FFDD71 16.77%, #FF7750 83.83%); background-image: -ms-linear-gradient(223.95deg, #FFDD71 16.77%, #FF7750 83.83%); background-image: -o-linear-gradient(223.95deg, #FFDD71 16.77%, #FF7750 83.83%); background-image: linear-gradient(223.95deg, #FFDD71 16.77%, #FF7750 83.83%); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-thumb-nav .product-img-sm-3 { position: relative; bottom: inherit; left: inherit; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-3 { left: auto; right: inherit; } } @media (max-width: 575px) { .slider__product-thumb-nav .product-img-sm-3 { position: relative; bottom: inherit; left: inherit; } [dir=rtl] .slider__product-thumb-nav .product-img-sm-3 { left: auto; right: inherit; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .slider__product-thumb-sm { margin-right: 60px; } [dir=rtl] .slider__product-thumb-sm { margin-right: 0; margin-left: 60px; } .slider__product-thumb-sm:last-child { margin-right: 0; } [dir=rtl] .slider__product-thumb-sm:last-child { margin-left: 0; } } .slider__product-thumb-sm:hover { cursor: pointer; } .slider__product-thumb-sm::after { position: absolute; content: ""; width: 120px; height: 120px; top: 22%; left: 3%; background-image: -webkit-linear-gradient(207.57deg, #FF758C 17.24%, #FF7EB3 79.95%); background-image: -moz-linear-gradient(207.57deg, #FF758C 17.24%, #FF7EB3 79.95%); background-image: -ms-linear-gradient(207.57deg, #FF758C 17.24%, #FF7EB3 79.95%); background-image: -o-linear-gradient(207.57deg, #FF758C 17.24%, #FF7EB3 79.95%); background-image: linear-gradient(207.57deg, #FF758C 17.24%, #FF7EB3 79.95%); border-radius: 50%; z-index: -1; transform-origin: center center; } [dir=rtl] .slider__product-thumb-sm::after { left: auto; right: 3%; } .slider__product-thumb-sm img { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } .slider__product-thumb-sm.active img { -webkit-transform: scale(1.4) translate(1px, -14px); -moz-transform: scale(1.4) translate(1px, -14px); -ms-transform: scale(1.4) translate(1px, -14px); -o-transform: scale(1.4) translate(1px, -14px); transform: scale(1.4) translate(1px, -14px); } .slider__product-thumb-sm.active::after { -webkit-transform: scale(1.42); -moz-transform: scale(1.42); -ms-transform: scale(1.42); -o-transform: scale(1.42); transform: scale(1.42); } .slider-form-btn { display: inline-block; padding: 12px 27px; font-size: 14px; font-weight: 700; color: var(--tp-common-white); background-color: var(--tp-theme-1); border-radius: 30px; font-family: var(--tp-ff-space); margin-left: 29px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .slider-form-btn { padding-left: 15px; padding-right: 15px; margin-left: 5px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .slider-form-btn { margin-left: 0; width: 100%; } } @media (max-width: 575px) { .slider-form-btn { margin-left: 0; width: 100%; margin-top: 15px; } } .slider-form-btn i { margin-left: 3px; } .slider-form-btn:hover { background-color: var(--tp-theme-1-dark); color: var(--tp-common-white); } .main-slider-dot { position: absolute; top: 50%; right: 40px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; display: flex; align-items: flex-end; justify-content: center; flex-direction: column; width: inherit !important; left: auto !important; } [dir=rtl] .main-slider-dot { right: auto; left: 40px !important; } .main-slider-dot .swiper-pagination-bullet { height: 2px; width: 20px; background-color: var(--tp-common-white); border-radius: 0; opacity: 1; margin: 5px 0 !important; position: relative; } .main-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active, .main-slider-dot .swiper-pagination-bullet:hover { background-color: var(--tp-theme-1); width: 50px; } .main-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active button, .main-slider-dot .swiper-pagination-bullet:hover button { opacity: 1; } .main-slider-dot .swiper-pagination-bullet button { font-size: 16px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); position: absolute; top: -1px; left: -25px; -webkit-transform: translateY(-13px); -moz-transform: translateY(-13px); -ms-transform: translateY(-13px); -o-transform: translateY(-13px); transform: translateY(-13px); opacity: 0; } [dir=rtl] .main-slider-dot .swiper-pagination-bullet button { left: auto; right: -25px; } .main-slider-dot-8 { position: absolute; top: 52%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 84px; left: auto; align-items: flex-end; justify-content: center; flex-direction: column; width: inherit !important; left: auto !important; z-index: 99; } [dir=rtl] .main-slider-dot-8 { right: auto !important; left: 84px !important; } .main-slider-dot-8 .swiper-pagination-bullet { margin: 17px 0 !important; display: inline-block; opacity: 1; height: 0; width: 1px; background-color: var(--tp-common-white); border-radius: 0; position: relative; } .main-slider-dot-8 .swiper-pagination-bullet button { position: absolute; top: -38px; left: -9px; font-family: var(--tp-ff-space); font-weight: 700; font-size: 15px; line-height: 19px; color: var(--tp-common-white); margin: 7px 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); transition: all 0.2s ease; } [dir=rtl] .main-slider-dot-8 .swiper-pagination-bullet button { left: auto; right: -9px; } .main-slider-dot-8 .swiper-pagination-bullet.swiper-pagination-bullet-active { height: 100px; margin: 23px 0 !important; } .main-slider-dot-8 .swiper-pagination-bullet.swiper-pagination-bullet-active button { left: -13px; -webkit-transform: rotate(90deg) scale(1.4) translateY(-4px); -moz-transform: rotate(90deg) scale(1.4) translateY(-4px); -ms-transform: rotate(90deg) scale(1.4) translateY(-4px); -o-transform: rotate(90deg) scale(1.4) translateY(-4px); transform: rotate(90deg) scale(1.4) translateY(-4px); } [dir=rtl] .main-slider-dot-8 .swiper-pagination-bullet.swiper-pagination-bullet-active button { left: auto; right: -13px; -webkit-transform: rotate(90deg) scale(1.4) translateY(4px); -moz-transform: rotate(90deg) scale(1.4) translateY(4px); -ms-transform: rotate(90deg) scale(1.4) translateY(4px); -o-transform: rotate(90deg) scale(1.4) translateY(4px); transform: rotate(90deg) scale(1.4) translateY(4px); } .slider-pagination-11 { position: absolute; top: 50%; right: 60px !important; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 9; } [dir=rtl] .slider-pagination-11 { right: auto !important; left: 60px !important; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .slider-pagination-11 { right: 30px !important; } [dir=rtl] .slider-pagination-11 { right: auto !important; left: 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) { .slider-pagination-11 { right: 20px !important; } [dir=rtl] .slider-pagination-11 { right: auto !important; left: 20px; } } @media (max-width: 575px) { .slider-pagination-11 { right: 15px !important; } [dir=rtl] .slider-pagination-11 { right: auto !important; left: 15px; } } .slider-pagination-11 .swiper-pagination-bullet { margin: 28px 0 !important; width: 5px; height: 5px; background-color: rgba(3, 4, 28, 0.6); } .slider-pagination-11 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #03041c; } .slider-pagination-11 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { left: 49%; top: 50%; border-color: var(--tp-common-black); width: calc(100% + 20px); height: calc(100% + 20px); } .slider-pagination-11-white .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.6); } .slider-pagination-11-white .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: white; } .slider-pagination-11-white .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-common-white); } div.slider-pagination-12 { position: absolute; bottom: 43px; right: 50px; z-index: 9; width: auto; left: auto; } [dir=rtl] div.slider-pagination-12 { right: auto; left: 50px; } @media (max-width: 575px) { div.slider-pagination-12 { right: 15px; } [dir=rtl] div.slider-pagination-12 { right: auto; left: 15px; } } .slider-portfolio-btn { font-size: 13px; color: var(--tp-common-black); text-transform: uppercase; font-weight: 500; font-family: var(--tp-ff-inter); } .slider-portfolio-btn i, .slider-portfolio-btn svg { margin-right: 7px; } [dir=rtl] .slider-portfolio-btn i, [dir=rtl] .slider-portfolio-btn svg { margin-right: 0; margin-left: 7px; } .slider-portfolio-btn:hover { color: var(--tp-theme-2); } @-webkit-keyframes sliderThumb { 0% { -webkit-transform: rotate(-180deg) scale(0.9); -moz-transform: rotate(-180deg) scale(0.9); -ms-transform: rotate(-180deg) scale(0.9); -o-transform: rotate(-180deg) scale(0.9); transform: rotate(-180deg) scale(0.9); } 100% { -webkit-transform: rotate(-180deg) scale(1); -moz-transform: rotate(-180deg) scale(1); -ms-transform: rotate(-180deg) scale(1); -o-transform: rotate(-180deg) scale(1); transform: rotate(-180deg) scale(1); } } @-moz-keyframes sliderThumb { 0% { -webkit-transform: rotate(-180deg) scale(0.9); -moz-transform: rotate(-180deg) scale(0.9); -ms-transform: rotate(-180deg) scale(0.9); -o-transform: rotate(-180deg) scale(0.9); transform: rotate(-180deg) scale(0.9); } 100% { -webkit-transform: rotate(-180deg) scale(1); -moz-transform: rotate(-180deg) scale(1); -ms-transform: rotate(-180deg) scale(1); -o-transform: rotate(-180deg) scale(1); transform: rotate(-180deg) scale(1); } } @-ms-keyframes sliderThumb { 0% { -webkit-transform: rotate(-180deg) scale(0.9); -moz-transform: rotate(-180deg) scale(0.9); -ms-transform: rotate(-180deg) scale(0.9); -o-transform: rotate(-180deg) scale(0.9); transform: rotate(-180deg) scale(0.9); } 100% { -webkit-transform: rotate(-180deg) scale(1); -moz-transform: rotate(-180deg) scale(1); -ms-transform: rotate(-180deg) scale(1); -o-transform: rotate(-180deg) scale(1); transform: rotate(-180deg) scale(1); } } @keyframes sliderThumb { 0% { -webkit-transform: rotate(-180deg) scale(0.9); -moz-transform: rotate(-180deg) scale(0.9); -ms-transform: rotate(-180deg) scale(0.9); -o-transform: rotate(-180deg) scale(0.9); transform: rotate(-180deg) scale(0.9); } 100% { -webkit-transform: rotate(-180deg) scale(1); -moz-transform: rotate(-180deg) scale(1); -ms-transform: rotate(-180deg) scale(1); -o-transform: rotate(-180deg) scale(1); transform: rotate(-180deg) scale(1); } } @-webkit-keyframes borderanimate { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 3px; } 40% { opacity: 0.5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-width: 1px; } } @-moz-keyframes borderanimate { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 3px; } 40% { opacity: 0.5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-width: 1px; } } @-ms-keyframes borderanimate { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 3px; } 40% { opacity: 0.5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-width: 1px; } } @keyframes borderanimate { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; border-width: 3px; } 40% { opacity: 0.5; border-width: 2px; } 65% { border-width: 1px; } 100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; border-width: 1px; } } @keyframes slideOver { 0% { transform: translateX(0); } 25% { transform: translateX(100%); } 50% { transform: translateX(100%); } 75% { transform: translateX(0); } } .tp-disable-gradient::after { display: none; } /*----------------------------------------*/ /* 07. ABOUT CSS START /*----------------------------------------*/ @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__section-wrapper-6 .section__title-wrapper-6 { 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) { .about__section-wrapper-6 .section__title-wrapper-6 p { margin-bottom: 40px; } } [dir=rtl] .about__wrapper { padding-right: 0; padding-left: 95px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__wrapper { padding-right: 135px; } [dir=rtl] .about__wrapper { padding-right: 0; padding-left: 135px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper { padding-right: 0; } [dir=rtl] .about__wrapper { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper { margin-top: 50px; padding-right: 0; } [dir=rtl] .about__wrapper { padding-left: 0; } } .about__wrapper > p { font-size: 16px; line-height: 1.5; margin-bottom: 23px; letter-spacing: -0.02em; } [dir=rtl] .about__wrapper-3 { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__wrapper-3 { padding-left: 65px; } [dir=rtl] .about__wrapper-3 { padding-left: 0; padding-right: 65px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-3 { padding-left: 0; } [dir=rtl] .about__wrapper-3 { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-3 { padding-left: 0; margin-top: 50px; } [dir=rtl] .about__wrapper-3 { padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-4 { padding-right: 0; } [dir=rtl] .about__wrapper-4 { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-4 { padding-right: 0; margin-top: 60px; } [dir=rtl] .about__wrapper-4 { padding-left: 0; } } .about__wrapper-4 > p { font-size: 16px; line-height: 24px; letter-spacing: -0.02em; padding-right: 25px; margin-bottom: 23px; } [dir=rtl] .about__wrapper-4 > p { padding-right: 0; padding-left: 25px; } [dir=rtl] .about__wrapper-5 { padding-right: 0; padding-left: 90px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-5 { padding-right: 0; } [dir=rtl] .about__wrapper-5 { padding-left: 0; } } .about__wrapper-5 > p { font-size: 18px; line-height: 28px; color: var(--tp-text-1); margin-bottom: 50px; } [dir=rtl] .about__wrapper-8 { padding-left: 0; padding-right: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-8 { padding-left: 0; } [dir=rtl] .about__wrapper-8 { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-8 { padding-left: 0; margin-top: 50px; } [dir=rtl] .about__wrapper-8 { padding-right: 0; } } .about__wrapper-8 > p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.7); margin-bottom: 65px; } .about__wrapper-8 .about-wrapper-8-paragraph { font-family: var(--tp-ff-space); font-weight: 500; font-size: 22px; line-height: 1.45; letter-spacing: -0.04em; color: #FFFFFF; margin-bottom: 27px; } .about__wrapper-9 { padding-top: 115px; padding-bottom: 130px; position: relative; z-index: 1; } .about__wrapper-9 .about-subtitle { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 600; font-size: 14px; text-transform: uppercase; color: #FFFFFF; position: relative; padding-left: 13px; margin-bottom: 0; } [dir=rtl] .about__wrapper-9 .about-subtitle { padding-left: 0; padding-right: 13px; } .about__wrapper-9 .about-subtitle::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 20px; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); } [dir=rtl] .about__wrapper-9 .about-subtitle::after { left: auto; right: 0; } .about__wrapper-9 .about-title { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; color: #7C7C85; margin-bottom: 25px; } .about__wrapper-9 .about-title span { color: var(--tp-common-white); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-9 .about-title { font-size: 39px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .about__wrapper-9 .about-title { font-size: 32px; } } .about__wrapper-9 p { font-family: var(--tp-ff-syne); font-size: 18px; line-height: 1.5; color: #A3A3AA; padding-right: 180px; margin-bottom: 50px; } [dir=rtl] .about__wrapper-9 p { padding-right: 0; padding-left: 180px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-9 p { padding-right: 80px; } [dir=rtl] .about__wrapper-9 p { padding-right: 0; padding-left: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-9 p { padding-right: 0; } [dir=rtl] .about__wrapper-9 p { padding-left: 0; } } .about__wrapper-14 { margin-right: -50px; } [dir=rtl] .about__wrapper-14 { margin-right: 0; margin-left: -50px; padding-left: 0; padding-right: 75px; } @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__wrapper-14 { padding-left: 0; margin-right: 0; } [dir=rtl] .about__wrapper-14 { padding-right: 0; margin-left: 0; } } .about__wrapper-14 p { font-size: 16px; line-height: 1.62; margin-bottom: 42px; padding-right: 150px; } [dir=rtl] .about__wrapper-14 p { padding-right: 0; padding-left: 150px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-14 p { padding-right: 50px; } [dir=rtl] .about__wrapper-14 p { padding-right: 0; padding-left: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__wrapper-14 p { padding-right: 130px; } [dir=rtl] .about__wrapper-14 p { padding-right: 0; padding-left: 130px; } } @media (max-width: 575px) { .about__wrapper-14 p { padding-right: 0; } [dir=rtl] .about__wrapper-14 p { padding-left: 0; } } .about__wrapper-14 .about-btn .tp-btn { font-size: 15px; padding: 11px 34px 13px; } .about__wrapper-14 .about-btn .tp-btn:hover { background-color: var(--tp-common-black); } [dir=rtl] .about__wrapper-15 { padding-left: 0; padding-right: 45px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .about__wrapper-15 { padding-left: 0; } [dir=rtl] .about__wrapper-15 { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__wrapper-15 { padding-left: 0; margin-top: 50px; } [dir=rtl] .about__wrapper-15 { padding-right: 0; } } .about__thumb { position: relative; animation-duration: 1s; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: both; } .about__thumb-wrapper { position: relative; z-index: 1; } [dir=rtl] .about__thumb-wrapper { padding-right: 0; margin-left: 0; margin-right: 70px; padding-left: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .about__thumb-wrapper { margin-left: 0; } [dir=rtl] .about__thumb-wrapper { margin-right: 0; } } @media (max-width: 575px) { .about__thumb-wrapper { margin-left: 0; padding-right: 0; } [dir=rtl] .about__thumb-wrapper { margin-right: 0; padding-left: 0; } } .about__thumb-wrapper-7 { position: relative; padding-bottom: 70px; } @media (max-width: 575px) { .about__thumb-wrapper-7 { padding-right: 0; padding-bottom: 0; } [dir=rtl] .about__thumb-wrapper-7 { padding-left: 0; } } [dir=rtl] .about__thumb-wrapper-8 { padding-right: 0; padding-left: 100px; } @media (max-width: 575px) { .about__thumb-wrapper-8 { padding-right: 0; } [dir=rtl] .about__thumb-wrapper-8 { padding-left: 0; } } .about__thumb-text { position: absolute; top: 30%; left: 0; -webkit-transform: rotate(-90deg) translateY(-188px); -moz-transform: rotate(-90deg) translateY(-188px); -ms-transform: rotate(-90deg) translateY(-188px); -o-transform: rotate(-90deg) translateY(-188px); transform: rotate(-90deg) translateY(-188px); z-index: -1; } [dir=rtl] .about__thumb-text { left: auto; right: 0; -webkit-transform: rotate(-90deg) translateY(188px); -moz-transform: rotate(-90deg) translateY(188px); -ms-transform: rotate(-90deg) translateY(188px); -o-transform: rotate(-90deg) translateY(188px); transform: rotate(-90deg) translateY(188px); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .about__thumb-text { left: auto; right: 0; -webkit-transform: rotate(-90deg) translateY(110px) scale(-1, -1); -moz-transform: rotate(-90deg) translateY(110px) scale(-1, -1); -ms-transform: rotate(-90deg) translateY(110px) scale(-1, -1); -o-transform: rotate(-90deg) translateY(110px) scale(-1, -1); transform: rotate(-90deg) translateY(110px) scale(-1, -1); } [dir=rtl] .about__thumb-text { left: 0; right: auto; } } @media (max-width: 575px) { .about__thumb-text { left: auto; top: 0; -webkit-transform: rotate(0) translateY(-43px); -moz-transform: rotate(0) translateY(-43px); -ms-transform: rotate(0) translateY(-43px); -o-transform: rotate(0) translateY(-43px); transform: rotate(0) translateY(-43px); } [dir=rtl] .about__thumb-text { left: 0; right: auto; } } .about__thumb-text h3 { color: var(--tp-grey-3); font-size: 100px; font-weight: 700; text-transform: uppercase; font-family: var(--tp-ff-space); position: relative; overflow: hidden; } @media (max-width: 575px) { .about__thumb-text h3 { font-size: 60px; } } .about__thumb-text h3::after { position: absolute; content: attr(data-text); top: 0; left: 0; color: var(--tp-theme-1); overflow: hidden; word-wrap: normal; -webkit-transition: all 2s ease-out 0s; -moz-transition: all 2s ease-out 0s; -ms-transition: all 2s ease-out 0s; -o-transition: all 2s ease-out 0s; transition: all 2s ease-out 0s; -moz-animation: about-text 2s ease-in-out 1s forwards infinite alternate-reverse; -webkit-animation: about-text 2s ease-in-out 1s forwards infinite alternate-reverse; animation: about-text 2s ease-in-out 1s forwards infinite alternate-reverse; } [dir=rtl] .about__thumb-text h3::after { left: auto; right: 0; } .about__thumb-3 { position: relative; z-index: 1; } .about__thumb-3 .about-3-main-thumb { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); -webkit-animation-duration: 1s; animation-duration: 1s; animation-delay: 0.3s; -webkit-animation-name: aboutRotate3; animation-name: aboutRotate3; } .about__thumb-3::after { position: absolute; content: ""; left: 0; top: -10px; width: 350px; height: 655px; background: linear-gradient(0deg, #FDB348 -2.63%, #FF6B6B 91.65%); -webkit-transform: rotate(171deg); -moz-transform: rotate(171deg); -ms-transform: rotate(171deg); -o-transform: rotate(171deg); transform: rotate(171deg); z-index: -1; -webkit-animation-duration: 1s; animation-duration: 1s; animation-delay: 0.7s; -webkit-animation-name: aboutGradient; animation-name: aboutGradient; } [dir=rtl] .about__thumb-3::after { left: auto; right: 0; } @media (max-width: 575px) { .about__thumb-3::after { width: 260px; height: 399px; } } .about__thumb-4 { margin-left: 130px; margin-right: 100px; background-color: var(--tp-common-green-dark); position: relative; z-index: 1; } [dir=rtl] .about__thumb-4 { margin-left: 100px; margin-right: 130px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__thumb-4 { margin-left: 0; margin-right: 30px; } [dir=rtl] .about__thumb-4 { margin-right: 0; margin-left: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__thumb-4 { margin-left: 30px; margin-right: 30px; } } @media (max-width: 575px) { .about__thumb-4 { margin-left: 0; margin-right: 0; } } div.about__thumb-4 .about-thumb-main { margin-left: -50px; margin-top: -100px; max-width: inherit; } [dir=rtl] div.about__thumb-4 .about-thumb-main { margin-right: -50px; margin-left: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { div.about__thumb-4 .about-thumb-main { margin-left: -75px; } [dir=rtl] div.about__thumb-4 .about-thumb-main { margin-left: 0; margin-right: -75px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { div.about__thumb-4 .about-thumb-main { margin-left: -20px; } [dir=rtl] div.about__thumb-4 .about-thumb-main { margin-left: 0; margin-right: -20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.about__thumb-4 .about-thumb-main { margin-left: 0; } [dir=rtl] div.about__thumb-4 .about-thumb-main { margin-right: 0; } } @media (max-width: 575px) { div.about__thumb-4 .about-thumb-main { margin-left: 0; max-width: 100%; } [dir=rtl] div.about__thumb-4 .about-thumb-main { margin-right: 0; } } .about__thumb-5 { 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) { .about__thumb-5 { margin-top: 50px; } } .about__thumb-5::after { position: absolute; content: ""; left: -11%; top: -15%; width: 350px; height: 350px; border-radius: 50%; background-color: #F8ECFF; z-index: -1; } [dir=rtl] .about__thumb-5::after { left: auto; right: -11%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__thumb-5::after { top: 0%; } } @media (max-width: 575px) { .about__thumb-5::after { top: -20%; width: 200px; height: 200px; } } .about__thumb-5::before { position: absolute; content: ""; right: -26%; bottom: 24%; width: 180px; height: 180px; border-radius: 50%; background-color: #EFF8ED; z-index: -1; } [dir=rtl] .about__thumb-5::before { right: auto; left: -26%; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__thumb-5::before { right: 0; bottom: -17%; } [dir=rtl] .about__thumb-5::before { right: auto; left: 0; } } .about__thumb-5 .about-main-5s { position: absolute; top: 20px; left: 20px; border-radius: 14px; width: 641px; height: 450px; } [dir=rtl] .about__thumb-5 .about-main-5s { left: auto; right: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__thumb-5 .about-main-5s { top: 17px; left: 16px; width: 515px; height: 357px; } [dir=rtl] .about__thumb-5 .about-main-5s { left: auto; right: 16px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__thumb-5 .about-main-5s { top: 14px; left: 15px; width: 430px; height: 300px; border-radius: 7px; } [dir=rtl] .about__thumb-5 .about-main-5s { left: auto; right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__thumb-5 .about-main-5s { top: 20px; left: 20px; width: 655px; height: 458px; } [dir=rtl] .about__thumb-5 .about-main-5s { left: auto; right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__thumb-5 .about-main-5s { top: 16px; left: 17px; border-radius: 8px; width: 483px; height: 339px; } [dir=rtl] .about__thumb-5 .about-main-5s { left: auto; right: 17px; } } @media (max-width: 575px) { .about__thumb-5 .about-main-5s { top: 8px; left: 9px; border-radius: 4px; width: 95%; height: 89%; object-fit: cover; } [dir=rtl] .about__thumb-5 .about-main-5s { left: auto; right: 9px; } } div.about__thumb-5 .about-main-5 { position: absolute; top: 18px; left: 19px; border-radius: 10px; height: 380px; max-width: 539px; } [dir=rtl] div.about__thumb-5 .about-main-5 { left: auto; right: 19px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { div.about__thumb-5 .about-main-5 { top: 17px; left: 16px; width: 515px; height: 357px; } [dir=rtl] div.about__thumb-5 .about-main-5 { left: auto; right: 16px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { div.about__thumb-5 .about-main-5 { top: 14px; left: 15px; width: 430px; height: 300px; border-radius: 7px; } [dir=rtl] div.about__thumb-5 .about-main-5 { left: auto; right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { div.about__thumb-5 .about-main-5 { top: 20px; left: 20px; width: 100%; height: 458px; max-width: 94%; object-fit: cover; } [dir=rtl] div.about__thumb-5 .about-main-5 { left: auto; right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.about__thumb-5 .about-main-5 { top: 16px; left: 17px; border-radius: 8px; width: 483px; height: 339px; } [dir=rtl] div.about__thumb-5 .about-main-5 { left: auto; right: 17px; } } @media (max-width: 575px) { div.about__thumb-5 .about-main-5 { top: 8px; left: 9px; border-radius: 4px; width: 95%; height: 89%; object-fit: cover; } [dir=rtl] div.about__thumb-5 .about-main-5 { left: auto; right: 9px; } } .about__thumb-5 .about-play-btn { position: absolute; top: 48%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); display: inline-block; width: 80px; height: 80px; line-height: 84px; text-align: center; color: var(--tp-common-white); box-shadow: 0px 4px 10px rgba(91, 29, 8, 0.36); } [dir=rtl] .about__thumb-5 .about-play-btn { left: auto; right: 35%; } @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__thumb-5 .about-play-btn { left: 50%; } [dir=rtl] .about__thumb-5 .about-play-btn { left: auto; right: 35%; } } .about__thumb-5 .about-play-btn svg { -webkit-transform: translate(2px, -3px); -moz-transform: translate(2px, -3px); -ms-transform: translate(2px, -3px); -o-transform: translate(2px, -3px); transform: translate(2px, -3px); } [dir=rtl] .about__thumb-5 .about-play-btn svg { -webkit-transform: translate(-2px, -3px); -moz-transform: translate(-2px, -3px); -ms-transform: translate(-2px, -3px); -o-transform: translate(-2px, -3px); transform: translate(-2px, -3px); } .about__thumb-5 .about-play-btn:hover .video-play-bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .about__thumb-5 .video-play-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(45deg, #F96033 15%, #FFAD91 85.5%); background-image: -moz-linear-gradient(45deg, #F96033 15%, #FFAD91 85.5%); background-image: -ms-linear-gradient(45deg, #F96033 15%, #FFAD91 85.5%); background-image: -o-linear-gradient(45deg, #F96033 15%, #FFAD91 85.5%); background-image: linear-gradient(45deg, #F96033 15%, #FFAD91 85.5%); border-radius: 50%; } [dir=rtl] .about__thumb-5 .video-play-bg { left: auto; right: 0; } .about__thumb-mockup { position: relative; } @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__thumb-mockup > img { width: 100%; } } .about__thumb-shape-1 { position: absolute; top: 0; right: 0; z-index: -1; width: auto; height: 100%; } [dir=rtl] .about__thumb-shape-1 { right: auto; left: 0; } .about__thumb-shape-2 { position: absolute; top: 0%; right: 7%; z-index: 1; width: 120px; height: 120px; border-radius: 50%; box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); } [dir=rtl] .about__thumb-shape-2 { right: auto; left: 7%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__thumb-shape-2 { right: 0; } [dir=rtl] .about__thumb-shape-2 { right: auto; left: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__thumb-shape-2 { right: -2%; } [dir=rtl] .about__thumb-shape-2 { right: auto; left: -2%; } } @media (max-width: 575px) { .about__thumb-shape-2 { top: 74%; right: 8px; } [dir=rtl] .about__thumb-shape-2 { right: auto; left: 8px; } } .about__thumb-shape-logo { -webkit-animation: rotate-infinite 15s linear infinite; animation: rotate-infinite 15s linear infinite; } .about__thumb-shape-logo-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } [dir=rtl] .about__thumb-shape-logo-icon { left: auto; right: 50%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); } .about__thumb-7 { margin-left: -70px; } [dir=rtl] .about__thumb-7 { margin-left: 0; margin-right: -70px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__thumb-7 { margin-left: 0; } [dir=rtl] .about__thumb-7 { margin-right: 0; } } div.about__thumb-7 img { border-radius: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.about__thumb-7 img { width: 100%; } } .about__thumb-8-right { position: absolute; z-index: 1; bottom: 0; right: 20px; } [dir=rtl] .about__thumb-8-right { right: auto; left: 20px; } @media (max-width: 575px) { .about__thumb-8-right { right: 0; } [dir=rtl] .about__thumb-8-right { right: auto; left: 0; } } .about__thumb-8-right-content { position: absolute; bottom: 38px; left: 58px; } [dir=rtl] .about__thumb-8-right-content { left: auto; right: 58px; } .about__thumb-8-right-content p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 20px; line-height: 24px; text-transform: uppercase; color: #FFFFFF; } .about__thumb-8-right-year { position: absolute; top: 48px; right: 52px; } [dir=rtl] .about__thumb-8-right-year { right: auto; left: 52px; } .about__thumb-8-right-year p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 18px; line-height: 1.22; text-align: right; text-transform: uppercase; color: #FFFFFF; } [dir=rtl] .about__thumb-8-right-year p { text-align: left; } .about__thumb-14 .about-img-2 { float: right; position: relative; z-index: 1; margin-top: -200px; } [dir=rtl] .about__thumb-14 .about-img-2 { float: left; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__thumb-14 .about-img-2 { margin-right: 25px; } [dir=rtl] .about__thumb-14 .about-img-2 { margin-right: 0; margin-left: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__thumb-14 .about-img-2 { margin-right: 20px; } [dir=rtl] .about__thumb-14 .about-img-2 { margin-right: 0; margin-left: 20px; } } @media (max-width: 575px) { .about__thumb-14 .about-img-2 { margin-top: -90px; width: 150px; } } .about__thumb-15 { margin-left: 75px; margin-right: 25px; } [dir=rtl] .about__thumb-15 { margin-left: 25px; margin-right: 75px; } @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__thumb-15 { margin-left: 30px; } [dir=rtl] .about__thumb-15 { margin-left: 30px; } } .about__thumb-15-shape { position: absolute; width: 100%; height: 100%; left: -30px; top: -30px; background-color: var(--tp-theme-1); overflow: hidden; z-index: -1; } [dir=rtl] .about__thumb-15-shape { left: auto; right: -30px; } .about__thumb-15-shape img { opacity: 0.3; position: absolute; left: -55%; top: -40%; width: auto; } [dir=rtl] .about__thumb-15-shape img { left: auto; right: -55%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__thumb-15-shape img { left: -29%; top: -15%; } [dir=rtl] .about__thumb-15-shape img { left: auto; right: -29%; } } .about__thumb-15-shape-2 { width: auto !important; position: absolute; bottom: -15%; left: 6%; z-index: -1; } [dir=rtl] .about__thumb-15-shape-2 { left: auto; right: 6%; } @media (max-width: 575px) { .about__thumb-15-shape-2 { width: 70% !important; } } .about__thumb-bg { position: relative; font-size: 150px; letter-spacing: 0.02em; font-weight: 700; line-height: 40px; color: var(--tp-common-white); font-family: var(--tp-ff-space); padding: 290px 86px 0px 17px; text-align: center; color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 350px; height: 490px; } [dir=rtl] .about__thumb-bg { padding-left: 86px; padding-right: 17px; } @media (max-width: 575px) { .about__thumb-bg { font-size: 80px; padding: 135px 86px 0px 47px; width: 250px; height: 300px; } [dir=rtl] .about__thumb-bg { padding-left: 86px; padding-right: 47px; } } .about__thumb-bg::after, .about__thumb-bg::before { position: absolute; content: ""; } .about__thumb-bg::before { z-index: -2; top: 0; right: 0; bottom: 0; left: 0; background-image: inherit; } .about__thumb-bg::after { position: absolute; content: ""; z-index: -1; left: 20px; top: 20px; right: 20px; bottom: 20px; background-color: rgba(18, 23, 29, 0.95); backdrop-filter: blur(10px); } [dir=rtl] .about__author-inner { margin-left: 10px; } @media (max-width: 575px) { .about__author-inner { margin-bottom: 20px; } } [dir=rtl] .about__author-thumb { margin-right: 0; margin-left: 10px; } .about__author-thumb img { width: 40px; height: 40px; border-radius: 50%; } .about__author-title { font-size: 16px; color: var(--tp-text-1); font-weight: 400; font-family: var(--tp-ff-inter); margin-bottom: 0; margin-right: 10px; } [dir=rtl] .about__author-title { margin-right: 0; margin-left: 10px; } .about__author-title span { font-weight: 700; color: var(--tp-common-black); } .about__author-title-2 { font-size: 20px; font-weight: 600; color: var(--tp-common-black); font-family: var(--tp-ff-inter); } .about__author-text { padding: 0 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__author-text { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__author-text { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__author-text { padding: 0; } } .about__author-text p { font-size: 22px; font-family: var(--tp-ff-oswald); color: var(--tp-common-black-4); line-height: 1.55; margin-bottom: 37px; letter-spacing: 0.01em; } .about__experience { position: absolute; right: 20px; bottom: 30px; padding: 15px 31px 8px; background-color: var(--tp-common-white); box-shadow: 0px 30px 50px rgba(3, 4, 28, 0.1); z-index: 99; } [dir=rtl] .about__experience { right: auto; left: 20px; text-align: left; } @media (max-width: 575px) { .about__experience { right: 0; bottom: 0; } [dir=rtl] .about__experience { right: auto; left: 0; } } .about__experience h4 { font-size: 80px; font-weight: 700; font-family: var(--tp-ff-space); background: linear-gradient(78.5deg, #5A5BFF 23.32%, #F43D55 83.37%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; line-height: 1; margin-bottom: 0; } .about__experience p { font-size: 20px; font-weight: 700; color: var(--tp-common-black-solid); font-family: var(--tp-ff-space); } .about__experience-4 { position: absolute; bottom: -10px; left: 0; z-index: 1; padding: 22px 45px 12px 38px; background-color: var(--tp-theme-4); background-color: rgba(171, 108, 86, 0.85); box-shadow: 0px 20px 30px rgba(50, 15, 3, 0.2); backdrop-filter: blur(20px); } [dir=rtl] .about__experience-4 { left: auto; right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__experience-4 { left: -15px; } [dir=rtl] .about__experience-4 { left: auto; right: -15px; } } .about__experience-icon-4 { margin-top: 8px; } [dir=rtl] .about__experience-icon-4 { margin-right: 0; margin-left: 15px; } .about__experience-icon-4 i { font-size: 40px; color: var(--tp-common-white); } .about__experience-content-4 h4 { font-size: 60px; font-family: var(--tp-ff-space); color: var(--tp-common-white); margin-bottom: 0; line-height: 1; font-weight: 300; } .about__experience-content-4 h4 span { font-weight: 700; } .about__experience-content-4 p { font-size: 14px; line-height: 1.4; color: var(--tp-common-white); } .about__counter-item { background-color: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(22, 34, 19, 0.1); padding: 33px 0 35px; } [dir=rtl] .about__counter-text { margin-right: 0; margin-left: 15px; } .about__counter-text h3 { font-size: 50px; font-weight: 300; text-transform: uppercase; font-family: var(--tp-ff-oswald); margin-bottom: 0; color: var(--tp-theme-2); } .about__counter-text h3 span { font-weight: 500; } .about__counter-content h3 { font-size: 16px; font-weight: 600; font-family: var(--tp-ff-inter); margin-bottom: 0; } .about__counter-content p { font-size: 13px; margin-bottom: 0; } .about__tab-inner { position: relative; } .about__tab-nav { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .about__tab-nav .nav-item { display: inline-block; } .about__tab-nav .nav-item:not(:last-child) { margin-right: 24px; } [dir=rtl] .about__tab-nav .nav-item:not(:last-child) { margin-right: 0; margin-left: 24px; } .about__tab-nav .nav-link { padding: 0 6px; padding-bottom: 4px; margin: 0; border: 0; font-size: 22px; font-weight: 500; font-family: var(--tp-ff-space); color: var(--tp-common-white); position: relative; } @media (max-width: 575px) { .about__tab-nav .nav-link { margin-bottom: 12px; } } .about__tab-nav .nav-link:not(:last-child) { margin-right: 30px; } [dir=rtl] .about__tab-nav .nav-link:not(:last-child) { margin-right: 0; margin-left: 30px; } .about__tab-nav .nav-link:hover, .about__tab-nav .nav-link.active { color: var(--tp-theme-3); } .about__tab-nav .nav-link:hover::after, .about__tab-nav .nav-link.active::after { width: 100%; left: 0; right: auto; } [dir=rtl] .about__tab-nav .nav-link:hover::after, [dir=rtl] .about__tab-nav .nav-link.active::after { left: auto; right: 0; } @media (max-width: 575px) { .about__tab-nav .nav-link::after { position: absolute; content: ""; left: auto; right: 0; bottom: -1px; width: 0%; height: 2px; background-color: var(--tp-theme-3); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } [dir=rtl] .about__tab-nav .nav-link::after { left: 0; right: auto; } } .about__tab-nav .tp-tab-menu { position: relative; } .about__tab-nav .tp-tab-line { position: absolute; content: ""; left: 0; bottom: -1px; width: 80%; height: 2px; background-color: var(--tp-theme-3); } [dir=rtl] .about__tab-nav .tp-tab-line { left: auto; right: 0; display: none !important; } .about__self-des p { font-size: 18px; color: var(--tp-text-7); line-height: 1.7; margin-bottom: 45px; } .about__self-des p span { color: var(--tp-common-white); } .about__education-des { margin-bottom: 25px; } .about__education-des p { font-size: 18px; color: var(--tp-text-7); line-height: 1.95; } .about__education-des p a { color: var(--tp-common-white); position: relative; } .about__education-des p a::after { position: absolute; content: ""; left: auto; right: 0; bottom: 0; width: 0%; height: 2px; background-color: var(--tp-common-white); opacity: 0.4; } [dir=rtl] .about__education-des p a::after { right: auto; left: 0; } .about__education-des p a:hover::after { width: 100%; left: 0; right: auto; } [dir=rtl] .about__education-des p a:hover::after { left: auto; right: 0; } .about__education-title { font-size: 16px; font-weight: 600; color: var(--tp-text-7); font-family: var(--tp-ff-inter); margin-bottom: 35px; } .about__education-list { margin-bottom: 50px; } .about__education-list ul li { list-style: none; color: var(--tp-text-7); margin-bottom: 10px; font-size: 15px; font-family: var(--tp-ff-inter); position: relative; padding-left: 14px; } [dir=rtl] .about__education-list ul li { padding-left: 0; padding-right: 14px; } .about__education-list ul li::after { position: absolute; content: ""; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background-color: #44C987; } [dir=rtl] .about__education-list ul li::after { left: auto; right: 0; } .about__skill-wrapper { margin-top: 8px; } .about__skill-title { font-size: 13px; font-weight: 700; font-family: var(--tp-ff-space); color: var(--tp-text-7); margin-bottom: 35px; } .about__skill-item { margin-bottom: 15px; } .about__skill-item h4 { font-size: 18px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); margin-bottom: 0; } .about__skill-item p { font-size: 14px; color: var(--tp-text-7); margin-bottom: 0; } [dir=rtl] .about__info-item { margin-right: 0; margin-left: 40px; } .about__info-item:last-child { margin-right: 0; } [dir=rtl] .about__info-item:last-child { margin-left: 0; } [dir=rtl] .about__info-icon { margin-right: 0; margin-left: 15px; } .about__info-icon span { display: inline-block; width: 44px; height: 44px; line-height: 40px; text-align: center; color: var(--tp-common-white); border: 1.5px solid rgba(255, 255, 255, 0.2); border-radius: 50%; } .about__info-content h4 { font-size: 18px; font-weight: 700; color: var(--tp-common-white); margin-bottom: 0; font-family: var(--tp-ff-space); } .about__info-content p { font-size: 16px; color: var(--tp-common-white); opacity: 0.9; margin-bottom: 0; } .about__info-content p a:hover { color: var(--tp-theme-1); } @media (max-width: 575px) { .about__call { margin-top: 30px; } } .about__call-icon span { font-size: 26px; color: #03A191; margin-right: 9px; display: inline-block; margin-top: 5px; } [dir=rtl] .about__call-icon-8 { margin-right: 0; margin-left: 20px; } .about__call-icon-8 span { display: inline-block; font-size: 18px; color: var(--tp-common-white); width: 54px; height: 54px; line-height: 52px; text-align: center; border: 2px solid rgba(255, 255, 255, 0.1); border-radius: 50%; } .about__call-icon-8 span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .about__call-content { margin-right: 10px; } .about__call-content h4 { font-size: 14px; font-weight: 400; font-family: var(--tp-ff-inter); margin-bottom: 0; color: var(--tp-text-1); } .about__call-content p { font-size: 16px; font-weight: 700; color: var(--tp-common-black); font-family: var(--tp-ff-space); margin-bottom: 0; } .about__call-content-8 h4 { font-weight: 500; font-size: 12px; line-height: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tp-common-white); opacity: 0.7; margin-bottom: 2px; } .about__call-content-8 p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; text-transform: uppercase; color: var(--tp-theme-8); margin-bottom: 0; } .about__shape-1 { position: absolute; right: 11%; top: 24%; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } [dir=rtl] .about__shape-1 { left: auto; right: 11%; } .about__shape-2 { position: absolute; left: 3%; top: 41%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .about__shape-2 { left: auto; right: 3%; } .about__shape-3 { position: absolute; top: 21%; left: 4%; z-index: -1; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .about__shape-3 { left: auto; right: 4%; } .about__shape-4 { position: absolute; bottom: 9%; left: 6%; z-index: -1; -moz-animation: tpleftright 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpleftright 1s ease-in-out 1s forwards infinite alternate; animation: tpleftright 1s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .about__shape-4 { left: auto; right: 6%; } .about__shape-5 { position: absolute; top: 17%; right: 6%; z-index: -1; -moz-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .about__shape-5 { right: auto; left: 6%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__shape-5 { top: 22%; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .about__shape-5 { top: 24%; } } @media (max-width: 575px) { .about__shape-5 { top: 3%; } } .about__shape-6 { position: absolute; top: 52%; right: 14%; z-index: -1; -moz-animation: tprotate 5s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 5s ease-in-out 1s forwards infinite alternate; animation: tprotate 5s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .about__shape-6 { right: auto; left: 14%; } .about__shape-7 { position: absolute; top: -9%; right: 0; z-index: -1; } [dir=rtl] .about__shape-7 { right: auto; left: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__shape-7 { top: -6%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__shape-7 { top: 4%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__shape-7 { top: 3%; } } .about__shape-8 { position: absolute; z-index: -1; bottom: -20%; left: -22%; -moz-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .about__shape-8 { left: auto; right: -22%; } @media (max-width: 575px) { .about__shape-8 { bottom: -45%; left: -35%; } [dir=rtl] .about__shape-8 { left: auto; right: -35%; } } .about__shape-9 { position: absolute; z-index: -1; top: 7%; right: 1%; -moz-animation: tpupdown 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 3s ease-in-out 1s forwards infinite alternate; animation: tpupdown 3s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .about__shape-9 { right: auto; left: 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) { .about__features { margin-top: 40px; margin-bottom: 125px; } } .about__features-item { position: relative; margin-bottom: 60px; padding-right: 25px; } [dir=rtl] .about__features-item { padding-right: 0; padding-left: 25px; } .about__features-item:last-child { margin-bottom: 0; } .about__features-item:last-child::after { display: none; } .about__features-item::after { position: absolute; content: ""; left: 26px; top: 66px; width: 1px; height: 82%; border: 1px dashed rgba(13, 18, 30, 0.2); } [dir=rtl] .about__features-item::after { left: auto; right: 26px; } .about__features-icon.yellow-color span { color: var(--tp-common-yellow-2); } .about__features-icon.purple-color span { color: var(--tp-common-purple-6); } .about__features-icon span { display: inline-block; font-size: 20px; width: 54px; line-height: 54px; height: 54px; text-align: center; background-color: var(--tp-common-white); border-radius: 50%; box-shadow: 0px 10px 30px rgba(13, 18, 30, 0.12); color: var(--tp-common-pink-4); margin-right: 30px; } [dir=rtl] .about__features-icon span { margin-right: 0; margin-left: 30px; } .about__features-icon span svg { -webkit-transform: translateY(-1px) translateX(3px); -moz-transform: translateY(-1px) translateX(3px); -ms-transform: translateY(-1px) translateX(3px); -o-transform: translateY(-1px) translateX(3px); transform: translateY(-1px) translateX(3px); } .about__features-icon span svg:not(.center-icon) { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .about__features-icon span svg { -webkit-transform: translateY(-2px) translateX(2px); -moz-transform: translateY(-2px) translateX(2px); -ms-transform: translateY(-2px) translateX(2px); -o-transform: translateY(-2px) translateX(2px); transform: translateY(-2px) translateX(2px); } .about__features-content { margin-top: 5px; } .about__features-content > p { font-size: 15px; line-height: 22px; color: var(--tp-text-18); font-family: var(--tp-ff-roboto); } .about__features-title { font-weight: 700; font-size: 18px; color: var(--tp-common-black-9); margin-bottom: 5px; font-family: var(--tp-ff-roboto); } .about__play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .about__play-btn { display: inline-block; width: 110px; height: 110px; line-height: 110px; text-align: center; color: var(--tp-common-white); font-size: 16px; background: linear-gradient; position: relative; box-shadow: 0px 4px 10px rgba(176, 8, 79, 0.4); } .about__play-btn img { -webkit-transform: translate(2px, 2px); -moz-transform: translate(2px, 2px); -ms-transform: translate(2px, 2px); -o-transform: translate(2px, 2px); transform: translate(2px, 2px); } .about__play-btn .video-play-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%; background-image: -webkit-linear-gradient(27.86deg, #FF0870 8.41%, #FFDC84 93.57%); background-image: -moz-linear-gradient(27.86deg, #FF0870 8.41%, #FFDC84 93.57%); background-image: -ms-linear-gradient(27.86deg, #FF0870 8.41%, #FFDC84 93.57%); background-image: -o-linear-gradient(27.86deg, #FF0870 8.41%, #FFDC84 93.57%); background-image: linear-gradient(27.86deg, #FF0870 8.41%, #FFDC84 93.57%); } @media (max-width: 575px) { .about__play-btn { width: 70px; height: 70px; line-height: 72px; } } .about__play-btn:hover .video-play-bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .about__video-wrapper { position: relative; } .about__video-thumb { position: relative; } .about__video-thumb > img { width: 100%; } .about__video-counter { position: absolute; top: 0; right: 100px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); padding: 40px 48px; background-color: var(--tp-common-blue-4); z-index: 1; } [dir=rtl] .about__video-counter { right: auto; left: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__video-counter { right: 50px; } [dir=rtl] .about__video-counter { right: auto; left: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__video-counter { position: static; } } .about__video-counter-item { position: relative; padding-right: 53px; margin-right: 38px; } [dir=rtl] .about__video-counter-item { padding-right: 0; margin-right: 0; padding-left: 53px; margin-left: 38px; } @media (max-width: 575px) { .about__video-counter-item { padding-right: 0; margin-right: 0; margin-bottom: 20px; padding-bottom: 20px; } [dir=rtl] .about__video-counter-item { padding-left: 0; margin-left: 0; } } .about__video-counter-item:last-child { margin-right: 0; padding-right: 0; margin-bottom: 0; padding-bottom: 0; } [dir=rtl] .about__video-counter-item:last-child { margin-left: 0; padding-left: 0; } .about__video-counter-item:last-child::after { display: none; } .about__video-counter-item::after { position: absolute; content: ""; right: 0; top: 50%; width: 1px; height: 70px; border: 1px solid rgba(255, 255, 255, 0.2); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .about__video-counter-item::after { right: auto; left: 0; } @media (max-width: 575px) { .about__video-counter-item::after { width: 100%; height: 1px; bottom: 0; top: auto; } } .about__video-counter-item h4 { font-weight: 900; font-size: 50px; letter-spacing: -0.03em; color: var(--tp-common-white); margin-bottom: 0; font-family: var(--tp-ff-roboto); } .about__video-counter-item p { font-weight: 500; font-size: 14px; line-height: 18px; color: var(--tp-common-white); margin-bottom: 0; margin-left: 7px; font-family: var(--tp-ff-roboto); } [dir=rtl] .about__video-counter-item p { margin-left: 0; margin-right: 7px; } .about__analysis { position: absolute; bottom: -6%; right: 70px; background-color: var(--tp-theme-7); padding: 52px 40px; padding-right: 50px; border-radius: 20px; } [dir=rtl] .about__analysis { right: auto; left: 70px; padding-left: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__analysis { right: 0; } [dir=rtl] .about__analysis { right: auto; left: 0; } } @media (max-width: 575px) { .about__analysis { position: static; margin-top: 50px; right: 0; } [dir=rtl] .about__analysis { right: auto; left: 0; } } .about__analysis-icon { margin-bottom: 37px; } .about__analysis-icon span { display: inline-block; margin-bottom: 10px; width: 40px; height: 40px; line-height: 40px; text-align: center; color: var(--tp-theme-7); background-color: var(--tp-common-white); border-radius: 12px; font-size: 16px; } .about__analysis-icon p { font-weight: 600; font-size: 20px; color: var(--tp-common-white); margin-bottom: 0; } .about__analysis-item { margin-bottom: 40px; } .about__analysis-item h4 { font-family: var(--tp-ff-inter); font-weight: 700; font-size: 44px; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 0; line-height: 1; } .about__analysis-item p { font-weight: 500; font-size: 15px; color: var(--tp-common-white); margin-bottom: 0; } .about__analysis-item-2 { margin-bottom: 20px; } .about__analysis-item-2 h4 { font-family: var(--tp-ff-inter); font-weight: 700; font-size: 28px; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 0; line-height: 1; } .about__analysis-item-2 p { font-weight: 500; font-size: 15px; color: var(--tp-common-white); margin-bottom: 0; } .about__analysis-discount span { display: inline-block; font-weight: 600; font-size: 15px; letter-spacing: -0.03em; color: var(--tp-common-black-11); background-color: #FFC774; border-radius: 6px; padding: 2px 15px; } .about__list { padding-right: 200px; margin-bottom: 27px; } [dir=rtl] .about__list { padding-right: 0; padding-left: 200px; } @media (max-width: 575px) { .about__list { padding-right: 0; } [dir=rtl] .about__list { padding-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__list { padding-right: 100px; } [dir=rtl] .about__list { padding-left: 100px; } } .about__list-counter { counter-reset: count; } .about__list-item { margin-bottom: 20px; } .about__list-icon { margin-right: 18px; } [dir=rtl] .about__list-icon { margin-right: 0; margin-left: 18px; } .about__list-icon span { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: #F0F0F0; border-radius: 50%; font-weight: 600; font-size: 18px; color: var(--tp-common-black-11); position: relative; } .about__list-icon span::after { position: absolute; counter-increment: count; content: counter(count); left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: var(--tp-common-black-11); } .about__list-content h4 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 22px; color: var(--tp-common-black-11); } .about__list-content p { font-size: 16px; line-height: 1.5; } .about__list-2 { overflow: hidden; padding-right: 46px; } [dir=rtl] .about__list-2 { padding-right: 0; padding-left: 46px; } @media (max-width: 575px) { .about__list-2 { padding-right: 0; } [dir=rtl] .about__list-2 { padding-left: 0; } } .about__list-2 ul li { position: relative; list-style: none; font-size: 16px; color: var(--tp-common-black); padding-left: 14px; float: left; width: 50%; margin-bottom: 14px; } [dir=rtl] .about__list-2 ul li { padding-left: 0; padding-right: 14px; float: right; } @media (max-width: 575px) { .about__list-2 ul li { float: none; width: 100%; } } .about__list-2 ul li::after { position: absolute; content: ""; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--tp-common-black); } [dir=rtl] .about__list-2 ul li::after { left: auto; right: 0; } .about__space-145 { padding-left: 145px; padding-right: 145px; } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .about__space-145 { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__space-145 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__space-145 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__space-145 { padding-left: 0; padding-right: 0; } } .about__heading-subtitle { font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; line-height: 1.11; color: var(--tp-common-white); display: inline-block; margin-bottom: 7px; } .about__heading-title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__heading-title { font-size: 65px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__heading-title { font-size: 50px; } } @media (max-width: 575px) { .about__heading-title { font-size: 40px; } } .about__heading-overlay { position: relative; } .about__heading-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(3, 4, 28, 0.56); } [dir=rtl] .about__heading-overlay::after { left: auto; right: 0; } .about__text-title { font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black); margin-bottom: 25px; } .about__text p { font-size: 16px; line-height: 1.62; margin-bottom: 15px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__gallery-slider { padding-left: 100px; padding-right: 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__gallery-slider { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__gallery-slider { padding-left: 0; padding-right: 0; } } .about__gallery-slider .slick-list { overflow: visible; margin: 0 -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) { .about__gallery-slider .slick-list { overflow: hidden; } } .about__gallery-slider .slick-slide > div { margin: 0 40px; } .about__gallery-arrow button { position: absolute; top: 50%; left: -9%; border-radius: 50%; background-color: var(--tp-common-white); width: 100px; height: 100px; line-height: 100px; display: inline-block; z-index: 9; font-size: 24px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .about__gallery-arrow button { left: auto; right: -9%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__gallery-arrow button { left: -3%; } [dir=rtl] .about__gallery-arrow button { left: auto; right: -3%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__gallery-arrow button { left: -5%; } [dir=rtl] .about__gallery-arrow button { left: auto; right: -5%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__gallery-arrow button { width: 60px; height: 60px; line-height: 60px; left: -4%; } [dir=rtl] .about__gallery-arrow button { left: auto; right: -4%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__gallery-arrow button { width: 60px; height: 60px; line-height: 60px; left: -4%; } [dir=rtl] .about__gallery-arrow button { left: auto; right: -4%; } } @media (max-width: 575px) { .about__gallery-arrow button { width: 60px; height: 60px; line-height: 60px; left: 0%; } [dir=rtl] .about__gallery-arrow button { left: auto; right: 0%; } } .about__gallery-arrow button span { display: inline-block; background: var(--tp-common-white); border: 1px solid var(--tp-text-1); height: 90px; width: 90px; line-height: 88px; text-align: center; border-radius: 50%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__gallery-arrow button span { width: 50px; height: 50px; line-height: 48px; } } .about__gallery-arrow button span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .about__gallery-arrow button:hover { color: var(--tp-common-white); } .about__gallery-arrow button:hover span { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .about__gallery-arrow button.about-button-next { left: auto; right: -9%; } [dir=rtl] .about__gallery-arrow button.about-button-next { left: -9%; right: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__gallery-arrow button.about-button-next { right: -3%; } [dir=rtl] .about__gallery-arrow button.about-button-next { right: auto; left: -3%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__gallery-arrow button.about-button-next { right: -5%; } [dir=rtl] .about__gallery-arrow button.about-button-next { right: auto; left: -5%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__gallery-arrow button.about-button-next { right: -4%; } [dir=rtl] .about__gallery-arrow button.about-button-next { right: auto; left: -4%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__gallery-arrow button.about-button-next { right: -4%; } [dir=rtl] .about__gallery-arrow button.about-button-next { right: auto; left: -4%; } } @media (max-width: 575px) { .about__gallery-arrow button.about-button-next { right: 0%; } [dir=rtl] .about__gallery-arrow button.about-button-next { right: auto; left: 0%; } } .about__me-title { font-weight: 700; font-size: 270px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .about__me-title { font-size: 255px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .about__me-title { font-size: 210px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__me-title { font-size: 155px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .about__me-title { font-size: 115px; } } @media (max-width: 575px) { .about__me-title { font-size: 65px; } } .about__me-spacing { padding-top: 420px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .about__me-spacing { padding-top: 350px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .about__me-spacing { padding-top: 320px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .about__me-spacing { padding-top: 220px; } } .about__me-translate { overflow: hidden; } .about__me-translate .about__me-title { -webkit-transform: translateY(41%) translateX(40px); -moz-transform: translateY(41%) translateX(40px); -ms-transform: translateY(41%) translateX(40px); -o-transform: translateY(41%) translateX(40px); transform: translateY(41%) translateX(40px); } [dir=rtl] .about__me-translate .about__me-title { -webkit-transform: translateY(41%) translateX(-40px); -moz-transform: translateY(41%) translateX(-40px); -ms-transform: translateY(41%) translateX(-40px); -o-transform: translateY(41%) translateX(-40px); transform: translateY(41%) translateX(-40px); } .about__me-info-subtitle { font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-black); position: relative; padding-left: 13px; } [dir=rtl] .about__me-info-subtitle { padding-left: 0; padding-right: 13px; } .about__me-info-subtitle::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 100%; background-color: var(--tp-theme-1); } [dir=rtl] .about__me-info-subtitle::after { left: auto; right: 0; } .about__me-info-title { font-size: 40px; line-height: 1.15; letter-spacing: -0.04em; margin-bottom: 15px; } .about__me-info-content p { font-size: 18px; line-height: 1.56; color: #525258; } .about__me-info-social a { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-text-1); position: relative; padding-right: 13px; margin-right: 10px; } [dir=rtl] .about__me-info-social a { padding-right: 0; margin-right: 0; padding-left: 13px; margin-left: 10px; } .about__me-info-social a i { margin-right: 5px; } [dir=rtl] .about__me-info-social a i { margin-right: 0; margin-left: 5px; } .about__me-info-social a:not(:last-child) { padding-right: 13px; margin-right: 8px; } [dir=rtl] .about__me-info-social a:not(:last-child) { padding-right: 0; margin-right: 0; padding-left: 13px; margin-left: 8px; } .about__me-info-social a:not(:last-child)::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 100%; background-color: #EAEAEF; } [dir=rtl] .about__me-info-social a:not(:last-child)::after { right: auto; left: 0; } .about__me-info-social a:hover { color: var(--tp-theme-1); } [dir=rtl] .about__me-info-btn { margin-right: 0; margin-left: 30px; } @media (max-width: 575px) { .about__me-info-btn { margin-bottom: 20px; } } .about__me-info-btn .tp-btn { padding: 14px 30px; } .about__me-info-btn .tp-btn:hover { background-color: var(--tp-common-black); } .about__spacing { padding-top: 225px; padding-bottom: 180px; } .about__btn-3-inner { margin-right: 16px; } [dir=rtl] .about__btn-3-inner { margin-right: 0; margin-left: 16px; } .about__btn-4 .tp-btn-brown { padding: 10px 26px 10px; border: 2px solid var(--tp-theme-4); } [dir=rtl] .about__btn-4 .tp-btn-brown { margin-right: 0; margin-left: 30px; } .about__btn-4 .tp-btn-brown:hover { border-color: #EAEAEF; background-color: transparent; color: var(--tp-common-black); } [dir=rtl] .about__btn-8 .tp-btn-border-8 { margin-right: 0; margin-left: 30px; } .about-author-link { display: inline-block; font-size: 12px; font-weight: 500; color: var(--tp-common-black); border: 2px solid var(--tp-border-4); border-radius: 20px; text-transform: uppercase; padding: 0 20px; font-weight: 500; } .about-play-btn-2 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; position: relative; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--tp-common-white); } .about-play-btn-2 span { display: inline-block; width: 60px; height: 60px; line-height: 60px; background-color: var(--tp-theme-8); color: var(--tp-common-white); border-radius: 50%; text-align: center; margin-right: 13px; position: relative; z-index: 1; } [dir=rtl] .about-play-btn-2 span { margin-right: 0; margin-left: 13px; } .about-play-btn-2 span::after { display: inline-block; position: relative; content: ""; left: 0; bottom: 100%; width: 100%; height: 100%; background-color: var(--tp-theme-8); border-radius: 50%; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; z-index: -1; } .about-play-btn-2 span img { -webkit-transform: translate(2px, 2px); -moz-transform: translate(2px, 2px); -ms-transform: translate(2px, 2px); -o-transform: translate(2px, 2px); transform: translate(2px, 2px); } [dir=rtl] .about-play-btn-2 span img { -webkit-transform: translate(2px, 2px); -moz-transform: translate(2px, 2px); -ms-transform: translate(2px, 2px); -o-transform: translate(2px, 2px); transform: translate(2px, 2px); } .about-play-btn-2 span svg { -webkit-transform: translate(2px, -2px); -moz-transform: translate(2px, -2px); -ms-transform: translate(2px, -2px); -o-transform: translate(2px, -2px); transform: translate(2px, -2px); } [dir=rtl] .about-play-btn-2 span svg { -webkit-transform: translate(2px, -2px); -moz-transform: translate(2px, -2px); -ms-transform: translate(2px, -2px); -o-transform: translate(2px, -2px); transform: translate(2px, -2px); } .about-play-btn-2:hover { color: var(--tp-common-white); } .about-play-btn-2:hover span::after { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08); } @-webkit-keyframes aboutGradient { 0% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(171deg); -moz-transform: rotate(171deg); -ms-transform: rotate(171deg); -o-transform: rotate(171deg); transform: rotate(171deg); } } @-moz-keyframes aboutGradient { 0% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(171deg); -moz-transform: rotate(171deg); -ms-transform: rotate(171deg); -o-transform: rotate(171deg); transform: rotate(171deg); } } @-ms-keyframes aboutGradient { 0% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(171deg); -moz-transform: rotate(171deg); -ms-transform: rotate(171deg); -o-transform: rotate(171deg); transform: rotate(171deg); } } @keyframes aboutGradient { 0% { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } 100% { -webkit-transform: rotate(171deg); -moz-transform: rotate(171deg); -ms-transform: rotate(171deg); -o-transform: rotate(171deg); transform: rotate(171deg); } } @-webkit-keyframes aboutRotate3 { 0% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -ms-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-moz-keyframes aboutRotate3 { 0% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -ms-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @-ms-keyframes aboutRotate3 { 0% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -ms-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes aboutRotate3 { 0% { -webkit-transform: rotate(12deg); -moz-transform: rotate(12deg); -ms-transform: rotate(12deg); -o-transform: rotate(12deg); transform: rotate(12deg); } 100% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } } /*----------------------------------------*/ /* 08. COUNTER CSS START /*----------------------------------------*/ .counter__border .row [class*=col-]:first-child .counter__item { padding-left: 120px; } [dir=rtl] .counter__border .row [class*=col-]:first-child .counter__item { padding-left: 0; padding-right: 120px; } .counter__border .row [class*=col-]:first-child .counter__item::after { right: -50px; } [dir=rtl] .counter__border .row [class*=col-]:first-child .counter__item::after { right: auto; left: -50px; } .counter__border .row [class*=col-]:last-child .counter__item { padding-right: 122px; } [dir=rtl] .counter__border .row [class*=col-]:last-child .counter__item { padding-left: 120px; padding-right: 0; } .counter__border .row [class*=col-]:last-child .counter__item::after { display: none; } .counter__border-2 .row [class*=col-]:last-child .counter__item-4-wrapper { border-bottom: 0; } .counter__border-2 .row [class*=col-]:last-child .counter__item-4-wrapper::after { display: none; } .counter__border-8 .row [class*=col-]:nth-child(2) .counter__item-8::after { right: 40px; } [dir=rtl] .counter__border-8 .row [class*=col-]:nth-child(2) .counter__item-8::after { right: auto; left: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter__border-8 .row [class*=col-]:nth-child(2) .counter__item-8::after { right: 10px; } [dir=rtl] .counter__border-8 .row [class*=col-]:nth-child(2) .counter__item-8::after { right: auto; left: 10px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter__border-8 .row [class*=col-]:nth-child(2) .counter__item-8::after { display: none; } } .counter__border-8 .row [class*=col-]:last-child .counter__item-8::after { display: none; } .counter__border-radius .row [class*=col-]:first-child .counter__item-5 { border-top-left-radius: 10px; border-bottom-left-radius: 10px; } [dir=rtl] .counter__border-radius .row [class*=col-]:first-child .counter__item-5 { border-top-left-radius: 0; border-bottom-left-radius: 0; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } .counter__border-radius .row [class*=col-]:last-child .counter__item-5 { border-top-right-radius: 10px; border-bottom-right-radius: 10px; } [dir=rtl] .counter__border-radius .row [class*=col-]:last-child .counter__item-5 { border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 10px; border-bottom-left-radius: 10px; } .counter__inner { position: relative; z-index: 1; padding: 40px 0; } .counter__inner-4 { padding: 52px 0 8px; position: relative; overflow: hidden; } .counter__inner-10 { background: var(--tp-common-orange-4); box-shadow: 0px 30px 50px rgba(129, 51, 10, 0.2); border-radius: 20px; padding: 58px 0 30px 0; position: relative; z-index: 1; overflow: hidden; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__inner-10 { margin-bottom: 40px; } } .counter__inner-10-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: soft-light; opacity: 0.5; z-index: -1; } .counter__inner-10 .row [class*=col-]:last-child .counter__item-10 { padding-right: 55px; } [dir=rtl] .counter__inner-10 .row [class*=col-]:last-child .counter__item-10 { padding-right: 0; padding-left: 55px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__inner-10 .row [class*=col-]:last-child .counter__item-10 { padding-right: 0; } [dir=rtl] .counter__inner-10 .row [class*=col-]:last-child .counter__item-10 { padding-left: 0; } } .counter__inner-10 .row [class*=col-]:last-child .counter__item-10::after { display: none; } .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10 { padding-right: 50px; } [dir=rtl] .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10 { padding-right: 0; padding-left: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10 { padding-right: 0; } [dir=rtl] .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10 { padding-left: 0; } } .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10::after { right: 6px; } [dir=rtl] .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10::after { right: auto; left: 6px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10::after { right: 21px; } [dir=rtl] .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10::after { right: auto; left: 21px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__inner-10 .row [class*=col-]:nth-child(2) .counter__item-10::after { display: none; } } .counter__item { text-align: center; position: relative; } .counter__item::after { position: absolute; content: ""; right: 21px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 100%; background-color: rgba(255, 255, 255, 0.2); } [dir=rtl] .counter__item::after { right: auto; left: 21px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__item::after { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__item { margin-bottom: 25px; padding-bottom: 25px; border-right: 0; border-bottom: 1px solid var(--tp-border-3); } [dir=rtl] .counter__item { border-left: 0; } } .counter__item-wrapper { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; justify-content: space-between; } .counter__item-4 { margin-bottom: 30px; position: relative; } .counter__item-4-wrapper { z-index: 1; position: relative; } .counter__item-4-wrapper::after { position: absolute; content: ""; right: 0; top: 30%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 75px; background-color: rgba(255, 255, 255, 0.2); } [dir=rtl] .counter__item-4-wrapper::after { right: auto; left: 0; } @media (max-width: 575px) { .counter__item-4 { margin-bottom: 25px; padding-bottom: 25px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } [dir=rtl] .counter__item-4 { border-left: 0; } } .counter__item-5 { position: relative; padding: 35px 40px 33px; overflow: hidden; z-index: 1; background-color: rgba(94, 183, 75, 0.1); } .counter__item-7 { box-shadow: 0px 1px 2px rgba(4, 41, 35, 0.08); border-radius: 40px; padding: 57px 0 33px; } .counter__item-8 { position: relative; } .counter__item-8::after { position: absolute; content: ""; right: 48px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 70px; width: 1px; background-color: rgba(255, 255, 255, 0.1); } [dir=rtl] .counter__item-8::after { right: auto; left: 48px; } .counter__item-10 { position: relative; } .counter__item-10::after { position: absolute; content: ""; right: 18px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 100px; width: 1px; background-color: rgba(255, 255, 255, 0.2); } [dir=rtl] .counter__item-10::after { right: auto; left: 18px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .counter__item-10::after { right: 7px; } [dir=rtl] .counter__item-10::after { right: auto; left: 7px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .counter__item-10::after { display: none; } } .counter__title { font-size: 50px; font-weight: 700; color: var(--tp-common-white); text-transform: uppercase; font-family: var(--tp-ff-space); margin-bottom: 0; } .counter__title-4 { font-family: var(--tp-ff-space); font-size: 50px; letter-spacing: -0.04em; color: var(--tp-common-white); line-height: 1; margin-bottom: 0; } .counter__title-5 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; margin-bottom: 0; } .counter__content p { font-size: 16px; font-weight: 700; color: var(--tp-text-2); text-transform: uppercase; font-family: var(--tp-ff-space); margin-bottom: 0; } .counter__content-4 p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, 0.7); text-transform: capitalize; } .counter__content-7 h4 { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 60px; color: var(--tp-common-black-11); margin-bottom: 5px; line-height: 1; } .counter__content-7 p { font-family: var(--tp-ff-inter); font-size: 16px; } .counter__content-8 h4 { font-family: var(--tp-ff-space); font-weight: 400; font-size: 60px; color: var(--tp-common-white); margin-bottom: 0; line-height: 1; margin-right: 20px; } [dir=rtl] .counter__content-8 h4 { margin-right: 0; margin-left: 20px; } .counter__content-8 p { font-family: var(--tp-ff-space); font-size: 16px; font-weight: 300; font-size: 18px; line-height: 24px; color: var(--tp-common-white); margin-bottom: 0; } .counter__content-10 h4 { font-size: 50px; letter-spacing: -0.02em; color: var(--tp-common-white); line-height: 1; margin-bottom: 8px; } .counter__content-10 p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 20px; color: var(--tp-common-white); margin-bottom: 0; } .counter__shape-1 { position: absolute; top: 0; left: 0; z-index: -1; } .counter__shape-2 { position: absolute; top: 0; left: 0; z-index: -1; } .counter__shape-3 { position: absolute; bottom: 0; right: 0; z-index: -1; } .counter__shape-4 { position: absolute; bottom: 0; right: 0; z-index: -1; } .counter__shape-5 { position: absolute; top: 13%; left: 8%; z-index: -1; } .counter__shape-6 { position: absolute; bottom: 10%; right: 11%; z-index: -1; } .counter__shape-7 { position: absolute; left: 6%; bottom: 17%; z-index: -1; } .counter__shape-8 { position: absolute; right: 29%; top: 25%; z-index: -1; } .counter__shape-9 { position: absolute; right: 5%; bottom: -4%; z-index: -1; } .counter__shape-10 { position: absolute; right: 0; bottom: 0; width: 100%; mix-blend-mode: luminosity; } .counter__shape-11 { position: absolute; z-index: -1; left: 10%; top: -12%; -webkit-animation: tpleftright 2s infinite alternate; animation: tpleftright 2s infinite alternate; } .counter__shape-12 { position: absolute; z-index: -1; right: 9%; top: 17%; -webkit-animation: tprotate 3s infinite alternate; animation: tprotate 3s infinite alternate; } .counter__shape-13 { position: absolute; top: 15%; left: 0; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .counter__shape-13 { top: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .counter__shape-13 { top: 1%; width: 25%; } } @media (max-width: 575px) { .counter__shape-13 { top: 0; width: 21%; } } .counter__shape-14 { position: absolute; top: 11%; right: 8%; z-index: -1; } @media (max-width: 575px) { .counter__shape-14 { top: 3%; } } .counter__shape-15 { position: absolute; bottom: 4%; right: 1%; z-index: -1; } .counter__shape-16 { position: absolute; top: 0; left: 0; z-index: -1; width: 100%; } .counter__icon-5 { margin-bottom: 15px; } .counter__icon-5 span { color: var(--tp-common-green-4); } .counter__icon-7 { margin-bottom: 40px; } .counter__icon-7 span { font-size: 60px; color: var(--tp-theme-7); position: relative; } .counter__icon-7-shape { position: absolute; left: -28px; top: -7px; } .counter__no { position: absolute; bottom: -65px; right: 30px; } [dir=rtl] .counter__no { right: auto; left: 30px; } .counter__no h4 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 130px; letter-spacing: -0.04em; color: var(--tp-common-green-4); opacity: 0.2; } .counter__border-animation { position: absolute; top: 50%; left: 50%; display: inline-block; height: 700px; width: 700px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: -1; } .counter__border-animation::after, .counter__border-animation::before { position: absolute; content: ""; top: 55%; left: 50%; width: 100%; height: 100%; border-radius: 50%; border: 2px solid rgba(44, 174, 118, 0.4); background-color: transparent; animation: borderanimate 3.25s linear infinite; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .counter__border-animation::before { -webkit-animation-delay: 1s; animation-delay: 1s; } .counter__info-5 p { font-family: var(--tp-ff-space); font-weight: 400; font-size: 20px; letter-spacing: -0.04em; color: var(--tp-text-1); } .counter__info-5 p span { color: var(--tp-theme-5); font-weight: 700; } .counter__green { background-color: rgba(94, 183, 75, 0.1); } .counter__brown { background-color: rgba(171, 108, 86, 0.1); } .counter__brown .counter__icon-5 span { color: var(--tp-theme-4); } .counter__brown .counter__no h4 { color: var(--tp-theme-4); } .counter__purple { background-color: rgba(124, 106, 221, 0.1); } .counter__purple .counter__icon-5 span { color: var(--tp-common-purple-4); } .counter__purple .counter__no h4 { color: var(--tp-common-purple-4); } .counter__overlay-10 { position: absolute; top: 0; left: 0; width: 100%; height: 65px; background-color: var(--tp-grey-4); z-index: -1; } /* fun fact css start*/ .fact__item { padding: 40px 40px; box-shadow: 0px 20px 26px rgba(3, 4, 28, 0.1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .fact__item { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .fact__item { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .fact__item { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .fact__item { padding-left: 20px; padding-right: 20px; } } .fact__icon-wrapper { display: inline-block; width: 80px; height: 80px; text-align: center; margin-bottom: 0; margin-right: 15px; border: 2px solid var(--tp-theme-4); padding-top: 14px; border-radius: 50%; } [dir=rtl] .fact__icon-wrapper { margin-right: 0; margin-left: 15px; } .fact__icon-wrapper span { color: var(--tp-theme-4); margin-bottom: 6px; } .fact__icon-wrapper .tp-fact-number { font-size: 16px; color: var(--tp-common-black); font-family: var(--tp-ff-space); font-weight: 700; display: block; line-height: 1; } .fact__content h4 { font-size: 24px; color: var(--tp-common-black); margin-bottom: 0; font-family: var(--tp-ff-space); } @media (max-width: 575px) { .fact__content h4 { font-size: 19px; } } .fact__content p { font-family: var(--tp-ff-inter); margin-bottom: 0; } .fact__banner { padding: 35px 40px 18px; min-height: 160px; box-shadow: 0px 20px 26px rgba(3, 4, 28, 0.1); } .fact__banner-overlay { position: relative; } .fact__banner-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #002D28 49.48%, rgba(0, 45, 40, 0.1) 100%); opacity: 0.9; } .fact__banner-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .fact__banner-content { position: relative; z-index: 1; } .fact__banner-content h5 { font-size: 27px; color: var(--tp-common-white); font-family: var(--tp-ff-space); } .fact__banner-content p { font-size: 16px; font-weight: 500; color: var(--tp-common-white); font-family: var(--tp-ff-space); } .fact__translate { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .fact__translate { -webkit-transform: translateY(-23%); -moz-transform: translateY(-23%); -ms-transform: translateY(-23%); -o-transform: translateY(-23%); transform: translateY(-23%); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .fact__translate { -webkit-transform: translateY(-25%); -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); } } @media (max-width: 575px) { .fact__translate { -webkit-transform: translateY(-20%); -moz-transform: translateY(-20%); -ms-transform: translateY(-20%); -o-transform: translateY(-20%); transform: translateY(-20%); } } /*----------------------------------------*/ /* 09. SERVICES CSS START /*----------------------------------------*/ .services__section-title-5 { padding-left: 70px; padding-right: 70px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__section-title-5 { padding-left: 0; padding-right: 0; } } .services__item { position: relative; z-index: 1; } .services__item-inner { position: relative; z-index: 1; padding: 50px 30px; padding-right: 25px; padding-top: 50px; border: 1px solid var(--tp-border-5); } [dir=rtl] .services__item-inner { padding-left: 30px; padding-right: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .services__item-inner { padding-left: 25px; padding-right: 25px; } } .services__item:hover .services__item-inner { background-color: var(--tp-common-purple); border-color: transparent; } .services__item:hover .services__title { color: var(--tp-common-white); } .services__item:hover .services__title a { color: var(--tp-common-white); } .services__item:hover .services__content p { color: var(--tp-common-white); } .services__item:hover .services__icon span { color: var(--tp-common-white-op-7); } .services__item:hover .services__btn .tp-btn-border { color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.3); } .services__item:hover .services__btn .tp-btn-border:hover { background-color: var(--tp-common-white); color: var(--tp-common-black); border-color: var(--tp-common-white); } .services__item:hover .services__shape-1 { top: 0; visibility: visible; opacity: 1; } .services__item:hover .services__shape-2 { right: 0; visibility: visible; opacity: 1; } [dir=rtl] .services__item:hover .services__shape-2 { right: auto; left: 0; } .services__item-4 { border: 2px solid var(--tp-border-5); background-color: var(--tp-common-white); padding: 47px 40px 40px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__item-4 { padding: 25px 15px 30px; } } .services__item-4::after { position: absolute; content: ""; left: 15px; top: 15px; right: 15px; bottom: 15px; border: 2px solid rgba(255, 255, 255, 0.1411764706); z-index: -1; opacity: 0; visibility: hidden; -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .services__item-4:hover { background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } .services__item-4:hover::after { opacity: 1; visibility: visible; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .services__item-4:hover .services-link-btn { color: var(--tp-common-white); bottom: 0; visibility: visible; opacity: 1; transition-delay: 0.1s; } .services__item-4:hover .services__title-4 { color: var(--tp-common-white); -webkit-transform: translateY(-93px); -moz-transform: translateY(-93px); -ms-transform: translateY(-93px); -o-transform: translateY(-93px); transform: translateY(-93px); transition-delay: 0s; } .services__item-4:hover .services__title-4 a { color: var(--tp-common-white); } .services__item-4:hover .services__thumb-4 { opacity: 0.14; } .services__item-4:hover .services__icon-4 i, .services__item-4:hover .services__icon-4 span { color: var(--tp-common-white); -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } .services__item-4:hover .services__content-4 p { color: var(--tp-common-white); -webkit-transform: translateY(-93px); -moz-transform: translateY(-93px); -ms-transform: translateY(-93px); -o-transform: translateY(-93px); transform: translateY(-93px); transition-delay: 0.1s; } .services__item-5 { position: relative; z-index: 1; border-radius: 10px; } .services__item-5-inner { padding: 63px 40px 50px; box-shadow: 0px 30px 40px rgba(2, 45, 62, 0.08); border-radius: 10px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__item-5-inner { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .services__item-5-inner { padding: 50px 15px 42px; } } .services__item-5::after { position: absolute; content: ""; width: 0%; height: 20px; top: -4px; left: auto; right: 0; background-color: var(--tp-common-purple-3); border-radius: 10px; z-index: -1; } [dir=rtl] .services__item-5::after { right: auto; left: 0; } .services__item-5:hover::after { width: 100%; left: 0; right: auto; } [dir=rtl] .services__item-5:hover::after { left: auto; right: 0; } .services__item-wrapper-7 .row [class*=col-]:nth-child(2n) .services__content-7 { background-color: var(--tp-common-white); border-color: rgba(4, 18, 31, 0.1); } .services__item-wrapper-7 .row [class*=col-]:nth-child(2n) .services__icon-7 span { background: linear-gradient(35.1deg, #E8D8C1 18.5%, #FFF9F0 92.94%); box-shadow: 0px 3px 5px rgba(47, 28, 6, 0.1); color: var(--tp-common-black-11); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__item-wrapper-14 { padding-left: 50px; } [dir=rtl] .services__item-wrapper-14 { padding-left: 0; padding-right: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__item-wrapper-14 { padding-left: 0; margin-top: 50px; } [dir=rtl] .services__item-wrapper-14 { padding-right: 0; } } .services__item-7:hover .services__icon-7 span { -webkit-transform: translateY(0px) translate3d(0, 5px, 0); -moz-transform: translateY(0px) translate3d(0, 5px, 0); -ms-transform: translateY(0px) translate3d(0, 5px, 0); -o-transform: translateY(0px) translate3d(0, 5px, 0); transform: translateY(0px) translate3d(0, 5px, 0); } .services__item-8 { padding: 61px 90px 57px 70px; border: 1.5px solid rgba(255, 255, 255, 0.08); position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__item-8 { padding: 56px 40px 60px 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services__item-8 { padding: 56px 35px 60px 30px; } } @media (max-width: 575px) { .services__item-8 { padding: 56px 30px 60px 30px; } } .services__item-8:hover .services__project-no span { color: var(--tp-theme-8); } .services__item-8:hover .services__shape-11 { opacity: 0.04; } .services__item-8:hover .services__icon-8 span i, .services__item-8:hover .services__icon-8 span svg, .services__item-8:hover .services__icon-8 span img { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .services__item-9 { padding: 40px 42px 37px 40px; border: 1px solid #EAEAEF; background-color: var(--tp-common-white); position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services__item-9 { padding-left: 35px; padding-right: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__item-9 { padding: 30px 25px 27px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services__item-9 { padding: 35px 30px 32px; } } @media (max-width: 575px) { .services__item-9 { padding-left: 30px; padding-right: 30px; } } .services__item-9::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); z-index: -1; } .services__item-9:hover { background-color: var(--tp-common-white); border-color: var(--tp-common-white); box-shadow: 0px 20px 40px rgba(3, 4, 28, 0.14); } .services__item-9:hover::after { -webkit-transform: translate(8px, 8px); -moz-transform: translate(8px, 8px); -ms-transform: translate(8px, 8px); -o-transform: translate(8px, 8px); transform: translate(8px, 8px); } .services__item-9:hover .services__icon-9 span i, .services__item-9:hover .services__icon-9 span svg { -webkit-transform: translateY(-5px) translate3d(0, -5px, 0); -moz-transform: translateY(-5px) translate3d(0, -5px, 0); -ms-transform: translateY(-5px) translate3d(0, -5px, 0); -o-transform: translateY(-5px) translate3d(0, -5px, 0); transform: translateY(-5px) translate3d(0, -5px, 0); } .services__item-14 { height: 400px; position: relative; z-index: 1; overflow: hidden; } .services__item-14:hover .services__thumb-14 { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .services__item-14::after { position: absolute; content: ""; left: 0; top: 0; height: 100%; width: 100%; background-image: -webkit-linear-gradient(180deg, rgba(3, 4, 28, 0) 0.25%, #03041C 98.96%); background-image: -moz-linear-gradient(180deg, rgba(3, 4, 28, 0) 0.25%, #03041C 98.96%); background-image: -ms-linear-gradient(180deg, rgba(3, 4, 28, 0) 0.25%, #03041C 98.96%); background-image: -o-linear-gradient(180deg, rgba(3, 4, 28, 0) 0.25%, #03041C 98.96%); background-image: linear-gradient(180deg, rgba(3, 4, 28, 0) 0.25%, #03041C 98.96%); z-index: -1; } .services__item-15 { padding: 50px 60px 47px; background: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.1); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .services__item-15 { padding: 40px 47px 37px; } } .services__item-15:hover { box-shadow: 0px 10px 20px rgba(3, 4, 28, 0.08); } .services__item-15:hover .services__icon-15 span i, .services__item-15:hover .services__icon-15 span svg { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .services__item-style-2::after { display: none; } .services__item-style-2:hover { box-shadow: 0px 10px 10px rgba(3, 4, 28, 0.1); } .services__item-style-2 .services__btn-9 a:hover { color: var(--tp-theme-1); } .services__icon { margin-bottom: 32px; min-height: 43px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: flex-end; } [dir=rtl] .services__icon { align-items: flex-start; } .services__icon span { font-size: 40px; color: var(--tp-common-purple); } .services__icon-4 { position: relative; z-index: 1; } .services__icon-4 i { display: inline-block; font-size: 50px; color: var(--tp-theme-4); } .services__icon-4 span { display: inline-block; font-size: 40px; color: var(--tp-theme-4); min-height: 52px; } .services__icon-7 { margin-bottom: -45px; } .services__icon-7 span { display: inline-block; width: 90px; height: 90px; line-height: 90px; text-align: center; color: var(--tp-common-white); background: linear-gradient(213.79deg, #3FF1A5 11.02%, #2CAE76 84.5%); box-shadow: 0px 3px 5px rgba(14, 63, 42, 0.12); border-radius: 50%; font-size: 26px; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } [dir=rtl] div.services__icon-8 { margin-right: 0; margin-left: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.services__icon-8 { margin-bottom: 30px; } } div.services__icon-8 span { display: inline-block; font-size: 60px; color: var(--tp-common-white); } div.services__icon-8 span svg, div.services__icon-8 span i, div.services__icon-8 span img { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } div.services__icon-8 span img { max-width: inherit; } .services__icon-9 span { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 16px; display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 40px; position: relative; color: var(--tp-common-black); margin-bottom: 37px; } .services__icon-9 span i, .services__icon-9 span svg { backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } .services__icon-9-shape { position: absolute; bottom: -17px; right: -19px; } [dir=rtl] .services__icon-9-shape { right: auto; left: -19px; } .services__icon-15 { margin-top: 5px; } [dir=rtl] .services__icon-15 { margin-right: 0; margin-left: 45px; } @media (max-width: 575px) { .services__icon-15 { margin-bottom: 30px; } } .services__icon-15 span { font-size: 42px; position: relative; min-width: 42px; display: inline-block; } .services__icon-15 span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .services__icon-15 span i, .services__icon-15 span svg { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .services__icon-15 span::after { position: absolute; content: ""; left: 3px; bottom: -17px; width: 58px; height: 58px; border-radius: 50%; background-image: -webkit-linear-gradient(314.27deg, rgba(3, 4, 28, 0.1) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: -moz-linear-gradient(314.27deg, rgba(3, 4, 28, 0.1) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: -ms-linear-gradient(314.27deg, rgba(3, 4, 28, 0.1) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: -o-linear-gradient(314.27deg, rgba(3, 4, 28, 0.1) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: linear-gradient(314.27deg, rgba(3, 4, 28, 0.1) 0%, rgba(3, 4, 28, 0) 79.01%); } [dir=rtl] .services__icon-15 span::after { left: auto; right: 3px; } .services__title { font-size: 24px; font-weight: 700; font-family: var(--tp-ff-space); color: var(--tp-common-black-solid); margin-bottom: 11px; } .services__title-4 { font-family: var(--tp-ff-space); font-size: 24px; letter-spacing: -0.02em; margin-bottom: 12px; transition-duration: 0.4s; transition-delay: 0.1s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .services__title-4 { font-size: 22px; } } @media (max-width: 575px) { .services__title-4 { font-size: 22px; } } .services__title-5 { font-family: var(--tp-ff-space); font-size: 24px; letter-spacing: -0.04em; margin-bottom: 12px; font-size: 24px; color: var(--tp-common-black); margin-bottom: 12px; } .services__title-5 a:hover { color: var(--tp-theme-5); } .services__title-7 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 22px; line-height: 1.3; color: var(--tp-common-black-11); margin-bottom: 10px; } .services__title-7 a:hover { color: var(--tp-theme-7); } .services__title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 30px; color: var(--tp-common-white); margin-bottom: 17px; line-height: 1; } .services__title-8 a:hover { color: var(--tp-theme-8); } .services__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 26px; line-height: 1; color: var(--tp-common-black); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__title-9 { font-size: 22px; } } .services__title-9 a { background-image: linear-gradient(#03041C, #03041C), linear-gradient(#03041C, #03041C); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.2s linear; } .services__title-9 a:hover { background-size: 0 2px, 100% 2px; } .services__title-14 { font-size: 34px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 11px; } .services__title-14 a:hover { color: var(--tp-theme-1); } .services__title-15 { font-size: 24px; line-height: 1.17; letter-spacing: -0.02em; } .services__title-15 a:hover { color: var(--tp-theme-1); } .services__content p { font-family: var(--tp-ff-inter); font-size: 16px; color: var(--tp-text-1); line-height: 1.4; margin-bottom: 35px; } .services__content-4 { position: relative; z-index: 1; } .services__content-4 p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 16px; line-height: 22px; color: var(--tp-text-1); transition-duration: 0.4s; transition-delay: 0s; } .services__content-5 p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--tp-text-1); margin-bottom: 35px; } .services__content-7 { padding: 77px 40px 35px; background-color: #F8F4EE; border: 1px solid #F8F4EE; border-radius: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .services__content-7 { padding-left: 20px; padding-right: 20px; } } .services__content-7 p { font-family: var(--tp-ff-poppins); font-weight: 400; font-size: 15px; line-height: 24px; color: var(--tp-text-1); margin-bottom: 25px; } .services__content-8 p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; color: var(--tp-common-white); opacity: 0.7; margin-bottom: 25px; } .services__content-14 { position: absolute; left: 60px; bottom: 60px; right: 60px; } @media (max-width: 575px) { .services__content-14 { left: 25px; bottom: 30px; right: 30px; } } .services__content-14 p { font-size: 16px; line-height: 1.5; color: var(--tp-common-white); margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .services__content-14 p br { display: none; } } .services__content-15 p { font-size: 16px; line-height: 1.5; color: rgba(3, 4, 28, 0.7); margin-bottom: 19px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__content-15 p br { display: none; } } .services__shape-1 { position: absolute; top: -40px; right: 0; visibility: hidden; opacity: 0; z-index: 111; } [dir=rtl] .services__shape-1 { right: auto; left: 0; -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); } .services__shape-2 { position: absolute; top: 0; right: -30px; visibility: hidden; opacity: 0; z-index: 11; } [dir=rtl] .services__shape-2 { right: auto; left: -30px; -webkit-transform: scale(-1, 1); -moz-transform: scale(-1, 1); -ms-transform: scale(-1, 1); -o-transform: scale(-1, 1); transform: scale(-1, 1); } .services__shape-3 { position: absolute; bottom: -25%; right: 20%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__shape-3 { bottom: -34%; right: 0%; } } .services__shape-4 { position: absolute; left: 14%; top: 55%; -webkit-animation: tprotate 2s infinite alternate; animation: tprotate 2s infinite alternate; } .services__shape-5 { position: absolute; left: 26%; top: 20%; z-index: -1; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } @media (max-width: 575px) { .services__shape-5 { display: none; } } .services__shape-6 { position: absolute; left: 10%; top: 10%; left: 22%; top: 10%; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } .services__shape-7 { position: absolute; right: 23%; top: 17%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } .services__shape-8 { position: absolute; right: 12%; top: 45%; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } .services__shape-9 { position: absolute; right: 26%; bottom: 29%; } .services__shape-10 { position: absolute; left: 0%; bottom: 0%; z-index: -1; } .services__shape-11 { position: absolute; bottom: 0; right: 0; opacity: 0; z-index: -1; } [dir=rtl] .services__list { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .services__list { padding-left: 0; } [dir=rtl] .services__list { padding-right: 5px; } } .services__list-item.active .services__list-title { font-weight: 700; } .services__list-item.active .services__list-title button { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -ms-transform: scale(1.4); -o-transform: scale(1.4); transform: scale(1.4); color: var(--tp-common-white); } .services__list-item.active .services__list-title .services-tab-link-btn { left: -66px; visibility: visible; opacity: 1; } [dir=rtl] .services__list-item.active .services__list-title .services-tab-link-btn { left: auto; right: -66px; } #services-item-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-black-12); } #services-item-thumb.services-img-0 .services-img-0 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-1 .services-img-1 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-2 .services-img-2 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-3 .services-img-3 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-4 .services-img-4 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-5 .services-img-5 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-6 .services-img-6 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-7 .services-img-7 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-8 .services-img-8 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-9 .services-img-9 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-10 .services-img-10 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-11 .services-img-11 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-12 .services-img-12 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-13 .services-img-13 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-14 .services-img-14 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-15 .services-img-15 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-16 .services-img-16 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-17 .services-img-17 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-18 .services-img-18 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-19 .services-img-19 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-20 .services-img-20 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-21 .services-img-21 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-22 .services-img-22 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-23 .services-img-23 { visibility: visible; opacity: 1; } #services-item-thumb.services-img-24 .services-img-24 { visibility: visible; opacity: 1; } .services__list-title { font-size: 18px; font-weight: 500; font-family: var(--tp-ff-space); color: rgba(255, 255, 255, 0.6); text-align: left; transition-duration: 0.3s; position: relative; margin-bottom: 26px; position: relative; } [dir=rtl] .services__list-title { text-align: right; } .services__list-title button { display: inline-block; transform-origin: left center; } [dir=rtl] .services__list-title button { transform-origin: right center; } .services__list-title:hover { color: var(--tp-common-white); } .services-tab-link-btn { display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; background-color: rgba(255, 255, 255, 0.0784313725); color: var(--tp-common-white); border-radius: 50%; font-size: 20px; position: absolute; left: -96px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); visibility: hidden; opacity: 0; } [dir=rtl] .services-tab-link-btn { left: auto; right: -96px; } [dir=rtl] .services-tab-link-btn i { -webkit-transform: rotate(180deg) translateX(-3px); -moz-transform: rotate(180deg) translateX(-3px); -ms-transform: rotate(180deg) translateX(-3px); -o-transform: rotate(180deg) translateX(-3px); transform: rotate(180deg) translateX(-3px); } @media (max-width: 575px), only screen and (min-width: 768px) and (max-width: 991px) { .services-tab-link-btn { display: none; } } .services-tab-link-btn::after { position: absolute; content: ""; top: 48%; left: 0; width: 68px; height: 2px; background-color: var(--tp-common-white); -webkit-transform: translateX(-51%); -moz-transform: translateX(-51%); -ms-transform: translateX(-51%); -o-transform: translateX(-51%); transform: translateX(-51%); } [dir=rtl] .services-tab-link-btn::after { left: 110%; } .services-tab-link-btn:hover { color: var(--tp-common-white); } #services-item-thumb .services__list-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; opacity: 0; } .services__tab-content { position: relative; max-width: 570px; height: 420px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .services__tab-content { padding-left: 0; padding-right: 0; } } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .services__tab-content { padding-left: 0; margin-top: 50px; padding-right: 0; } } .services__tab-content::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.1019607843); -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .services__tab-content::after { width: 93%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .services__tab-content::after { width: 90%; } } @media (max-width: 575px) { .services__tab-content::after { display: none; } } .services__tab-logo { position: absolute; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 50%); -moz-transform: translate(-50%, 50%); -ms-transform: translate(-50%, 50%); -o-transform: translate(-50%, 50%); transform: translate(-50%, 50%); z-index: 1; } .services__tab-logo-thumb { -webkit-animation: rotate-infinite 15s linear infinite; animation: rotate-infinite 15s linear infinite; } @-webkit-keyframes rotate-infinite { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-moz-keyframes rotate-infinite { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @-ms-keyframes rotate-infinite { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes rotate-infinite { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .services__tab-logo-icon { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .services__thumb-3 { position: relative; z-index: 1; } .services__thumb-3::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: #22264C; -webkit-transform: rotate(-20deg); -moz-transform: rotate(-20deg); -ms-transform: rotate(-20deg); -o-transform: rotate(-20deg); transform: rotate(-20deg); z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .services__thumb-3::after { left: -7%; } [dir=rtl] .services__thumb-3::after { right: -7%; left: auto; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__thumb-3::after { left: -12%; } [dir=rtl] .services__thumb-3::after { left: auto; right: -12%; } } .services__thumb-4 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; } .services__thumb-5 { max-height: 219px; overflow: hidden; } .services__thumb-5 img { height: 220px; } @media (max-width: 575px) { .services__thumb-5 img { max-width: 100%; } } .services__thumb-14 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .services__more .tp-link-btn-2 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; text-align: right; letter-spacing: -0.02em; color: var(--tp-common-black); padding-bottom: 2px; } [dir=rtl] .services__more .tp-link-btn-2 { text-align: left; } .services__more .tp-link-btn-2:hover { color: var(--tp-theme-1); } .services__more-4 p { font-family: var(--tp-ff-inter); font-size: 16px; line-height: 24px; } .services__btn-5 { margin-bottom: 70px; } .services__btn-5 .tp-link-btn-circle { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: var(--tp-common-black); } .services__btn-5 .tp-link-btn-circle span { margin-left: 7px; } [dir=rtl] .services__btn-5 .tp-link-btn-circle span { margin-left: 0; margin-right: 7px; } .services__btn-5 .tp-link-btn-circle:hover { color: var(--tp-theme-5); } .services__btn-5 .tp-link-btn-circle:hover span { border-color: var(--tp-theme-5); background-color: var(--tp-theme-5); color: var(--tp-common-white); } .services__btn-7 a { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; text-align: center; letter-spacing: -0.01em; color: var(--tp-common-black-solid); padding-right: 20px; } [dir=rtl] .services__btn-7 a { padding-right: 0; padding-left: 20px; } .services__btn-7 a:hover { color: var(--tp-theme-7); } .services__btn-9 { -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } .services__btn-9 a { font-size: 26px; position: relative; color: transparent; -webkit-background-clip: text; color: var(--tp-common-black); background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); } .services__btn-9 a:hover { color: transparent; } .services__btn-14 .tp-link-btn { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; color: var(--tp-common-white); } .services__btn-14 .tp-link-btn:hover { color: var(--tp-theme-1); } .services__btn-15 a { color: var(--tp-common-black); font-size: 15px; font-weight: 500; } .services__btn-15 a:hover { color: var(--tp-theme-1); } .services__btn-15 a:hover i, .services__btn-15 a:hover svg { -webkit-transform: translateX(6px); -moz-transform: translateX(6px); -ms-transform: translateX(6px); -o-transform: translateX(6px); transform: translateX(6px); } .services__btn-15 a i, .services__btn-15 a svg { margin-left: 4px; transition: transform 0.3s ease-in-out; } [dir=rtl] .services__btn-15 a i, [dir=rtl] .services__btn-15 a svg { margin-left: 0; margin-right: 4px; } .services__project-no span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 1.5; color: var(--tp-common-white); -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .services__widget { position: sticky; top: 100px; } .services__widget-title { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 22px; } .services__widget-tab .nav-tabs .nav-item { margin-bottom: 10px; border-radius: 0; } .services__widget-tab .nav-tabs .nav-item:last-child { margin-bottom: 0; } .services__widget-tab .nav-tabs .nav-item .nav-link { width: 100%; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: var(--tp-text-1); text-align: left; border: 1px solid #EAEAEF; padding: 13px 30px; padding-right: 35px; position: relative; border-radius: 0; } [dir=rtl] .services__widget-tab .nav-tabs .nav-item .nav-link { padding-right: 30px; padding-left: 35px; text-align: right; } .services__widget-tab .nav-tabs .nav-item .nav-link svg, .services__widget-tab .nav-tabs .nav-item .nav-link i { position: absolute; top: 50%; right: 24px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } [dir=rtl] .services__widget-tab .nav-tabs .nav-item .nav-link svg, [dir=rtl] .services__widget-tab .nav-tabs .nav-item .nav-link i { right: auto; left: 24px; } .services__widget-tab .nav-tabs .nav-item .nav-link:hover, .services__widget-tab .nav-tabs .nav-item .nav-link.active { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .services__widget-tab-2 ul li { margin-bottom: 8px; border-radius: 0; list-style: none; } .services__widget-tab-2 ul li:last-child { margin-bottom: 0; } .services__widget-tab-2 ul li a { display: inline-block; width: 100%; font-family: var(--tp-ff-space); font-weight: 500; font-size: 17px; color: var(--tp-text-1); text-align: left; border: 1px solid #EAEAEF; padding: 23px 35px; position: relative; border-radius: 0; } [dir=rtl] .services__widget-tab-2 ul li a { text-align: right; } .services__widget-tab-2 ul li a > svg, .services__widget-tab-2 ul li a > i { position: absolute; top: 50%; right: 24px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } [dir=rtl] .services__widget-tab-2 ul li a > svg, [dir=rtl] .services__widget-tab-2 ul li a > i { right: auto; left: 24px; } .services__widget-tab-2 ul li a span { display: inline-block; min-width: 22px; margin-right: 20px; } [dir=rtl] .services__widget-tab-2 ul li a span { margin-right: 0; margin-left: 20px; } .services__widget-tab-2 ul li a span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .services__widget-tab-2 ul li a.active { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .services__widget-tab-2 ul li a.active:hover { background-color: var(--tp-theme-1); } .services__widget-tab-2 ul li a:hover { background-color: #F5F5F8; } .services__widget-2 { position: sticky; top: 100px; } [dir=rtl] .services__widget-2 { padding-right: 0; padding-left: 50px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .services__widget-2 { padding-right: 40px; } [dir=rtl] .services__widget-2 { padding-right: 0; padding-left: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__widget-2 { padding-right: 0; } [dir=rtl] .services__widget-2 { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .services__widget-2 { padding-right: 0; margin-top: 50px; } [dir=rtl] .services__widget-2 { padding-left: 0; } } .services__contact { border: 1px solid #EAEAEF; padding: 22px 35px 45px; } .services__contact-title { font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 18px; } .services__contact-input { margin-bottom: 10px; } .services__contact-input input, .services__contact-input textarea { width: 100%; height: 54px; background-color: #F5F5F8; border: 1px solid #F5F5F8; color: var(--tp-common-black); padding: 0 24px; } [dir=rtl] .services__contact-input input, [dir=rtl] .services__contact-input textarea { text-align: right; } .services__contact-input input:focus, .services__contact-input textarea:focus { background-color: var(--tp-common-white); border-color: var(--tp-theme-1); } .services__contact-input input:focus::placeholder, .services__contact-input textarea:focus::placeholder { color: var(--tp-common-black); } .services__contact-input textarea { height: 130px; padding: 20px 24px; } .services__contact-btn .tp-btn { font-size: 15px; padding: 12px 30px; } .services__contact-btn .tp-btn:hover { background-color: var(--tp-common-black); } .services__contact-info-item { background: var(--tp-common-white); border: 1px solid #EAEAEF; padding: 25px 35px 22px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services__contact-info-item { padding: 25px 28px 22px; } } @media (max-width: 575px) { .services__contact-info-item { padding: 25px 25px 22px; } } .services__contact-info-icon span { font-size: 30px; display: inline-block; min-width: 40px; margin-right: 35px; position: relative; } [dir=rtl] .services__contact-info-icon span { margin-right: 0; margin-left: 35px; } .services__contact-info-icon span::after { position: absolute; content: ""; left: 0; top: 0; width: 50px; height: 50px; background-image: -webkit-linear-gradient(314.27deg, rgba(3, 4, 28, 0.08) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: -moz-linear-gradient(314.27deg, rgba(3, 4, 28, 0.08) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: -ms-linear-gradient(314.27deg, rgba(3, 4, 28, 0.08) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: -o-linear-gradient(314.27deg, rgba(3, 4, 28, 0.08) 0%, rgba(3, 4, 28, 0) 79.01%); background-image: linear-gradient(314.27deg, rgba(3, 4, 28, 0.08) 0%, rgba(3, 4, 28, 0) 79.01%); border-radius: 50%; } [dir=rtl] .services__contact-info-icon span::after { left: auto; right: 0; } .services__contact-info-content > p { display: none; } .services__contact-info-content span { display: inline-block; color: #85858B; } .services__contact-info-content h4 { font-size: 20px; line-height: 1; } .services__contact-info-content h4 a:hover { color: var(--tp-theme-1); } .services__details-wrapper p { font-size: 16px; line-height: 1.75; margin-bottom: 25px; } .services__details-title { font-size: 50px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black-solid); margin-bottom: 20px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .services__details-title { font-size: 40px; } } @media (max-width: 575px) { .services__details-title { font-size: 28px; } } .services__details-thumb { padding-top: 15px; margin-bottom: 42px; } .services__details-text-title { font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 9px; } .services__details-text-title-2 { margin-bottom: 14px; } .services__details-list-title { font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 15px; } .services__details-list ul li { font-size: 16px; color: var(--tp-common-black); list-style: none; position: relative; padding-left: 15px; } [dir=rtl] .services__details-list ul li { padding-left: 0; padding-right: 15px; } .services__details-list ul li:not(:last-child) { margin-bottom: 8px; } .services__details-list ul li::after { position: absolute; content: ""; left: 0; top: 10px; width: 5px; height: 5px; background-color: var(--tp-common-black); border-radius: 50%; } .services__details-faq-title { font-size: 50px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 40px; } @media (max-width: 575px) { .services__details-faq-title { font-size: 28px; } } .services-link-btn { position: absolute; bottom: -35px; left: 0; font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; color: var(--tp-common-white); transition-delay: 0s; transition-duration: 0.3s; visibility: hidden; opacity: 0; } [dir=rtl] .services-link-btn { left: auto; right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .services-link-btn { left: 0; } [dir=rtl] .services-link-btn { left: auto; right: 20px; } } .services-link-btn i { display: inline-block; width: 30px; height: 30px; line-height: 28px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.3019607843); border-radius: 50%; margin-left: 5px; } [dir=rtl] .services-link-btn i { margin-left: 0; margin-right: 5px; } .services-link-btn:hover i { border-color: var(--tp-common-white); background-color: var(--tp-common-white); color: var(--tp-common-black); } /*----------------------------------------*/ /* 10. EVENT CSS START /*----------------------------------------*/ .event__title { font-size: 20px; font-family: var(--tp-ff-space); margin-bottom: 0; } @media (max-width: 575px) { .event__title { margin-bottom: 10px; } } .event__title a:hover { color: var(--tp-theme-1); } .event__title-10 { font-size: 24px; margin-bottom: 0; } .event__title-10 a:hover { color: var(--tp-theme-10); } .event__item { padding: 13px 40px; box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.08); margin-bottom: 10px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .event__item { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .event__item { padding-left: 25px; padding-right: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__item { padding: 20px 25px; } } .event__item:hover { box-shadow: 0px 20px 20px rgba(3, 4, 28, 0.08); z-index: 1; } .event__item-10 { border-radius: 14px; border: 2px solid #EAEAEF; padding: 30px; padding-right: 40px; margin-bottom: 20px; } [dir=rtl] .event__item-10 { padding-right: 30px; padding-left: 40px; } @media (max-width: 575px) { .event__item-10 { padding: 20px; } } .event__item-10:last-child { margin-bottom: 0; } .event__item-10-inner { width: 76%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .event__item-10-inner { width: 66%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .event__item-10-inner { width: 59%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__item-10-inner { width: 100%; } } .event__item-10:hover { border-color: var(--tp-theme-10); } .event__item-10:hover .event__thumb-10 .event-thumb-shape { bottom: 0; visibility: visible; opacity: 1; transition-delay: 0s; } .event__item-10:hover .event__thumb-10-overlay h3 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .event__item-10:hover .event__thumb-10-overlay span { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .event__thumb { position: relative; overflow: hidden; border-radius: 10px; } .event__thumb img { border-radius: 10px; } .event__thumb-10 { width: 24%; position: relative; overflow: hidden; border-radius: 10px; } [dir=rtl] .event__thumb-10 { margin-right: 0; margin-left: 25px; } .event__thumb-10 img { border-radius: 10px; height: 140px; object-fit: cover; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .event__thumb-10 { width: 34%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .event__thumb-10 { width: 41%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__thumb-10 { width: 100%; margin-bottom: 25px; } .event__thumb-10 img { width: 100%; } } .event__thumb-10-overlay { position: absolute; bottom: 15px; left: 25px; z-index: 1; } [dir=rtl] .event__thumb-10-overlay { left: auto; right: 25px; } .event__thumb-10-overlay .event-thumb-shape { position: absolute; left: 0; bottom: -100px; -webkit-transform: translate(-26%, 40%); -moz-transform: translate(-26%, 40%); -ms-transform: translate(-26%, 40%); -o-transform: translate(-26%, 40%); transform: translate(-26%, 40%); z-index: -1; visibility: hidden; opacity: 0; transition-delay: 0.1s; width: inherit; max-width: inherit; } .event__thumb-10-overlay h3 { font-size: 16px; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 0; line-height: 1; visibility: hidden; opacity: 0; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } .event__thumb-10-overlay span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 13px; color: rgba(255, 255, 255, 0.9); visibility: hidden; opacity: 0; -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); } @media (max-width: 575px) { .event__speaker { margin-bottom: 10px; } } .event__speaker ul { display: inline-block; margin-right: 8px; } [dir=rtl] .event__speaker ul { margin-right: 0; margin-left: 8px; } .event__speaker ul li { display: inline-block; list-style: none; margin-left: -8px; } [dir=rtl] .event__speaker ul li { margin-left: 0; margin-right: -8px; } .event__speaker ul li:first-child { margin-left: 0; } [dir=rtl] .event__speaker ul li:first-child { margin-right: 0; } .event__speaker ul li img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--tp-common-white); } .event__speaker span { font-size: 14px; color: var(--tp-text-1); font-weight: 500; font-family: var(--tp-ff-space); display: inline-block; } .event__speaker-item { background-color: var(--tp-common-white); border: 1px solid #EAEAEF; padding: 18px 24px; } .event__speaker-item:not(:last-child) { margin-bottom: 6px; } .event__speaker-thumb img { width: 46px; height: 46px; border-radius: 50%; margin-right: 16px; } [dir=rtl] .event__speaker-thumb img { margin-right: 0; margin-left: 16px; } .event__speaker-title { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 16px; letter-spacing: -0.02em; margin-bottom: 0; line-height: 1; } .event__speaker-title a:hover { color: var(--tp-theme-1); } .event__speaker-designation { font-family: var(--tp-ff-space); font-size: 14px; letter-spacing: -0.02em; color: var(--tp-text-1); line-height: 1; } @media (max-width: 575px) { .event__meta { margin-bottom: 10px; } } .event__meta span { display: inline-block; font-size: 14px; color: var(--tp-text-1); font-weight: 500; font-family: var(--tp-ff-space); display: inline-block; } .event__meta-10 { margin-bottom: 12px; } .event__meta-10 span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; color: var(--tp-text-1); margin-right: 15px; } [dir=rtl] .event__meta-10 span { margin-right: 0; margin-left: 15px; } @media (max-width: 575px) { .event__meta-10 span { display: block; margin-bottom: 10px; } } .event__meta-10 span:last-child { margin-right: 0; } [dir=rtl] .event__meta-10 span:last-child { margin-left: 0; } .event__meta-10 span.event-tag { background-color: var(--tp-common-purple-7); font-size: 13px; color: #FFFFFF; padding: 3px 12px; border-radius: 6px; margin-right: 15px; } [dir=rtl] .event__meta-10 span.event-tag { margin-right: 0; margin-left: 15px; } @media (max-width: 575px) { .event__meta-10 span.event-tag { display: inline-block; margin-bottom: 10px; } } .event__meta-10 span.event-tag span { color: #FFFFFF; } .event__meta-10 span.event-tag a:hover { color: var(--tp-common-white); } .event__meta-10 span i { margin-right: 2px; } [dir=rtl] .event__meta-10 span i { margin-right: 0; margin-left: 2px; } .event__meta-10 span a:hover { color: var(--tp-theme-10); } .event__content-10 > p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; color: #84848B; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .event__more { margin-top: 15px; } } .event__more-10 { flex: 0 0 auto; margin-left: 20px; } [dir=rtl] .event__more-10 { margin-left: 0; margin-right: 20px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__more-10 { margin-top: 20px; margin-left: 0; } [dir=rtl] .event__more-10 { margin-right: 0; } } .event__more-10 .tp-btn-border-9 { padding: 10px 26px 10px; } .event__details-tag span { display: inline-block; font-weight: 600; font-size: 14px; line-height: 1; color: var(--tp-common-white); background-color: var(--tp-common-purple); padding: 8px 10px 10px; } .event__details-title { font-size: 50px; letter-spacing: -0.04em; } @media (max-width: 575px) { .event__details-title { font-size: 30px; } } .event__details-meta span { font-size: 14px; display: inline-block; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__details-meta span { margin-bottom: 15px; } } .event__details-meta span:not(:last-child) { margin-right: 15px; padding-right: 18px; } [dir=rtl] .event__details-meta span:not(:last-child) { margin-right: 0; padding-right: 0; margin-left: 15px; padding-left: 18px; } .event__details-meta span:not(:last-child)::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 20px; background-color: #D9D9D9; } [dir=rtl] .event__details-meta span:not(:last-child)::after { right: auto; left: 0; } .event__details-meta span i, .event__details-meta span svg { margin-right: 4px; } [dir=rtl] .event__details-meta span i, [dir=rtl] .event__details-meta span svg { margin-right: 0; margin-left: 4px; } .event__details-meta span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .event__details-about-title { font-size: 40px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); margin-bottom: 15px; } .event__details-about p { font-size: 16px; line-height: 1.75; margin-bottom: 27px; } [dir=rtl] .event__details-about p { display: inline-block; } .event__details-quote { background-color: #F4F4F9; padding: 30px 85px 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .event__details-quote { padding: 30px 45px 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .event__details-quote { padding: 30px 35px 20px; } } @media (max-width: 575px) { .event__details-quote { padding: 20px 25px 10px; } } .event__details-quote p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 22px; line-height: 1.36; letter-spacing: -0.02em; color: var(--tp-common-black); } .event__details-quote-icon { margin-bottom: 8px; } .event__details-quote-icon span { color: #D1D1E7; font-size: 34px; } .event__details-list-title { font-size: 30px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); margin-bottom: 25px; } .event__details-list ul li { list-style: none; font-size: 16px; position: relative; padding-left: 16px; letter-spacing: -0.02em; color: var(--tp-common-black); } [dir=rtl] .event__details-list ul li { padding-left: 0; padding-right: 16px; } .event__details-list ul li:not(:last-child) { margin-bottom: 9px; } .event__details-list ul li::after { position: absolute; content: ""; left: 0; top: 11px; width: 5px; height: 5px; background-color: var(--tp-common-black); border-radius: 50%; } [dir=rtl] .event__details-list ul li::after { left: auto; right: 0; } .event__details-list ul.has-two-side { overflow: hidden; } .event__details-list ul.has-two-side li { float: left; width: 50%; } [dir=rtl] .event__details-list ul.has-two-side li { float: right; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__details-list ul.has-two-side li { float: none; width: 100%; } } .event__details-info { border: 1px solid #EAEAEF; padding: 21px 30px 27px; } .event__details-info-item:not(:last-child) { padding-bottom: 20px; border-bottom: 1px solid #EAEAEF; margin-bottom: 23px; } .event__details-info-icon span { display: inline-block; min-width: 20px; margin-right: 12px; } [dir=rtl] .event__details-info-icon span { margin-right: 0; margin-left: 12px; } .event__details-info-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .event__details-info-title { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 5px; } .event__details-info-content p { font-size: 14px; line-height: 1; margin-bottom: 0; } .event__details-btn .tp-btn { padding: 12px 30px; } .event__details-btn .tp-btn:hover { background-color: var(--tp-common-black); } @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) { .event__details-left { padding-right: 0; } [dir=rtl] .event__details-left { padding-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .event__sidebar { margin-left: 0; } [dir=rtl] .event__sidebar { margin-right: 0; } } .event__widget-title { font-weight: 500; font-size: 22px; letter-spacing: -0.02em; margin-bottom: 16px; } /*----------------------------------------*/ /* 11. TEAM CSS START /*----------------------------------------*/ .team__item:hover .team__thumb img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .team__item-4:hover .team__social-4 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.3s; } .team__item-4:hover .team__content-4 { top: 55px; padding: 20px 25px; transition-delay: 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team__item-4:hover .team__content-4 { top: 65px; } } .team__item-4:hover .team__content-4 > p { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.2s; } .team__item-6 { position: relative; } .team__item-6:hover .team__content-6-bg, .team__item-6:hover .team__title-6, .team__item-6:hover .team__designation-6 { -webkit-transform: translateY(-70px); -moz-transform: translateY(-70px); -ms-transform: translateY(-70px); -o-transform: translateY(-70px); transform: translateY(-70px); } .team__item-6:hover .team__content-6-bg { transition-delay: 0.1s; } .team__item-6:hover .team__thumb-6 img { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); } .team__item-6:hover .team__title-6 { transition-delay: 0.15s; } .team__item-6:hover .team__designation-6 { transition-delay: 0.17s; } .team__item-8 { -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; padding: 50px 25px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team__item-8 { padding-left: 15px; padding-right: 15px; } } .team__item-8::after { position: absolute; content: ""; top: 0; left: auto; right: 0; width: 0%; height: 2px; background-color: var(--tp-theme-8); } [dir=rtl] .team__item-8::after { left: 0; right: auto; } .team__item-8:hover { -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); transition-delay: 0; } .team__item-8:hover::after { width: 100%; left: 0; right: auto; } [dir=rtl] .team__item-8:hover::after { left: auto; right: 0; } .team__item-8:hover .team__thumb-8 img { padding: 0; border-color: transparent; transition-delay: 0.1s; } .team__item-10 { border-radius: 14px; } .team__item-10:hover .team__contact-overlay { -webkit-transform: scaleX(1); -moz-transform: scaleX(1); -ms-transform: scaleX(1); -o-transform: scaleX(1); transform: scaleX(1); visibility: visible; opacity: 1; } .team__thumb { position: relative; animation-duration: 1s; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: both; } .team__thumb-4 { position: relative; z-index: 1; animation-duration: 1s; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: both; } .team__thumb-4::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 90%; background-color: #E9ECF1; z-index: -1; } div.team__thumb-8 img { width: 160px; height: 160px; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; transition-delay: 0s; } div.team__thumb-10 { height: 311px; } div.team__thumb-10 img { height: 100%; object-fit: cover; border-top-left-radius: 14px; border-top-right-radius: 14px; width: 100%; } .team__action { position: absolute; bottom: 20px; right: 20px; } .team__action ul li { position: relative; margin-bottom: 1px; z-index: 1; list-style: none; } .team__action ul li > a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-common-purple); } .team__action ul li > a:hover { background-color: var(--tp-theme-1); } .team__action ul li:hover > .team__social ul li { visibility: visible; opacity: 1; } .team__action ul li:hover > .team__social ul li:nth-child(1) { right: calc(100% + 41px); z-index: -1; } .team__action ul li:hover > .team__social ul li:nth-child(2) { right: calc(100% + 82px); z-index: -2; } .team__action ul li:hover > .team__social ul li:nth-child(3) { right: calc(100% + 123px); z-index: -3; } .team__action ul li:hover > .team__social ul li:nth-child(4) { right: calc(100% + 164px); z-index: -4; } .team__action ul li:hover > .team__social ul li:nth-child(5) { right: calc(100% + 205px); } .team__action ul li:hover > .team__social ul li:nth-child(6) { right: calc(100% + 246px); } .team__social { position: absolute; top: 0; right: 0; z-index: -1; } .team__social ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; align-items: center; } .team__social ul li { display: inline-block; position: absolute; right: 0; top: 0; opacity: 0; visibility: hidden; z-index: 11; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .team__social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 15px; color: var(--tp-common-black); background-color: var(--tp-common-white); margin-left: 1px; } .team__social ul li a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .team__social-4 { -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); visibility: hidden; opacity: 0; transition-delay: 0s; margin-bottom: 70px; } .team__social-4 a { margin-right: 10px; color: var(--tp-common-white); } [dir=rtl] .team__social-4 a { margin-right: 0; margin-left: 10px; } .team__social-4 a:hover { opacity: 0.7; } .team__social-8 a { display: inline-block; color: rgba(255, 255, 255, 0.7); width: 40px; height: 40px; line-height: 40px; text-align: center; background-color: var(--tp-common-white-op-1); margin: 0 0.5px; } .team__social-8 a:hover { background-color: var(--tp-theme-8); color: var(--tp-common-white); } .team__social-10 a { display: inline-block; width: 36px; height: 36px; line-height: 31px; text-align: center; background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 6px; margin-right: 2px; color: var(--tp-common-white); } [dir=rtl] .team__social-10 a { margin-right: 0; margin-left: 2px; } .team__social-10 a:last-child { margin-right: 0; } [dir=rtl] .team__social-10 a:last-child { margin-left: 0; } .team__social-10 a:hover { background-color: var(--tp-common-white); border-color: var(--tp-common-white); color: var(--tp-common-black); } .team__title { font-size: 20px; font-family: var(--tp-ff-inter); margin-bottom: 0; line-height: 1.1; } .team__title a:hover { color: var(--tp-theme-1); } .team__title-4 { font-family: var(--tp-ff-space); font-size: 24px; letter-spacing: -0.04em; color: var(--tp-common-white); line-height: 1; margin-bottom: 0; } .team__title-6 { font-weight: 500; font-size: 18px; color: var(--tp-common-black-9); margin-bottom: 0; line-height: 1; font-family: var(--tp-ff-roboto); will-change: transform; transform: translateY(0px); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); } .team__title-6 a:hover { color: var(--tp-theme-6); } .team__title-8 { font-size: 22px; letter-spacing: -0.02em; line-height: 1; color: var(--tp-common-white); margin-bottom: 0; } .team__title-8 a:hover { color: var(--tp-theme-8); } .team__title-10 { font-size: 20px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 0; } .team__title-10 a:hover { color: var(--tp-theme-10); } .team__designation { font-size: 12px; font-weight: 500; color: var(--tp-text-1); display: inline-block; font-family: var(--tp-ff-space); text-transform: uppercase; line-height: 1; } .team__designation-4 { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-bottom: 12px; } .team__designation-6 { display: inline-block; font-size: 15px; color: var(--tp-text-18); font-family: var(--tp-ff-roboto); will-change: transform; transform: translateY(0px); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); } .team__designation-8 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 12px; line-height: 10px; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: inline-block; margin-bottom: 28px; } .team__designation-10 { font-family: var(--tp-ff-inter); font-size: 14px; line-height: 1; color: #525258; } .team__content { padding-top: 18px; } .team__content-4 { position: absolute; bottom: 20px; left: 20px; right: 20px; top: 72%; background-color: rgba(171, 108, 86, 0.8); backdrop-filter: blur(10px); z-index: 1; padding: 15px 25px; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; transition-delay: 0s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .team__content-4 { top: 77%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__content-4 { top: 72%; padding-top: 10px; padding-bottom: 10px; } } @media (max-width: 575px) { .team__content-4 { top: 74%; } } .team__content-4 > p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 54px; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); opacity: 0; visibility: hidden; transition-delay: 0.1s; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .team__content-4 > p { margin-bottom: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__content-4 > p { margin-bottom: 20px; line-height: 1.5; } } .team__content-6 { position: absolute; left: 35px; right: 35px; bottom: 0; padding: 21px 30px 14px; background-color: transparent; -webkit-transform: translateY(50%); -moz-transform: translateY(50%); -ms-transform: translateY(50%); -o-transform: translateY(50%); transform: translateY(50%); z-index: 1; } .team__content-6-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-white); box-shadow: 0px 20px 60px rgba(13, 18, 30, 0.1); z-index: -1; will-change: transform; transform: translateY(0px); transition: transform 1s cubic-bezier(0.23, 1, 0.32, 1); } .team__content-10 { border: 2px solid #EAEAEF; border-top: 0; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; padding-top: 22px; padding-bottom: 18px; } .team__bg-8 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; background-repeat: no-repeat; } .team__border { border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .team__join .tp-link-btn-2 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; text-align: right; letter-spacing: -0.02em; color: var(--tp-common-black); padding-bottom: 2px; } .team__join .tp-link-btn-2:hover { color: var(--tp-theme-1); } .team__contact-overlay { position: absolute; top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); background-image: -webkit-linear-gradient(180deg, rgba(255, 57, 57, 0.95) 0.01%, rgba(191, 33, 50, 0.95) 100%); background-image: -moz-linear-gradient(180deg, rgba(255, 57, 57, 0.95) 0.01%, rgba(191, 33, 50, 0.95) 100%); background-image: -ms-linear-gradient(180deg, rgba(255, 57, 57, 0.95) 0.01%, rgba(191, 33, 50, 0.95) 100%); background-image: -o-linear-gradient(180deg, rgba(255, 57, 57, 0.95) 0.01%, rgba(191, 33, 50, 0.95) 100%); background-image: linear-gradient(180deg, rgba(255, 57, 57, 0.95) 0.01%, rgba(191, 33, 50, 0.95) 100%); border-radius: 10px; text-align: center; padding: 35px 40px; -webkit-transform: scaleX(0); -moz-transform: scaleX(0); -ms-transform: scaleX(0); -o-transform: scaleX(0); transform: scaleX(0); visibility: hidden; opacity: 0; transform-origin: center center; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .team__contact-overlay { padding: 25px 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team__contact-overlay { padding: 60px 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__contact-overlay { padding: 150px 40px; } } .team__contact-top { border-bottom: 1px solid rgba(255, 255, 255, 0.14); margin-bottom: 22px; } .team__contact-top-icon { width: 53px; } .team__contact-top span { font-size: 50px; color: var(--tp-common-white); display: inline-block; margin-bottom: 15px; } .team__contact-top p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-common-white); margin-bottom: 4px; } .team__contact-wrapper { margin-bottom: 25px; } .team__contact-wrapper p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 18px; color: var(--tp-common-white); margin-bottom: 5px; } .team__contact-wrapper p.team-tel { font-size: 18px; font-weight: 700; } .team__details-border { padding: 70px 100px; background: #FFFFFF; border: 1px solid #EAEAEF; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .team__details-border { padding: 70px 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .team__details-border { padding: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .team__details-border { padding: 30px; } } @media (max-width: 575px) { .team__details-border { padding: 20px; padding-bottom: 30px; } } .team__details-subtitle { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-black); } .team__details-title { font-family: var(--tp-ff-inter); font-size: 44px; letter-spacing: -0.02em; } @media (max-width: 575px) { .team__details-title { font-size: 35px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .team__details-content { padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__details-content { padding-right: 0; padding-left: 0; } } .team__details-content p { font-size: 16px; line-height: 1.62; margin-bottom: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__details-content p br { display: 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) { .team__details-thumb img { width: 100%; } } .team__details-contact-icon span { font-size: 22px; color: var(--tp-common-black); margin-right: 10px; } .team__details-contact-icon span img { max-width: 20px; } .team__details-contact-content p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 22px; color: var(--tp-common-black); margin-bottom: 0; } .team__details-contact-content p a:hover { color: var(--tp-theme-1); } .team__details-social a { display: inline-block; width: 40px; height: 40px; line-height: 38px; text-align: center; font-size: 14px; background: var(--tp-common-white); border: 1px solid #EAEAEF; } .team__details-social a:not(:last-child) { margin-right: 5px; } [dir=rtl] .team__details-social a:not(:last-child) { margin-right: 0; margin-left: 5px; } .team__details-social a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .team__details-about-border { border-bottom: 1px solid #EAEAEF; } .team__details-about-title { font-size: 40px; letter-spacing: -0.04em; margin-bottom: 16px; } .team__details-about-content p { font-size: 16px; line-height: 1.62; color: var(--tp-text-1); opacity: 0.9; margin-bottom: 25px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .team__details-about-content p br { display: none; } } .team__details-about-list ol li { font-size: 16px; color: var(--tp-text-1); opacity: 0.9; } .team__details-about-list ol li:not(:last-child) { margin-bottom: 8px; } .team__details-about-list ul li { font-size: 16px; color: var(--tp-text-1); opacity: 0.9; } .team__details-about-list ul li:not(:last-child) { margin-bottom: 8px; } .team__details-shape-1 { position: absolute; left: 13.3%; top: 34%; z-index: -1; -moz-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; } .team__details-shape-2 { position: absolute; left: 2%; top: 19%; z-index: -1; -moz-animation: tprotate 6s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 6s ease-in-out 1s forwards infinite alternate; animation: tprotate 6s ease-in-out 1s forwards infinite alternate; } .team__details-shape-3 { position: absolute; right: 15%; bottom: 14%; z-index: -1; -moz-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; } .team__details-shape-4 { position: absolute; right: 9%; top: 15%; z-index: -1; mix-blend-mode: darken; -moz-animation: tptranslateX 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 4s ease-in-out 1s forwards infinite alternate; } div.team__details-shape-4 img { margin-left: 10px; } .team-slider-dot-10 .swiper-pagination-bullet { background-color: #E2E2E2; } .team-slider-dot-10 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-10); width: 50px; } /*----------------------------------------*/ /* 12. FAQ CSS START /*----------------------------------------*/ .faq__text { position: absolute; top: 30%; left: 0; -webkit-transform: rotate(-90deg) translateY(-102px); -moz-transform: rotate(-90deg) translateY(-102px); -ms-transform: rotate(-90deg) translateY(-102px); -o-transform: rotate(-90deg) translateY(-102px); transform: rotate(-90deg) translateY(-102px); } [dir=rtl] .faq__text { left: auto; right: -13%; } .faq__text h3 { color: rgba(213, 213, 223, 0.5019607843); font-size: 200px; font-weight: 700; text-transform: uppercase; font-family: var(--tp-ff-space); position: relative; } .faq__wrapper .accordion-item { border-color: var(--tp-border-5); background-color: var(--tp-common-white); } .faq__wrapper .accordion-item:last-of-type { border-bottom: none; } .faq__wrapper .accordion-button { padding: 24px 25px 25px; font-size: 26px; font-weight: 700; color: var(--tp-common-black); font-family: var(--tp-ff-space); position: relative; -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; -o-transform: inherit; transform: inherit; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq__wrapper .accordion-button { font-size: 20px; } } .faq__wrapper .accordion-button::before { position: absolute; content: ""; left: 0; top: 35px; width: 8px; height: 8px; background-color: var(--tp-common-black); border-radius: 50%; } [dir=rtl] .faq__wrapper .accordion-button::before { left: auto; right: 0; } .faq__wrapper .accordion-button::after { content: "\f068"; display: none; } .faq__wrapper .accordion-button.collapsed::after { color: var(--tp-common-black); content: "+"; -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; -o-transform: inherit; transform: inherit; } .faq__wrapper .accordion-button:not(.collapsed) { color: var(--tp-common-black); } .faq__wrapper .accordion-button:not(.collapsed)::after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .faq__wrapper .accordion-button:not(.collapsed) .accordion-btn::before { -webkit-transform: translateX(-50%) rotate(90deg); -moz-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); -o-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); background-color: var(--tp-theme-1); } [dir=rtl] .faq__wrapper .accordion-button:not(.collapsed) .accordion-btn::before { -webkit-transform: translateX(50%) rotate(90deg); -moz-transform: translateX(50%) rotate(90deg); -ms-transform: translateX(50%) rotate(90deg); -o-transform: translateX(50%) rotate(90deg); transform: translateX(50%) rotate(90deg); } .faq__wrapper .accordion-button:not(.collapsed) .accordion-btn::after { background-color: var(--tp-theme-1); } .faq__wrapper .accordion-button .accordion-btn { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 14px; height: 14px; } [dir=rtl] .faq__wrapper .accordion-button .accordion-btn { right: auto; left: 0; } .faq__wrapper .accordion-button .accordion-btn::after { position: absolute; content: ""; width: 100%; height: 2px; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: #525258; border-radius: 2px; } [dir=rtl] .faq__wrapper .accordion-button .accordion-btn::after { right: 0; left: auto; } .faq__wrapper .accordion-button .accordion-btn::before { position: absolute; content: ""; width: 2px; height: 100%; left: 50%; top: 0; background-color: #525258; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-radius: 2px; } [dir=rtl] .faq__wrapper .accordion-button .accordion-btn::before { right: 50%; left: auto; -webkit-transform: translateX(50%); -moz-transform: translateX(50%); -ms-transform: translateX(50%); -o-transform: translateX(50%); transform: translateX(50%); } .faq__wrapper .accordion-button:hover { color: var(--tp-theme-1); } .faq__wrapper .accordion-body { padding: 0 0 15px; padding-right: 30px; padding-left: 25px; -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } [dir=rtl] .faq__wrapper .accordion-body { padding-left: 30px; padding-right: 25px; } .faq__wrapper .accordion-body p { font-size: 16px; color: var(--tp-text-1); font-family: var(--tp-ff-inter); } [dir=rtl] .faq__tab { padding-right: 0; padding-left: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq__tab { padding-right: 150px; } [dir=rtl] .faq__tab { padding-right: 0; padding-left: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq__tab { padding-right: 0; margin-bottom: 50px; } [dir=rtl] .faq__tab { padding-left: 0; } } .faq__tab .nav-link { padding: 20px 30px; text-align: left; border-radius: 40px; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; color: var(--tp-text-1); } [dir=rtl] .faq__tab .nav-link { text-align: right; } .faq__tab .nav-link span { display: inline-block; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); margin-right: 10px; color: var(--tp-theme-7); } [dir=rtl] .faq__tab .nav-link span { margin-right: 0; margin-left: 10px; } .faq__tab .nav-link.active { background-color: rgba(44, 174, 118, 0.1019607843); color: var(--tp-theme-7); } .faq__tab .nav-link:hover { color: var(--tp-theme-7); } .faq__tab-content .accordion-item { border: 1px solid rgba(4, 18, 31, 0.0784313725); border-radius: 45px; margin-bottom: 15px; background-color: var(--tp-common-white); } .faq__tab-content .accordion-item:last-of-type { border-bottom-right-radius: 45px; border-bottom-left-radius: 45px; } [dir=rtl] .faq__tab-content .accordion-item:last-of-type { border-bottom-right-radius: 0; border-bottom-left-radius: 0; border-bottom-left-radius: 45px; border-bottom-right-radius: 45px; } .faq__tab-content .accordion-button { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 20px; line-height: 24px; color: var(--tp-common-black-11); padding: 33px 34px; } @media (max-width: 575px) { .faq__tab-content .accordion-button { padding-left: 22px; padding-right: 40px; } [dir=rtl] .faq__tab-content .accordion-button { padding-left: 40px; padding-right: 22px; } } .faq__tab-content .accordion-button:not(.collapsed) { color: var(--tp-common-black-11); } .faq__tab-content .accordion-button.collapsed::after { color: var(--tp-common-black-11); } .faq__tab-content .accordion-button::after { top: 35%; right: 34px; color: var(--tp-common-black-11); } [dir=rtl] .faq__tab-content .accordion-button::after { right: auto; left: 34px; } @media (max-width: 575px) { .faq__tab-content .accordion-button::after { right: 20px; } [dir=rtl] .faq__tab-content .accordion-button::after { right: auto; left: 20px; } } .faq__tab-content .accordion-button:hover { color: var(--tp-theme-7); } .faq__tab-content .accordion-button:hover::after { color: var(--tp-theme-7); } .faq__tab-content .accordion-body { padding: 0 34px 29px; } .faq__tab-content .accordion-body.show { box-shadow: 0px 14px 50px rgba(4, 11, 17, 0.12); } .faq__tab-content .accordion-body p { font-family: var(--tp-ff-inter); font-size: 16px; line-height: 1.5; margin-bottom: 0; -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } .faq__tab-2 { border-bottom: 1px solid #EAEAEF; } .faq__tab-2 .nav-link { font-weight: 500; font-size: 15px; color: var(--tp-text-1); padding: 14px 30px; background-color: var(--tp-common-white); position: relative; border-radius: 0; } .faq__tab-2 .nav-link::after { position: absolute; content: ""; left: 0; bottom: 0; left: 0; right: 0; width: 0%; margin: auto; background-color: var(--tp-theme-1); height: 2px; } .faq__tab-2 .nav-link span { margin-right: 7px; } [dir=rtl] .faq__tab-2 .nav-link span { margin-right: 0; margin-left: 7px; } .faq__tab-2 .nav-link.active { color: var(--tp-theme-1); background-color: rgba(245, 9, 99, 0.06); } .faq__tab-2 .nav-link.active:hover { background-color: rgba(245, 9, 99, 0.06); } .faq__tab-2 .nav-link.active::after { width: 100%; } .faq__tab-2 .nav-link:hover { background-color: var(--tp-grey-16); } .faq__shape-1 { position: absolute; bottom: -8%; right: 0; z-index: -1; } .faq__title { font-size: 50px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq__title { font-size: 44px; } } .faq__title-pre { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 12px; } .faq__title-2 { padding-top: 22px; font-size: 30px; line-height: 1.13; letter-spacing: -0.04em; margin-bottom: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq__title-2 br { display: none; } } .faq__gradient-border { position: relative; } .faq__gradient-border::after, .faq__gradient-border::before { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 2px; background-image: -webkit-linear-gradient(90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: -moz-linear-gradient(90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: -o-linear-gradient(90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: linear-gradient(90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); } [dir=rtl] .faq__gradient-border::after, [dir=rtl] .faq__gradient-border::before { background-image: -webkit-linear-gradient(-90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: -moz-linear-gradient(-90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: -ms-linear-gradient(-90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: -o-linear-gradient(-90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); background-image: linear-gradient(-90deg, rgb(3, 4, 28) 0%, rgb(255, 255, 255) 100%); } .faq__gradient-border::before { top: auto; bottom: 0; } .faq__video { position: absolute; top: 60px; left: 0; width: 46%; height: calc(100% - 120px); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; } [dir=rtl] .faq__video { left: auto; right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq__video { position: relative; width: 100%; height: 560px; top: 0; } } .faq__video-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .faq__video-btn a { display: inline-block; width: 90px; height: 90px; line-height: 90px; text-align: center; background-color: var(--tp-common-white); border-radius: 50%; color: var(--tp-theme-1); } .faq__video-btn a::after, .faq__video-btn a::before { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0px 0px 40px rgba(3, 4, 28, 0.06); backdrop-filter: blur(4px); } .faq__video-btn a svg { -webkit-transform: translate(2px, -1px); -moz-transform: translate(2px, -1px); -ms-transform: translate(2px, -1px); -o-transform: translate(2px, -1px); transform: translate(2px, -1px); } .faq__style-2 { padding-right: 415px; padding-top: 95px; padding-bottom: 100px; border-left: 2px solid var(--tp-common-black); } [dir=rtl] .faq__style-2 { border-left: 0; border-right: 2px solid var(--tp-common-black); padding-right: 160px; padding-left: 415px; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .faq__style-2 { padding-right: 230px; } [dir=rtl] .faq__style-2 { padding-right: 160px; padding-left: 230px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .faq__style-2 { padding-right: 210px; } [dir=rtl] .faq__style-2 { padding-right: 160px; padding-left: 210px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .faq__style-2 { padding-right: 120px; } [dir=rtl] .faq__style-2 { padding-right: 160px; padding-left: 120px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .faq__style-2 { padding-right: 60px; padding-left: 70px; } [dir=rtl] .faq__style-2 { padding-right: 100px; padding-left: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .faq__style-2 { padding-right: 20px; padding-left: 70px; } [dir=rtl] .faq__style-2 { padding-right: 70px; padding-left: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .faq__style-2 { padding-right: 50px; padding-left: 50px; margin-top: 50px; } [dir=rtl] .faq__style-2 { padding-right: 50px; padding-left: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .faq__style-2 { padding-right: 30px; padding-left: 30px; margin-top: 50px; } [dir=rtl] .faq__style-2 { padding-right: 30px; padding-left: 30px; } } @media (max-width: 575px) { .faq__style-2 { padding-right: 20px; padding-left: 20px; margin-top: 50px; } [dir=rtl] .faq__style-2 { padding-right: 20px; padding-left: 20px; } } .faq__style-2 .accordion-item { border-bottom: 1px solid #E7E7E7; padding-top: 25px; padding-bottom: 25px; } .faq__style-2 .accordion-item:first-child { border-top: 1px solid #E7E7E7; } .faq__style-2 .accordion-item:first-of-type { border-radius: 0; } .faq__style-2 .accordion-button { font-weight: 500; font-size: 18px; letter-spacing: -0.02em; color: var(--tp-common-black); padding-top: 0; padding-bottom: 0; } .faq__style-2 .accordion-button::after { display: none; } .faq__style-2 .accordion-button .accordion-btn { position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 14px; height: 14px; } [dir=rtl] .faq__style-2 .accordion-button .accordion-btn { right: auto; left: 0; } .faq__style-2 .accordion-button .accordion-btn::after { position: absolute; content: ""; width: 100%; height: 2px; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tp-common-black); border-radius: 2px; } .faq__style-2 .accordion-button .accordion-btn::before { position: absolute; content: ""; width: 2px; height: 100%; left: 50%; top: 0; background-color: var(--tp-common-black); -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); border-radius: 2px; } .faq__style-2 .accordion-button:not(.collapsed) { color: var(--tp-theme-1); } .faq__style-2 .accordion-button:not(.collapsed) .accordion-btn::before { -webkit-transform: translateX(-50%) rotate(90deg); -moz-transform: translateX(-50%) rotate(90deg); -ms-transform: translateX(-50%) rotate(90deg); -o-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); background-color: var(--tp-theme-1); } .faq__style-2 .accordion-button:not(.collapsed) .accordion-btn::after { background-color: var(--tp-theme-1); } .faq__style-2 .accordion-body { padding-top: 24px; padding-bottom: 0; } .faq__style-2 .accordion-body p { font-size: 15px; line-height: 1.6; color: var(--tp-text-1); margin-bottom: 2px; padding-right: 50px; } [dir=rtl] .faq__style-2 .accordion-body p { padding-right: 0; padding-left: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .faq__style-2 .accordion-body p { padding-right: 0; } [dir=rtl] .faq__style-2 .accordion-body p { padding-left: 0; padding-right: 0; } } .faq__style-3 .section__title-pre-7 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--tp-common-black); text-transform: uppercase; } .faq__style-3 .section__title-7 { font-family: var(--tp-ff-space); font-size: 50px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 11px; } .faq__style-3 .faq__tab .nav-link { border-radius: 0; background: rgba(255, 255, 255, 0.06); border: 1px solid #EAEAEF; color: var(--tp-text-1); } .faq__style-3 .faq__tab .nav-link:not(:last-child) { margin-bottom: 8px; } .faq__style-3 .faq__tab .nav-link span { color: var(--tp-text-1); } .faq__style-3 .faq__tab .nav-link.active { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .faq__style-3 .faq__tab .nav-link.active span { color: var(--tp-common-white); } .faq__style-3 .faq__tab-content .accordion-body { padding-bottom: 34px; } .faq__style-3 .faq__tab-content .accordion-item { background: var(--tp-common-white); border: 1px solid rgba(4, 18, 31, 0.08); border-radius: 0; } .faq__style-3 .faq__tab-content .accordion-button { font-family: var(--tp-ff-space); font-size: 20px; font-weight: 500; color: var(--tp-common-black-11); } .faq__style-3 .faq__tab-content .accordion-button:hover { color: var(--tp-theme-1); } .faq__style-3 .faq__tab-content .accordion-button:hover::after { color: var(--tp-theme-1); } .faq__style-4 .accordion-item { border-bottom: 1px solid #E7E7E7; padding-top: 27px; padding-bottom: 27px; } .faq__style-4 .accordion-item:first-of-type { border-radius: 0; } .faq__style-4 .accordion-item:last-of-type { border-bottom: 1px solid #E7E7E7; } .faq__style-4 .accordion-button { font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--tp-common-black); padding-top: 0; padding-bottom: 0; } .faq__style-4 .accordion-button::before { width: 6px; height: 6px; top: 9px; } .faq__style-4 .accordion-body { padding-top: 24px; padding-bottom: 10px; } .faq__style-4 .accordion-body p { font-size: 16px; padding-right: 85px; } [dir=rtl] .faq__style-4 .accordion-body p { padding-right: 0; padding-left: 85px; } @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__style-4 .accordion-body p { padding-right: 0; } [dir=rtl] .faq__style-4 .accordion-body p { padding-left: 0; } } /*----------------------------------------*/ /* 13. PORTFOLIO CSS START /*----------------------------------------*/ .portfolio__item { position: relative; z-index: 1; min-height: 650px; } .portfolio__item:hover .portfolio__thumb { -webkit-transform: translate3d(0px, 0, 0px) scale3d(0.955, 0.975, 1) skew(0deg); -moz-transform: translate3d(0px, 0, 0px) scale3d(0.955, 0.975, 1) skew(0deg); -ms-transform: translate3d(0px, 0, 0px) scale3d(0.955, 0.975, 1) skew(0deg); -o-transform: translate3d(0px, 0, 0px) scale3d(0.955, 0.975, 1) skew(0deg); transform: translate3d(0px, 0, 0px) scale3d(0.955, 0.975, 1) skew(0deg); } .portfolio__item:hover .portfolio__thumb::after { opacity: 0.6; } .portfolio__item:hover .portfolio__text { bottom: 20px; visibility: visible; opacity: 1; } .portfolio__item-2 { position: relative; z-index: 1; padding: 0 100px; padding-right: 0; } [dir=rtl] .portfolio__item-2 { direction: ltr; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__item-2 { padding: 0 40px; } } @media (max-width: 575px) { .portfolio__item-2 { padding: 0 15px; } } .portfolio__item-2::after, .portfolio__item-2::before { position: absolute; content: ""; bottom: 0; left: auto; right: 0; width: 100%; height: 6px; background-color: #C7E4E4; } .portfolio__item-2::before { width: 0; background-color: var(--tp-theme-2); z-index: 1; } .portfolio__item-2:hover::before { width: 100%; right: auto; left: 0; } .portfolio__item-2.portfolio__item-2-content-right { padding-left: 30px; } .portfolio__item-2.portfolio__item-2-content-right .portfolio__content-2 { padding-left: 70px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__item-2.portfolio__item-2-content-right .portfolio__content-2 { margin-top: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__item-2.portfolio__item-2-content-right .portfolio__content-2 { padding-left: 0; } } @media (max-width: 575px) { .portfolio__item-2.portfolio__item-2-content-right .portfolio__content-2 { padding-left: 0; } } .portfolio__item-2.has-green { background-color: var(--tp-common-green-light-2); } .portfolio__item-2.has-purple { background-color: var(--tp-common-purple-light); } .portfolio__item-2.has-purple::after { background-color: #DBE1FC; } .portfolio__item-2.has-purple::before { background-color: var(--tp-common-purple-2); } .portfolio__item-2.has-purple .tp-btn-white:hover { background-color: var(--tp-common-purple-2); } .portfolio__item-2.has-purple .portfolio__icon-2 span { background-color: var(--tp-common-purple-2); } .portfolio__item-2.has-purple .portfolio__title-2:hover a { color: var(--tp-common-purple-2); } .portfolio__item-2.has-pink { background-color: var(--tp-common-pink-light); } .portfolio__item-2.has-pink::after { background-color: #FFD6DD; } .portfolio__item-2.has-pink::before { background-color: var(--tp-common-pink); } .portfolio__item-2.has-pink .tp-btn-white:hover { background-color: var(--tp-common-pink); } .portfolio__item-2.has-pink .portfolio__icon-2 span { background-color: var(--tp-common-pink); } .portfolio__item-2.has-pink .portfolio__title-2:hover a { color: var(--tp-common-pink); } .portfolio__item-3 { position: relative; z-index: 1; min-height: 600px; overflow: hidden; } .portfolio__item-3:hover .portfolio__thumb-3::before { opacity: 0.7; } .portfolio__item-3:hover .portfolio__content-3 { bottom: 50px; } .portfolio__item-3:hover .portfolio__meta-3 { visibility: visible; opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .portfolio__item-5 { position: relative; z-index: 1; min-height: 550px; overflow: hidden; border-radius: 10px; overflow: hidden; } .portfolio__item-5::after { position: absolute; content: ""; left: 15px; top: 15px; right: 15px; bottom: 15px; background-color: #fff; border-radius: 10px; opacity: 0; -webkit-transform: perspective(600px) rotateY(20deg); -moz-transform: perspective(600px) rotateY(20deg); -ms-transform: perspective(600px) rotateY(20deg); -o-transform: perspective(600px) rotateY(20deg); transform: perspective(600px) rotateY(20deg); } .portfolio__item-5:hover::after { visibility: visible; opacity: 0.95; -webkit-transform: perspective(600px) rotateY(0deg); -moz-transform: perspective(600px) rotateY(0deg); -ms-transform: perspective(600px) rotateY(0deg); -o-transform: perspective(600px) rotateY(0deg); transform: perspective(600px) rotateY(0deg); } .portfolio__item-5:hover .portfolio__title-5 { transition-delay: 0.2s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .portfolio__item-5:hover .portfolio__tag-5 { bottom: 15px; visibility: visible; opacity: 1; transition-delay: 0.3s; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; } .portfolio__item-5:hover .portfolio__view-5 { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); visibility: visible; opacity: 1; } .portfolio__item-6 { filter: blur(5px); opacity: 0.5; transform: scale(0.98); } .portfolio__item-6:hover, .portfolio__item-6.active { filter: blur(0); opacity: 1; transform: scale(1); } .portfolio__item-6:hover { transform: scale(1.05); } div.portfolio__item-8 { height: 700px; position: relative; border-right: 1px solid rgba(255, 255, 255, 0.2); overflow: hidden; } div.portfolio__item-8:hover .portfolio__content-8::after, div.portfolio__item-8.active .portfolio__content-8::after { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); transition-delay: 0s; transition: transform 0.85s cubic-bezier(0.23, 1, 0.32, 1); } div.portfolio__item-9 { position: relative; height: 480px; } div.portfolio__item-9:hover .portfolio__content-9::after { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0s; } div.portfolio__item-9:hover .portfolio__tag-9 span { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.2s; } div.portfolio__item-9:hover .portfolio__title-9 { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); visibility: visible; opacity: 1; transition-delay: 0.4s; } .portfolio__thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; transform-style: preserve-3d; } .portfolio__thumb::after { position: absolute; content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background-color: var(--tp-common-black); opacity: 0.2; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .portfolio__thumb-2.portfolio-thumb-2 { margin-top: -60px; } .portfolio__thumb-2 .portfolio-2-1 { margin-top: -20px; margin-bottom: -230px; -webkit-transform: rotate(-25deg); -moz-transform: rotate(-25deg); -ms-transform: rotate(-25deg); -o-transform: rotate(-25deg); transform: rotate(-25deg); -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInRightPortfolio1; animation-name: fadeInRightPortfolio1; } .portfolio__thumb-2 .portfolio-2-2 { margin-top: -375px; margin-left: 200px; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInRightPortfolio2; animation-name: fadeInRightPortfolio2; animation-delay: 0.5s; -webkit-transform: rotate(-25deg) translate(-30px, 169px); -moz-transform: rotate(-25deg) translate(-30px, 169px); -ms-transform: rotate(-25deg) translate(-30px, 169px); -o-transform: rotate(-25deg) translate(-30px, 169px); transform: rotate(-25deg) translate(-30px, 169px); } @media (max-width: 575px) { .portfolio__thumb-2 .portfolio-2-2 { -webkit-transform: rotate(-25deg) translate(-200px, 169px); -moz-transform: rotate(-25deg) translate(-200px, 169px); -ms-transform: rotate(-25deg) translate(-200px, 169px); -o-transform: rotate(-25deg) translate(-200px, 169px); transform: rotate(-25deg) translate(-200px, 169px); } } .portfolio__thumb-2 .portfolio-2-3 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInRightPortfolio3; animation-name: fadeInRightPortfolio3; animation-delay: 1s; -webkit-transform: translate(-66px, 107px) rotate(25deg); -moz-transform: translate(-66px, 107px) rotate(25deg); -ms-transform: translate(-66px, 107px) rotate(25deg); -o-transform: translate(-66px, 107px) rotate(25deg); transform: translate(-66px, 107px) rotate(25deg); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__thumb-2 .portfolio-2-3 { -webkit-transform: translate(-79px, 93px) rotate(25deg); -moz-transform: translate(-79px, 93px) rotate(25deg); -ms-transform: translate(-79px, 93px) rotate(25deg); -o-transform: translate(-79px, 93px) rotate(25deg); transform: translate(-79px, 93px) rotate(25deg); } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__thumb-2 .portfolio-2-3 { -webkit-transform: translate(-202px, 50px) rotate(25deg); -moz-transform: translate(-202px, 50px) rotate(25deg); -ms-transform: translate(-202px, 50px) rotate(25deg); -o-transform: translate(-202px, 50px) rotate(25deg); transform: translate(-202px, 50px) rotate(25deg); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__thumb-2 .portfolio-2-3 { -webkit-transform: translate(15px, 149px) rotate(25deg); -moz-transform: translate(15px, 149px) rotate(25deg); -ms-transform: translate(15px, 149px) rotate(25deg); -o-transform: translate(15px, 149px) rotate(25deg); transform: translate(15px, 149px) rotate(25deg); } } .portfolio__thumb-2 .portfolio-2-4 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInRightPortfolio4; animation-name: fadeInRightPortfolio4; animation-delay: 1s; margin-bottom: 30px; -webkit-transform: translate(7px, 120px) rotate(25deg); -moz-transform: translate(7px, 120px) rotate(25deg); -ms-transform: translate(7px, 120px) rotate(25deg); -o-transform: translate(7px, 120px) rotate(25deg); transform: translate(7px, 120px) rotate(25deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__thumb-2 .portfolio-2-4 { -webkit-transform: translate(-70px, 120px) rotate(25deg); -moz-transform: translate(-70px, 120px) rotate(25deg); -ms-transform: translate(-70px, 120px) rotate(25deg); -o-transform: translate(-70px, 120px) rotate(25deg); transform: translate(-70px, 120px) rotate(25deg); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__thumb-2 .portfolio-2-4 { -webkit-transform: translate(207px, 3px) rotate(25deg); -moz-transform: translate(207px, 3px) rotate(25deg); -ms-transform: translate(207px, 3px) rotate(25deg); -o-transform: translate(207px, 3px) rotate(25deg); transform: translate(207px, 3px) rotate(25deg); } } @media (max-width: 575px) { .portfolio__thumb-2 .portfolio-2-4 { -webkit-transform: translate(-10px, 0) rotate(25deg); -moz-transform: translate(-10px, 0) rotate(25deg); -ms-transform: translate(-10px, 0) rotate(25deg); -o-transform: translate(-10px, 0) rotate(25deg); transform: translate(-10px, 0) rotate(25deg); } } .portfolio__thumb-2 .portfolio-2-5 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInRightPortfolio5; animation-name: fadeInRightPortfolio5; animation-delay: 1.2s; -webkit-transform: translate(-105px, 88px) rotate(25deg); -moz-transform: translate(-105px, 88px) rotate(25deg); -ms-transform: translate(-105px, 88px) rotate(25deg); -o-transform: translate(-105px, 88px) rotate(25deg); transform: translate(-105px, 88px) rotate(25deg); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__thumb-2 .portfolio-2-5 { -webkit-transform: translate(-180px, 88px) rotate(25deg); -moz-transform: translate(-180px, 88px) rotate(25deg); -ms-transform: translate(-180px, 88px) rotate(25deg); -o-transform: translate(-180px, 88px) rotate(25deg); transform: translate(-180px, 88px) rotate(25deg); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__thumb-2 .portfolio-2-5 { -webkit-transform: translate(0px, -78px) rotate(25deg); -moz-transform: translate(0px, -78px) rotate(25deg); -ms-transform: translate(0px, -78px) rotate(25deg); -o-transform: translate(0px, -78px) rotate(25deg); transform: translate(0px, -78px) rotate(25deg); } } @media (max-width: 575px) { .portfolio__thumb-2 .portfolio-2-5 { -webkit-transform: translate(5px, 8px) rotate(25deg); -moz-transform: translate(5px, 8px) rotate(25deg); -ms-transform: translate(5px, 8px) rotate(25deg); -o-transform: translate(5px, 8px) rotate(25deg); transform: translate(5px, 8px) rotate(25deg); } } .portfolio__thumb-2 .portfolio-2-6 { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-name: fadeInRightPortfolio6; animation-name: fadeInRightPortfolio6; animation-delay: 1s; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } div.portfolio__thumb-2 img { max-width: inherit; } .portfolio__thumb-3 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-position: center; background-size: cover; background-repeat: no-repeat; } .portfolio__thumb-3::after { position: absolute; content: ""; top: 0; left: 0; right: auto; width: 100%; height: 100%; -webkit-transform: translate(0%, 0%); -moz-transform: translate(0%, 0%); -ms-transform: translate(0%, 0%); -o-transform: translate(0%, 0%); transform: translate(0%, 0%); background-color: var(--tp-common-black); opacity: 0.2; } .portfolio__thumb-3::before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(47.17deg, #EC1B98 36.14%, #2FA7FF 75.88%); background-image: -moz-linear-gradient(47.17deg, #EC1B98 36.14%, #2FA7FF 75.88%); background-image: -ms-linear-gradient(47.17deg, #EC1B98 36.14%, #2FA7FF 75.88%); background-image: -o-linear-gradient(47.17deg, #EC1B98 36.14%, #2FA7FF 75.88%); background-image: linear-gradient(47.17deg, #EC1B98 36.14%, #2FA7FF 75.88%); opacity: 0; } .portfolio__thumb-5 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-position: center; background-size: cover; background-repeat: no-repeat; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__thumb-6 img { width: 100%; } } #portfolio-bg-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-black-12); } #portfolio-bg-img .portfolio-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; visibility: hidden; opacity: 0; transition: all 1s cubic-bezier(0.23, 1, 0.32, 1); -webkit-transform: scale(1.025); -moz-transform: scale(1.025); -ms-transform: scale(1.025); -o-transform: scale(1.025); transform: scale(1.025); } #portfolio-bg-img .portfolio-bg::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(5, 6, 17, 0.5); } #portfolio-bg-img.portfolio-img-0 .portfolio-img-0 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-1 .portfolio-img-1 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-2 .portfolio-img-2 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-3 .portfolio-img-3 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-4 .portfolio-img-4 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-5 .portfolio-img-5 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-6 .portfolio-img-6 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-7 .portfolio-img-7 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-8 .portfolio-img-8 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-9 .portfolio-img-9 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-10 .portfolio-img-10 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-11 .portfolio-img-11 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-12 .portfolio-img-12 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-13 .portfolio-img-13 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-14 .portfolio-img-14 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-15 .portfolio-img-15 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-16 .portfolio-img-16 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-17 .portfolio-img-17 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-18 .portfolio-img-18 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-19 .portfolio-img-19 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-20 .portfolio-img-20 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-21 .portfolio-img-21 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-22 .portfolio-img-22 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-23 .portfolio-img-23 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } #portfolio-bg-img.portfolio-img-24 .portfolio-img-24 { visibility: visible; opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .portfolio__thumb-9 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } .portfolio__tag span { font-size: 12px; font-weight: 700; font-family: var(--tp-ff-space); text-transform: uppercase; color: var(--tp-common-white); letter-spacing: 3px; position: relative; padding-left: 12px; } [dir=rtl] .portfolio__tag span { padding-right: 12px; padding-left: 0; } .portfolio__tag span::after { position: absolute; content: ""; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 6px; height: 6px; background-color: var(--tp-theme-1); border-radius: 50%; } [dir=rtl] .portfolio__tag span::after { left: auto; right: 0; } .portfolio__tag-2 a { display: inline-block; font-size: 14px; font-weight: 500; font-family: var(--tp-ff-inter); color: var(--tp-common-black-solid); border: 1px solid rgba(3, 4, 28, 0.08); padding: 6px 12px 6px; line-height: 1; margin-bottom: 14px; margin-right: 5px; } [dir=rtl] .portfolio__tag-2 a { margin-right: 0; margin-left: 5px; } .portfolio__tag-2 a:hover { background-color: var(--tp-common-black); border-color: var(--tp-common-black); color: var(--tp-common-white); } .portfolio__tag-3 { margin-bottom: 2px; } .portfolio__tag-3 span { font-size: 13px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); text-transform: uppercase; padding-left: 12px; position: relative; } [dir=rtl] .portfolio__tag-3 span { padding-left: 0; padding-right: 12px; } .portfolio__tag-3 span::after { position: absolute; content: ""; left: 0; top: 50%; width: 2px; height: 16px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tp-common-white); } [dir=rtl] .portfolio__tag-3 span::after { left: auto; right: 0; } .portfolio__tag-4 { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 15px; } .portfolio__tag-5 { visibility: hidden; opacity: 0; transition-delay: 0s; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); } .portfolio__tag-9 { margin-bottom: 5px; } .portfolio__tag-9 span { display: inline-block; font-family: var(--tp-ff-syne); font-weight: 700; font-size: 13px; line-height: 12px; text-transform: uppercase; color: var(--tp-common-black-solid); position: relative; padding-left: 13px; visibility: hidden; opacity: 0; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); transition-delay: 0.2s; } [dir=rtl] .portfolio__tag-9 span { padding-left: 0; padding-right: 13px; } .portfolio__tag-9 span::after { position: absolute; content: ""; left: 0; top: 40%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 20px; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); } [dir=rtl] .portfolio__tag-9 span::after { left: auto; right: 0; } .portfolio__icon-2 { margin-bottom: 32px; } .portfolio__icon-2 span { display: inline-block; width: 70px; height: 70px; line-height: 65px; text-align: center; background-color: var(--tp-theme-2); font-size: 30px; color: var(--tp-common-white); border-radius: 50%; } .portfolio__icon-2 span svg path { fill: currentColor; } .portfolio__title { font-size: 28px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__title { font-size: 25px; } } @media (max-width: 575px) { .portfolio__title { font-size: 26px; } } .portfolio__title-2 { color: var(--tp-common-black); font-weight: 600; font-size: 34px; font-family: var(--tp-ff-oswald); margin-bottom: 42px; } @media (max-width: 575px) { .portfolio__title-2 { font-size: 28px; } } .portfolio__title-2 a:hover { color: var(--tp-theme-2); } .portfolio__title-3 { font-size: 34px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); margin-bottom: 25px; } .portfolio__title-3 a { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .portfolio__title-3 a:hover { background-size: 0 1px, 100% 1px; } .portfolio__title-5 { font-family: var(--tp-ff-space); font-size: 28px; letter-spacing: -0.04em; margin-bottom: 0; -webkit-transform: translateY(40px); -moz-transform: translateY(40px); -ms-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); visibility: hidden; opacity: 0; } .portfolio__title-5 a:hover { color: var(--tp-theme-5); } .portfolio__title-8 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 30px; margin-bottom: 0; color: var(--tp-common-white); } .portfolio__title-8 a:hover { color: var(--tp-theme-8); } .portfolio__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 26px; line-height: 1; color: var(--tp-common-black-solid); -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); visibility: hidden; opacity: 0; transition-delay: 0s; } @media (max-width: 575px) { .portfolio__title-9 { line-height: 1.16; } } .portfolio__title-9 a { background-image: linear-gradient(#03041C, #03041C), linear-gradient(#03041C, #03041C); background-size: 0% 1.5px, 0 1.5px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .portfolio__title-9 a:hover { background-size: 0 1.5px, 100% 1.5px; } .portfolio__content { position: absolute; top: 40px; left: 40px; right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__content { left: 30px; right: 30px; } } @media (max-width: 575px) { .portfolio__content { left: 20px; right: 20px; } } .portfolio__content-2 { padding: 71px 0 73px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__content-2 { padding: 40px 0; } } .portfolio__content-3 { position: absolute; left: 50px; bottom: -16px; transition-duration: 0.3s; z-index: 1; } [dir=rtl] .portfolio__content-3 { right: 50px; left: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .portfolio__content-3 { left: 20px; } [dir=rtl] .portfolio__content-3 { left: auto; right: 0; } } .portfolio__content-5 { position: absolute; left: 15px; right: 15px; bottom: 15px; z-index: 1; padding-left: 43px; padding-right: 43px; padding-bottom: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__content-5 { left: 8px; right: 8px; padding-left: 30px; padding-right: 30px; } } .portfolio__content-8 { position: absolute; left: 0; right: 0; bottom: 0; padding: 50px 60px; background-color: transparent; z-index: 1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__content-8 { padding: 40px 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .portfolio__content-8 { padding: 30px 40px; } } .portfolio__content-8::after { position: absolute; content: ""; left: 0; top: 0; bottom: auto; width: 100%; height: 100%; background-color: var(--tp-common-black-12); z-index: -1; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform: translateY(100%); transform: translateY(100%); transition: transform 0.65s cubic-bezier(0.755, 0.05, 0.855, 0.06); } .portfolio__content-9 { position: absolute; left: 35px; right: 35px; bottom: 30px; padding: 20px 35px 21px; background-color: transparent; z-index: 1; } @media (max-width: 575px) { .portfolio__content-9 { padding: 20px; left: 20px; right: 20px; } } .portfolio__content-9::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); -webkit-transform: translateY(15px); -moz-transform: translateY(15px); -ms-transform: translateY(15px); -o-transform: translateY(15px); transform: translateY(15px); opacity: 0; visibility: hidden; z-index: -1; transition-delay: 0.4s; } .portfolio__text { position: absolute; bottom: -20px; left: 40px; right: 40px; visibility: hidden; opacity: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .portfolio__text { left: 30px; right: 30px; } } @media (max-width: 575px) { .portfolio__text { left: 20px; right: 20px; } } .portfolio__text p { font-size: 16px; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .portfolio__shape-1 { position: absolute; z-index: -1; top: 6%; right: 8%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__shape-1 { top: 48%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__shape-1 { top: 39%; } } @media (max-width: 575px) { .portfolio__shape-1 { top: 52%; } } .portfolio__shape-2 { position: absolute; z-index: -1; top: 10%; left: 18%; } .portfolio__shape-3 { position: absolute; z-index: -1; top: 0%; right: 0%; } .portfolio__shape-4 { position: absolute; z-index: -1; top: 17%; right: 26%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__shape-4 { right: 10%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__shape-4 { top: 55%; right: 33%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__shape-4 { top: 42%; } } @media (max-width: 575px) { .portfolio__shape-4 { top: 48%; } } .portfolio__shape-5 { position: absolute; top: 8%; left: 10%; z-index: -1; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px) { .portfolio__shape-5 { left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__shape-5 { left: 0; width: 100%; } } .portfolio__shape-6 { position: absolute; top: 14%; left: 21%; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } .portfolio__shape-7 { position: absolute; top: 18%; right: 8%; -webkit-animation: tpupdown 2s infinite alternate; animation: tpupdown 2s infinite alternate; } .portfolio__shape-8 { position: absolute; left: 45%; top: 17%; z-index: -1; -moz-animation: tpswing 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpswing 1s ease-in-out 1s forwards infinite alternate; animation: tpswing 1s ease-in-out 1s forwards infinite alternate; transform-origin: top left; } .portfolio__shape-9 { position: absolute; left: 10%; top: 20%; z-index: -1; -moz-animation: tprotate 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 1s ease-in-out 1s forwards infinite alternate; animation: tprotate 1s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-10 { position: absolute; right: 8%; top: 9%; z-index: -1; -moz-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-11 { position: absolute; left: 8%; bottom: 10%; z-index: -1; -moz-animation: tpleftright 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpleftright 1s ease-in-out 1s forwards infinite alternate; animation: tpleftright 1s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-12 { position: absolute; right: 13%; top: 23%; z-index: -1; -moz-animation: tprotate 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 1s ease-in-out 1s forwards infinite alternate; animation: tprotate 1s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-13 { position: absolute; z-index: -1; top: 10%; right: -7%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__shape-13 { right: -30%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__shape-13 { right: -50%; } } .portfolio__shape-14 { position: absolute; z-index: -1; top: 27%; left: -6%; } .portfolio__shape-15 { position: absolute; z-index: -1; top: 8%; left: 4%; } .portfolio__shape-16 { position: absolute; z-index: -1; top: 14%; left: 18%; -moz-animation: tptranslateX 5s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 5s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 5s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-17 { position: absolute; z-index: -1; top: 14%; right: 23%; -moz-animation: tptranslateY2 8s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 8s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 8s ease-in-out 1s forwards infinite alternate; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__shape-17 { right: 10%; } } .portfolio__shape-18 { position: absolute; z-index: -1; top: 4%; right: 10%; -moz-animation: tprotate 5s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 5s ease-in-out 1s forwards infinite alternate; animation: tprotate 5s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-19 { position: absolute; z-index: -1; top: 23%; left: 10%; -moz-animation: tprotate 8s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 8s ease-in-out 1s forwards infinite alternate; animation: tprotate 8s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-20 { position: absolute; z-index: -1; top: 18%; left: 14%; -moz-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__shape-20 { top: 24%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__shape-20 { left: 6%; } } @media (max-width: 575px) { .portfolio__shape-20 { display: none; } } .portfolio__shape-21 { position: absolute; z-index: -1; top: 15%; right: 8%; -moz-animation: tptranslateX 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 4s ease-in-out 1s forwards infinite alternate; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__shape-21 { top: 20%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__shape-21 { right: 4%; } } @media (max-width: 575px) { .portfolio__shape-21 { display: none; } } .portfolio__shape-22 { position: absolute; z-index: -1; top: 4%; left: 6%; -moz-animation: tprotate 8s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 8s ease-in-out 1s forwards infinite alternate; animation: tprotate 8s ease-in-out 1s forwards infinite alternate; } .portfolio__shape-23 { position: absolute; z-index: -1; top: 10%; right: 23%; -moz-animation: tprotate 8s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 8s ease-in-out 1s forwards infinite alternate; animation: tprotate 8s ease-in-out 1s forwards infinite alternate; } .portfolio__overlay { position: relative; z-index: 1; } .portfolio__overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 100%); z-index: -1; } .portfolio__overlay-5 { position: relative; z-index: 1; } .portfolio__overlay-5::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 65%; background-color: var(--tp-grey-7); z-index: -1; } .portfolio__overlay-9 { position: relative; z-index: 1; } .portfolio__overlay-9::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 50%; background-color: var(--tp-grey-12); z-index: -1; } .portfolio__meta-3 { visibility: hidden; opacity: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); transition-duration: 0.5s; } .portfolio__meta-3 span { margin-right: 5px; margin-bottom: 5px; display: inline-block; display: inline-block; font-size: 12px; font-weight: 500; color: var(--tp-common-white); background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); border-radius: 20px; padding: 1px 20px; } [dir=rtl] .portfolio__meta-3 span { margin-right: 0; margin-left: 5px; } .portfolio__meta-3 span i { margin-right: 3px; } [dir=rtl] .portfolio__meta-3 span i { margin-right: 0; margin-left: 3px; } .portfolio__meta-3 span svg { margin-right: 5px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .portfolio__meta-3 span svg { margin-right: 0; margin-left: 5px; } .portfolio__meta-3 span a:hover { background-color: var(--tp-common-black-5); color: var(--tp-common-white); } .portfolio__meta-8 { margin-bottom: 5px; } .portfolio__meta-8 span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; color: var(--tp-common-white); display: inline-block; position: relative; padding-right: 16px; margin-right: 8px; } .portfolio__meta-8 span:last-child { padding-right: 0; margin-right: 0; } .portfolio__meta-8 span:last-child::after { display: none; } .portfolio__meta-8 span::after { position: absolute; content: ""; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 4px; height: 4px; border-radius: 50%; background-color: #D9D9D9; } [dir=rtl] .portfolio__meta-8 span::after { right: auto; left: 0; } .portfolio__meta-8 span a:hover { color: var(--tp-theme-8); } .portfolio__slider .slick-list { margin: 0 -16px; overflow: visible; } .portfolio__slider .slick-slide { margin: 0 16px; } .portfolio__slider-5 .portfolio-slider-dot-5 { text-align: center; margin-top: 40px; } .portfolio__slider-5 .portfolio-slider-dot-5 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-5); } .portfolio__slider-5 .portfolio-slider-dot-5 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-theme-5); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__slider-6 { margin-top: 50px; } } .portfolio__slider-9.has-scrollbar .portfolio__nav-9 button { top: 44%; } .portfolio__slider-9 .tp-scrollbar { background-color: #CDCDCD; height: 1px; margin-left: 370px; margin-right: 370px; } .portfolio__slider-9 .tp-scrollbar .swiper-scrollbar-drag { background-color: var(--tp-common-black); height: 3px; border-radius: 0; } .portfolio__slider-9 .tp-scrollbar .swiper-scrollbar-drag:hover { cursor: pointer; } .portfolio__view-5 { position: absolute; top: 45px; right: 45px; z-index: 1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } [dir=rtl] .portfolio__view-5 { right: auto; left: 45px; } .portfolio__view-5 .portfolio-plus-btn { display: inline-block; height: 50px; width: 50px; line-height: 46px; text-align: center; border: 2px solid rgba(3, 4, 28, 0.1); color: var(--tp-common-black); border-radius: 50%; font-size: 16px; } .portfolio__view-5 .portfolio-plus-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); border-color: var(--tp-theme-5); } .portfolio__nav-5 button { position: absolute; top: 50%; left: 15%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; display: inline-block; width: 70px; height: 70px; line-height: 70px; text-align: center; color: var(--tp-common-black); background-color: var(--tp-common-white); border-radius: 50%; font-size: 18px; box-shadow: 0px 30px 50px rgba(3, 4, 28, 0.2); } [dir=rtl] .portfolio__nav-5 button { left: auto; right: 15%; } @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) { .portfolio__nav-5 button { left: 5%; } [dir=rtl] .portfolio__nav-5 button { left: auto; right: 5%; } } .portfolio__nav-5 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); } .portfolio__nav-5 button.portfolio-button-next-5 { left: auto; right: 15%; } [dir=rtl] .portfolio__nav-5 button.portfolio-button-next-5 { left: 15%; right: auto; } @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) { .portfolio__nav-5 button.portfolio-button-next-5 { right: 5%; } [dir=rtl] .portfolio__nav-5 button.portfolio-button-next-5 { right: auto; left: 5%; } } .portfolio__nav-8 button { position: absolute; left: 60px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 60px; height: 60px; line-height: 56px; text-align: center; color: var(--tp-common-white); background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.1); z-index: 9; } [dir=rtl] .portfolio__nav-8 button { left: auto; right: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__nav-8 button { left: 25px; } [dir=rtl] .portfolio__nav-8 button { left: auto; right: 25px; } } @media (max-width: 575px) { .portfolio__nav-8 button { width: 40px; height: 40px; line-height: 36px; top: 10%; left: 20px; font-size: 14px; } [dir=rtl] .portfolio__nav-8 button { left: auto; right: 20px; } } .portfolio__nav-8 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); border-color: var(--tp-theme-8); } .portfolio__nav-8 button.portfolio-button-next-8 { left: auto; right: 60px; } [dir=rtl] .portfolio__nav-8 button.portfolio-button-next-8 { left: 60px; right: auto; } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__nav-8 button.portfolio-button-next-8 { right: 25px; } [dir=rtl] .portfolio__nav-8 button.portfolio-button-next-8 { right: auto; left: 25px; } } @media (max-width: 575px) { .portfolio__nav-8 button.portfolio-button-next-8 { right: auto; left: 70px; } [dir=rtl] .portfolio__nav-8 button.portfolio-button-next-8 { right: 70px; left: auto; } } .portfolio__nav-9 button { position: absolute; left: 20%; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; color: var(--tp-common-black); background-color: var(--tp-common-white); z-index: 9; } [dir=rtl] .portfolio__nav-9 button { left: auto; right: 20%; } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .portfolio__nav-9 button { left: 27%; } [dir=rtl] .portfolio__nav-9 button { left: auto; right: 27%; } } @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) { .portfolio__nav-9 button { left: 25px; } [dir=rtl] .portfolio__nav-9 button { left: auto; right: 25px; } } @media (max-width: 575px) { .portfolio__nav-9 button { width: 40px; height: 40px; line-height: 36px; top: 10%; left: 20px; font-size: 14px; } [dir=rtl] .portfolio__nav-9 button { left: auto; right: 20px; } } .portfolio__nav-9 button:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .portfolio__nav-9 button.portfolio-button-next-9 { left: auto; right: 20%; } [dir=rtl] .portfolio__nav-9 button.portfolio-button-next-9 { left: 20%; right: auto; } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .portfolio__nav-9 button.portfolio-button-next-9 { right: 27%; } [dir=rtl] .portfolio__nav-9 button.portfolio-button-next-9 { right: auto; left: 27%; } } @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) { .portfolio__nav-9 button.portfolio-button-next-9 { right: 25px; } [dir=rtl] .portfolio__nav-9 button.portfolio-button-next-9 { right: auto; left: 25px; } } .portfolio__bg-6 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-blend-mode: hard-light; opacity: 0.1; z-index: -1; } .portfolio__grid-item:hover .portfolio__grid-category { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; transition-delay: 0s; } .portfolio__grid-item:hover .portfolio__grid-show-project { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); opacity: 1; transition-delay: 0s; } .portfolio__grid-item:hover .portfolio__grid-popup { -webkit-transform: translate(-50%, -50%) scale(1); -moz-transform: translate(-50%, -50%) scale(1); -ms-transform: translate(-50%, -50%) scale(1); -o-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); visibility: visible; opacity: 1; } div.portfolio__grid-thumb:not(.tp-protfolio-masonary) { height: 403px; position: relative; } div.portfolio__grid-thumb:not(.tp-protfolio-masonary) img { height: 100%; object-fit: cover; } div.portfolio__grid-thumb:not(.tp-protfolio-masonary) .tp-img-reveal-wrapper { width: auto; } .portfolio__grid-title { font-size: 24px; line-height: 1; letter-spacing: -0.02em; } .portfolio__grid-title a:hover { color: var(--tp-theme-1); } .portfolio__grid-content { padding-top: 20px; } .portfolio__grid-bottom { overflow: hidden; height: 25px; position: relative; } .portfolio__grid-show-project { position: absolute; top: 0; left: 0; -webkit-transform: translateY(20px); -moz-transform: translateY(20px); -ms-transform: translateY(20px); -o-transform: translateY(20px); transform: translateY(20px); opacity: 0; transition-delay: 0.2s; } [dir=rtl] .portfolio__grid-show-project { left: auto; right: 0; } .portfolio__grid-show-project .portfolio-link-btn { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; line-height: 1; color: var(--tp-theme-1); display: inline-block; transition: color 0.2s ease-in-out; } .portfolio__grid-show-project .portfolio-link-btn span { transition: padding 0.2s ease-in-out; } .portfolio__grid-show-project .portfolio-link-btn:hover span { padding-left: 5px; } [dir=rtl] .portfolio__grid-show-project .portfolio-link-btn:hover span { padding-left: 0; padding-right: 5px; } .portfolio__grid-category { opacity: 1; transition-delay: 0.2s; } .portfolio__grid-category span { font-size: 14px; line-height: 1; position: relative; padding-left: 25px; } [dir=rtl] .portfolio__grid-category span { padding-left: 0; padding-right: 25px; } .portfolio__grid-category span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 17px; background-color: var(--tp-text-1); height: 1px; } [dir=rtl] .portfolio__grid-category span::after { left: auto; right: 0; } .portfolio__grid-category span a:hover { color: var(--tp-theme-1); } .portfolio__grid-video { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .portfolio__grid-video .portfolio-play-btn { display: inline-block; width: 72px; height: 72px; line-height: 72px; text-align: center; background-color: var(--tp-common-white); border-radius: 50%; color: var(--tp-theme-1); } .portfolio__grid-video .portfolio-play-btn svg { width: 14px; -webkit-transform: translate(3px, -2px); -moz-transform: translate(3px, -2px); -ms-transform: translate(3px, -2px); -o-transform: translate(3px, -2px); transform: translate(3px, -2px); } [dir=rtl] .portfolio__grid-video .portfolio-play-btn svg { -webkit-transform: translate(-3px, -2px); -moz-transform: translate(-3px, -2px); -ms-transform: translate(-3px, -2px); -o-transform: translate(-3px, -2px); transform: translate(-3px, -2px); } .portfolio__grid-video .portfolio-play-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .portfolio__grid-popup { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%) scale(0); -moz-transform: translate(-50%, -50%) scale(0); -ms-transform: translate(-50%, -50%) scale(0); -o-transform: translate(-50%, -50%) scale(0); transform: translate(-50%, -50%) scale(0); visibility: hidden; opacity: 0; } .portfolio__grid-popup a { display: inline-block; width: 70px; height: 70px; line-height: 70px; text-align: center; border-radius: 50%; background-color: var(--tp-common-white); } .portfolio__grid-popup a:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .portfolio__grid-popup a svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .portfolio__section-title { font-weight: 700; font-size: 70px; line-height: 1; letter-spacing: -0.04em; } @media (max-width: 575px) { .portfolio__section-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__section-title { font-size: 55px; } } .portfolio__section-title-pre { font-family: var(--tp-ff-space); font-weight: 500; font-size: 13px; text-align: center; letter-spacing: 0.06em; color: #91919A; display: inline-block; margin-bottom: 3px; } .portfolio__masonary-btn button { font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; line-height: 1; color: var(--tp-common-black); position: relative; padding-right: 14px; padding-top: 6px; margin-right: 26px; } [dir=rtl] .portfolio__masonary-btn button { padding-right: 0; margin-right: 0; padding-left: 14px; margin-left: 26px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__masonary-btn button { margin-bottom: 25px; } } .portfolio__masonary-btn button::after { position: absolute; content: ""; right: -10px; top: 16px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 4px; height: 4px; background-color: #A2A2AA; border-radius: 50%; } [dir=rtl] .portfolio__masonary-btn button::after { right: auto; left: -10px; } .portfolio__masonary-btn button:last-child { margin-right: 0; } [dir=rtl] .portfolio__masonary-btn button:last-child { margin-left: 0; } .portfolio__masonary-btn button:last-child::after { display: none; } .portfolio__masonary-btn button span { position: absolute; top: 0; right: 0; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 10px; line-height: 1; } [dir=rtl] .portfolio__masonary-btn button span { right: auto; left: 0; } .portfolio__masonary-btn button.active { color: var(--tp-theme-1); } .portfolio__masonary-btn-2 button { font-weight: 500; font-size: 15px; position: relative; margin-right: 26px; } [dir=rtl] .portfolio__masonary-btn-2 button { margin-right: 0; margin-left: 26px; } .portfolio__masonary-btn-2 button::after { position: absolute; content: ""; left: auto; right: 0; bottom: 3px; width: 0%; height: 1px; background-color: var(--tp-theme-1); } [dir=rtl] .portfolio__masonary-btn-2 button::after { left: 0; right: auto; } .portfolio__masonary-btn-2 button:hover, .portfolio__masonary-btn-2 button.active { color: var(--tp-theme-1); } .portfolio__masonary-btn-2 button:hover::after, .portfolio__masonary-btn-2 button.active::after { width: 100%; left: 0; right: auto; } [dir=rtl] .portfolio__masonary-btn-2 button:hover::after, [dir=rtl] .portfolio__masonary-btn-2 button.active::after { left: auto; right: 0; } .portfolio__metro-thumb { position: absolute; top: 0; right: 0; width: 70%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; } [dir=rtl] .portfolio__metro-thumb { right: auto; left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__metro-thumb { position: relative; height: 300px; width: 100%; } } .portfolio__metro-category { margin-bottom: 18px; } .portfolio__metro-category span { font-size: 14px; line-height: 1; position: relative; padding-left: 25px; } [dir=rtl] .portfolio__metro-category span { padding-left: 0; padding-right: 25px; } .portfolio__metro-category span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 17px; background-color: var(--tp-text-1); height: 1px; } [dir=rtl] .portfolio__metro-category span::after { left: auto; right: 0; } .portfolio__metro-category span a:hover { color: var(--tp-theme-1); } .portfolio__metro-title { font-size: 30px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 13px; } .portfolio__metro-title a:hover { color: var(--tp-theme-1); } .portfolio__metro-content { position: relative; z-index: 1; padding: 50px; padding-right: 130px; padding-bottom: 60px; background-color: var(--tp-common-white); box-shadow: 0px 20px 20px rgba(3, 4, 28, 0.1); } [dir=rtl] .portfolio__metro-content { padding-right: 50px; padding-left: 130px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__metro-content { padding-right: 50px; } [dir=rtl] .portfolio__metro-content { padding-left: 50px; } } @media (max-width: 575px) { .portfolio__metro-content { padding: 30px; } } .portfolio__metro-content p { font-size: 15px; line-height: 1.6; margin-bottom: 102px; } .portfolio__metro-btn .tp-btn-border { padding: 7px 27px; } .portfolio__metro-btn .tp-btn-border:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .portfolio__metro-btn .tp-btn-border span { margin-left: 6px; } [dir=rtl] .portfolio__metro-btn .tp-btn-border span { margin-left: 0; margin-right: 6px; } .portfolio__metro-btn .tp-btn-border svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .portfolio__horizontal-slider .swiper-slide-active .portfolio__horizontal-title, .portfolio__horizontal-slider .swiper-slide-active .portfolio__horizontal-meta, .portfolio__horizontal-slider .swiper-slide-active .portfolio__horizontal-content p, .portfolio__horizontal-slider .swiper-slide-active .portfolio__horizontal-btn { animation-name: fadeInUp; animation-fill-mode: both; } .portfolio__horizontal-slider .swiper-slide-active .portfolio__horizontal-video a { animation-name: tpFadeInLeft; animation-fill-mode: both; } .portfolio__horizontal-slider .swiper-slide-active .portfolio__horizontal-social { animation-name: tpFadeInLeft2; animation-fill-mode: both; } .portfolio-horizontal-dot { position: absolute; top: 47%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 65px; left: auto; align-items: flex-end; justify-content: center; flex-direction: column; width: inherit !important; left: auto !important; z-index: 99; } [dir=rtl] .portfolio-horizontal-dot { left: 65px !important; right: auto; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio-horizontal-dot { top: 40%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio-horizontal-dot { top: 39%; right: 55px; } [dir=rtl] .portfolio-horizontal-dot { right: auto; left: 55px !important; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio-horizontal-dot { right: 30px; top: 39%; } [dir=rtl] .portfolio-horizontal-dot { right: auto; left: 30px !important; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio-horizontal-dot { right: 25px; top: 35%; } [dir=rtl] .portfolio-horizontal-dot { right: auto; left: 25px !important; } } .portfolio-horizontal-dot .swiper-pagination-bullet { margin: 15px 0 !important; display: inline-block; opacity: 1; height: 0; width: 1px; background-color: var(--tp-common-black); border-radius: 0; position: relative; } .portfolio-horizontal-dot .swiper-pagination-bullet button { position: absolute; top: -38px; left: -9px; font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; line-height: 19px; color: var(--tp-common-black); margin: 7px 0; -webkit-transform: rotate(90deg) translateY(-2px); -moz-transform: rotate(90deg) translateY(-2px); -ms-transform: rotate(90deg) translateY(-2px); -o-transform: rotate(90deg) translateY(-2px); transform: rotate(90deg) translateY(-2px); } [dir=rtl] .portfolio-horizontal-dot .swiper-pagination-bullet button { left: auto; right: -9px; } .portfolio-horizontal-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { height: 100px; margin: 23px 0 !important; } .portfolio-horizontal-dot .swiper-pagination-bullet.swiper-pagination-bullet-active button { font-size: 20px; left: -13px; } [dir=rtl] .portfolio-horizontal-dot .swiper-pagination-bullet.swiper-pagination-bullet-active button { left: auto; right: -13px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__horizontal-wrapper { margin-left: 100px; } [dir=rtl] .portfolio__horizontal-wrapper { margin-left: 0; margin-right: 100px; } } div.portfolio__horizontal-item { position: relative; z-index: 1; height: 100vh; } .portfolio__horizontal-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .portfolio__horizontal-inner { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(5px); padding-bottom: 88px; padding-top: 210px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__horizontal-inner { padding-top: 120px; } } .portfolio__horizontal-title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 17px; animation-delay: 0.7s; animation-duration: 1s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__horizontal-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__horizontal-title { font-size: 55px; } } @media (max-width: 575px) { .portfolio__horizontal-title { font-size: 35px; } } .portfolio__horizontal-title a { background-image: linear-gradient(#03041C, #03041C), linear-gradient(#03041C, #03041C); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 85%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .portfolio__horizontal-title a:hover { background-size: 0 2px, 100% 2px; } .portfolio__horizontal-meta { margin-bottom: 8px; animation-delay: 0.2s; animation-duration: 1s; } .portfolio__horizontal-meta span { font-weight: 500; font-size: 14px; line-height: 1; padding-right: 6px; margin-right: 6px; position: relative; } [dir=rtl] .portfolio__horizontal-meta span { padding-right: 0; margin-right: 0; padding-left: 6px; margin-left: 6px; } .portfolio__horizontal-meta span::before { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 3px; height: 3px; background-color: var(--tp-text-1); border-radius: 50%; } [dir=rtl] .portfolio__horizontal-meta span::before { right: auto; left: 0; } .portfolio__horizontal-meta span:first-child { padding-left: 25px; } [dir=rtl] .portfolio__horizontal-meta span:first-child { padding-left: 0; padding-right: 25px; } .portfolio__horizontal-meta span:first-child::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 17px; background-color: var(--tp-text-1); height: 1px; } [dir=rtl] .portfolio__horizontal-meta span:first-child::after { left: auto; right: 0; } .portfolio__horizontal-meta span:last-child::before { display: none; } .portfolio__horizontal-meta span a:hover { color: var(--tp-theme-1); } .portfolio__horizontal-content { position: relative; z-index: 1; } .portfolio__horizontal-content p { font-size: 16px; line-height: 1.62; margin-bottom: 25px; animation-delay: 0.9s; animation-duration: 1s; padding-right: 150px; } [dir=rtl] .portfolio__horizontal-content p { padding-right: 0; padding-left: 150px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__horizontal-content p { padding-right: 50px; } [dir=rtl] .portfolio__horizontal-content p { padding-right: 0; padding-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__horizontal-content p { padding-right: 60px; } [dir=rtl] .portfolio__horizontal-content p { padding-right: 0; padding-left: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__horizontal-content p { padding-right: 35px; } [dir=rtl] .portfolio__horizontal-content p { padding-right: 0; padding-left: 35px; } } @media (max-width: 575px) { .portfolio__horizontal-content p { padding-right: 0; } [dir=rtl] .portfolio__horizontal-content p { padding-left: 0; } } .portfolio__horizontal-btn { animation-delay: 1.2s; animation-duration: 1s; } .portfolio__horizontal-btn .tp-btn-border { border-color: #525258; padding: 7px 27px; } .portfolio__horizontal-btn .tp-btn-border:hover { border-color: var(--tp-common-black); } .portfolio__horizontal-video { -webkit-transform: translateY(8px); -moz-transform: translateY(8px); -ms-transform: translateY(8px); -o-transform: translateY(8px); transform: translateY(8px); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__horizontal-video { margin-bottom: 20px; } } .portfolio__horizontal-video a { animation-delay: 0.6s; animation-duration: 1s; display: inline-block; width: 60px; height: 60px; line-height: 56px; text-align: center; color: var(--tp-common-black); border: 2px solid var(--tp-common-black); border-radius: 50%; margin-right: 40px; } [dir=rtl] .portfolio__horizontal-video a { margin-right: 0; margin-left: 40px; } .portfolio__horizontal-video a svg { -webkit-transform: translate(2px, -2px); -moz-transform: translate(2px, -2px); -ms-transform: translate(2px, -2px); -o-transform: translate(2px, -2px); transform: translate(2px, -2px); } .portfolio__horizontal-video a:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .portfolio__horizontal-social { position: absolute; bottom: 45%; left: 0%; z-index: 9; -webkit-transform: rotate(-90deg) translate(85px, -60px); -moz-transform: rotate(-90deg) translate(85px, -60px); -ms-transform: rotate(-90deg) translate(85px, -60px); -o-transform: rotate(-90deg) translate(85px, -60px); transform: rotate(-90deg) translate(85px, -60px); animation-delay: 0.7s; animation-duration: 1s; } [dir=rtl] .portfolio__horizontal-social { left: auto; right: 0%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__horizontal-social { bottom: 12%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__horizontal-social { display: none; } } .portfolio__horizontal-social span, .portfolio__horizontal-social a { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black); } .portfolio__horizontal-social span { position: relative; padding-right: 22px; margin-right: 5px; } [dir=rtl] .portfolio__horizontal-social span { padding-right: 0; margin-right: 0; padding-left: 22px; margin-left: 5px; } .portfolio__horizontal-social span::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tp-common-black); width: 12px; height: 2px; } [dir=rtl] .portfolio__horizontal-social span::after { right: auto; left: 0; } .portfolio__horizontal-social a { position: relative; } .portfolio__horizontal-social a:not(:last-child) { padding-right: 13px; margin-right: 13px; } [dir=rtl] .portfolio__horizontal-social a:not(:last-child) { padding-right: 0; margin-right: 0; padding-left: 13px; margin-left: 13px; } .portfolio__horizontal-social a:not(:last-child)::after { position: absolute; content: ""; right: -3px; top: 50%; -webkit-transform: translateY(-50%) rotate(14deg); -moz-transform: translateY(-50%) rotate(14deg); -ms-transform: translateY(-50%) rotate(14deg); -o-transform: translateY(-50%) rotate(14deg); transform: translateY(-50%) rotate(14deg); background-color: var(--tp-common-black); width: 1px; height: 15px; } [dir=rtl] .portfolio__horizontal-social a:not(:last-child)::after { right: auto; left: -3px; } .portfolio__horizontal-social a:hover { color: var(--tp-theme-1); } .portfolio__hover-wrapper { background-color: var(--tp-common-white); padding: 25px 27px 20px; } .portfolio__hover-title { font-size: 24px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 5px; } .portfolio__hover-category span { font-size: 14px; line-height: 1; position: relative; padding-left: 25px; } [dir=rtl] .portfolio__hover-category span { padding-left: 0; padding-right: 25px; } .portfolio__hover-category span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 17px; background-color: var(--tp-text-1); height: 1px; } [dir=rtl] .portfolio__hover-category span::after { left: auto; right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .portfolio__details-wrapper { padding-right: 55px; } [dir=rtl] .portfolio__details-wrapper { padding-right: 0; padding-left: 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__details-wrapper { padding-right: 80px; } [dir=rtl] .portfolio__details-wrapper { padding-right: 0; padding-left: 80px; } } .portfolio__details-subtitle { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0.04em; color: var(--tp-theme-1); margin-bottom: 13px; } .portfolio__details-title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 17px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__details-title { font-size: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__details-title { font-size: 45px; } } @media (max-width: 575px) { .portfolio__details-title { font-size: 35px; } } .portfolio__details-title-2 { font-size: 60px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 17px; } @media (max-width: 575px) { .portfolio__details-title-2 { font-size: 42px; } } .portfolio__details-title-3 { font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black-solid); margin-bottom: 40px; } @media (max-width: 575px) { .portfolio__details-title-3 { font-size: 45px; } } .portfolio__details-title-sm { font-weight: 500; font-size: 16px; line-height: 1; } .portfolio__details-title-sm-2 { color: var(--tp-theme-1); } .portfolio__details-content { margin-bottom: 50px; } .portfolio__details-content p { font-size: 16px; line-height: 1.62; } .portfolio__details-content-2 p { font-size: 16px; line-height: 1.62; } [dir=rtl] .portfolio__details-meta-slider { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__details-meta-slider { padding-left: 30px; } [dir=rtl] .portfolio__details-meta-slider { padding-left: 0; padding-right: 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__details-meta-slider { padding-left: 0; } [dir=rtl] .portfolio__details-meta-slider { padding-right: 0; } } .portfolio__details-meta-item { margin-bottom: 25px; } .portfolio__details-meta-item:not(:last-child) { margin-right: 66px; } [dir=rtl] .portfolio__details-meta-item:not(:last-child) { margin-right: 0; margin-left: 66px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .portfolio__details-meta-item:not(:last-child) { margin-right: 55px; } [dir=rtl] .portfolio__details-meta-item:not(:last-child) { margin-right: 0; margin-left: 55px; } } @media (max-width: 575px) { .portfolio__details-meta-item:not(:last-child) { margin-right: 35px; } [dir=rtl] .portfolio__details-meta-item:not(:last-child) { margin-right: 0; margin-left: 35px; } } .portfolio__details-meta-icon { min-width: 15px; flex: 0 0 auto; } .portfolio__details-meta-icon span { color: var(--tp-common-black); font-size: 16px; } .portfolio__details-meta-icon span i, .portfolio__details-meta-icon span svg, .portfolio__details-meta-icon span img { margin-right: 12px; } [dir=rtl] .portfolio__details-meta-icon span i, [dir=rtl] .portfolio__details-meta-icon span svg, [dir=rtl] .portfolio__details-meta-icon span img { margin-right: 0; margin-left: 12px; } .portfolio__details-meta-icon span svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .portfolio__details-meta-icon span img { max-width: 20px; } .portfolio__details-meta-content h5 { font-weight: 500; font-size: 18px; line-height: 1; margin-bottom: 3px; } .portfolio__details-meta-content span { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-slider { padding-left: 0; padding-right: 0; } } .portfolio__details-slider .slick-list { overflow: visible; margin: 0 -15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-slider .slick-list { overflow: hidden; } } .portfolio__details-slider .slick-list .slick-slide > div { margin: 0 15px; } .portfolio__details-slider .slick-dots { margin-top: 35px; text-align: center; } .portfolio__details-slider .slick-dots li { list-style: none; display: inline-block; } .portfolio__details-slider .slick-dots li button { font-size: 0; width: 8px; height: 8px; background-color: #E2E2E2; border-radius: 10px; margin: 0 5px; } .portfolio__details-slider .slick-dots li.slick-active button { width: 50px; background-color: var(--tp-theme-1); } .portfolio__details-slider-item img { width: 100%; } .portfolio__details-slider-2 .slick-list { overflow: visible; margin: 0 -50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .portfolio__details-slider-2 .slick-list { overflow: hidden; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__details-slider-2 .slick-list { margin: 0 -15px; } } .portfolio__details-slider-2 .slick-list .slick-slide > div { margin: 0 50px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .portfolio__details-slider-2 .slick-list .slick-slide > div { margin: 0 15px; } } .portfolio__details-slider-2 .slick-dots { margin-top: 25px; text-align: center; } .portfolio__details-slider-2 .slick-dots li { list-style: none; display: inline-block; } .portfolio__details-slider-2 .slick-dots li button { font-size: 0; width: 8px; height: 8px; background-color: #E2E2E2; border-radius: 10px; margin: 0 5px; } .portfolio__details-slider-2 .slick-dots li.slick-active button { width: 50px; background-color: var(--tp-theme-1); } [dir=rtl] .portfolio__details-img-list { margin-left: 75px; margin-right: 0; } div.portfolio__details-img-list-box { position: relative; } div.portfolio__details-img-list-box img { max-width: 100%; } .portfolio__details-img-list-social { position: absolute; top: 30px; left: 30px; background: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); padding: 10px 12px; text-align: center; } [dir=rtl] .portfolio__details-img-list-social { left: auto; right: 30px; } .portfolio__details-img-list-social a { color: var(--tp-text-1); } .portfolio__details-img-list-social a:hover { color: var(--tp-theme-1); } .portfolio__details-info-box-title { font-size: 1; letter-spacing: -0.02em; } .portfolio__details-info-wrapper { margin-left: -30px; position: sticky; top: 100px; } [dir=rtl] .portfolio__details-info-wrapper { margin-left: 0; margin-right: -30px; } .portfolio__details-info-content { margin-bottom: 30px; } .portfolio__details-info-content p { font-size: 16px; line-height: 1.62; } .portfolio__details-info-btn .tp-btn { padding: 12px 30px; } .portfolio__details-info-btn .tp-btn:hover { background-color: var(--tp-common-black); } .portfolio__details-category { margin-bottom: 3px; } .portfolio__details-category span { font-size: 14px; line-height: 1; position: relative; padding-left: 25px; } [dir=rtl] .portfolio__details-category span { padding-left: 0; padding-right: 25px; } .portfolio__details-category span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 17px; background-color: var(--tp-text-1); height: 1px; } [dir=rtl] .portfolio__details-category span::after { left: auto; right: 0; } .portfolio__details-category span a:hover { color: var(--tp-theme-1); } .portfolio__details-task p { font-size: 16px; line-height: 1.62; } .portfolio__details-task-2 p { color: var(--tp-common-black); padding-right: 70px; } [dir=rtl] .portfolio__details-task-2 p { padding-right: 0; padding-left: 70px; } .portfolio__details-btn a { font-size: 16px; font-weight: 500; color: var(--tp-theme-1); } .portfolio__details-btn a:hover { color: var(--tp-common-black); } .portfolio__details-btn a:hover svg { -webkit-transform: translate(6px, -1px); -moz-transform: translate(6px, -1px); -ms-transform: translate(6px, -1px); -o-transform: translate(6px, -1px); transform: translate(6px, -1px); } [dir=rtl] .portfolio__details-btn a:hover svg { -webkit-transform: translate(-6px, -1px); -moz-transform: translate(-6px, -1px); -ms-transform: translate(-6px, -1px); -o-transform: translate(-6px, -1px); transform: translate(-6px, -1px); } .portfolio__details-btn a svg { -webkit-transform: translate(2px, -1px); -moz-transform: translate(2px, -1px); -ms-transform: translate(2px, -1px); -o-transform: translate(2px, -1px); transform: translate(2px, -1px); transition: transform 0.3s ease-in-out; } [dir=rtl] .portfolio__details-btn a svg { -webkit-transform: translate(-2px, -1px); -moz-transform: translate(-2px, -1px); -ms-transform: translate(-2px, -1px); -o-transform: translate(-2px, -1px); transform: translate(-2px, -1px); } .portfolio__details-btn-2 .tp-btn { font-size: 14px; padding: 10px 26px; background-color: var(--tp-common-black); } .portfolio__details-btn-2 .tp-btn:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .portfolio__details-arrow button { position: absolute; top: 50%; left: 0%; border-radius: 50%; background-color: var(--tp-common-white); width: 100px; height: 100px; line-height: 100px; display: inline-block; z-index: 1; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } [dir=rtl] .portfolio__details-arrow button { left: auto; right: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .portfolio__details-arrow button { width: 60px; height: 60px; line-height: 60px; } } .portfolio__details-arrow button span, .portfolio__details-arrow button i { display: inline-block; background: var(--tp-common-white); border: 1px solid var(--tp-text-1); height: 90px; width: 90px; line-height: 86px; text-align: center; border-radius: 50%; font-size: 18px; } @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__details-arrow button span, .portfolio__details-arrow button i { width: 50px; height: 50px; line-height: 48px; } } .portfolio__details-arrow button span svg, .portfolio__details-arrow button i svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .portfolio__details-arrow button:hover { color: var(--tp-common-white); } .portfolio__details-arrow button:hover span, .portfolio__details-arrow button:hover i { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .portfolio__details-arrow button.portfolio-details-2-button-next { left: auto; right: 0%; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); } [dir=rtl] .portfolio__details-arrow button.portfolio-details-2-button-next { right: auto; left: 0%; } .portfolio__more-border { border-top: 1px solid #EAEAEF; padding-top: 32px; padding-bottom: 32px; } .portfolio__more-menu span { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; border-radius: 50%; background-color: #F5F5F5; color: var(--tp-common-black); } .portfolio__more-menu span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .portfolio__more-menu span:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .portfolio__more-navigation { margin-top: 50px; padding: 35px 30px; } .portfolio__more-icon a { color: var(--tp-common-black); font-size: 16px; margin-right: 15px; } [dir=rtl] .portfolio__more-icon a { margin-right: 0; margin-left: 15px; } .portfolio__more-icon a svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .portfolio__more-icon a:hover { color: var(--tp-theme-1); } .portfolio__more-content p { font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #88888B; margin-bottom: 5px; } .portfolio__more-content p a:hover { color: var(--tp-theme-1); } .portfolio__more-content h4 { font-size: 18px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0; } .portfolio__more-content h4 a:hover { color: var(--tp-theme-1); } .portfolio__more-right { text-align: right; } [dir=rtl] .portfolio__more-right { text-align: left; } .portfolio__more-right .portfolio__more-icon a { margin-left: 15px; margin-right: 0; } [dir=rtl] .portfolio__more-right .portfolio__more-icon a { margin-left: 0; margin-right: 15px; } .portfolio__comment-top { margin-bottom: 37px; } [dir=rtl] .portfolio__comment-top { text-align: right; } .portfolio__comment-title { font-size: 34px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 5px; } .portfolio__comment-input { position: relative; margin-bottom: 20px; } .portfolio__comment-input span { font-weight: 600; color: var(--tp-common-black); margin-bottom: 12px; display: block; } .portfolio__comment-input input, .portfolio__comment-input textarea { height: 60px; padding: 0 27px; width: 100%; font-size: 14px; color: var(--tp-common-black); border-color: var(--tp-common-white); background: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); border-width: 1px; } .portfolio__comment-input input:focus, .portfolio__comment-input textarea:focus { border-color: var(--tp-theme-1); } .portfolio__comment-input input::-webkit-input-placeholder, .portfolio__comment-input textarea::-webkit-input-placeholder { color: #85858B; } .portfolio__comment-input input:-moz-placeholder, .portfolio__comment-input textarea:-moz-placeholder { color: #85858B; } .portfolio__comment-input input::-moz-placeholder, .portfolio__comment-input textarea::-moz-placeholder { color: #85858B; } .portfolio__comment-input input:-ms-input-placeholder, .portfolio__comment-input textarea:-ms-input-placeholder { color: #85858B; } .portfolio__comment-input textarea { height: 180px; resize: none; padding-top: 25px; padding-bottom: 25px; } .portfolio__comment-agree { padding-left: 5px; } [dir=rtl] .portfolio__comment-agree { padding-left: 0; padding-right: 5px; } .portfolio__comment-agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 18px; height: 18px; background: transparent; border: 1.5px solid #CFCFD7; border-radius: 3px; outline: none; flex: 0 0 auto; -webkit-transform: translateY(-2.5px); -moz-transform: translateY(-2.5px); -ms-transform: translateY(-2.5px); -o-transform: translateY(-2.5px); transform: translateY(-2.5px); padding: 0; } .portfolio__comment-agree input:checked { position: relative; background-color: var(--tp-theme-1); border-color: transparent; } .portfolio__comment-agree input:checked::after { box-sizing: border-box; position: absolute; content: "\f00c"; font-weight: 700; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .portfolio__comment-agree input:hover { cursor: pointer; } .portfolio__comment-agree label { padding-left: 8px; font-size: 14px; line-height: 1; color: var(--tp-text-1); } [dir=rtl] .portfolio__comment-agree label { padding-left: 0; padding-right: 8px; } .portfolio__comment-agree label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } [dir=rtl] .portfolio__comment-agree label a { padding-left: 0; padding-right: 4px; } .portfolio__comment-agree label a:hover { color: var(--tp-theme-1); } .portfolio__comment-agree label:hover { cursor: pointer; } [dir=rtl] .portfolio__comment-btn { text-align: right; } .portfolio__comment-btn .tp-btn { padding: 12px 21px; } .portfolio__comment-btn .tp-btn:hover { background-color: var(--tp-common-black); } @-webkit-keyframes fadeInRightPortfolio1 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translateX(20px); -moz-transform: rotate(-25deg) translateX(20px); -ms-transform: rotate(-25deg) translateX(20px); -o-transform: rotate(-25deg) translateX(20px); transform: rotate(-25deg) translateX(20px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translateX(0); -moz-transform: rotate(-25deg) translateX(0); -ms-transform: rotate(-25deg) translateX(0); -o-transform: rotate(-25deg) translateX(0); transform: rotate(-25deg) translateX(0); } } @-moz-keyframes fadeInRightPortfolio1 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translateX(20px); -moz-transform: rotate(-25deg) translateX(20px); -ms-transform: rotate(-25deg) translateX(20px); -o-transform: rotate(-25deg) translateX(20px); transform: rotate(-25deg) translateX(20px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translateX(0); -moz-transform: rotate(-25deg) translateX(0); -ms-transform: rotate(-25deg) translateX(0); -o-transform: rotate(-25deg) translateX(0); transform: rotate(-25deg) translateX(0); } } @-ms-keyframes fadeInRightPortfolio1 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translateX(20px); -moz-transform: rotate(-25deg) translateX(20px); -ms-transform: rotate(-25deg) translateX(20px); -o-transform: rotate(-25deg) translateX(20px); transform: rotate(-25deg) translateX(20px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translateX(0); -moz-transform: rotate(-25deg) translateX(0); -ms-transform: rotate(-25deg) translateX(0); -o-transform: rotate(-25deg) translateX(0); transform: rotate(-25deg) translateX(0); } } @keyframes fadeInRightPortfolio1 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translateX(20px); -moz-transform: rotate(-25deg) translateX(20px); -ms-transform: rotate(-25deg) translateX(20px); -o-transform: rotate(-25deg) translateX(20px); transform: rotate(-25deg) translateX(20px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translateX(0); -moz-transform: rotate(-25deg) translateX(0); -ms-transform: rotate(-25deg) translateX(0); -o-transform: rotate(-25deg) translateX(0); transform: rotate(-25deg) translateX(0); } } @-webkit-keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-30px, 169px); -moz-transform: rotate(-25deg) translate(-30px, 169px); -ms-transform: rotate(-25deg) translate(-30px, 169px); -o-transform: rotate(-25deg) translate(-30px, 169px); transform: rotate(-25deg) translate(-30px, 169px); } } @-moz-keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-30px, 169px); -moz-transform: rotate(-25deg) translate(-30px, 169px); -ms-transform: rotate(-25deg) translate(-30px, 169px); -o-transform: rotate(-25deg) translate(-30px, 169px); transform: rotate(-25deg) translate(-30px, 169px); } } @-ms-keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-30px, 169px); -moz-transform: rotate(-25deg) translate(-30px, 169px); -ms-transform: rotate(-25deg) translate(-30px, 169px); -o-transform: rotate(-25deg) translate(-30px, 169px); transform: rotate(-25deg) translate(-30px, 169px); } } @keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-30px, 169px); -moz-transform: rotate(-25deg) translate(-30px, 169px); -ms-transform: rotate(-25deg) translate(-30px, 169px); -o-transform: rotate(-25deg) translate(-30px, 169px); transform: rotate(-25deg) translate(-30px, 169px); } } @-webkit-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-66px, 107px) rotate(25deg); -moz-transform: translate(-66px, 107px) rotate(25deg); -ms-transform: translate(-66px, 107px) rotate(25deg); -o-transform: translate(-66px, 107px) rotate(25deg); transform: translate(-66px, 107px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-66px, 107px) rotate(25deg); -moz-transform: translate(-66px, 107px) rotate(25deg); -ms-transform: translate(-66px, 107px) rotate(25deg); -o-transform: translate(-66px, 107px) rotate(25deg); transform: translate(-66px, 107px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-66px, 107px) rotate(25deg); -moz-transform: translate(-66px, 107px) rotate(25deg); -ms-transform: translate(-66px, 107px) rotate(25deg); -o-transform: translate(-66px, 107px) rotate(25deg); transform: translate(-66px, 107px) rotate(25deg); } } @keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-66px, 107px) rotate(25deg); -moz-transform: translate(-66px, 107px) rotate(25deg); -ms-transform: translate(-66px, 107px) rotate(25deg); -o-transform: translate(-66px, 107px) rotate(25deg); transform: translate(-66px, 107px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-20px, 10px) rotate(25deg); -moz-transform: translate(-20px, 10px) rotate(25deg); -ms-transform: translate(-20px, 10px) rotate(25deg); -o-transform: translate(-20px, 10px) rotate(25deg); transform: translate(-20px, 10px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(7px, 120px) rotate(25deg); -moz-transform: translate(7px, 120px) rotate(25deg); -ms-transform: translate(7px, 120px) rotate(25deg); -o-transform: translate(7px, 120px) rotate(25deg); transform: translate(7px, 120px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-20px, 10px) rotate(25deg); -moz-transform: translate(-20px, 10px) rotate(25deg); -ms-transform: translate(-20px, 10px) rotate(25deg); -o-transform: translate(-20px, 10px) rotate(25deg); transform: translate(-20px, 10px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(7px, 120px) rotate(25deg); -moz-transform: translate(7px, 120px) rotate(25deg); -ms-transform: translate(7px, 120px) rotate(25deg); -o-transform: translate(7px, 120px) rotate(25deg); transform: translate(7px, 120px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-20px, 10px) rotate(25deg); -moz-transform: translate(-20px, 10px) rotate(25deg); -ms-transform: translate(-20px, 10px) rotate(25deg); -o-transform: translate(-20px, 10px) rotate(25deg); transform: translate(-20px, 10px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(7px, 120px) rotate(25deg); -moz-transform: translate(7px, 120px) rotate(25deg); -ms-transform: translate(7px, 120px) rotate(25deg); -o-transform: translate(7px, 120px) rotate(25deg); transform: translate(7px, 120px) rotate(25deg); } } @keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-20px, 10px) rotate(25deg); -moz-transform: translate(-20px, 10px) rotate(25deg); -ms-transform: translate(-20px, 10px) rotate(25deg); -o-transform: translate(-20px, 10px) rotate(25deg); transform: translate(-20px, 10px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(7px, 120px) rotate(25deg); -moz-transform: translate(7px, 120px) rotate(25deg); -ms-transform: translate(7px, 120px) rotate(25deg); -o-transform: translate(7px, 120px) rotate(25deg); transform: translate(7px, 120px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-105px, 88px) rotate(25deg); -moz-transform: translate(-105px, 88px) rotate(25deg); -ms-transform: translate(-105px, 88px) rotate(25deg); -o-transform: translate(-105px, 88px) rotate(25deg); transform: translate(-105px, 88px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-105px, 88px) rotate(25deg); -moz-transform: translate(-105px, 88px) rotate(25deg); -ms-transform: translate(-105px, 88px) rotate(25deg); -o-transform: translate(-105px, 88px) rotate(25deg); transform: translate(-105px, 88px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-105px, 88px) rotate(25deg); -moz-transform: translate(-105px, 88px) rotate(25deg); -ms-transform: translate(-105px, 88px) rotate(25deg); -o-transform: translate(-105px, 88px) rotate(25deg); transform: translate(-105px, 88px) rotate(25deg); } } @keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-105px, 88px) rotate(25deg); -moz-transform: translate(-105px, 88px) rotate(25deg); -ms-transform: translate(-105px, 88px) rotate(25deg); -o-transform: translate(-105px, 88px) rotate(25deg); transform: translate(-105px, 88px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio6 { 0% { opacity: 0; -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); } 100% { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @-moz-keyframes fadeInRightPortfolio6 { 0% { opacity: 0; -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); } 100% { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @-ms-keyframes fadeInRightPortfolio6 { 0% { opacity: 0; -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); } 100% { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @keyframes fadeInRightPortfolio6 { 0% { opacity: 0; -webkit-transform: translateX(60px); -moz-transform: translateX(60px); -ms-transform: translateX(60px); -o-transform: translateX(60px); transform: translateX(60px); } 100% { opacity: 1; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { @-webkit-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-79px, 93px) rotate(25deg); -moz-transform: translate(-79px, 93px) rotate(25deg); -ms-transform: translate(-79px, 93px) rotate(25deg); -o-transform: translate(-79px, 93px) rotate(25deg); transform: translate(-79px, 93px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-79px, 93px) rotate(25deg); -moz-transform: translate(-79px, 93px) rotate(25deg); -ms-transform: translate(-79px, 93px) rotate(25deg); -o-transform: translate(-79px, 93px) rotate(25deg); transform: translate(-79px, 93px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-79px, 93px) rotate(25deg); -moz-transform: translate(-79px, 93px) rotate(25deg); -ms-transform: translate(-79px, 93px) rotate(25deg); -o-transform: translate(-79px, 93px) rotate(25deg); transform: translate(-79px, 93px) rotate(25deg); } } @keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-79px, 93px) rotate(25deg); -moz-transform: translate(-79px, 93px) rotate(25deg); -ms-transform: translate(-79px, 93px) rotate(25deg); -o-transform: translate(-79px, 93px) rotate(25deg); transform: translate(-79px, 93px) rotate(25deg); } } } @media only screen and (min-width: 992px) and (max-width: 1199px) { @-webkit-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-202px, 50px) rotate(25deg); -moz-transform: translate(-202px, 50px) rotate(25deg); -ms-transform: translate(-202px, 50px) rotate(25deg); -o-transform: translate(-202px, 50px) rotate(25deg); transform: translate(-202px, 50px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-202px, 50px) rotate(25deg); -moz-transform: translate(-202px, 50px) rotate(25deg); -ms-transform: translate(-202px, 50px) rotate(25deg); -o-transform: translate(-202px, 50px) rotate(25deg); transform: translate(-202px, 50px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-202px, 50px) rotate(25deg); -moz-transform: translate(-202px, 50px) rotate(25deg); -ms-transform: translate(-202px, 50px) rotate(25deg); -o-transform: translate(-202px, 50px) rotate(25deg); transform: translate(-202px, 50px) rotate(25deg); } } @keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-202px, 50px) rotate(25deg); -moz-transform: translate(-202px, 50px) rotate(25deg); -ms-transform: translate(-202px, 50px) rotate(25deg); -o-transform: translate(-202px, 50px) rotate(25deg); transform: translate(-202px, 50px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-70px, 120px) rotate(25deg); -moz-transform: translate(-70px, 120px) rotate(25deg); -ms-transform: translate(-70px, 120px) rotate(25deg); -o-transform: translate(-70px, 120px) rotate(25deg); transform: translate(-70px, 120px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-70px, 120px) rotate(25deg); -moz-transform: translate(-70px, 120px) rotate(25deg); -ms-transform: translate(-70px, 120px) rotate(25deg); -o-transform: translate(-70px, 120px) rotate(25deg); transform: translate(-70px, 120px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-70px, 120px) rotate(25deg); -moz-transform: translate(-70px, 120px) rotate(25deg); -ms-transform: translate(-70px, 120px) rotate(25deg); -o-transform: translate(-70px, 120px) rotate(25deg); transform: translate(-70px, 120px) rotate(25deg); } } @keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-70px, 120px) rotate(25deg); -moz-transform: translate(-70px, 120px) rotate(25deg); -ms-transform: translate(-70px, 120px) rotate(25deg); -o-transform: translate(-70px, 120px) rotate(25deg); transform: translate(-70px, 120px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-180px, 88px) rotate(25deg); -moz-transform: translate(-180px, 88px) rotate(25deg); -ms-transform: translate(-180px, 88px) rotate(25deg); -o-transform: translate(-180px, 88px) rotate(25deg); transform: translate(-180px, 88px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-180px, 88px) rotate(25deg); -moz-transform: translate(-180px, 88px) rotate(25deg); -ms-transform: translate(-180px, 88px) rotate(25deg); -o-transform: translate(-180px, 88px) rotate(25deg); transform: translate(-180px, 88px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-180px, 88px) rotate(25deg); -moz-transform: translate(-180px, 88px) rotate(25deg); -ms-transform: translate(-180px, 88px) rotate(25deg); -o-transform: translate(-180px, 88px) rotate(25deg); transform: translate(-180px, 88px) rotate(25deg); } } @keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-180px, 88px) rotate(25deg); -moz-transform: translate(-180px, 88px) rotate(25deg); -ms-transform: translate(-180px, 88px) rotate(25deg); -o-transform: translate(-180px, 88px) rotate(25deg); transform: translate(-180px, 88px) rotate(25deg); } } } @media only screen and (min-width: 576px) and (max-width: 767px) { @-webkit-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(15px, 149px) rotate(25deg); -moz-transform: translate(15px, 149px) rotate(25deg); -ms-transform: translate(15px, 149px) rotate(25deg); -o-transform: translate(15px, 149px) rotate(25deg); transform: translate(15px, 149px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(15px, 149px) rotate(25deg); -moz-transform: translate(15px, 149px) rotate(25deg); -ms-transform: translate(15px, 149px) rotate(25deg); -o-transform: translate(15px, 149px) rotate(25deg); transform: translate(15px, 149px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(15px, 149px) rotate(25deg); -moz-transform: translate(15px, 149px) rotate(25deg); -ms-transform: translate(15px, 149px) rotate(25deg); -o-transform: translate(15px, 149px) rotate(25deg); transform: translate(15px, 149px) rotate(25deg); } } @keyframes fadeInRightPortfolio3 { 0% { opacity: 0; -webkit-transform: translate(-20px, 115px) rotate(25deg); -moz-transform: translate(-20px, 115px) rotate(25deg); -ms-transform: translate(-20px, 115px) rotate(25deg); -o-transform: translate(-20px, 115px) rotate(25deg); transform: translate(-20px, 115px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(15px, 149px) rotate(25deg); -moz-transform: translate(15px, 149px) rotate(25deg); -ms-transform: translate(15px, 149px) rotate(25deg); -o-transform: translate(15px, 149px) rotate(25deg); transform: translate(15px, 149px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(207px, 3px) rotate(25deg); -moz-transform: translate(207px, 3px) rotate(25deg); -ms-transform: translate(207px, 3px) rotate(25deg); -o-transform: translate(207px, 3px) rotate(25deg); transform: translate(207px, 3px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(207px, 3px) rotate(25deg); -moz-transform: translate(207px, 3px) rotate(25deg); -ms-transform: translate(207px, 3px) rotate(25deg); -o-transform: translate(207px, 3px) rotate(25deg); transform: translate(207px, 3px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(207px, 3px) rotate(25deg); -moz-transform: translate(207px, 3px) rotate(25deg); -ms-transform: translate(207px, 3px) rotate(25deg); -o-transform: translate(207px, 3px) rotate(25deg); transform: translate(207px, 3px) rotate(25deg); } } @keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(207px, 3px) rotate(25deg); -moz-transform: translate(207px, 3px) rotate(25deg); -ms-transform: translate(207px, 3px) rotate(25deg); -o-transform: translate(207px, 3px) rotate(25deg); transform: translate(207px, 3px) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(0px, -78px) rotate(25deg); -moz-transform: translate(0px, -78px) rotate(25deg); -ms-transform: translate(0px, -78px) rotate(25deg); -o-transform: translate(0px, -78px) rotate(25deg); transform: translate(0px, -78px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(0px, -78px) rotate(25deg); -moz-transform: translate(0px, -78px) rotate(25deg); -ms-transform: translate(0px, -78px) rotate(25deg); -o-transform: translate(0px, -78px) rotate(25deg); transform: translate(0px, -78px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(0px, -78px) rotate(25deg); -moz-transform: translate(0px, -78px) rotate(25deg); -ms-transform: translate(0px, -78px) rotate(25deg); -o-transform: translate(0px, -78px) rotate(25deg); transform: translate(0px, -78px) rotate(25deg); } } @keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(0px, -78px) rotate(25deg); -moz-transform: translate(0px, -78px) rotate(25deg); -ms-transform: translate(0px, -78px) rotate(25deg); -o-transform: translate(0px, -78px) rotate(25deg); transform: translate(0px, -78px) rotate(25deg); } } } @media (max-width: 575px) { @-webkit-keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-200px, 169px); -moz-transform: rotate(-25deg) translate(-200px, 169px); -ms-transform: rotate(-25deg) translate(-200px, 169px); -o-transform: rotate(-25deg) translate(-200px, 169px); transform: rotate(-25deg) translate(-200px, 169px); } } @-moz-keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-200px, 169px); -moz-transform: rotate(-25deg) translate(-200px, 169px); -ms-transform: rotate(-25deg) translate(-200px, 169px); -o-transform: rotate(-25deg) translate(-200px, 169px); transform: rotate(-25deg) translate(-200px, 169px); } } @-ms-keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-200px, 169px); -moz-transform: rotate(-25deg) translate(-200px, 169px); -ms-transform: rotate(-25deg) translate(-200px, 169px); -o-transform: rotate(-25deg) translate(-200px, 169px); transform: rotate(-25deg) translate(-200px, 169px); } } @keyframes fadeInRightPortfolio2 { 0% { opacity: 0; -webkit-transform: rotate(-25deg) translate(20px, 169px); -moz-transform: rotate(-25deg) translate(20px, 169px); -ms-transform: rotate(-25deg) translate(20px, 169px); -o-transform: rotate(-25deg) translate(20px, 169px); transform: rotate(-25deg) translate(20px, 169px); } 100% { opacity: 1; -webkit-transform: rotate(-25deg) translate(-200px, 169px); -moz-transform: rotate(-25deg) translate(-200px, 169px); -ms-transform: rotate(-25deg) translate(-200px, 169px); -o-transform: rotate(-25deg) translate(-200px, 169px); transform: rotate(-25deg) translate(-200px, 169px); } } @-webkit-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-10px, 0) rotate(25deg); -moz-transform: translate(-10px, 0) rotate(25deg); -ms-transform: translate(-10px, 0) rotate(25deg); -o-transform: translate(-10px, 0) rotate(25deg); transform: translate(-10px, 0) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-10px, 0) rotate(25deg); -moz-transform: translate(-10px, 0) rotate(25deg); -ms-transform: translate(-10px, 0) rotate(25deg); -o-transform: translate(-10px, 0) rotate(25deg); transform: translate(-10px, 0) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-10px, 0) rotate(25deg); -moz-transform: translate(-10px, 0) rotate(25deg); -ms-transform: translate(-10px, 0) rotate(25deg); -o-transform: translate(-10px, 0) rotate(25deg); transform: translate(-10px, 0) rotate(25deg); } } @keyframes fadeInRightPortfolio4 { 0% { opacity: 0; -webkit-transform: translate(-30px, 120px) rotate(25deg); -moz-transform: translate(-30px, 120px) rotate(25deg); -ms-transform: translate(-30px, 120px) rotate(25deg); -o-transform: translate(-30px, 120px) rotate(25deg); transform: translate(-30px, 120px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(-10px, 0) rotate(25deg); -moz-transform: translate(-10px, 0) rotate(25deg); -ms-transform: translate(-10px, 0) rotate(25deg); -o-transform: translate(-10px, 0) rotate(25deg); transform: translate(-10px, 0) rotate(25deg); } } @-webkit-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(5px, 8px) rotate(25deg); -moz-transform: translate(5px, 8px) rotate(25deg); -ms-transform: translate(5px, 8px) rotate(25deg); -o-transform: translate(5px, 8px) rotate(25deg); transform: translate(5px, 8px) rotate(25deg); } } @-moz-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(5px, 8px) rotate(25deg); -moz-transform: translate(5px, 8px) rotate(25deg); -ms-transform: translate(5px, 8px) rotate(25deg); -o-transform: translate(5px, 8px) rotate(25deg); transform: translate(5px, 8px) rotate(25deg); } } @-ms-keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(5px, 8px) rotate(25deg); -moz-transform: translate(5px, 8px) rotate(25deg); -ms-transform: translate(5px, 8px) rotate(25deg); -o-transform: translate(5px, 8px) rotate(25deg); transform: translate(5px, 8px) rotate(25deg); } } @keyframes fadeInRightPortfolio5 { 0% { opacity: 0; -webkit-transform: translate(-70px, 0px) rotate(25deg); -moz-transform: translate(-70px, 0px) rotate(25deg); -ms-transform: translate(-70px, 0px) rotate(25deg); -o-transform: translate(-70px, 0px) rotate(25deg); transform: translate(-70px, 0px) rotate(25deg); } 100% { opacity: 1; -webkit-transform: translate(5px, 8px) rotate(25deg); -moz-transform: translate(5px, 8px) rotate(25deg); -ms-transform: translate(5px, 8px) rotate(25deg); -o-transform: translate(5px, 8px) rotate(25deg); transform: translate(5px, 8px) rotate(25deg); } } } @-webkit-keyframes tpFadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-moz-keyframes tpFadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @-ms-keyframes tpFadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } @keyframes tpFadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } } .tpFadeInLeft { -webkit-animation-name: tpFadeInLeft; animation-name: tpFadeInLeft; } @-webkit-keyframes tpFadeInLeft2 { 0% { opacity: 0; -webkit-transform: rotate(-90deg) translate(60px, -60px); -moz-transform: rotate(-90deg) translate(60px, -60px); -ms-transform: rotate(-90deg) translate(60px, -60px); -o-transform: rotate(-90deg) translate(60px, -60px); transform: rotate(-90deg) translate(60px, -60px); } 100% { opacity: 1; -webkit-transform: rotate(-90deg) translate(75px, -60px); -moz-transform: rotate(-90deg) translate(75px, -60px); -ms-transform: rotate(-90deg) translate(75px, -60px); -o-transform: rotate(-90deg) translate(75px, -60px); transform: rotate(-90deg) translate(75px, -60px); } } @-moz-keyframes tpFadeInLeft2 { 0% { opacity: 0; -webkit-transform: rotate(-90deg) translate(60px, -60px); -moz-transform: rotate(-90deg) translate(60px, -60px); -ms-transform: rotate(-90deg) translate(60px, -60px); -o-transform: rotate(-90deg) translate(60px, -60px); transform: rotate(-90deg) translate(60px, -60px); } 100% { opacity: 1; -webkit-transform: rotate(-90deg) translate(75px, -60px); -moz-transform: rotate(-90deg) translate(75px, -60px); -ms-transform: rotate(-90deg) translate(75px, -60px); -o-transform: rotate(-90deg) translate(75px, -60px); transform: rotate(-90deg) translate(75px, -60px); } } @-ms-keyframes tpFadeInLeft2 { 0% { opacity: 0; -webkit-transform: rotate(-90deg) translate(60px, -60px); -moz-transform: rotate(-90deg) translate(60px, -60px); -ms-transform: rotate(-90deg) translate(60px, -60px); -o-transform: rotate(-90deg) translate(60px, -60px); transform: rotate(-90deg) translate(60px, -60px); } 100% { opacity: 1; -webkit-transform: rotate(-90deg) translate(75px, -60px); -moz-transform: rotate(-90deg) translate(75px, -60px); -ms-transform: rotate(-90deg) translate(75px, -60px); -o-transform: rotate(-90deg) translate(75px, -60px); transform: rotate(-90deg) translate(75px, -60px); } } @keyframes tpFadeInLeft2 { 0% { opacity: 0; -webkit-transform: rotate(-90deg) translate(60px, -60px); -moz-transform: rotate(-90deg) translate(60px, -60px); -ms-transform: rotate(-90deg) translate(60px, -60px); -o-transform: rotate(-90deg) translate(60px, -60px); transform: rotate(-90deg) translate(60px, -60px); } 100% { opacity: 1; -webkit-transform: rotate(-90deg) translate(75px, -60px); -moz-transform: rotate(-90deg) translate(75px, -60px); -ms-transform: rotate(-90deg) translate(75px, -60px); -o-transform: rotate(-90deg) translate(75px, -60px); transform: rotate(-90deg) translate(75px, -60px); } } .tpFadeInLeft2 { -webkit-animation-name: tpFadeInLeft2; animation-name: tpFadeInLeft2; } .tp-portfolio-load-more .grid-item.hidden, .tp-portfolio-load-more .grid-item.hidden * { -webkit-transition: all 0.3 ease-out 0s; -moz-transition: all 0.3 ease-out 0s; -ms-transition: all 0.3 ease-out 0s; -o-transition: all 0.3 ease-out 0s; transition: all 0.3 ease-out 0s; height: 0; visibility: hidden; opacity: 0; } /* elements css */ .elements__carousel .slick-list { margin: 0 -15px; } .elements__carousel .slick-list .slick-slide > div { margin: 0 15px; } .elements__carousel .slick-dots { margin-top: 30px; text-align: center; } .elements__carousel .slick-dots li { list-style: none; display: inline-block; } .elements__carousel .slick-dots li button { font-size: 0; width: 8px; height: 8px; background-color: #E2E2E2; border-radius: 10px; margin: 0 5px; } .elements__carousel .slick-dots li.slick-active button { width: 50px; background-color: var(--tp-theme-1); } .elements__carousel .elements-arrow button, .elements__carousel .elements-img-arrow button { position: absolute; top: calc(50% - 35px); left: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; background-color: var(--tp-common-white); color: var(--tp-common-black); border-radius: 50%; } .elements__carousel .elements-arrow button:hover, .elements__carousel .elements-img-arrow button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .elements__carousel .elements-arrow button.slick-next, .elements__carousel .elements-img-arrow button.slick-next { left: auto; right: 0; -webkit-transform: translate(50%, -50%); -moz-transform: translate(50%, -50%); -ms-transform: translate(50%, -50%); -o-transform: translate(50%, -50%); transform: translate(50%, -50%); } .elements__carousel.elements__carousel-img .elements-img-arrow button { left: 15px; top: 50%; -webkit-transform: translate(0, -50%); -moz-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); } [dir=rtl] .elements__carousel.elements__carousel-img .elements-img-arrow button { left: auto; right: 15px; } .elements__carousel.elements__carousel-img .elements-img-arrow button.slick-next { left: auto; right: 15px; } [dir=rtl] .elements__carousel.elements__carousel-img .elements-img-arrow button.slick-next { left: 15px; right: auto; } .elements__carousel.elements__carousel-img-dot .slick-dots { position: absolute; bottom: 15px; z-index: 1; margin: auto; left: 0; right: 0; text-align: center; } .elements__parallax-item { height: 400px; } /*----------------------------------------*/ /* 14. TESTIMONIAL CSS START /*----------------------------------------*/ .testimonial__wrapper .section__title-wrapper { padding-left: 125px; padding-right: 125px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__wrapper .section__title-wrapper { padding-left: 70px; padding-right: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__wrapper .section__title-wrapper { padding-left: 60px; padding-right: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__wrapper .section__title-wrapper { padding-left: 0; padding-right: 0; } } .testimonial__wrapper .section__title-pre.section__title-pre-1-2 { letter-spacing: 0; font-weight: 400; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__wrapper-8 { padding-left: 150px; padding-right: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__wrapper-8 { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__wrapper-8 { padding-left: 0px; padding-right: 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) { .testimonial__avater { margin-bottom: 25px; } } .testimonial__avater-8 { padding-bottom: 45px; padding-top: 45px; } .testimonial__avater-8.swiper-slide-active img { -webkit-transform: scale(1.42); -moz-transform: scale(1.42); -ms-transform: scale(1.42); -o-transform: scale(1.42); transform: scale(1.42); } [dir=rtl] .testimonial__avater-thumb { margin-right: 0; margin-left: 15px; } div.testimonial__avater-thumb img { width: 70px; height: 70px; border-radius: 50%; } div.testimonial__avater-thumb-3 img { width: 100px; height: 100px; border-radius: 50%; margin-right: 25px; mix-blend-mode: luminosity; } [dir=rtl] div.testimonial__avater-thumb-3 img { margin-right: 0; margin-left: 25px; } @media (max-width: 575px) { div.testimonial__avater-thumb-3 img { margin-right: 0; margin-bottom: 25px; } [dir=rtl] div.testimonial__avater-thumb-3 img { margin-left: 0; } } .testimonial__avater-thumb-4 { flex: 0 0 auto; } div.testimonial__avater-thumb-4 img { width: 60px; height: 60px; border-radius: 50%; margin-bottom: 25px; margin-right: 20px; } [dir=rtl] div.testimonial__avater-thumb-4 img { margin-right: 0; margin-left: 20px; } @media (max-width: 575px) { div.testimonial__avater-thumb-4 img { width: 100px; height: 100px; margin-right: 0; margin-bottom: 25px; } [dir=rtl] div.testimonial__avater-thumb-4 img { margin-left: 0; } } .testimonial__avater-thumb-5 { margin-bottom: 30px; } div.testimonial__avater-thumb-5 img { width: 60px; height: 60px; border-radius: 50%; } @media (max-width: 575px) { div.testimonial__avater-thumb-5 img { width: 100px; height: 100px; margin-bottom: 25px; } } div.testimonial__avater-thumb-6 img { width: 44px; height: 44px; border-radius: 50%; margin-right: 10px; } [dir=rtl] div.testimonial__avater-thumb-6 img { margin-right: 0; margin-left: 10px; } @media (max-width: 575px) { div.testimonial__avater-thumb-6 img { margin-bottom: 25px; } } div.testimonial__avater-thumb-7 img { width: 60px; height: 60px; border-radius: 50%; margin-right: 15px; } [dir=rtl] div.testimonial__avater-thumb-7 img { margin-right: 0; margin-left: 15px; } @media (max-width: 575px) { div.testimonial__avater-thumb-7 img { margin-bottom: 25px; } } div.testimonial__avater-thumb-8 img { width: 64px; height: 64px; border-radius: 50%; } div.testimonial__avater-thumb-9 img { width: 54px; height: 54px; border-radius: 50%; } .testimonial__avater-title { font-size: 20px; color: var(--tp-common-white); font-family: var(--tp-ff-inter); margin-bottom: 0; } .testimonial__avater-title-2 { font-size: 17px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-inter); margin-bottom: 1px; line-height: 1; } .testimonial__avater-title-3 { font-size: 20px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); margin-bottom: 0; } .testimonial__avater-title-4 { color: var(--tp-common-white); font-family: var(--tp-ff-space); font-size: 24px; margin-bottom: 0; line-height: 1; } .testimonial__avater-title-5 { color: var(--tp-common-black); font-family: var(--tp-ff-space); font-size: 18px; margin-bottom: 0; line-height: 1; letter-spacing: -0.02em; } .testimonial__avater-title-6 { color: var(--tp-common-black-9); font-size: 16px; margin-bottom: 0; line-height: 1; font-weight: 600; font-family: var(--tp-ff-roboto); } .testimonial__avater-title-7 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 17px; line-height: 1; color: var(--tp-common-black-11); margin-bottom: 0; } .testimonial__avater-title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 0; } .testimonial__avater-title-9 { font-family: var(--tp-ff-syne); font-style: normal; font-weight: 700; font-size: 16px; color: var(--tp-common-black); margin-bottom: 0; } .testimonial__avater-title-10 { font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 0; margin-right: 5px; } [dir=rtl] .testimonial__avater-title-10 { margin-right: 0; margin-left: 5px; } .testimonial__avater-designation { font-size: 12px; font-weight: 400; color: var(--tp-common-white); text-transform: uppercase; font-family: var(--tp-ff-space); } .testimonial__avater-designation-2 { font-size: 14px; color: var(--tp-common-white); opacity: 0.8; line-height: 1; } .testimonial__avater-designation-3 { font-size: 16px; color: var(--tp-common-white); font-family: var(--tp-ff-space); } .testimonial__avater-designation-4 { font-family: var(--tp-ff-inter); font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1; } .testimonial__avater-designation-5 { font-family: var(--tp-ff-inter); font-size: 15px; color: #717388; line-height: 1; } .testimonial__avater-designation-6 { font-size: 13px; color: var(--tp-text-19); line-height: 1; font-family: var(--tp-ff-roboto); } .testimonial__avater-designation-7 { font-family: var(--tp-ff-inter); font-size: 14px; line-height: 1; } .testimonial__avater-designation-8 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 12px; line-height: 10px; text-align: center; letter-spacing: 0.11em; text-transform: uppercase; color: var(--tp-common-white); opacity: 0.7; } .testimonial__avater-designation-9 { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 14px; line-height: 1.6; color: #525258; } .testimonial__avater-designation-10 { font-family: var(--tp-ff-space); font-size: 16px; line-height: 20px; letter-spacing: -0.02em; color: var(--tp-common-white); } @media (max-width: 575px) { .testimonial__avater-date { margin-top: 10px; } } .testimonial__avater-date span { font-family: var(--tp-ff-space); font-weight: 400; font-size: 14px; color: var(--tp-common-white); position: relative; padding-left: 13px; margin-left: 13px; } [dir=rtl] .testimonial__avater-date span { padding-left: 0; margin-left: 0; padding-right: 13px; margin-right: 13px; } @media (max-width: 575px) { .testimonial__avater-date span { padding-left: 0; margin-left: 0; } [dir=rtl] .testimonial__avater-date span { padding-right: 0; margin-right: 0; } } .testimonial__avater-date span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 20px; background-color: rgba(255, 255, 255, 0.2); } [dir=rtl] .testimonial__avater-date span::after { left: auto; right: 0; } @media (max-width: 575px) { .testimonial__avater-date span::after { display: none; } } .testimonial__content { position: relative; } .testimonial__content::after { position: absolute; content: ""; top: -20px; left: -50px; right: auto; width: 1px; height: calc(100% + 40px); -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); background-color: var(--tp-border-1); } [dir=rtl] .testimonial__content::after { left: auto; right: -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) { .testimonial__content::after { display: none; } } .testimonial__content p { font-weight: 300; font-size: 20px; color: var(--tp-common-white); line-height: 1.4; margin-bottom: 0; } .testimonial__content-2 p { font-size: 22px; font-family: var(--tp-ff-oswald); font-weight: 300; color: var(--tp-common-white); line-height: 1.6; margin-bottom: 33px; } .testimonial__content-3 h4 { font-size: 22px; color: var(--tp-common-white); font-family: var(--tp-ff-space); } .testimonial__content-3 p { font-size: 16px; font-weight: 400; color: rgba(255, 255, 255, 0.7); line-height: 1.8; margin-bottom: 0; } .testimonial__content-4 p { font-size: 20px; line-height: 1.5; color: var(--tp-common-white); margin-bottom: 22px; } .testimonial__content-5 p { font-family: var(--tp-ff-space); font-weight: 400; font-size: 18px; line-height: 28px; letter-spacing: -0.02em; color: var(--tp-common-black); margin-bottom: 35px; } .testimonial__content-6 p { color: var(--tp-common-black-9); font-size: 16px; line-height: 26px; margin-bottom: 30px; font-family: var(--tp-ff-roboto); } .testimonial__content-7 { margin-bottom: 65px; } .testimonial__content-7 p { font-size: 16px; line-height: 1.6; } .testimonial__content-8 { margin-bottom: 3px; } .testimonial__content-8 p { font-family: var(--tp-ff-space); font-size: 24px; line-height: 1.5; text-align: center; letter-spacing: -0.01em; color: var(--tp-common-white); margin-bottom: 37px; } .testimonial__content-9 { margin-bottom: 3px; } .testimonial__content-9 .testimonial-heading { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 20px; line-height: 1; color: var(--tp-common-black); margin-bottom: 15px; } .testimonial__content-9 p { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 20px; line-height: 1.6; color: var(--tp-text-1); margin-bottom: 23px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__content-9 p br { display: none; } } .testimonial__content-10 p { font-family: var(--tp-ff-space); font-weight: 400; font-size: 24px; line-height: 1.33; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 15px; } .testimonial__slider .testimonial-slider-dot { margin-right: 206px; text-align: center; } [dir=rtl] .testimonial__slider .testimonial-slider-dot { margin-right: 0; margin-left: 206px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__slider .testimonial-slider-dot { margin-right: 140px; } [dir=rtl] .testimonial__slider .testimonial-slider-dot { margin-right: 0; margin-left: 140px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__slider .testimonial-slider-dot { margin-right: 0; } [dir=rtl] .testimonial__slider .testimonial-slider-dot { margin-left: 0; } } .testimonial__slider-nav { margin-bottom: 25px; } .testimonial__slider-nav .slick-current.slick-active::after { visibility: visible; opacity: 1; } .testimonial__slider-nav .slick-current.slick-active .tp-border-loader svg circle:last-child { animation: tp-border-loader 8s linear infinite; } .testimonial__slider-nav-4 button { width: 40px; height: 180px; line-height: 176px; text-align: center; border: 2px solid rgba(255, 255, 255, 0.1019607843); color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__slider-nav-4 button { margin-top: 10px; width: 50%; height: 40px; line-height: 36px; } } .testimonial__slider-nav-4 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } .testimonial__slider-nav-4 button.testimonial-4-button-prev { margin-bottom: 10px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__slider-nav-4 button.testimonial-4-button-prev { margin-right: 5px; } [dir=rtl] .testimonial__slider-nav-4 button.testimonial-4-button-prev { margin-right: 0; margin-left: 5px; } } @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__slider-nav-4 button.testimonial-4-button-next { margin-left: 5px; } [dir=rtl] .testimonial__slider-nav-4 button.testimonial-4-button-next { margin-left: 0; margin-right: 5px; } } @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__slider-arrow-2 { display: none; } } .testimonial__slider-arrow-2 button { width: 60px; height: 60px; line-height: 56px; text-align: center; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 50%; font-size: 16px; position: absolute; top: 50%; left: 70px; z-index: 1; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .testimonial__slider-arrow-2 button { left: auto; right: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__slider-arrow-2 button { left: 40px; } [dir=rtl] .testimonial__slider-arrow-2 button { left: auto; right: 40px; } } .testimonial__slider-arrow-2 button.testimonial-2-button-next { left: auto; right: 70px; } [dir=rtl] .testimonial__slider-arrow-2 button.testimonial-2-button-next { left: 70px; right: auto; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__slider-arrow-2 button.testimonial-2-button-next { right: 40px; } [dir=rtl] .testimonial__slider-arrow-2 button.testimonial-2-button-next { right: auto; left: 40px; } } .testimonial__slider-arrow-2 button:hover { border-color: var(--tp-common-white); background-color: var(--tp-common-white); color: var(--tp-common-black); } .testimonial__slider-arrow-6 button { display: inline-block; width: 40px; height: 40px; line-height: 38px; text-align: center; font-size: 14px; border: 1px solid rgba(13, 18, 30, 0.2); color: var(--tp-common-black-10); border-radius: 50%; } .testimonial__slider-arrow-6 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); border-color: var(--tp-theme-6); } .testimonial__slider-arrow-6 button.testimonial-6-button-next { margin-left: 3px; } [dir=rtl] .testimonial__slider-arrow-6 button.testimonial-6-button-next { margin-left: 0; margin-right: 3px; } .testimonial__slider-arrow-8 button { display: inline-block; width: 60px; height: 60px; line-height: 58px; text-align: center; font-size: 18px; border: 1.5px solid rgba(255, 255, 255, 0.3); color: var(--tp-common-white); position: absolute; top: 50%; left: 0; } [dir=rtl] .testimonial__slider-arrow-8 button { left: auto; right: 0; } .testimonial__slider-arrow-8 button.testimonial-8-button-next { left: auto; right: 0; } [dir=rtl] .testimonial__slider-arrow-8 button.testimonial-8-button-next { left: 0; right: auto; } .testimonial__slider-arrow-8 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); border-color: var(--tp-theme-8); } .testimonial__slider-arrow-9 button { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; font-family: var(--tp-ff-syne); font-weight: 600; font-size: 14px; line-height: 12px; text-transform: uppercase; color: var(--tp-common-black); padding-right: 30px; } [dir=rtl] .testimonial__slider-arrow-9 button { left: auto; right: 0; padding-right: 0; padding-left: 30px; } .testimonial__slider-arrow-9 button::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 100px; background-color: #EAEAEF; } [dir=rtl] .testimonial__slider-arrow-9 button::after { right: auto; left: 0; } .testimonial__slider-arrow-9 button:hover { color: #FA6490; } .testimonial__slider-arrow-9 button span { position: relative; } .testimonial__slider-arrow-9 button i, .testimonial__slider-arrow-9 button svg { margin-right: 4px; } [dir=rtl] .testimonial__slider-arrow-9 button i, [dir=rtl] .testimonial__slider-arrow-9 button svg { margin-right: 0; margin-left: 4px; } .testimonial__slider-arrow-9 button svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .testimonial__slider-arrow-9 button.testimonial-9-button-next { padding-left: 30px; padding-right: 0; left: auto; right: 0; } [dir=rtl] .testimonial__slider-arrow-9 button.testimonial-9-button-next { padding-left: 0; padding-right: 30px; left: 0; right: auto; } .testimonial__slider-arrow-9 button.testimonial-9-button-next::after { left: 0; right: auto; } [dir=rtl] .testimonial__slider-arrow-9 button.testimonial-9-button-next::after { left: auto; right: 0; } .testimonial__slider-arrow-9 button.testimonial-9-button-next i, .testimonial__slider-arrow-9 button.testimonial-9-button-next svg { margin-right: 0; margin-left: 4px; } [dir=rtl] .testimonial__slider-arrow-9 button.testimonial-9-button-next i, [dir=rtl] .testimonial__slider-arrow-9 button.testimonial-9-button-next svg { margin-right: 4px; margin-left: 0; } .testimonial__slider-arrow-15 button { display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; font-size: 14px; border: 2px solid #E7E7EF; color: var(--tp-common-black); } .testimonial__slider-arrow-15 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .testimonial__slider-arrow-15 button.testimonial-15-button-next { margin-left: 3px; } [dir=rtl] .testimonial__slider-arrow-15 button.testimonial-15-button-next { margin-left: 0; margin-right: 3px; } .testimonial__slider-thumb-nav { position: relative; background-color: var(--tp-theme-2); } .testimonial__slider-thumb-nav:hover { cursor: pointer; } div.testimonial__slider-thumb-nav img { width: 70px !important; height: 70px; border: 1px solid transparent; border-radius: 50%; padding: 5px; } .testimonial__slider-thumb-nav .tp-border-loader { position: absolute; top: 0; left: 0; } [dir=rtl] .testimonial__slider-thumb-nav .tp-border-loader { left: auto; right: 0; } .testimonial__slider-thumb-nav .tp-border-loader svg { width: 70px; height: 70px; } .testimonial__slider-5 .slick-list { overflow: visible; margin: 0 -15px; } .testimonial__slider-5 .slick-slide { margin: 0 15px; } .testimonial__slider-6 { margin-right: -410px; } [dir=rtl] .testimonial__slider-6 { margin-right: 0; margin-left: -410px; } @media (max-width: 575px) { .testimonial__slider-6 { margin-right: 0; } [dir=rtl] .testimonial__slider-6 { margin-left: 0; } } .testimonial__slider-8-thumb { width: 270px; } .testimonial__slider-9 { padding-left: 250px; padding-right: 250px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__slider-9 { padding-left: 200px; padding-right: 200px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__slider-9 { padding-left: 150px; padding-right: 150px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__slider-9 { padding-left: 140px; padding-right: 140px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__slider-9 { padding-left: 0; padding-right: 0; } } .testimonial__slider-9 .slick-current.slick-active .tp-border-loader svg circle:last-child { animation: tp-border-loader 8s linear infinite; } .testimonial__slider-9-thumb-nav { position: relative; } .testimonial__slider-9-thumb-nav:hover { cursor: pointer; } .testimonial__slider-9-thumb-nav .tp-border-loader { position: absolute; top: 0; left: 0; } .testimonial__slider-9-thumb-nav .tp-border-loader svg { width: 62px; height: 62px; } .testimonial__slider-9-thumb-nav .tp-border-loader svg circle { stroke: var(--tp-common-black); } div.testimonial__slider-9-thumb-nav img { width: 62px; height: 62px; border-radius: 50%; padding: 4px; } [dir=rtl] div.testimonial__slider-9-thumb-nav img { margin-right: 12px; } .testimonial__slider-14 { padding: 40px 60px 90px; border: 1px solid #EAEAEF; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__slider-14 { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__slider-14 { padding-left: 20px; padding-right: 20px; } } .testimonial__slider-15 { margin-right: -770px; } [dir=rtl] .testimonial__slider-15 { margin-right: 0; margin-left: -770px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .testimonial__slider-15 { margin-right: -400px; } [dir=rtl] .testimonial__slider-15 { margin-right: 0; margin-left: -400px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__slider-15 { margin-right: -600px; } [dir=rtl] .testimonial__slider-15 { margin-right: 0; margin-left: -600px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__slider-15 { margin-right: -300px; } [dir=rtl] .testimonial__slider-15 { margin-right: 0; margin-left: -300px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__slider-15 { margin-right: 0; } [dir=rtl] .testimonial__slider-15 { margin-left: 0; } } .testimonial__item-2 { padding: 0 70px; text-align: center; } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__item-2 { padding: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__item-2 { padding: 0 35px; } } .testimonial__item-3 { padding: 60px 60px 50px; background: #22264C; } @media (max-width: 575px) { .testimonial__item-3 { padding: 60px 35px 50px; } } .testimonial__item-4 { padding: 40px 60px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(20px); } @media (max-width: 575px) { .testimonial__item-4 { padding-left: 20px; padding-right: 20px; } } .testimonial__item-5 { position: relative; padding: 60px 40px 50px; background: var(--tp-common-white); box-shadow: 0px 30px 40px rgba(2, 45, 62, 0.08); border-radius: 10px; } @media (max-width: 575px) { .testimonial__item-5 { padding: 40px 20px 20px; } } .testimonial__item-6 { padding: 35px 30px 40px 30px; background: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(13, 18, 30, 0.08); position: relative; } .testimonial__item-6::after { position: absolute; content: ""; left: auto; right: 0; top: 0; width: 0; height: 2px; background-color: var(--tp-theme-6); } [dir=rtl] .testimonial__item-6::after { left: 0; right: auto; } .testimonial__item-6:hover { box-shadow: 0px 30px 30px rgba(13, 18, 30, 0.08); } .testimonial__item-6:hover::after { width: 100%; right: auto; left: 0; } [dir=rtl] .testimonial__item-6:hover::after { left: auto; right: 0; } .testimonial__item-7 { border-radius: 40px; padding: 50px 35px 45px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__item-7 { padding-left: 25px; padding-right: 25px; } } @media (max-width: 575px) { .testimonial__item-7 { padding-left: 20px; padding-right: 20px; } } .testimonial__item-7:hover { box-shadow: 0px 30px 50px rgba(4, 40, 34, 0.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) { .testimonial__item-wrapper-3 { margin-top: 30px; } } .testimonial__inner-2 { background-blend-mode: luminosity; padding-top: 90px; padding-bottom: 72px; box-shadow: 0px 40px 50px rgba(5, 31, 31, 0.14); } .testimonial__inner-10 { padding: 60px 100px 40px; background-color: #159BFC; border-radius: 20px; position: relative; z-index: 1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial__inner-10 { padding: 60px 50px 40px; } } @media (max-width: 575px) { .testimonial__inner-10 { padding: 60px 20px 40px; } } .testimonial__inner-10-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .testimonial__bg { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 200px; background-color: var(--tp-grey-7); } .testimonial__shape-quote { position: absolute; bottom: -7%; right: 6%; } [dir=rtl] .testimonial__shape-quote { left: 6%; right: auto; } .testimonial__shape-quote-8 { margin-bottom: 40px; } .testimonial__shape-quote-9 { margin-bottom: 35px; } .testimonial__shape-quote-9 img { display: inline-block !important; } .testimonial__shape-1 { position: absolute; top: -4%; left: 14%; z-index: -1; } [dir=rtl] .testimonial__shape-1 { left: auto; right: 14%; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__shape-1 { left: 0; } [dir=rtl] .testimonial__shape-1 { right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__shape-1 { left: 0; width: 100%; } [dir=rtl] .testimonial__shape-1 { right: 0; } } .testimonial__shape-2 { position: absolute; top: 15%; right: 40px; } [dir=rtl] .testimonial__shape-2 { right: auto; left: 40px; } .testimonial__shape-3 { position: absolute; top: 22%; right: 8%; z-index: -1; -webkit-animation: tprotate 3s infinite alternate; animation: tprotate 3s infinite alternate; } [dir=rtl] .testimonial__shape-3 { right: auto; left: 8%; } .testimonial__shape-4 { position: absolute; bottom: 23%; right: 9%; z-index: -1; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } [dir=rtl] .testimonial__shape-4 { right: auto; left: 9%; } .testimonial__shape-5 { position: absolute; top: 20%; right: 20%; z-index: -1; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .testimonial__shape-5 { right: auto; left: 20%; } .testimonial__shape-6 { position: absolute; top: 16%; left: 12%; z-index: -1; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .testimonial__shape-6 { right: 12%; left: auto; } .testimonial__shape-7 { position: absolute; bottom: 33%; left: 16%; z-index: -1; -webkit-animation: tprotate 1s infinite alternate; animation: tprotate 1s infinite alternate; } [dir=rtl] .testimonial__shape-7 { right: 16%; left: auto; } .testimonial__shape-8 { position: absolute; top: -5%; left: 17%; z-index: -1; } [dir=rtl] .testimonial__shape-8 { right: 17%; left: auto; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__shape-8 { left: 0; width: 100%; object-fit: cover; } [dir=rtl] .testimonial__shape-8 { right: 0; left: auto; } } .testimonial__shape-9 { position: absolute; left: 9%; bottom: 11%; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .testimonial__shape-9 { right: 9%; left: auto; } .testimonial__shape-10 { position: absolute; right: 9%; bottom: 19%; -moz-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .testimonial__shape-10 { right: auto; left: 9%; } .testimonial__shape-11 { position: absolute; mix-blend-mode: luminosity; opacity: 0.04; bottom: -41%; left: -11%; z-index: -1; } [dir=rtl] .testimonial__shape-11 { right: -11%; left: auto; } .testimonial__rating { margin-bottom: 5px; } .testimonial__rating a, .testimonial__rating i, .testimonial__rating > span { font-size: 16px; color: var(--tp-common-yellow); } .testimonial__rating-5 { margin-bottom: 0; line-height: 1; } .testimonial__rating-5 a { font-size: 11px; } .testimonial__rating-7 { margin-bottom: 30px; line-height: 1; } .testimonial__rating-7 a { font-size: 16px; } .testimonial__rating-content p { font-weight: 500; font-size: 14px; color: var(--tp-common-black); margin-bottom: 0; } [dir=rtl] .testimonial__rating-logo { margin-right: 0; margin-left: 15px; } .testimonial__icon { margin-bottom: 24px; } .testimonial__icon span { color: var(--tp-common-white); font-size: 40px; } .testimonial__icon-10 { margin-bottom: 17px; } .testimonial__icon-10 span { display: inline-block; width: 70px; height: 70px; line-height: 66px; text-align: center; border: 2px solid rgba(255, 255, 255, 0.12); border-radius: 50%; font-size: 24px; color: var(--tp-common-white); } .testimonial__gradient-bg { background-image: -webkit-linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%); background-image: -moz-linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%); background-image: -ms-linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%); background-image: -o-linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%); background-image: linear-gradient(180deg, #F8F8F8 0%, rgba(248, 248, 248, 0) 100%); } .testimonial__gradient-bg-2 { position: absolute; left: 150px; top: 0; width: calc(100% - 300px); height: calc(100% + 20px); background-image: -webkit-linear-gradient(100.21deg, rgba(255, 63, 3, 0.1) -2.54%, rgba(123, 214, 80, 0.1) 50.09%, rgba(129, 108, 236, 0.1) 101.82%); background-image: -moz-linear-gradient(100.21deg, rgba(255, 63, 3, 0.1) -2.54%, rgba(123, 214, 80, 0.1) 50.09%, rgba(129, 108, 236, 0.1) 101.82%); background-image: -ms-linear-gradient(100.21deg, rgba(255, 63, 3, 0.1) -2.54%, rgba(123, 214, 80, 0.1) 50.09%, rgba(129, 108, 236, 0.1) 101.82%); background-image: -o-linear-gradient(100.21deg, rgba(255, 63, 3, 0.1) -2.54%, rgba(123, 214, 80, 0.1) 50.09%, rgba(129, 108, 236, 0.1) 101.82%); background-image: linear-gradient(100.21deg, rgba(255, 63, 3, 0.1) -2.54%, rgba(123, 214, 80, 0.1) 50.09%, rgba(129, 108, 236, 0.1) 101.82%); } [dir=rtl] .testimonial__gradient-bg-2 { left: auto; right: 150px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__gradient-bg-2 { left: 50px; width: calc(100% - 100px); } [dir=rtl] .testimonial__gradient-bg-2 { left: auto; right: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__gradient-bg-2 { left: 20px; width: calc(100% - 40px); } [dir=rtl] .testimonial__gradient-bg-2 { left: auto; right: 20px; } } .testimonial__info { padding-right: 60px; } [dir=rtl] .testimonial__info { padding-right: 0; padding-left: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__info { padding-right: 40px; } [dir=rtl] .testimonial__info { padding-right: 0; padding-left: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__info { padding-right: 0; } [dir=rtl] .testimonial__info { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .testimonial__info { padding-right: 0; margin-bottom: 50px; } [dir=rtl] .testimonial__info { padding-left: 0; } } .testimonial__info-title { font-size: 168px; line-height: 0.9; color: var(--tp-common-black); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__info-title { font-size: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial__info-title { font-size: 158px; } } @media (max-width: 575px) { .testimonial__info-title { font-size: 120px; } } .testimonial__info-title img { -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -ms-transform: translateY(-6px); -o-transform: translateY(-6px); transform: translateY(-6px); } .testimonial__info-title.enable-background { -webkit-background-clip: text; color: transparent; background-position: center; background-size: cover; background-repeat: no-repeat; } .testimonial__info p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 26px; line-height: 1.15; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 37px; } .testimonial__info-btn .tp-btn { padding: 12px 28px; } .testimonial__info-btn .tp-btn:hover { background-color: var(--tp-common-black); } @media (max-width: 575px) { .testimonial__nav-5 { margin-top: 40px; } } .testimonial__nav-5 button { display: inline-block; width: 50px; height: 50px; line-height: 46px; text-align: center; border: 2px solid rgba(4, 18, 31, 0.1); font-size: 14px; color: var(--tp-common-black); background-color: transparent; border-radius: 50%; } .testimonial__nav-5 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); border-color: var(--tp-theme-5); } .testimonial__nav-5 button.testimonial-5-button-next { margin-left: 5px; } [dir=rtl] .testimonial__nav-5 button.testimonial-5-button-next { margin-left: 0; margin-right: 5px; } .testimonial__heading { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 20px; line-height: 1.5; color: var(--tp-common-black-11); margin-bottom: 10px; } .testimonial__style-black .testimonial__item-4 { padding: 0; background: var(--tp-common-white); border: none; } .testimonial__style-black .testimonial__icon span { color: var(--tp-common-black); } .testimonial__style-black .testimonial__content-4 p { color: #03041C; } .testimonial__style-black .testimonial__avater-title-4 { color: var(--tp-common-black); } .testimonial__style-black .testimonial__avater-designation-4 { color: var(--tp-text-1); } .testimonial__style-black .testimonial__avater-thumb-4 img { margin-bottom: 60px; } .testimonial__style-2 .testimonial__item-5 { border-radius: 0; padding: 50px 40px 34px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial__style-2 .testimonial__item-5 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial__style-2 .testimonial__item-5 { padding: 40px 30px 34px; } } .testimonial__style-2 .testimonial__content-5 p { margin-bottom: 46px; } .testimonial__style-3 .testimonial__rating { margin-bottom: 10px; } .testimonial__style-3 .testimonial__item-6 { padding: 48px 50px 50px; } @media (max-width: 575px) { .testimonial__style-3 .testimonial__item-6 { padding: 48px 30px 50px; } } .testimonial__style-3 .testimonial__item-6::after { background-color: var(--tp-theme-1); } .testimonial__style-3 .testimonial__content-6 p { font-family: var(--tp-ff-space); font-size: 20px; line-height: 1.4; color: var(--tp-text-1); } .testimonial__style-3 .testimonial__avater-title-6 { font-family: var(--tp-ff-inter); font-size: 16px; } .testimonial__style-3 .testimonial__avater-designation-6 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 12px; text-transform: uppercase; color: var(--tp-text-1); } .testimonial-slider-dot-2 .swiper-pagination-bullet { background-color: var(--tp-common-white-op-7); } .testimonial-slider-dot-2 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-white); } .testimonial-slider-dot-2 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-common-white); } .testimonial-slider-dot-7 .swiper-pagination-bullet { background-color: rgba(4, 18, 31, 0.1411764706); width: 10px; height: 10px; margin: 0 4px; } .testimonial-slider-dot-7 .swiper-pagination-bullet::after { display: none; } .testimonial-slider-dot-7 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-7); } .testimonial-slider-dot-9 .swiper-pagination-bullet { background-color: rgba(3, 4, 28, 0.3); } .testimonial-slider-dot-9 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: #03041c; } .testimonial-slider-dot-9 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: #03041c; } .testimonial-slider-dot-10 .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.5); margin: 0 4px; } .testimonial-slider-dot-10 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: white; width: 50px; } .testimonial-slider-dot-10 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: white; } .testimonial-slider-dot-14 { position: absolute; left: 20.5%; bottom: 40px; } [dir=rtl] .testimonial-slider-dot-14 { left: auto; right: 20.5%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .testimonial-slider-dot-14 { left: 21.5%; } [dir=rtl] .testimonial-slider-dot-14 { left: auto; right: 21.5%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .testimonial-slider-dot-14 { left: 21.5%; } [dir=rtl] .testimonial-slider-dot-14 { left: auto; right: 21.5%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .testimonial-slider-dot-14 { left: 17.5%; } [dir=rtl] .testimonial-slider-dot-14 { left: auto; right: 17.5%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .testimonial-slider-dot-14 { left: 19.5%; } [dir=rtl] .testimonial-slider-dot-14 { left: auto; right: 19.5%; } } @media (max-width: 575px) { .testimonial-slider-dot-14 { left: 7.5%; } [dir=rtl] .testimonial-slider-dot-14 { left: auto; right: 7.5%; } } .testimonial-slider-dot-14 .swiper-pagination-bullet { background-color: #DBDBE6; margin: 0 4px; } .testimonial-slider-dot-14 .swiper-pagination-bullet::after { display: none; } .testimonial-slider-dot-14 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-1); } .testimonial-slider-dot .swiper-pagination-bullet { background-color: var(--tp-common-white-op-3); } .testimonial-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-white); } .testimonial-slider-dot .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-common-white); } /*----------------------------------------*/ /* 15. BRAND CSS START /*----------------------------------------*/ .brand__inner { padding: 40px 0; border-top: 1px solid var(--tp-border-1); } .brand__title { font-size: 16px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-inter); margin-right: 60px; margin-bottom: 0; display: inline-block; flex: 0 0 auto; } [dir=rtl] .brand__title { margin-right: 0; margin-left: 60px; } @media (max-width: 575px) { .brand__title { margin-bottom: 15px; margin-right: 0; } [dir=rtl] .brand__title { margin-left: 0; } } .brand__thumb { text-align: center; } .brand__thumb img { opacity: 0.5; } .brand__thumb:hover img { opacity: 1; } .brand__item-2 { text-align: center; } .brand__item-2 img { opacity: 0.6; } .brand__item-2:hover img { opacity: 1; } .brand__item-3 { position: relative; padding: 60px 30px; border: 1px solid rgba(255, 255, 255, 0.1); margin: -1px 0 0 -1px; height: 150px; z-index: 1; } .brand__item-3::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(10px); visibility: hidden; opacity: 0; z-index: -1; } [dir=rtl] .brand__item-3::after { left: auto; right: 0; } .brand__item-3:hover::after { visibility: visible; opacity: 1; } .brand__item-3:hover .brand__tooltip { visibility: visible; opacity: 1; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .brand__item-5 { width: 260px !important; height: 160px; border: 1px solid rgba(4, 18, 31, 0.1019607843); text-align: center; line-height: 160px; border-radius: 14px; display: flex !important; align-items: center; justify-content: center; } .brand__item-5:hover { background: #F8F8F8; } .brand__item-6 { text-align: center; margin-bottom: 50px; } @media (max-width: 575px) { .brand__item-6 { width: 100%; text-align: center; } } @media only screen and (min-width: 270px) and (max-width: 575px) { .brand__item-6 { width: 50%; } } .brand__item-6 img { opacity: 0.5; } .brand__item-6:hover img { opacity: 1; } .brand__item-7 img { opacity: 0.5; } .brand__item-7:hover img { opacity: 1; } .brand__tooltip { position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%, -20%); -moz-transform: translate(-50%, -20%); -ms-transform: translate(-50%, -20%); -o-transform: translate(-50%, -20%); transform: translate(-50%, -20%); display: inline-block; font-size: 14px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); background-color: var(--tp-theme-3); padding: 9px 20px; min-width: 160px; transition-duration: 0.3s; visibility: hidden; opacity: 0; } .brand__tooltip::after { position: absolute; content: ""; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--tp-theme-3); position: absolute; bottom: -5px; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); } .brand__slider-7 span { font-weight: 600; font-size: 14px; letter-spacing: -0.02em; text-transform: uppercase; display: inline-block; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .brand__slider-7 span { margin-bottom: 20px; } } .brand__slider-5 .swiper-wrapper, .brand__slider-5-1 .swiper-wrapper { -webkit-transition-timing-function: linear !important; -o-transition-timing-function: linear !important; transition-timing-function: linear !important; } .brand__slider-5 .slick-list, .brand__slider-5-1 .slick-list { margin: 0 6px; } .brand__slider-5 .slick-slide, .brand__slider-5-1 .slick-slide { margin: 0 6px; } .brand__info p { font-family: var(--tp-ff-space); font-weight: 400; font-size: 20px; letter-spacing: -0.04em; color: #525258; margin-bottom: 50px; } .brand__info p span { color: var(--tp-theme-5); } .brand__info-2 .tp-brand-sponsor-title { font-weight: 600; font-size: 20px; line-height: 24px; color: var(--tp-common-black-9); font-family: var(--tp-ff-roboto); } .brand__info-2 .tp-brand-sponsor-title span { color: var(--tp-theme-6); } .brand__style-square .brand__item-5 { border-radius: 0; } /*----------------------------------------*/ /* 16. SKILL CSS START /*----------------------------------------*/ @media (max-width: 575px) { .skill__item { flex-wrap: wrap; } } .skill__item-9 { margin-bottom: 56px; } .skill__item-wrapper-9 .row [class*=col-]:nth-child(2n) .skill__item-9 { padding-left: 20px; } [dir=rtl] .skill__item-wrapper-9 .row [class*=col-]:nth-child(2n) .skill__item-9 { padding-left: 0; padding-right: 20px; } .skill__item-wrapper-9 .row [class*=col-]:last-child .skill__item-9 { margin-bottom: 0; } .skill__item-wrapper-9 .row [class*=col-]:nth-last-child(2) .skill__item-9 { margin-bottom: 0; } .skill__single { padding: 45px 0 35px; border-radius: 200px; background-color: var(--tp-common-white); box-shadow: 0px 2px 3px rgba(22, 34, 19, 0.1); width: 130px; } [dir=rtl] .skill__single { margin-right: 0; margin-left: 20px; } @media (max-width: 575px) { .skill__single { width: 120px; margin-right: 10px; } [dir=rtl] .skill__single { margin-right: 0; margin-left: 10px; } } .skill__icon { margin-bottom: 17px; } .skill__icon-9 { margin-bottom: 13px; } .skill__icon-9 span { display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; background-color: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.08); border-radius: 50%; } .skill__content h4 { font-size: 22px; color: var(--tp-text-6); font-family: var(--tp-ff-oswald); margin-bottom: 0; font-weight: 400; } .skill__content-9 h4 { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 20px; line-height: 1.2; color: #525258; } @media (max-width: 575px) { .skill__content-9 h4 { font-size: 16px; } } .skill__content-9 h4 span { font-weight: 500; color: var(--tp-common-black); } .skill__style-2 .skill__content-9 h4 { font-family: var(--tp-ff-space); } .skill__wrapper-14 .skill-section-title { font-size: 50px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 13px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .skill__wrapper-14 .skill-section-title { font-size: 40px; } } .skill__wrapper-14 p { font-size: 16px; } .skill__bar { padding-top: 6px; } .skill__bar-title { font-weight: 500; font-size: 14px; color: var(--tp-common-black-solid); margin-bottom: 11px; } .skill__bar-title span { color: var(--tp-text-1); font-size: 14px; min-width: 21px; text-align: left; display: inline-block; } [dir=rtl] .skill__bar-title span { text-align: right; } .skill__bar-title span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .skill__bar-item { margin-bottom: 35px; } .skill__bar-item .progress { height: 30px; background-color: #F0EFF0; border-radius: 20px; overflow: visible; } .skill__bar-item .progress .progress-bar { background-color: #50CD57; border-radius: 30px; position: relative; overflow: visible; } .skill__bar-item .progress .progress-bar span { position: absolute; right: 0; top: 0; transform: translateX(50%); font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 30px; color: var(--tp-common-black-solid); width: 36px; height: 30px; border-radius: 20px; background-color: var(--tp-common-white); box-shadow: 0px 1px 4px rgba(3, 4, 28, 0.1); } [dir=rtl] .skill__bar-item .progress .progress-bar span { right: auto; left: 0; } .skill__bar-item.is-blue .progress .progress-bar { background-color: #29B4EF; } .skill__bar-item.is-brown .progress .progress-bar { background-color: var(--tp-theme-4); } .skill__bar-item.is-pink .progress .progress-bar { background-color: var(--tp-theme-1); } .skill__bar-progress { overflow: hidden; border-radius: 30px; } .skill__bar-count { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; color: var(--tp-common-black-solid); margin-bottom: 11px; } .career-link-btn { display: inline-block; font-size: 18px; color: var(--tp-common-black); } .career-link-btn:hover { color: var(--tp-theme-2); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .career__wrapper { padding-left: 0; } [dir=rtl] .career__wrapper { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .career__wrapper { padding-left: 0; margin-top: 50px; } [dir=rtl] .career__wrapper { padding-right: 0; } } .career__item { padding: 43px 40px 37px; box-shadow: 0px 1px 3px rgba(22, 34, 19, 0.1), 0px 6px 0px #EDEDED; margin-bottom: 23px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .career__item { padding: 32px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .career__item { padding: 32px 10px; } } .career__item:last-child { margin-bottom: 0; } .career__item:hover { position: relative; z-index: 1; box-shadow: 0px 30px 50px rgba(3, 4, 28, 0.1), 0px 6px 0px #008080; } .career__logo { width: 50px; } [dir=rtl] .career__logo { margin-right: 0; margin-left: 20px; } @media (max-width: 575px) { .career__logo { margin-bottom: 15px; } } .career__logo span { font-size: 50px; color: var(--tp-theme-2); } .career__info { width: 70%; } @media (max-width: 575px) { .career__info { margin-bottom: 15px; width: 100%; } } .career__info-title { font-size: 24px; font-weight: 500; font-family: var(--tp-ff-oswald); margin-bottom: 4px; } .career__info-designation { font-size: 16px; font-family: var(--tp-ff-inter); color: var(--tp-text-6); } .career__year { width: 46%; } @media (max-width: 575px) { .career__year { width: 100%; } } .career__year-info p { font-size: 15px; font-family: var(--tp-ff-inter); color: var(--tp-text-6); margin-bottom: 0; position: relative; padding-left: 14px; display: inline-block; } [dir=rtl] .career__year-info p { padding-left: 0; padding-right: 14px; } .career__year-info p::after { position: absolute; content: ""; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tp-text-6); } [dir=rtl] .career__year-info p::after { left: auto; right: 0; } .career__btn { margin-bottom: 5px; } .career__style-2 { padding-top: 43px; } .career__style-2 .career__title { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 25px; } .career__style-2 .career__item { padding: 23px 30px; box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.08); margin-bottom: 10px; } .career__style-2 .career__item:last-child { margin-bottom: 0; } .career__style-2 .career__item:hover { box-shadow: 0px 20px 20px rgba(3, 4, 28, 0.08); position: relative; z-index: 1; } .career__style-2 .career__logo span { display: inline-block; width: 54px; height: 54px; line-height: 52px; text-align: center; border: 1px solid #EAEAEF; border-radius: 50%; } .career__style-2 .career__logo span img { -webkit-transform: translateY(-5px); -moz-transform: translateY(-5px); -ms-transform: translateY(-5px); -o-transform: translateY(-5px); transform: translateY(-5px); } .career__style-2 .career__info-title { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 20px; line-height: 1; color: var(--tp-common-black); } .career__style-2 .career__info-designation { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 15px; line-height: 0.62; color: #525258; } .career__style-2 .career__year-info p { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 15px; color: #525258; } .career__style-2 .career__btn .career-link-btn:hover { color: #FA6490; } .career__style-3 .career__title { font-family: var(--tp-ff-space); } .career__style-3 .career__info-title { font-family: var(--tp-ff-space); } .career__style-3 .career__info-designation { font-family: var(--tp-ff-space); } .career__style-3 .career__year-info p { font-family: var(--tp-ff-space); } .career__style-3 .career__btn .career-link-btn:hover { color: var(--tp-theme-1) !important; } /*----------------------------------------*/ /* 17. AWARD CSS START /*----------------------------------------*/ .award__item { border: 2px solid var(--tp-border-8); padding: 50px 40px; position: relative; } .award__item:hover { border-color: var(--tp-common-white); box-shadow: 0px 4px 0px #008080, 0px 20px 30px rgba(22, 34, 19, 0.1); } .award__item:hover .award__icon span, .award__item:hover .award__icon i { border-color: var(--tp-theme-2); color: var(--tp-theme-2); } @media (max-width: 575px) { .award__item-4 { margin-bottom: 30px; } } .award__item-5 { padding: 70px 50px 55px; background-color: rgba(94, 183, 75, 0.1); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .award__item-5 { padding: 50px 30px 35px; } } .award__item-8 { border-bottom: 1px solid rgba(255, 255, 255, 0.1019607843); padding-top: 40px; padding-bottom: 40px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__item-8 { padding-left: 40px; padding-right: 40px; } } .award__item-8:hover { background-color: #101223; } .award__item-8:last-child { border-bottom: 0; } .award__item-9 { position: relative; padding-top: 40px; padding-bottom: 43px; border-top: 1px solid #EAEAEF; } .award__item-9:last-child { border-bottom: 1px solid #EAEAEF; } .award__item-9::after { position: absolute; content: ""; left: auto; right: 0; bottom: 0; width: 0%; height: 2px; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); -webkit-transform: matrix(-1, 0, 0, 1, 0, 0); -moz-transform: matrix(-1, 0, 0, 1, 0, 0); -ms-transform: matrix(-1, 0, 0, 1, 0, 0); -o-transform: matrix(-1, 0, 0, 1, 0, 0); transform: matrix(-1, 0, 0, 1, 0, 0); -webkit-transition: all 0.6s ease-out 0s; -moz-transition: all 0.6s ease-out 0s; -ms-transition: all 0.6s ease-out 0s; -o-transition: all 0.6s ease-out 0s; transition: all 0.6s ease-out 0s; } [dir=rtl] .award__item-9::after { left: 0; right: auto; } .award__item-9:hover::after { width: 100%; left: 0; right: auto; } [dir=rtl] .award__item-9:hover::after { left: auto; right: 0; } .award__item-9:hover .award__thumb img { -webkit-transform: scaleY(1); -moz-transform: scaleY(1); -ms-transform: scaleY(1); -o-transform: scaleY(1); transform: scaleY(1); } .award__icon { margin-bottom: 30px; } .award__icon > span { position: relative; display: inline-block; width: 70px; height: 70px; line-height: 65px; text-align: center; border-radius: 50%; border: 2px solid var(--tp-border-8); color: var(--tp-theme-2); } .award__icon i { display: inline-block; width: 70px; height: 70px; line-height: 66px; text-align: center; font-size: 24px; border-radius: 50%; border: 2px solid var(--tp-border-8); color: var(--tp-theme-2); } .award__icon-5 { margin-bottom: 36px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__icon-8 { padding-left: 0; margin-bottom: 20px; } [dir=rtl] .award__icon-8 { padding-right: 0; } } .award__icon-8 span { display: inline-block; min-height: 70px; } .award__title { font-size: 24px; font-weight: 500; font-family: var(--tp-ff-oswald); margin-bottom: 10px; } .award__title a:hover { color: var(--tp-theme-2); } .award__title-4 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 18px; color: var(--tp-common-black-solid); margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__title-4 { margin-bottom: 25px; } } .award__title-5 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; margin-bottom: 0; } .award__title-5 a:hover { color: var(--tp-common-green-4); } .award__title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 28px; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 6px; } .award__title-8 a:hover { color: var(--tp-theme-8); } .award__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 7px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .award__title-9 { line-height: 1.16; } } .award__title-9 a { background-image: linear-gradient(#000, #000), linear-gradient(#000, #000); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .award__title-9 a:hover { background-size: 0 2px, 100% 2px; } .award__content > p { font-size: 14px; font-weight: 500; color: var(--tp-text-6); margin-bottom: 30px; position: relative; padding-left: 12px; text-transform: uppercase; } [dir=rtl] .award__content > p { padding-left: 0; padding-right: 12px; } .award__content > p::after { position: absolute; content: ""; left: 0; top: 12px; width: 4px; height: 4px; border-radius: 50%; background-color: var(--tp-theme-2); } [dir=rtl] .award__content > p::after { left: auto; right: 0; } .award__content-5 > p { font-family: var(--tp-ff-inter); font-size: 15px; letter-spacing: -0.02em; color: #525258; margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__content-8 { margin-bottom: 20px; } } .award__content-8 > p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 20px; color: var(--tp-common-white); opacity: 0.6; margin-bottom: 0; } .award__content-9 > p { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 16px; line-height: 1.25; color: #525258; margin-bottom: 0; } .award__thumb { position: absolute; top: 51%; right: 14.5%; z-index: 99; } [dir=rtl] .award__thumb { right: auto; left: 14.5%; } .award__thumb img { box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.2); -webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0); transform-origin: top center; } @media (max-width: 575px) { .award__thumb { top: 90%; right: 9.5%; } [dir=rtl] .award__thumb { right: auto; left: 9.5%; } } .award__brown { background-color: rgba(171, 108, 86, 0.1); } .award__brown .award__title-5 a:hover { color: var(--tp-theme-4); } .award__purple { background-color: rgba(67, 83, 255, 0.1); } .award__purple .award__title-5 a:hover { color: var(--tp-theme-5); } .award__stroke { -webkit-transform: translateY(41px); -moz-transform: translateY(41px); -ms-transform: translateY(41px); -o-transform: translateY(41px); transform: translateY(41px); } @media (max-width: 575px) { .award__stroke img { width: 100%; } } .award__shape-1 { position: absolute; z-index: -1; left: 13%; bottom: 4%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .award__shape-1 { left: auto; right: 13%; } .award__shape-2 { position: absolute; z-index: -1; right: 14%; top: 30%; -webkit-animation: tprotate 2s infinite alternate; animation: tprotate 2s infinite alternate; } [dir=rtl] .award__shape-2 { right: auto; left: 14%; } .award__year span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .award__topic p { font-family: var(--tp-ff-syne); font-size: 18px; line-height: 1; color: var(--tp-common-black-solid); margin-bottom: 0; padding-bottom: 16px; } .award__btn-8 { padding-left: 28px; } [dir=rtl] .award__btn-8 { padding-left: 0; padding-right: 28px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__btn-8 { padding-left: 0; } [dir=rtl] .award__btn-8 { padding-right: 0; } } .award__btn-8 a { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: var(--tp-common-white); } .award__btn-8 a:hover { color: var(--tp-theme-8); } .award__btn-8 a:hover i { color: var(--tp-theme-8); } .award__btn-8 a span { -webkit-transform: translateY(1px); -moz-transform: translateY(1px); -ms-transform: translateY(1px); -o-transform: translateY(1px); transform: translateY(1px); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .award__btn-9 { margin-top: 20px; } } .award__btn-9 a { color: var(--tp-common-black-16); } .award__btn-9 a:hover { color: #FA6490; } .award__style-2 .award__item-9::after { background-image: none; background-color: var(--tp-theme-1); } .award__style-2 .award__topic p { font-family: var(--tp-ff-space); color: var(--tp-common-black); } .award__style-2 .award__title-9 { font-family: var(--tp-ff-space); } .award__style-2 .award__title-9 a { background-image: none; } .award__style-2 .award__title-9 a:hover { color: var(--tp-theme-1); } .award__style-2 .award__content-9 p { font-family: var(--tp-ff-inter); } .award__style-2 .award__btn-9 a:hover { color: var(--tp-theme-1); } /*----------------------------------------*/ /* 18. CTA CSS START /*----------------------------------------*/ .cta__wrapper-7 .section__title-7 { letter-spacing: -0.02em; } .cta__title { font-size: 60px; font-weight: 500; font-family: var(--tp-ff-oswald); line-height: 1.05; margin-bottom: 15px; } @media (max-width: 575px) { .cta__title { font-size: 40px; } } .cta__title-pre { font-size: 18px; color: var(--tp-text-1); margin-bottom: 15px; display: inline-block; } .cta__title-5 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: -0.06em; color: var(--tp-common-white); margin-bottom: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__title-5 { font-size: 55px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__title-5 { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta__title-5 { font-size: 40px; } } @media (max-width: 575px) { .cta__title-5 { font-size: 38px; } } .cta__title-6 { font-weight: 900; font-size: 60px; line-height: 70px; letter-spacing: 0.02em; color: var(--tp-common-white); margin-bottom: 0; font-family: var(--tp-ff-roboto); } @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__title-6 { margin-bottom: 25px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta__title-6 { font-size: 47px; line-height: 57px; } } .cta__title-13 { font-family: var(--tp-ff-roboto); font-size: 34px; line-height: 1.18; margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .cta__title-13 { margin-bottom: 20px; } } @media (max-width: 575px) { .cta__title-13 { margin-bottom: 20px; font-size: 23px; } } .cta__inner { padding-top: 115px; padding-bottom: 125px; border-bottom: 1px solid var(--tp-border-9); } .cta__inner-5 { padding: 90px 100px; position: relative; z-index: 1; overflow: hidden; border-radius: 30px; box-shadow: 0px 40px 50px rgba(7, 18, 133, 0.3); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__inner-5 { padding-left: 60px; padding-right: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta__inner-5 { padding: 50px 40px; } } @media (max-width: 575px) { .cta__inner-5 { padding: 40px 30px; } } .cta__inner-6 { padding: 65px 70px; } @media (max-width: 575px) { .cta__inner-6 { padding: 35px 26px; } } .cta__inner-10 { padding: 55px 100px 60px; background: #FF8848; box-shadow: 0px 30px 50px rgba(129, 51, 10, 0.2); border-radius: 20px; position: relative; z-index: 9; background-blend-mode: overlay; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .cta__inner-10 { padding: 35px 50px 30px; } } @media (max-width: 575px) { .cta__inner-10 { padding: 35px 30px 30px; } } .cta__inner-13 { padding: 60px 70px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta__inner-13 { padding: 40px 50px; } } @media (max-width: 575px) { .cta__inner-13 { padding: 30px; } } .cta__form { padding-left: 200px; } [dir=rtl] .cta__form { padding-left: 0; padding-right: 200px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__form { padding-left: 0; } [dir=rtl] .cta__form { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta__form { padding-left: 0; margin-top: 50px; } [dir=rtl] .cta__form { padding-right: 0; } } .cta__form-10 .cta-form-sub-title { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; color: var(--tp-common-white); margin-bottom: 6px; } .cta__form-10 .cta-form-title { font-size: 30px; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 2px; } .cta__form-10 p { font-family: var(--tp-ff-space); font-size: 16px; color: var(--tp-common-white); margin-bottom: 25px; } .cta__input { position: relative; } .cta__input input { width: 100%; height: 60px; line-height: 56px; border: 2px solid var(--tp-common-black); font-family: var(--tp-ff-inter); padding-left: 25px; padding-right: 150px; background-color: var(--tp-common-white); } [dir=rtl] .cta__input input { padding-left: 0; padding-right: 0; padding-left: 150px; padding-right: 25px; text-align: right; } .cta__input input::-webkit-input-placeholder { color: var(--tp-text-6); font-size: 15px; font-family: var(--tp-ff-inter); } .cta__input input:-moz-placeholder { color: var(--tp-text-6); font-size: 15px; font-family: var(--tp-ff-inter); } .cta__input input::-moz-placeholder { color: var(--tp-text-6); font-size: 15px; font-family: var(--tp-ff-inter); } .cta__input input:-ms-input-placeholder { color: var(--tp-text-6); font-size: 15px; font-family: var(--tp-ff-inter); } .cta__input input:focus { border-color: var(--tp-theme-2); } @media (max-width: 575px) { .cta__input input { padding-right: 25px; } [dir=rtl] .cta__input input { padding-right: 0; padding-left: 25px; } } .cta__input button { position: absolute; top: 7px; right: 7px; padding: 10px 30px; } [dir=rtl] .cta__input button { right: auto; left: 7px; } @media (max-width: 575px) { .cta__input button { position: relative; right: auto; left: 0; } [dir=rtl] .cta__input button { left: auto; right: 0; } } .cta__input button:hover { background-color: var(--tp-theme-2-dark); } [dir=rtl] .cta__input-wrapper-10 { justify-content: end; } .cta__input-10 { margin-right: 20px; margin-bottom: 20px; } @media (max-width: 575px) { .cta__input-10 { margin-right: 0; } } .cta__input-10 input { height: 56px; line-height: 56px; width: 244px; background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 6px; color: var(--tp-common-white); font-family: var(--tp-ff-space); font-size: 16px; padding: 0 24px; } [dir=rtl] .cta__input-10 input { text-align: right; } .cta__input-10 input::-webkit-input-placeholder { color: var(--tp-common-white); } .cta__input-10 input:-moz-placeholder { color: var(--tp-common-white); } .cta__input-10 input::-moz-placeholder { color: var(--tp-common-white); } .cta__input-10 input:-ms-input-placeholder { color: var(--tp-common-white); } .cta__input-10 input:focus { border-color: var(--tp-common-white); } @media (max-width: 575px) { .cta__input-10 input { width: 100%; } } .cta__input-10.sm-input { margin-right: 0; } [dir=rtl] .cta__input-10.sm-input { margin-left: 0; } .cta__input-10.sm-input input { width: 150px; } .cta__input-13 { position: relative; } .cta__input-13 input { height: 64px; background: #FFFFFF; border: 1px solid var(--tp-common-black); font-size: 15px; font-family: var(--tp-ff-roboto); padding-right: 170px; } [dir=rtl] .cta__input-13 input { padding-right: 29px; padding-left: 170px; text-align: right; } .cta__input-13 input::-webkit-input-placeholder { color: #7D7F82; } .cta__input-13 input:-moz-placeholder { color: #7D7F82; } .cta__input-13 input::-moz-placeholder { color: #7D7F82; } .cta__input-13 input:-ms-input-placeholder { color: #7D7F82; } .cta__input-13 input:focus { border-color: var(--tp-common-black); } @media (max-width: 575px) { .cta__input-13 input { padding-right: 26px; } [dir=rtl] .cta__input-13 input { padding-right: 0; padding-left: 26px; } } .cta__input-13 .tp-btn { position: absolute; top: 10px; right: 10px; font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 16px; color: var(--tp-common-white); background-color: var(--tp-common-black); padding: 10px 42px; } [dir=rtl] .cta__input-13 .tp-btn { right: auto; left: 10px; } @media (max-width: 575px) { .cta__input-13 .tp-btn { position: static; margin-top: 15px; } } .cta__input-13 .tp-btn:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .cta__shape { /* home 5 shape css start */ } .cta__shape-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; mix-blend-mode: luminosity; } .cta__shape-1 { position: absolute; top: 11%; right: 21%; z-index: -1; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__shape-1 { top: 12%; right: 7%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__shape-1 { right: 3%; } } .cta__shape-2 { position: absolute; top: 8%; left: 8%; z-index: -1; -moz-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; } .cta__shape-3 { position: absolute; top: -18px; left: 5%; z-index: -1; -moz-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; } .cta__shape-4 { position: absolute; top: -17%; right: 5%; z-index: -1; -moz-animation: tptranslateY 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY 3s ease-in-out 1s forwards infinite alternate; } .cta__shape-5 { position: absolute; bottom: 10%; right: 8%; z-index: -1; -moz-animation: tptranslateX2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX2 3s ease-in-out 1s forwards infinite alternate; } .cta__shape-6 { position: absolute; top: 22%; right: 46%; z-index: -1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__shape-6 { top: 14%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__shape-6 { top: 20%; right: 20%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .cta__shape-6 { top: 2%; right: 21%; } } @media (max-width: 575px) { .cta__shape-6 { top: 4px; right: 12px; } } .cta__shape-7 { position: absolute; z-index: -1; left: 0; top: 0; opacity: 0.6; } .cta__shape-8 { position: absolute; z-index: -1; left: 0; top: 0; } .cta__shape-9 { position: absolute; z-index: -1; right: 0; bottom: 0; opacity: 0.6; } .cta__shape-10 { position: absolute; z-index: -1; right: 0; bottom: 0; mix-blend-mode: overlay; } .cta__shape-11 { position: absolute; z-index: -1; left: 3%; bottom: -12px; mix-blend-mode: color-dodge; } .cta__shape-12 { position: absolute; z-index: -1; left: 46%; top: 28%; mix-blend-mode: color-dodge; } .cta__shape-13 { position: absolute; z-index: -1; right: 33%; bottom: 6%; mix-blend-mode: color-dodge; } .cta__shape-14 { position: absolute; z-index: -1; right: 23%; top: -4%; mix-blend-mode: color-dodge; } .cta__shape-15 { position: absolute; z-index: -1; top: 25%; right: 38%; mix-blend-mode: color-burn; } .cta__shape-16 { position: absolute; z-index: -1; top: 25%; right: 38%; } .cta__shape-17 { position: absolute; top: 0; left: 27%; z-index: -1; } @media (max-width: 575px) { .cta__shape-17 { left: 0; width: 100%; } } .cta__shape-18 { position: absolute; top: 22%; right: 12%; z-index: -1; } .cta__shape-19 { position: absolute; top: 14%; right: 2%; z-index: -1; mix-blend-mode: darken; } .cta__shape-20 { position: absolute; bottom: 7%; left: 2%; z-index: -1; } .cta__content-5 span { font-family: var(--tp-ff-space); font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-common-white); display: inline-block; margin-bottom: 15px; } .cta__content-5 p { font-size: 16px; color: var(--tp-common-white); margin-top: 15px; } .cta__content-6 { padding-right: 50px; } [dir=rtl] .cta__content-6 { padding-right: 0; padding-left: 50px; } @media (max-width: 575px) { .cta__content-6 { padding-right: 0; } [dir=rtl] .cta__content-6 { padding-left: 0; } } .cta__content-6 .tp-cta-subtitle-6 { font-size: 18px; color: var(--tp-common-white); } .cta__content-6 p { font-size: 16px; color: var(--tp-common-white); } .cta__overlay-5 { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: var(--tp-common-black-7); } @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__btn-5 { margin-top: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .cta__btn-wrapper-7 .tp-cta-btn-yellow { padding: 35px 30px 32px 30px; } } [dir=rtl] .cta__btn-wrapper-7 a:first-child { margin-right: 0; margin-left: 20px; } [dir=rtl] .cta__btn-10 { text-align: right; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta__features-wrapper { margin-top: 50px; } } .cta__features-item { padding: 50px 45px 35px; border-radius: 14px; box-shadow: 0px 20px 50px rgba(122, 55, 17, 0.2); overflow: hidden; width: 300px; margin-bottom: -100px; -webkit-transform: translateY(5px); -moz-transform: translateY(5px); -ms-transform: translateY(5px); -o-transform: translateY(5px); transform: translateY(5px); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .cta__features-item { padding: 30px 25px 25px; } } @media (max-width: 575px) { .cta__features-item { margin-bottom: 0; width: 100%; padding: 30px 25px 25px; } } .cta__features-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cta__features-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(82, 83, 206, 0.9); } .cta__features-video { position: relative; z-index: 1; margin-bottom: 42px; } .cta__features-video a { display: inline-block; width: 60px; height: 60px; line-height: 58px; text-align: center; background: rgba(255, 255, 255, 0.06); border: 1px solid #FFFFFF; box-shadow: 0px 0px 20px rgba(72, 30, 8, 0.2); backdrop-filter: blur(6px); color: var(--tp-common-white); border-radius: 50%; margin-bottom: 10px; } .cta__features-video a svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .cta__features-video span { display: block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 12px; line-height: 2; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tp-common-white); } .cta__features-content { position: relative; z-index: 1; } .cta__features-content > p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; line-height: 1.33; color: var(--tp-common-white); } .cta__features-title { font-size: 26px; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 7px; } .cta__counter { margin-left: 50px; margin-top: 28px; } [dir=rtl] .cta__counter { margin-left: 0; margin-right: 50px; } @media (max-width: 575px) { .cta__counter { margin-left: 0; margin-top: 50px; } [dir=rtl] .cta__counter { margin-right: 0; } } .cta__counter-icon { margin-bottom: 42px; } .cta__counter-icon span { color: rgba(255, 255, 255, 0.7); font-size: 60px; } .cta__counter-content h4 { font-weight: 500; font-size: 40px; line-height: 1; color: var(--tp-common-white); margin-bottom: 3px; } .cta__counter-content p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; color: rgba(255, 255, 255, 0.7); margin-bottom: 0; line-height: 1; } .cta__translate .cta__inner-10 { margin-top: -190px; } .cta__half-bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: var(--tp-common-footer-bg-blue); z-index: -1; } .cta__style-2 { position: relative; } .cta__style-2 .tp-btn-orange-2 { background-color: var(--tp-common-white); color: var(--tp-common-black); border-radius: 0; padding: 22px 53px 21px; } .cta__style-2 .cta__inner-5 { background-color: var(--tp-common-purple); border-radius: 0; } .cta__style-2 .cta__inner-5::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(270deg, #013E93 0%, #00549A 100%); background-image: -moz-linear-gradient(270deg, #013E93 0%, #00549A 100%); background-image: -ms-linear-gradient(270deg, #013E93 0%, #00549A 100%); background-image: -o-linear-gradient(270deg, #013E93 0%, #00549A 100%); background-image: linear-gradient(270deg, #013E93 0%, #00549A 100%); mix-blend-mode: luminosity; opacity: 0.5; z-index: -1; } .cta__style-3 .section__title-pre-7 { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 1.43; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-theme-1); } .cta__style-3 .section__title-7 { font-family: var(--tp-ff-space); font-size: 60px; line-height: 1.1; letter-spacing: -0.04em; } @media (max-width: 575px) { .cta__style-3 .section__title-7 { font-size: 40px; } } .cta__style-3 .section__title-7-highlight svg { display: none; } .cta__style-3 .cta__btn-wrapper-7 { padding-left: 60px; } [dir=rtl] .cta__style-3 .cta__btn-wrapper-7 { padding-left: 0; padding-right: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .cta__style-3 .cta__btn-wrapper-7 { padding-left: 0; } [dir=rtl] .cta__style-3 .cta__btn-wrapper-7 { padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .cta__style-3 .cta__btn-wrapper-7 { padding-left: 0; } [dir=rtl] .cta__style-3 .cta__btn-wrapper-7 { padding-right: 0; } } .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn { background-color: #6364DB; border-radius: 0; padding: 25px 55px 23px 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn { padding-right: 35px; } [dir=rtl] .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn { padding-right: 30px; padding-left: 30px; } } .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn-yellow { padding: 25px 55px 23px 35px; border-radius: 0; color: var(--tp-common-white); background-color: var(--tp-theme-1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn-yellow { padding-right: 35px; } [dir=rtl] .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn-yellow { padding-right: 55px; padding-left: 35px; } } .cta__style-3 .cta__btn-wrapper-7 .tp-cta-btn-yellow:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .tp-cta-subtitle-6 { font-size: 16px; color: var(--tp-common-white); } .subscribe__overlay { position: absolute; left: 0; bottom: 0; width: 100%; height: 170px; background-color: var(--tp-common-black-9); z-index: -1; } .subscribe__bg { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; background-color: #F0F0F5; z-index: -1; } .subscribe__title { font-weight: 800; font-size: 46px; color: var(--tp-common-white); margin-bottom: 10px; font-family: var(--tp-ff-roboto); } @media only screen and (min-width: 576px) and (max-width: 767px) { .subscribe__title { font-size: 35px; } } @media (max-width: 575px) { .subscribe__title { font-size: 40px; } } .subscribe__title-11 { font-family: var(--tp-ff-rajdhani); font-size: 76px; line-height: 0.92; letter-spacing: -0.02em; color: var(--tp-common-black); margin-bottom: 35px; animation-delay: 0.5s; animation-duration: 1s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .subscribe__title-11 { font-size: 60px; } } @media (max-width: 575px) { .subscribe__title-11 { font-size: 40px; } } .subscribe__title-14 { font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-white); margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .subscribe__title-14 { margin-bottom: 25px; } } .subscribe__input { position: relative; margin-bottom: 12px; } .subscribe__input input { width: 100%; height: 60px; line-height: 60px; padding: 0 24px; padding-right: 135px; border: 0; background-color: var(--tp-common-white); } [dir=rtl] .subscribe__input input { padding-right: 24px; padding-left: 135px; text-align: right; } .subscribe__input input::-webkit-input-placeholder { color: rgba(65, 70, 81, 0.7); } .subscribe__input input:-moz-placeholder { color: rgba(65, 70, 81, 0.7); } .subscribe__input input::-moz-placeholder { color: rgba(65, 70, 81, 0.7); } .subscribe__input input:-ms-input-placeholder { color: rgba(65, 70, 81, 0.7); } .subscribe__input button { position: absolute; top: 7px; right: 7px; bottom: 7px; display: inline-block; padding: 10px 27px; font-weight: 500; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-common-black-9); font-family: var(--tp-ff-roboto); } [dir=rtl] .subscribe__input button { right: auto; left: 7px; } .subscribe__input button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); } @media (max-width: 575px) { .subscribe__input button { position: static; margin-top: 20px; } .subscribe__input button:hover { background-color: var(--tp-common-white); color: var(--tp-common-black-9); } } .subscribe__input-10 input { width: 100%; height: 64px; background-color: var(--tp-common-white); border-radius: 6px; line-height: 64px; padding: 0 25px; padding-right: 190px; border: 0; outline: 0; font-family: var(--tp-ff-space); font-size: 16px; } [dir=rtl] .subscribe__input-10 input { padding-right: 25px; padding-left: 190px; text-align: right; } @media (max-width: 575px) { .subscribe__input-10 input { padding-right: 25px; } [dir=rtl] .subscribe__input-10 input { padding-right: 0; padding-left: 25px; } } .subscribe__input-10 input::-webkit-input-placeholder { color: #84848B; } .subscribe__input-10 input:-moz-placeholder { color: #84848B; } .subscribe__input-10 input::-moz-placeholder { color: #84848B; } .subscribe__input-10 input:-ms-input-placeholder { color: #84848B; } .subscribe__input-10 button { position: absolute; top: 0; right: 0; box-shadow: 0; padding: 20px 33px 18px; border-top-left-radius: 0; border-bottom-left-radius: 0; } [dir=rtl] .subscribe__input-10 button { right: auto; left: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-top-left-radius: 6px; border-bottom-left-radius: 6px; } @media (max-width: 575px) { .subscribe__input-10 button { position: relative; margin-top: 15px; text-align: left; } [dir=rtl] .subscribe__input-10 button { text-align: right; } } .subscribe__input-10 button:hover { -webkit-transform: inherit; -moz-transform: inherit; -ms-transform: inherit; -o-transform: inherit; transform: inherit; } .subscribe__input-11 { position: relative; margin-bottom: 60px; animation-delay: 0.7s; animation-duration: 1s; } .subscribe__input-11 input { width: 100%; height: 70px; line-height: 70px; box-shadow: 0px 1px 3px rgba(5, 18, 20, 0.1); font-family: var(--tp-ff-syne); font-size: 16px; color: var(--tp-common-black); background-color: var(--tp-common-white); padding-left: 34px; padding-right: 170px; outline: 0; border: 0; } @media (max-width: 575px) { .subscribe__input-11 input { padding-right: 34px; } } .subscribe__input-11 input::-webkit-input-placeholder { color: #84848B; } .subscribe__input-11 input:-moz-placeholder { color: #84848B; } .subscribe__input-11 input::-moz-placeholder { color: #84848B; } .subscribe__input-11 input:-ms-input-placeholder { color: #84848B; } .subscribe__input-11 button { position: absolute; top: 0; right: 0; font-family: var(--tp-ff-syne); font-weight: 700; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tp-common-white); background-color: var(--tp-theme-1); padding: 22px 32px; } @media (max-width: 575px) { .subscribe__input-11 button { position: relative; margin-top: 20px; } } .subscribe__input-11 button:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .subscribe__wrapper { position: relative; z-index: 1; } .subscribe__wrapper > p { font-size: 16px; color: var(--tp-common-white); margin-bottom: 32px; font-family: var(--tp-ff-roboto); } .subscribe__wrapper-11 { margin-bottom: 130px; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .subscribe__wrapper-11 { margin-bottom: 0; margin-top: 100px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .subscribe__wrapper-11 { margin-bottom: 0; margin-top: 70px; } } .subscribe__wrapper-11 > span { animation-delay: 0.3s; animation-duration: 1s; font-family: var(--tp-ff-syne); font-size: 18px; line-height: 1.11; color: var(--tp-common-black-19); position: relative; padding-left: 17px; margin-bottom: 27px; display: inline-block; } [dir=rtl] .subscribe__wrapper-11 > span { padding-left: 0; padding-right: 17px; } .subscribe__wrapper-11 > span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 4px; height: calc(100% + 10px); background-color: var(--tp-theme-1); } [dir=rtl] .subscribe__wrapper-11 > span::after { left: auto; right: 0; } .subscribe__inner { padding: 80px 0; } .subscribe__inner-10.has-border { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .subscribe__inner-10 .section__title-pre-10 { color: var(--tp-theme-10); } .subscribe__inner-14 { padding: 25px 100px; background-color: var(--tp-common-purple); } @media only screen and (min-width: 768px) and (max-width: 991px) { .subscribe__inner-14 { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .subscribe__inner-14 { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px) { .subscribe__inner-14 { padding-left: 20px; padding-right: 20px; } } .subscribe__inner-14 .subscribe-subtitle { font-size: 16px; color: var(--tp-common-white); } .subscribe__inner-14 .subscribe-desc { color: var(--tp-common-white); } .subscribe__form { padding: 0 35px; } @media (max-width: 575px) { .subscribe__form { padding: 0 10px; } } .subscribe__form-list ul li { list-style: none; margin-right: 30px; display: inline-block; } [dir=rtl] .subscribe__form-list ul li { margin-right: 0; margin-left: 30px; } .subscribe__form-list ul li:last-child { margin-right: 0; } [dir=rtl] .subscribe__form-list ul li:last-child { margin-left: 0; } .subscribe__form-list ul li span { font-size: 15px; color: var(--tp-common-white); font-family: var(--tp-ff-roboto); } .subscribe__form-list ul li span i { margin-right: 5px; } [dir=rtl] .subscribe__form-list ul li span i { margin-right: 0; margin-left: 5px; } .subscribe__form-14 { position: relative; } .subscribe__form-14 input { width: 100%; height: 60px; padding: 0 26px; padding-right: 180px; border: 0; outline: 0; background-color: var(--tp-common-white); } [dir=rtl] .subscribe__form-14 input { padding-right: 26px; padding-left: 180px; text-align: right; } @media (max-width: 575px) { .subscribe__form-14 input { padding-right: 26px; } [dir=rtl] .subscribe__form-14 input { padding-right: 0; padding-left: 26px; } } .subscribe__form-14 button { position: absolute; top: 0; right: 0; font-family: var(--tp-ff-space); font-weight: 700; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-common-black); padding: 17px 36px; } [dir=rtl] .subscribe__form-14 button { right: auto; left: 0; } @media (max-width: 575px) { .subscribe__form-14 button { position: static; margin-top: 20px; } } .subscribe__form-14 button:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .subscribe__shape-1 { position: absolute; z-index: -1; bottom: 0; right: 0; } [dir=rtl] .subscribe__shape-1 { right: auto; left: 0; } .subscribe__shape-2 { position: absolute; z-index: -1; top: 0; left: 0; } [dir=rtl] .subscribe__shape-2 { left: auto; right: 0; } .subscribe__shape-3 { position: absolute; left: 0%; top: 0%; width: 100%; } .subscribe__social { animation-delay: 0.9s; animation-duration: 1s; } .subscribe__social a { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; color: var(--tp-border-9); background-color: var(--tp-common-white); border-radius: 50%; box-shadow: 0px 1px 2px 1px rgba(50, 5, 48, 0.06); color: rgba(5, 18, 20, 0.7); margin-right: 6px; } [dir=rtl] .subscribe__social a { margin-right: 0; margin-left: 6px; } .subscribe__social a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .subscribe__thumb { position: relative; animation-delay: 0.5s; animation-duration: 1s; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .subscribe__thumb { -webkit-transform: translateX(-170px); -moz-transform: translateX(-170px); -ms-transform: translateX(-170px); -o-transform: translateX(-170px); transform: translateX(-170px); } [dir=rtl] .subscribe__thumb { -webkit-transform: translateX(170px); -moz-transform: translateX(170px); -ms-transform: translateX(170px); -o-transform: translateX(170px); transform: translateX(170px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .subscribe__thumb { -webkit-transform: scale(0.8) translateY(122px) translateX(-320px); -moz-transform: scale(0.8) translateY(122px) translateX(-320px); -ms-transform: scale(0.8) translateY(122px) translateX(-320px); -o-transform: scale(0.8) translateY(122px) translateX(-320px); transform: scale(0.8) translateY(122px) translateX(-320px); } [dir=rtl] .subscribe__thumb { -webkit-transform: scale(0.8) translateY(122px) translateX(320px); -moz-transform: scale(0.8) translateY(122px) translateX(320px); -ms-transform: scale(0.8) translateY(122px) translateX(320px); -o-transform: scale(0.8) translateY(122px) translateX(320px); transform: scale(0.8) translateY(122px) translateX(320px); } } @media (max-width: 575px) { .subscribe__thumb { display: none; } } div.subscribe__thumb img { max-width: inherit; } @media only screen and (min-width: 576px) and (max-width: 767px) { div.subscribe__thumb img { -webkit-transform: translate(-400px, 200px) scale(0.6); -moz-transform: translate(-400px, 200px) scale(0.6); -ms-transform: translate(-400px, 200px) scale(0.6); -o-transform: translate(-400px, 200px) scale(0.6); transform: translate(-400px, 200px) scale(0.6); } [dir=rtl] div.subscribe__thumb img { -webkit-transform: translate(400px, 200px) scale(0.6); -moz-transform: translate(400px, 200px) scale(0.6); -ms-transform: translate(400px, 200px) scale(0.6); -o-transform: translate(400px, 200px) scale(0.6); transform: translate(400px, 200px) scale(0.6); } } .subscribe__thumb-animation-1, .subscribe__thumb-animation-2 { position: absolute; left: 20%; top: 24%; width: 700px; height: 700px; z-index: -1; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); -webkit-animation: tp-hotspot 3s infinite cubic-bezier(0.4, 0, 1, 1); animation: tp-hotspot 3s infinite cubic-bezier(0.4, 0, 1, 1); animation-delay: 0s; } [dir=rtl] .subscribe__thumb-animation-1, [dir=rtl] .subscribe__thumb-animation-2 { left: auto; right: 20%; } .subscribe__thumb-animation-1 { animation-delay: 1s; } /*----------------------------------------*/ /* 19. PRICING CSS START /*----------------------------------------*/ .pricing__item { padding: 40px 70px; background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing__item { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .pricing__item { padding-left: 45px; padding-right: 45px; } } @media (max-width: 575px) { .pricing__item { padding-left: 25px; padding-right: 25px; } } .pricing__item.price-active .pricing__btn .tp-btn-border-pink-2 { color: var(--tp-common-white); background-color: var(--tp-theme-3); border-color: var(--tp-theme-3); } .pricing__item.price-active .pricing__btn .tp-btn-border-pink-2:hover { color: var(--tp-common-black-5); border-color: var(--tp-common-white); background-color: var(--tp-common-white); } .pricing__item-5 { background-color: var(--tp-common-white); border-radius: 10px; overflow: hidden; position: relative; height: 100%; } .pricing__item-5.price-active .pricing__btn-5 .tp-btn-grey { color: var(--tp-common-white); background-color: var(--tp-theme-5); } .pricing__item-5.price-active .pricing__btn-5 .tp-btn-grey:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .pricing__item-5.price-badge-active .pricing__popular { display: inline-block; position: absolute; top: 0; right: 0; width: 100%; z-index: 1; } .pricing__item-5.price-badge-active .pricing__tag-5 { top: 40px; } .pricing__feature { position: relative; padding-right: 40px; } [dir=rtl] .pricing__feature { padding-right: 0; padding-left: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing__feature { padding-right: 0; } [dir=rtl] .pricing__feature { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__feature { padding-right: 0; margin-bottom: 35px; } [dir=rtl] .pricing__feature { padding-left: 0; } } .pricing__feature::after, .pricing__feature::before { position: absolute; content: ""; left: -55px; top: 50%; width: 1px; height: 90px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tp-common-white); opacity: 0.16; } [dir=rtl] .pricing__feature::after, [dir=rtl] .pricing__feature::before { left: auto; right: -55px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__feature::after, .pricing__feature::before { display: none; } } .pricing__feature::after { left: auto; right: -25px; } [dir=rtl] .pricing__feature::after { left: -25px; right: auto; } .pricing__feature ul { overflow: hidden; } .pricing__feature ul li { list-style: none; padding-left: 30px; font-size: 15px; font-family: var(--tp-ff-inter); color: var(--tp-common-white-op-7); position: relative; margin-bottom: 10px; } [dir=rtl] .pricing__feature ul li { padding-left: 0; padding-right: 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) { .pricing__feature ul li { width: 100%; float: inherit; } } .pricing__feature ul li:last-child { margin-bottom: 0; } .pricing__feature ul li:first-child { margin-bottom: 10px; } .pricing__feature ul li::after { position: absolute; content: "\f00c"; font-family: var(--tp-ff-fontawesome); font-weight: 700; left: 0; top: 4px; width: 18px; height: 18px; line-height: 18px; text-align: center; font-size: 9px; color: var(--tp-common-white); background-image: -webkit-linear-gradient(326.31deg, #0F9351 26.11%, #44C987 83.89%); background-image: -moz-linear-gradient(326.31deg, #0F9351 26.11%, #44C987 83.89%); background-image: -ms-linear-gradient(326.31deg, #0F9351 26.11%, #44C987 83.89%); background-image: -o-linear-gradient(326.31deg, #0F9351 26.11%, #44C987 83.89%); background-image: linear-gradient(326.31deg, #0F9351 26.11%, #44C987 83.89%); box-shadow: 0px 3px 6px rgba(15, 147, 81, 0.4); border-radius: 50%; } [dir=rtl] .pricing__feature ul li::after { left: auto; right: 0; } .pricing__feature ul li.has-denied { color: var(--tp-common-white-op-03); } .pricing__feature ul li.has-denied::after { content: "\f00d"; color: var(--tp-common-white); background: rgba(255, 255, 255, 0.1); box-shadow: 0px 3px 6px rgba(3, 4, 28, 0.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) { .pricing__feature-left { margin-bottom: 12px; } } .pricing__feature-5 { margin-bottom: 85px; } .pricing__feature-5 > p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; color: #84858D; margin-bottom: 15px; } .pricing__feature-5 ul li { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: #525258; list-style: none; position: relative; padding-left: 35px; margin-bottom: 12px; } [dir=rtl] .pricing__feature-5 ul li { padding-left: 0; padding-right: 35px; } .pricing__feature-5 ul li:last-child { margin-bottom: 0; } .pricing__feature-5 ul li::after { position: absolute; content: "\f00c"; left: 0; top: 3px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-family: var(--tp-ff-fontawesome); color: var(--tp-common-white); background: linear-gradient(142.96deg, #22E17F 14.78%, #0EAC60 95.99%); box-shadow: 0px 1px 2px rgba(6, 138, 75, 0.3); border-radius: 50%; font-size: 12px; font-weight: 700; } [dir=rtl] .pricing__feature-5 ul li::after { left: auto; right: 0; } .pricing__feature-info-item { border-bottom: 1px solid rgba(4, 18, 31, 0.08); } .pricing__feature-info-content { padding: 30px 35px; border-right: 1px solid rgba(4, 18, 31, 0.08); } [dir=rtl] .pricing__feature-info-content { border-right: 0; } .pricing__feature-info-content:hover .pricing__feature-info-tooltip { visibility: visible; opacity: 1; top: -78px; } .pricing__feature-info-content:hover .pricing__feature-info-details span { color: #8E959B; } .pricing__feature-info-available { width: 33.33%; line-height: 1; height: 100%; padding: 30px; border-right: 1px solid rgba(4, 18, 31, 0.08); } [dir=rtl] .pricing__feature-info-available { border-right: 0; border-left: 1px solid rgba(4, 18, 31, 0.08); } .pricing__feature-info-available:last-child { border-right: 0; } [dir=rtl] .pricing__feature-info-available:last-child { border-left: 0; } .pricing__feature-info-available:first-child { border-right: 1px solid rgba(4, 18, 31, 0.08); } .pricing__feature-info-available p { font-size: 16px; color: var(--tp-common-black-11); margin-bottom: 0; } .pricing__feature-info-available p span { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; color: var(--tp-common-white); background: linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); box-shadow: 0px 1px 2px rgba(6, 138, 75, 0.3); border-radius: 50%; } .pricing__feature-info-available p span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .pricing__feature-info-details { position: relative; } .pricing__feature-info-details span { color: #BCBFC2; margin-right: 7px; } [dir=rtl] .pricing__feature-info-details span { margin-right: 0; margin-left: 7px; } .pricing__feature-info-details span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .pricing__feature-info-details span:hover { cursor: pointer; } .pricing__feature-info-details:hover span { color: #8E959B; } .pricing__feature-info-tooltip { position: absolute; top: -50px; left: -29px; min-width: 286px; background-color: var(--tp-common-white); padding: 13px 20px 15px; border-radius: 14px; box-shadow: 0px 10px 30px rgba(4, 11, 17, 0.14); visibility: hidden; opacity: 0; } [dir=rtl] .pricing__feature-info-tooltip { left: auto; right: -29px; } .pricing__feature-info-tooltip::after { position: absolute; content: ""; left: 35px; bottom: 0; width: 18px; height: 18px; background-color: var(--tp-common-white); -webkit-transform: rotate(45deg) translateY(50%); -moz-transform: rotate(45deg) translateY(50%); -ms-transform: rotate(45deg) translateY(50%); -o-transform: rotate(45deg) translateY(50%); transform: rotate(45deg) translateY(50%); } [dir=rtl] .pricing__feature-info-tooltip::after { left: auto; right: 35px; } .pricing__feature-info-tooltip p { font-size: 14px; line-height: 1.43; color: #525258; margin-bottom: 0; } .pricing__feature-info-text p { font-size: 16px; color: var(--tp-common-black-11); margin-bottom: 0; } .pricing__feature-item-wrapper { border: 1px solid rgba(4, 18, 31, 0.08); border-top: 0; border-bottom-left-radius: 41px; border-bottom-right-radius: 41px; } .pricing__header { min-height: 240px; border-top-left-radius: 41px; border-top-right-radius: 41px; border-left: 1px solid rgba(4, 18, 31, 0.08); border-right: 1px solid rgba(4, 18, 31, 0.08); } .pricing__header-title { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 30px; letter-spacing: -0.01em; color: var(--tp-common-black-11); margin-bottom: 20px; } .pricing__header-content { position: relative; padding: 52px 35px; border-top: 1px solid rgba(4, 18, 31, 0.08); border-right: 1px solid rgba(4, 18, 31, 0.08); height: 100%; border-top-left-radius: 41px; } [dir=rtl] .pricing__header-content { border-top-left-radius: 0; border-top-right-radius: 41px; border-right: 0; } .pricing__header-content .pricing-header-shape { position: absolute; bottom: 19%; right: 2%; } .pricing__header-top-wrapper .pricing__top-7 { border-top: 1px solid rgba(4, 18, 31, 0.08); } .pricing__header-top-wrapper .pricing__top-7:last-child { border-top-right-radius: 41px; border-right: 0; } [dir=rtl] .pricing__header-top-wrapper .pricing__top-7:last-child { border-top-right-radius: 0; border-top-left-radius: 41px; border-left: 0; border-right: 1px solid rgba(4, 18, 31, 0.08); } .pricing__category span { font-size: 20px; font-weight: 700; color: var(--tp-common-white); font-family: var(--tp-ff-space); display: inline-block; position: relative; padding-left: 9px; margin-bottom: 2px; } [dir=rtl] .pricing__category span { padding-left: 0; padding-right: 9px; } .pricing__category span::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 2px; height: 20px; background-color: var(--tp-common-green-2); } [dir=rtl] .pricing__category span::after { left: auto; right: 0; } .pricing__category span.standard::after { background-color: var(--tp-common-pink-2); } .pricing__category span.premium::after { background-color: var(--tp-common-purple-2); } .pricing__title { font-size: 46px; color: var(--tp-common-white); font-family: var(--tp-ff-space); margin-bottom: 0; } .pricing__title .pricing-currency { font-size: 20px; } .pricing__title-5 { font-family: var(--tp-ff-space); font-style: normal; font-weight: 500; font-size: 60px; letter-spacing: -0.04em; margin-bottom: 5px; } .pricing__title-5 span { font-weight: 400; font-size: 16px; color: #84858D; letter-spacing: -0.01em; } .pricing__title-7 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 54px; color: var(--tp-common-black-11); margin-bottom: 12px; } .pricing__title-7 span { font-size: 14px; color: var(--tp-text-1); } .pricing__title-wrapper p { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 18px; color: var(--tp-common-black); margin-bottom: 0; } .pricing__title-wrapper-7 p { font-size: 15px; line-height: 1.33; color: #525258; margin-bottom: 0; } .pricing__shape-1 { position: absolute; top: 1%; left: 10%; z-index: -1; } [dir=rtl] .pricing__shape-1 { left: auto; right: 0; width: 100%; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px) { .pricing__shape-1 { left: 0; } [dir=rtl] .pricing__shape-1 { left: auto; right: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__shape-1 { left: 0; width: 100%; } } .pricing__shape-2 { position: absolute; z-index: -1; bottom: 37%; left: 13%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } .pricing__shape-3 { position: absolute; z-index: -1; top: 6%; left: 30%; -webkit-animation: tpleftright 1s infinite alternate; animation: tpleftright 1s infinite alternate; } .pricing__shape-4 { position: absolute; z-index: -1; top: 2%; right: 4%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } .pricing__shape-5 { position: absolute; z-index: -1; top: 35%; right: 16%; -webkit-animation: tprotate 2s infinite alternate; animation: tprotate 2s infinite alternate; } .pricing__shape-6 { position: absolute; z-index: -1; bottom: 0%; left: 0%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__content { margin-bottom: 35px; } } .pricing__content-5 { border: 1px solid rgba(4, 18, 31, 0.08); border-top: 0; padding: 30px 40px; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; height: 100%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing__content-5 { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__content-5 { margin-bottom: 40px; } } @media (max-width: 575px) { .pricing__content-5 { padding-left: 20px; padding-right: 20px; } } .pricing__content-5-inner { height: 100%; } .pricing__icon-5 { height: 110px; margin-bottom: 35px; } .pricing__icon-5 img { mix-blend-mode: darken; height: 100px; } .pricing__tag-5 { position: absolute; top: 20px; right: 20px; z-index: 1; } [dir=rtl] .pricing__tag-5 { right: auto; left: 20px; } .pricing__tag-5 span { display: inline-block; background: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.1); border-radius: 14px; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 13px; text-align: center; color: var(--tp-common-black); padding: 0 19px; } .pricing__tag-7 { margin-bottom: 13px; } .pricing__tag-7 span { font-size: 18px; color: var(--tp-common-black-11); } .pricing__top-5 { padding: 35px 40px 36px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .pricing__top-5 { padding-left: 20px; padding-right: 20px; } } @media (max-width: 575px) { .pricing__top-5 { padding-left: 20px; padding-right: 20px; } } .pricing__top-7 { padding-top: 40px; padding-bottom: 44px; width: 33.33%; border-right: 1px solid rgba(4, 18, 31, 0.08); } .pricing__popular { display: none; background-color: var(--tp-theme-5); padding: 4px 0; } .pricing__popular p { margin-bottom: 0; font-family: var(--tp-ff-inter); font-weight: 700; font-size: 12px; text-align: center; letter-spacing: 0.06em; color: var(--tp-common-white); line-height: 1; text-transform: uppercase; } .pricing__popular-2 { position: absolute; top: -2px; left: 50%; -webkit-transform: translateX(-50px); -moz-transform: translateX(-50px); -ms-transform: translateX(-50px); -o-transform: translateX(-50px); transform: translateX(-50px); } .pricing__popular-2 span { font-family: var(--tp-ff-inter); font-weight: 700; font-size: 12px; line-height: 1; text-align: center; text-transform: uppercase; color: var(--tp-common-white); background-color: #FF9F39; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; display: inline-block; padding: 7px 10px; } .pricing__tab-nav { padding: 8px; background-color: var(--tp-grey-11); border-radius: 10px; width: 356px; } @media (max-width: 366px) { .pricing__tab-nav { width: 100%; } } .pricing__tab-nav .nav-link { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; background-color: transparent; color: var(--tp-text-1); padding: 6px 27px; padding-right: 14px; border-radius: 10px; border: 0; } [dir=rtl] .pricing__tab-nav .nav-link { padding-right: 44px; padding-left: 0; } .pricing__tab-nav .nav-link span { font-weight: 700; font-size: 13px; color: #F46A35; padding: 4px 7px; border-radius: 30px; background: rgba(244, 106, 53, 0.1); display: inline-block; line-height: 1; margin-left: 5px; } [dir=rtl] .pricing__tab-nav .nav-link span { margin-left: 0; margin-right: 5px; } .pricing__tab-nav .nav-link:first-child { padding-right: 29px; } [dir=rtl] .pricing__tab-nav .nav-link:first-child { padding-right: 0; padding-left: 29px; } .pricing__tab-nav .nav-link.active { background-color: transparent; color: var(--tp-common-black); } .pricing__tab-nav .price-tab-slide { position: relative; z-index: 1; } .pricing__tab-nav .price-tab-slide:hover { cursor: pointer; } .pricing__tab-nav .price-tab-slide label:hover { cursor: pointer; } .pricing__tab-nav .price-tab-slide #price-tab-check { display: none; } .pricing__tab-nav .price-tab-slide #price-tab-check:checked + i { right: 190px; width: 150px; } [dir=rtl] .pricing__tab-nav .price-tab-slide #price-tab-check:checked + i { right: auto; left: 190px; } @media (max-width: 366px) { .pricing__tab-nav .price-tab-slide #price-tab-check:checked + i { bottom: 38px; right: 0; width: 100%; } [dir=rtl] .pricing__tab-nav .price-tab-slide #price-tab-check:checked + i { left: 0; right: auto; } } .pricing__tab-nav .price-tab-slide i { position: absolute; top: 0; right: 0; width: 175px; height: 38px; color: var(--tp-common-black); background-color: var(--tp-common-white); box-shadow: 0px 1px 4px rgba(0, 20, 90, 0.1); border-radius: 10px; -webkit-transform: translate3d(0, 0); transform: translate3d(0, 0); -webkit-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); -o-transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); transition: 0.2s cubic-bezier(0.25, 1, 0.5, 1); z-index: -1; } [dir=rtl] .pricing__tab-nav .price-tab-slide i { left: 0; right: auto; } @media (max-width: 366px) { .pricing__tab-nav .price-tab-slide i { width: 100%; top: auto; bottom: 0; } } .pricing__btn .tp-btn-border-3 { font-size: 16px; padding: 17px 31px 17px; } .pricing__btn .tp-btn-border-3:hover { color: var(--tp-common-white); border-color: var(--tp-theme-3); background-color: var(--tp-theme-3); } .pricing__btn-7 { border-right: 1px solid rgba(4, 18, 31, 0.08); width: 33.33%; padding: 40px 20px 37px; } .pricing__btn-7:last-child { border: 0; } [dir=rtl] .pricing__btn-7:last-child { border-right: 1px solid rgba(4, 18, 31, 0.08); } [dir=rtl] .pricing__btn-7:first-child { border: 0; } .pricing__btn-7.price-active .tp-btnr-border-2 { background-color: var(--tp-theme-7); border-color: var(--tp-theme-7); color: var(--tp-common-white); } .pricing__btn-7.price-active .tp-btnr-border-2:hover { background-color: var(--tp-common-yellow-3); border-color: var(--tp-common-yellow-3); color: var(--tp-common-black); } .pricing__btn-7 .tp-btnr-border-2:hover { background-color: var(--tp-theme-7); border-color: var(--tp-theme-7); color: var(--tp-common-white); } .pricing__btn-7 .tp-btnr-border-2::after { display: none; } .pricing__table { overflow: hidden; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .pricing__table { overflow-x: scroll; } } .pricing__table-wrapper { border-radius: 41px; } @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) { .pricing__table-wrapper { width: 1120px; } } .pricing__footer-content { height: 100%; border-right: 1px solid rgba(4, 18, 31, 0.08); } [dir=rtl] .pricing__footer-content { border-right: 0; border-left: 1px solid rgba(4, 18, 31, 0.08); } .pricing__style-2 .tp-btn-11:hover { background-color: var(--tp-theme-1); } .pricing__style-2 .tp-btnr-border-2 { border-radius: 0; border-width: 1px; padding: 11px 33px 11px 36px; } .pricing__style-2 .tp-btnr-border-2:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .pricing__style-2 .pricing__btn-7.price-active .tp-btnr-border-2 { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .pricing__style-2 .pricing__btn-7.price-active .tp-btnr-border-2:hover { background-color: var(--tp-common-black); border-color: var(--tp-common-black); color: var(--tp-common-white); } .pricing__style-2 .pricing-header-shape { bottom: 8%; right: 3%; } .pricing__style-2 .pricing__feature-item-wrapper { border-radius: 0; } .pricing__style-2 .pricing__header { background-color: #F5F5F8; border-radius: 0; } .pricing__style-2 .pricing__header-content { border-radius: 0; } .pricing__style-2 .pricing__header-top-wrapper .pricing__top-7:last-child { border-radius: 0; } .pricing__style-2 .pricing__popular-2 span { background-color: #6364DB; } .pricing__style-2 .pricing__tag-7 span { color: var(--tp-theme-1); } .tp-el-price-agency .elementor-widget-container { height: 100%; } .tp-el-price-agency .elementor-widget-wrap > .elementor-element { height: 100%; } /*----------------------------------------*/ /* 20. REVIEW CSS START /*----------------------------------------*/ .review__inner { position: relative; z-index: 1; margin-left: 260px; margin-right: 260px; background: rgba(255, 255, 255, 0.06); } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .review__inner { margin-left: 200px; margin-right: 200px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .review__inner { margin-left: 100px; margin-right: 100px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .review__inner { margin-left: 70px; margin-right: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .review__inner { margin-left: 40px; margin-right: 40px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .review__inner { margin-left: 15px; margin-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .review__inner { margin-left: 15px; margin-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .review__inner { margin-left: 10px; margin-right: 10px; } } .review__person ul { display: flex; align-items: center; margin-left: -22px; } [dir=rtl] .review__person ul { margin-left: 0; margin-right: -22px; } .review__person ul li { list-style: none; margin-left: -15px; } [dir=rtl] .review__person ul li { margin-left: 0; margin-right: -15px; } .review__person ul li:first-child { margin-left: 0; } [dir=rtl] .review__person ul li:first-child { margin-right: 0; } .review__person ul li span { display: inline-block; width: 50px; height: 50px; line-height: 42px; font-size: 16px; font-weight: 700; text-align: center; font-family: var(--tp-ff-space); color: var(--tp-common-white); } .review__person ul li span img { width: 50px; height: 50px; border-radius: 50%; border: 4px solid var(--tp-common-black-6); } .review__person ul li:last-child span { border: 4px solid var(--tp-common-black-6); background-image: -webkit-linear-gradient(47.17deg, #F06FF3 9.62%, #31A8FF 89.45%); background-image: -moz-linear-gradient(47.17deg, #F06FF3 9.62%, #31A8FF 89.45%); background-image: -ms-linear-gradient(47.17deg, #F06FF3 9.62%, #31A8FF 89.45%); background-image: -o-linear-gradient(47.17deg, #F06FF3 9.62%, #31A8FF 89.45%); background-image: linear-gradient(47.17deg, #F06FF3 9.62%, #31A8FF 89.45%); border-radius: 50%; } .review__person p { font-size: 11px; font-weight: 600; color: var(--tp-common-white); opacity: 0.6; font-family: var(--tp-ff-inter); text-transform: uppercase; margin-bottom: 0; line-height: 1.5; margin-left: 5px; } [dir=rtl] .review__person p { margin-left: 0; margin-right: 5px; } @media (max-width: 575px) { .review__skill { margin-top: 30px; } } .review__skill-score { text-align: right; } .review__skill-score p { font-size: 16px; font-weight: 700; color: var(--tp-common-white); margin-bottom: 15px; font-family: var(--tp-ff-space); line-height: 1; } .review__skill-score p span { font-size: 100px; margin-bottom: 0; } .review__skill-item { padding: 22px 30px; background-image: -webkit-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: -moz-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: -ms-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: -o-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); -moz-animation: reviewbg 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: reviewbg 3s ease-in-out 1s forwards infinite alternate; animation: reviewbg 3s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } .review__skill-item p { margin-bottom: 0; font-size: 16px; font-weight: 600; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } @media (max-width: 575px) { .review__skill-item-sm { margin-left: 0; margin-bottom: 15px; } [dir=rtl] .review__skill-item-sm { margin-right: 0; } } .review__skill-item-sm p { font-size: 15px; font-weight: 600; font-family: var(--tp-ff-inter); color: var(--tp-common-white); margin-bottom: 0; margin-right: 15px; } [dir=rtl] .review__skill-item-sm p { margin-right: 0; margin-left: 15px; } .review__skill-item-sm-bar { background-image: -webkit-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: -moz-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: -ms-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: -o-linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); background-image: linear-gradient(87.58deg, #F87171 0.25%, #FACC15 42.09%, #4ADE80 63.34%, #38BDF8 97.01%); height: 20px; width: 220px; -moz-animation: reviewbg 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: reviewbg 3s ease-in-out 1s forwards infinite alternate; animation: reviewbg 3s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; } @media (max-width: 575px) { .review__skill-item-xs { margin-left: 0; } [dir=rtl] .review__skill-item-xs { margin-right: 0; } } .review__skill-item-xs p { font-size: 15px; font-weight: 600; font-family: var(--tp-ff-inter); color: var(--tp-common-white); margin-bottom: 0; margin-right: 15px; opacity: 0.5; } [dir=rtl] .review__skill-item-xs p { margin-right: 0; margin-left: 15px; } .review__skill-item-xs-bar { border-radius: 2px; width: 130px; height: 20px; background-color: var(--tp-common-white); opacity: 0.2; } .review__shape-1 { position: absolute; z-index: -1; top: -11%; left: 6%; -moz-animation: tprotate 7s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 7s ease-in-out 1s forwards infinite alternate; animation: tprotate 7s ease-in-out 1s forwards infinite alternate; } .review__shape-2 { position: absolute; z-index: -1; top: 12%; right: -2%; -moz-animation: tptranslateY2 5s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 5s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 5s ease-in-out 1s forwards 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) { .review__shape-2 { right: 0; } } .review__shape-3 { position: absolute; z-index: -1; top: 18%; right: 3%; -moz-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; } .review__shape-4 { position: absolute; z-index: -1; bottom: -3%; right: 30%; } .review__shape-5 { position: absolute; z-index: -1; top: 31%; right: 40%; } .review__shape-6 { position: absolute; z-index: -1; top: 10%; left: 14%; } .review__shape-7 { position: absolute; z-index: -1; top: -5%; left: 6%; } @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) { .review__shape-7 { left: 0; width: 100%; } } @-webkit-keyframes reviewbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-moz-keyframes reviewbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @-ms-keyframes reviewbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } @keyframes reviewbg { 0% { background-position: 0%; } 100% { background-position: 100%; } } /*----------------------------------------*/ /* 21. INSTAGRAM CSS START /*----------------------------------------*/ .instagram__item { position: relative; overflow: hidden; z-index: 1; } .instagram__item::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--tp-common-black); visibility: hidden; opacity: 0; } .instagram__item:hover::after { opacity: 0.6; visibility: visible; } .instagram__item:hover .instagram__btn { top: 50%; visibility: visible; opacity: 1; } .instagram__btn { position: absolute; top: 60%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); visibility: hidden; opacity: 0; z-index: 1; } .instagram__slider-active .zoom-instagram-widget__item { border-radius: 0; } .instagram__slider-active .slick-list { margin: 0 -6px; } .instagram__slider-active .slick-slide > div { margin: 0 6px; } .instagram__open-icon .zoom-instagram-widget__item { position: relative; } .instagram__open-icon .zoom-instagram-widget__item::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--tp-common-black); visibility: hidden; opacity: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .instagram__open-icon .zoom-instagram-widget__item .zoom-instagram-widget__item-inner-wrap .zoom-instagram-icon-wrap > a { display: inline-block; position: absolute; top: 70%; left: 50%; width: 80px; height: 80px; z-index: 1; line-height: 76px; border: 2px solid rgba(255, 255, 255, 0.3); text-align: center; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 50%; color: var(--tp-common-white); visibility: hidden; opacity: 0; } .instagram__open-icon .zoom-instagram-widget__item .zoom-instagram-widget__item-inner-wrap .zoom-instagram-icon-wrap > a:hover { background-color: var(--tp-common-white); border-color: var(--tp-common-white); color: var(--tp-common-black); } .instagram__open-icon .zoom-instagram-widget__item .zoom-instagram-widget__item-inner-wrap .zoom-instagram-icon-wrap > a::after { position: absolute; content: "\f16d"; font-family: "Font Awesome 6 Brands"; color: currentColor; left: 50%; top: 0; font-size: 24px; -webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); } .instagram__open-icon .zoom-instagram-widget__item:hover::after { opacity: 0.6; visibility: visible; } .instagram__open-icon .zoom-instagram-widget__item:hover .zoom-instagram-widget__item-inner-wrap .zoom-instagram-icon-wrap > a { top: 50%; visibility: visible; opacity: 1; } .tp-instagram-btn { font-size: 24px; color: var(--tp-common-white); display: inline-block; width: 80px; height: 80px; text-align: center; line-height: 76px; position: relative; z-index: 1; overflow: hidden; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.2); background-color: transparent; } .tp-instagram-btn:hover { color: var(--tp-common-black); border-color: transparent; background-color: var(--tp-common-white); } /*----------------------------------------*/ /* 22. CASE CSS START /*----------------------------------------*/ .case__price span { display: inline-block; font-weight: 700; color: var(--tp-theme-4); font-size: 20px; margin-bottom: 2px; position: relative; padding-left: 14px; font-family: var(--tp-ff-space); } [dir=rtl] .case__price span { padding-left: 0; padding-right: 14px; } .case__price span::after { position: absolute; content: ""; left: 0; top: 50%; width: 6px; height: 6px; background-color: var(--tp-theme-4); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); border-radius: 50%; } [dir=rtl] .case__price span::after { left: auto; right: 0; } .case__title { font-weight: 700; font-size: 26px; letter-spacing: -0.02em; } .case__title a:hover { color: var(--tp-theme-4); } .case__content { background-color: var(--tp-common-white); padding: 35px 40px 40px; padding-right: 50px; margin-right: 50px; position: relative; z-index: 1; box-shadow: 0px 14px 30px rgba(3, 4, 28, 0.08); -webkit-transform: translateY(-60px); -moz-transform: translateY(-60px); -ms-transform: translateY(-60px); -o-transform: translateY(-60px); transform: translateY(-60px); } [dir=rtl] .case__content { margin-right: 0; margin-left: 50px; } @media (max-width: 575px) { .case__content { padding-left: 20px; padding-right: 20px; margin-right: 0; } [dir=rtl] .case__content { margin-left: 0; } } .case__content p { font-family: var(--tp-ff-inter); line-height: 20px; font-size: 14px; margin-bottom: 25px; } .case__content:hover { -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -o-transform: translateY(-80px); transform: translateY(-80px); } /*----------------------------------------*/ /* 23. VIDEO CSS START /*----------------------------------------*/ .video__content { padding: 0 40px; 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) { .video__content { padding-left: 0; padding-right: 0; } } .video__content-2 { padding: 0 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .video__content-2 { padding-left: 20px; padding-right: 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) { .video__content-2 { padding-left: 0; padding-right: 0; } } .video__content-2 > span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tp-common-white); display: inline-block; margin-bottom: 20px; } .video__content-8 { position: relative; z-index: 1; padding-left: 110px; padding-right: 110px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .video__content-8 { padding-left: 40px; padding-right: 40px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .video__content-8 { padding-left: 80px; padding-right: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .video__content-8 { padding-left: 50px; padding-right: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .video__content-8 { padding-left: 40px; padding-right: 40px; } } @media (max-width: 575px) { .video__content-8 { padding-left: 20px; padding-right: 20px; } } .video__title { font-size: 60px; color: var(--tp-common-white); font-family: var(--tp-ff-space); line-height: 1; margin-bottom: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .video__title { font-size: 50px; } } @media (max-width: 575px) { .video__title { font-size: 30px; } } .video__title-2 { font-size: 50px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); } @media (max-width: 575px) { .video__title-2 { font-size: 30px; } } .video__play { margin-bottom: 15px; } .video__play-2 { margin-bottom: 42px; } .video__play-btn { display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; border-radius: 50%; position: relative; z-index: 1; background-color: transparent; } .video__play-btn .video-play-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(45deg, #C6471A 15%, #FFAD91 85.5%); background-image: -moz-linear-gradient(45deg, #C6471A 15%, #FFAD91 85.5%); background-image: -ms-linear-gradient(45deg, #C6471A 15%, #FFAD91 85.5%); background-image: -o-linear-gradient(45deg, #C6471A 15%, #FFAD91 85.5%); background-image: linear-gradient(45deg, #C6471A 15%, #FFAD91 85.5%); border-radius: 50%; box-shadow: 0px 2px 2px rgba(136, 39, 6, 0.3); } .video__play-btn img { position: absolute; top: 53%; left: 53%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .video__play-btn:hover .video-play-bg { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .video__play-btn-8 { position: relative; } .video__play-btn-8 .video-play-bg { box-shadow: 0px 2px 2px rgba(136, 39, 6, 0.3); } .video__play-btn-2 { width: 84px; height: 84px; line-height: 84px; text-align: center; color: var(--tp-theme-1); box-shadow: 0px 0px 50px rgba(3, 4, 28, 0.1); border-radius: 50%; } .video__play-btn-2 svg { -webkit-transform: translate(4px, -2px); -moz-transform: translate(4px, -2px); -ms-transform: translate(4px, -2px); -o-transform: translate(4px, -2px); transform: translate(4px, -2px); } .video__play-btn-2 .video-play-bg { background-image: -webkit-linear-gradient(164.71deg, #FFFFFF 8.83%, #EAEAEF 128.86%); background-image: -moz-linear-gradient(164.71deg, #FFFFFF 8.83%, #EAEAEF 128.86%); background-image: -ms-linear-gradient(164.71deg, #FFFFFF 8.83%, #EAEAEF 128.86%); background-image: -o-linear-gradient(164.71deg, #FFFFFF 8.83%, #EAEAEF 128.86%); background-image: linear-gradient(164.71deg, #FFFFFF 8.83%, #EAEAEF 128.86%); } .video__play-btn-2:hover { color: var(--tp-theme-1); } .video__inner-8 { position: relative; box-shadow: 0px 50px 60px rgba(12, 15, 33, 0.9); } .video__inner-8::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(12, 15, 33, 0.4); } .video__overlay { position: relative; z-index: 1; } .video__overlay::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 50%; background-color: var(--tp-common-black-12); z-index: -1; } .video__bg { background-image: -webkit-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -moz-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -ms-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: -o-linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); background-image: linear-gradient(173.39deg, #6364DB -16.2%, #4D4ECC 101.3%); } .video__bg-shape { position: absolute; top: 0; left: 0; width: 100%; height: 100%; mix-blend-mode: luminosity; z-index: -1; } .video__pt-183 { padding-top: 183px; } .video__pb-223 { padding-bottom: 223px; } @media (max-width: 575px) { .video__pb-223 { padding-bottom: 160px; } } .video__shape-1 { position: absolute; top: 16%; left: 15%; z-index: -1; -moz-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateX 3s ease-in-out 1s forwards infinite alternate; } .video__shape-2 { position: absolute; bottom: 28%; right: 8%; z-index: -1; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } /*----------------------------------------*/ /* 24. HISTORY CSS START /*----------------------------------------*/ .history__thumb { position: relative; z-index: -2; } @media (max-width: 575px) { .history__thumb img { width: 100%; } } [dir=rtl] .history__thumb-wrapper { padding-right: 0; padding-left: 70px; } @media (max-width: 575px) { .history__thumb-wrapper { padding-right: 0; } [dir=rtl] .history__thumb-wrapper { padding-left: 0; } } .history__thumb-right { position: relative; font-size: 60px; font-weight: 700; line-height: 40px; color: var(--tp-common-white); font-family: var(--tp-ff-space); padding: 255px 86px 75px 28px; margin-top: 100px; text-align: center; color: #fff; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: 230px; height: 370px; } .history__thumb-right-wrapper { margin-left: -100px; position: relative; } [dir=rtl] .history__thumb-right-wrapper { margin-left: 0; margin-right: -100px; } @media (max-width: 575px) { .history__thumb-right-wrapper { margin-left: 65px; } [dir=rtl] .history__thumb-right-wrapper { margin-left: 0; margin-right: 65px; } } .history__thumb-right-wrapper .history-thumb-text { position: absolute; bottom: 5%; left: 36px; z-index: 1; } [dir=rtl] .history__thumb-right-wrapper .history-thumb-text { left: auto; right: 36px; } .history__thumb-right-wrapper .history-thumb-text p { font-size: 14px; font-weight: 500; color: #fff; opacity: 0.8; font-family: var(--tp-ff-inter); } [dir=rtl] .history__thumb-right { padding-left: 86px; padding-right: 28px; } @media (max-width: 575px) { .history__thumb-right { margin-top: -70px; height: 270px; padding-top: 155px; } } .history__thumb-right::after, .history__thumb-right::before { position: absolute; content: ""; } .history__thumb-right::before { z-index: -2; top: 0; right: 0; bottom: 0; left: 0; background-image: inherit; } .history__thumb-right::after { position: absolute; z-index: -1; content: ""; left: 10px; top: 10px; right: 10px; bottom: 10px; background-color: rgba(54, 93, 192, 0.9); backdrop-filter: blur(14px); } .history__year { flex: 0 0 auto; } .history__year-title { font-size: 14px; font-family: var(--tp-ff-inter); font-weight: 500; color: var(--tp-text-1); margin-bottom: 0; margin-top: 5px; margin-right: 24px; padding-right: 30px; position: relative; } [dir=rtl] .history__year-title { margin-right: 0; padding-left: 0; margin-left: 24px; padding-left: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .history__list { padding-right: 0; } [dir=rtl] .history__list { padding-left: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .history__list { padding-right: 0; padding-left: 0; margin-top: 50px; } } .history__list-item { margin-bottom: 50px; } .history__list-item:last-child { margin-bottom: 0; } .history__list-item:last-child .history__list-content::after { display: none; } .history__list-content { position: relative; } .history__list-content::after { position: absolute; content: ""; left: -30px; top: 37px; width: 1px; height: 100%; background-color: #EAEAEF; } [dir=rtl] .history__list-content::after { left: auto; right: -30px; } .history__list-content > p { font-family: var(--tp-ff-inter); font-size: 15px; line-height: 20px; margin-bottom: 20px; } .history__list-dot { position: absolute; top: 4px; left: -25px; } [dir=rtl] .history__list-dot { left: auto; right: -25px; } .history__list-dot span { display: inline-block; position: absolute; content: ""; right: 0; top: 4px; width: 10px; height: 10px; background: linear-gradient(180deg, #0CCEBA 0%, #017266 100%); box-shadow: 0px 1px 2px rgba(14, 53, 49, 0.2); border-radius: 50%; } [dir=rtl] .history__list-dot span { right: auto; left: 0; } .history__list-dot span::before { position: absolute; content: ""; right: -7px; top: -7px; width: 24px; height: 24px; background: rgba(21, 165, 150, 0.1019607843); border-radius: 50%; -webkit-animation: pulse-2 1.75s cubic-bezier(0.4, 0, 0.2, 1) infinite; animation: pulse-2 1.75s cubic-bezier(0.4, 0, 0.2, 1) infinite; } [dir=rtl] .history__list-dot span::before { right: auto; left: -7px; } .history__list-title { font-family: var(--tp-ff-space); font-weight: 700; font-size: 24px; letter-spacing: -0.04em; margin-bottom: 8px; } .history__list-meta span { display: inline-block; padding: 0 13px; font-size: 14px; font-weight: 500; font-family: var(--tp-ff-space); color: var(--tp-text-1); background-color: var(--tp-grey-9); border-radius: 20px; } .history__list-meta span:hover { background-color: var(--tp-theme-4); color: var(--tp-common-white); } /*----------------------------------------*/ /* 25. CONTACT CSS START /*----------------------------------------*/ .contact__wrapper > p { font-family: var(--tp-ff-space); font-size: 20px; color: var(--tp-common-black); margin-bottom: 50px; } .contact__wrapper-2 { margin-right: -30px; } [dir=rtl] .contact__wrapper-2 { margin-right: 0; margin-left: -30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__wrapper-2 { margin-bottom: 30px; margin-right: 0; } [dir=rtl] .contact__wrapper-2 { margin-left: 0; } } .contact__form { padding: 50px 50px; border: 2px solid var(--tp-border-5); } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) { .contact__form { margin-left: 0; } [dir=rtl] .contact__form { margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form { margin-left: 0; margin-top: 50px; padding: 25px 25px; } [dir=rtl] .contact__form { margin-right: 0; } } .contact__form-2 { padding: 73px 100px 95px; border: 2px solid #EAEAEF; background-color: var(--tp-common-white); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .contact__form-2 { padding: 43px 50px 55px; } } @media (max-width: 575px) { .contact__form-2 { padding: 20px; } } .contact__form-2-title { font-weight: 500; font-size: 30px; letter-spacing: -0.04em; margin-bottom: 30px; } @media (max-width: 575px) { .contact__form-2-title { font-size: 22px; margin-bottom: 15px; } } .contact__form-3 { padding: 60px 50px 70px 50px; background-color: var(--tp-common-white); box-shadow: 0px 2px 4px rgba(3, 4, 28, 0.1); } [dir=rtl] .contact__form-3 { margin-left: 0; margin-right: 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) { .contact__form-3 { margin-left: 0; } [dir=rtl] .contact__form-3 { margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form-3 { padding: 60px 25px 70px 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .contact__form-9 { padding-left: 0; } [dir=rtl] .contact__form-9 { padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form-9 { margin-top: 40px; padding-left: 0; } [dir=rtl] .contact__form-9 { padding-right: 0; } } .contact__form-9-title { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 30px; color: var(--tp-common-black); margin-bottom: 55px; } .contact__form-11 { padding: 50px 45px; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(5, 18, 20, 0.06); animation-delay: 0.6s; animation-duration: 1s; } @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) { .contact__form-11 { margin-left: 0; } } @media (max-width: 575px) { .contact__form-11 { margin-left: 0; padding: 30px 25px; } [dir=rtl] .contact__form-11 { margin-right: 0; } } .contact__form-call { display: none; } [dir=rtl] .contact__form-call { text-align: left; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__form-call { margin-top: 15px; } } .contact__form-call span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 13px; line-height: 1; color: #636363; } .contact__form-call p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 0.1; color: var(--tp-theme-1); margin-bottom: 0; } .contact__icon { margin-bottom: 37px; min-height: 80px; } .contact__input { margin-bottom: 20px; } .contact__input input, .contact__input textarea { width: 100%; height: 60px; border: 2px solid var(--tp-grey-7); outline: 0; background-color: var(--tp-grey-7); color: var(--tp-common-black); font-family: var(--tp-ff-inter); padding: 0 25px; } .contact__input input::-webkit-input-placeholder, .contact__input textarea::-webkit-input-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .contact__input input:-moz-placeholder, .contact__input textarea:-moz-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .contact__input input::-moz-placeholder, .contact__input textarea::-moz-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .contact__input input:-ms-input-placeholder, .contact__input textarea:-ms-input-placeholder { color: var(--tp-text-10); font-family: var(--tp-ff-inter); } .contact__input input:focus, .contact__input textarea:focus { border-color: var(--tp-theme-4); background-color: var(--tp-common-white); } .contact__input textarea { height: 160px; padding: 23px 25px; resize: none; } .contact__input textarea:focus { border-color: var(--tp-theme-4); background-color: var(--tp-common-white); } .contact__input-2 { margin-bottom: 20px; } .contact__input-2 input, .contact__input-2 textarea { width: 100%; height: 60px; border: 1px solid var(--tp-grey-15); outline: 0; background-color: var(--tp-grey-15); color: var(--tp-common-black); padding: 0 25px; } .contact__input-2 input::-webkit-input-placeholder, .contact__input-2 textarea::-webkit-input-placeholder { color: #85858B; } .contact__input-2 input:-moz-placeholder, .contact__input-2 textarea:-moz-placeholder { color: #85858B; } .contact__input-2 input::-moz-placeholder, .contact__input-2 textarea::-moz-placeholder { color: #85858B; } .contact__input-2 input:-ms-input-placeholder, .contact__input-2 textarea:-ms-input-placeholder { color: #85858B; } .contact__input-2 input:focus, .contact__input-2 textarea:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .contact__input-2 textarea { height: 160px; padding: 23px 25px; resize: none; } .contact__input-3 input, .contact__input-3 textarea { border-width: 2px; padding: 0 26px; background-color: var(--tp-grey-7); border-color: var(--tp-grey-7); } .contact__input-3 textarea { height: 180px; padding: 23px 26px; resize: none; } .contact__input-3 textarea:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .contact__input-3 .nice-select { width: 100%; float: none; height: 60px; line-height: 56px; border: 2px solid var(--tp-grey-7); background-color: var(--tp-grey-7); padding: 0 26px; border-radius: 0; } .contact__input-3 .nice-select:focus { border-color: var(--tp-theme-1); } .contact__input-3 .nice-select::after { right: 26px; } [dir=rtl] .contact__input-3 .nice-select::after { right: auto; left: 26px; } .contact__input-3 .nice-select .list { margin-top: 0; border-radius: 0; width: 100%; padding-bottom: 10px; padding-top: 9px; } .contact__input-3 .nice-select .list .option { line-height: 29px; min-height: 29px; padding-left: 18px; padding-right: 18px; } .contact__input-3 .nice-select .list .option:first-child { display: none !important; } .contact__input-3 .nice-select .list .option:hover { color: var(--tp-theme-1); } .contact__input-3 .nice-select .list .option.selected { color: var(--tp-theme-1); } .contact__input-9 { margin-bottom: 20px; } .contact__input-9 input, .contact__input-9 textarea { width: 100%; height: 60px; line-height: 56px; outline: 0; border: 1.5px solid #f6f6f9; background-color: #f6f6f9; padding: 0 30px; color: var(--tp-common-black); } .contact__input-9 input::-webkit-input-placeholder, .contact__input-9 textarea::-webkit-input-placeholder { color: #7B7C89; } .contact__input-9 input:-moz-placeholder, .contact__input-9 textarea:-moz-placeholder { color: #7B7C89; } .contact__input-9 input::-moz-placeholder, .contact__input-9 textarea::-moz-placeholder { color: #7B7C89; } .contact__input-9 input:-ms-input-placeholder, .contact__input-9 textarea:-ms-input-placeholder { color: #7B7C89; } .contact__input-9 input:focus, .contact__input-9 textarea:focus { background-color: var(--tp-common-white); border-color: var(--tp-common-black); } .contact__input-9 textarea { height: 180px; resize: none; line-height: 1.2; padding: 20px 30px; } .contact__input-11 { margin-bottom: 20px; } .contact__input-11 input, .contact__input-11 textarea { border-width: 1px; } .contact__input-11 input:focus, .contact__input-11 textarea:focus { background-color: var(--tp-common-white); border-color: var(--tp-theme-1); } [dir=rtl] .contact__list-9 { margin-left: 100px; margin-right: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .contact__list-9 { margin-right: 0; } [dir=rtl] .contact__list-9 { margin-left: 0; } } .contact__list-item { margin-bottom: 10px; } .contact__list-item:last-child { margin-bottom: 0; } .contact__list-item-9 { padding: 37px 40px; background: #FFFFFF; border: 1px solid #EAEAEF; position: relative; margin-bottom: 28px; } .contact__list-item-9:last-child { margin-bottom: 0; } .contact__list-item-9::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); z-index: -1; -webkit-transition: all 0.15s ease-out 0s; -moz-transition: all 0.15s ease-out 0s; -ms-transition: all 0.15s ease-out 0s; -o-transition: all 0.15s ease-out 0s; transition: all 0.15s ease-out 0s; } [dir=rtl] .contact__list-item-9::after { left: auto; right: 0; } .contact__list-item-9:hover::after { top: 8px; left: 8px; } [dir=rtl] .contact__list-item-9:hover::after { left: auto; right: 8px; } .contact__list-item-9:hover .contact__list-icon-9 span i, .contact__list-item-9:hover .contact__list-icon-9 span svg { -webkit-transform: translateY(-2px) translate3d(0, -2px, 0); -moz-transform: translateY(-2px) translate3d(0, -2px, 0); -ms-transform: translateY(-2px) translate3d(0, -2px, 0); -o-transform: translateY(-2px) translate3d(0, -2px, 0); transform: translateY(-2px) translate3d(0, -2px, 0); } .contact__list-item-11 { padding-top: 31px; padding-bottom: 26px; padding-right: 55px; background-color: var(--tp-common-brown); margin-bottom: 20px; animation-delay: 0.3s; animation-duration: 1s; } [dir=rtl] .contact__list-item-11 { padding-right: 0; padding-left: 55px; } .contact__list-item-11:nth-child(2) { animation-delay: 0.6s; } .contact__list-item-11:nth-child(3) { animation-delay: 0.9s; } .contact__list-item-11:nth-child(4) { animation-delay: 1.2s; } .contact__list-item-11:last-child { margin-bottom: 0; } .contact__list-item-11.is-green { background-color: var(--tp-common-green-light-5); } .contact__list-item-11.is-green .contact__list-icon-11 span { color: var(--tp-common-green-7); } .contact__list-item-11.is-brown { background-color: var(--tp-common-brown-light); } .contact__list-item-11.is-brown .contact__list-icon-11 span { color: var(--tp-common-brown-dark-2); } .contact__list-icon span { display: inline-block; width: 70px; height: 70px; line-height: 63px; text-align: center; font-size: 26px; background-color: var(--tp-grey-8); color: var(--tp-common-green-3); margin-right: 20px; } [dir=rtl] .contact__list-icon span { margin-right: 0; margin-left: 20px; } .contact__list-icon-9 span { display: inline-block; font-size: 24px; margin-right: 30px; position: relative; color: var(--tp-common-black); } [dir=rtl] .contact__list-icon-9 span { margin-right: 0; margin-left: 30px; } @media (max-width: 575px) { .contact__list-icon-9 span { margin-bottom: 25px; } } .contact__list-icon-9 span img.contact-icon-shape { position: absolute; bottom: -12px; right: -16px; max-width: inherit; width: inherit; } [dir=rtl] .contact__list-icon-9 span img.contact-icon-shape { right: auto; left: -16px; } .contact__list-icon-9 span svg, .contact__list-icon-9 span i { backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } .contact__list-icon-11 span { display: inline-block; color: var(--tp-common-brown-dark); font-size: 55px; -webkit-transform: translateX(-50%) translateY(-15%); -moz-transform: translateX(-50%) translateY(-15%); -ms-transform: translateX(-50%) translateY(-15%); -o-transform: translateX(-50%) translateY(-15%); transform: translateX(-50%) translateY(-15%); } [dir=rtl] .contact__list-icon-11 span { -webkit-transform: translateX(50%) translateY(-15%); -moz-transform: translateX(50%) translateY(-15%); -ms-transform: translateX(50%) translateY(-15%); -o-transform: translateX(50%) translateY(-15%); transform: translateX(50%) translateY(-15%); } .contact__list-content h5 { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 16px; letter-spacing: -0.04em; margin-bottom: 2px; color: var(--tp-text-1); } .contact__list-content p { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 18px; letter-spacing: -0.04em; color: var(--tp-common-black); margin-bottom: 0; } .contact__list-content-9 h5 { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 16px; line-height: 14px; color: #525258; margin-bottom: 10px; } .contact__list-content-9 p { font-family: var(--tp-ff-syne); font-weight: 600; font-size: 22px; line-height: 15px; color: var(--tp-common-black); margin-bottom: 0; } .contact__list-content-9 p a { position: relative; } .contact__list-content-9 p a::after { position: absolute; content: ""; left: auto; right: 0; width: 0; bottom: 0; height: 2px; background-color: var(--tp-common-black); } [dir=rtl] .contact__list-content-9 p a::after { left: 0; right: auto; } .contact__list-content-9 p a:hover::after { width: 100%; left: 0; right: auto; } [dir=rtl] .contact__list-content-9 p a:hover::after { left: auto; right: 0; } .contact__list-content-11 { margin-left: 3px; } [dir=rtl] .contact__list-content-11 { margin-left: 0; margin-right: 3px; } .contact__list-content-11 h5 { font-family: var(--tp-ff-rajdhani); font-weight: 600; font-size: 22px; line-height: 0.82; color: var(--tp-common-black); } .contact__list-content-11 p { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 16px; line-height: 1.25; color: #53535A; margin-bottom: 0; } .contact__list-content-11 p a { position: relative; } .contact__list-content-11 p a:hover { color: var(--tp-theme-1); } [dir=rtl] .contact__btn { text-align: right; } .contact__btn .tp-btn-brown { padding: 11px 32px 13px; } .contact__btn-2 .tp-btn { padding: 12px 47px; } .contact__btn-2 .tp-btn:hover { background-color: var(--tp-common-black); } .contact__btn-3 .tp-btn:hover { background-color: var(--tp-common-black); } [dir=rtl] .contact__btn-11 { text-align: right; } .contact__shape-1 { position: absolute; left: 15%; top: 12%; display: inline-block; width: 250px; height: 250px; border-radius: 50%; background-image: -webkit-linear-gradient(329deg, rgba(255, 145, 250, 0.1) 13.55%, rgba(250, 100, 144, 0.1) 48.54%, rgba(247, 216, 106, 0.1) 86.44%); background-image: -moz-linear-gradient(329deg, rgba(255, 145, 250, 0.1) 13.55%, rgba(250, 100, 144, 0.1) 48.54%, rgba(247, 216, 106, 0.1) 86.44%); background-image: -ms-linear-gradient(329deg, rgba(255, 145, 250, 0.1) 13.55%, rgba(250, 100, 144, 0.1) 48.54%, rgba(247, 216, 106, 0.1) 86.44%); background-image: -o-linear-gradient(329deg, rgba(255, 145, 250, 0.1) 13.55%, rgba(250, 100, 144, 0.1) 48.54%, rgba(247, 216, 106, 0.1) 86.44%); background-image: linear-gradient(329deg, rgba(255, 145, 250, 0.1) 13.55%, rgba(250, 100, 144, 0.1) 48.54%, rgba(247, 216, 106, 0.1) 86.44%); } [dir=rtl] .contact__shape-1 { left: auto; right: 15%; } .contact__shape-2 { position: absolute; bottom: -1%; right: -17%; z-index: 1; animation-delay: 0.5s; animation-duration: 1s; } [dir=rtl] .contact__shape-2 { right: auto; left: -17%; } @media (max-width: 575px) { .contact__shape-2 { display: none; } } .contact__shape-circle { position: absolute; content: ""; top: 2%; right: -13%; width: 450px; height: 450px; border-radius: 50%; border: 1px solid rgba(119, 55, 255, 0.1); background-color: transparent; z-index: -1; } [dir=rtl] .contact__shape-circle { right: auto; left: -13%; } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__inner-11 { margin-top: 75px; } .contact__inner-11 .section__title-wrapper-11 { margin-bottom: 30px; } } .contact__item { padding: 60px 40px 58px; box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.06); position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .contact__item { padding: 60px 20px 58px; } } .contact__content .contact-item-subtitle { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; text-decoration-line: underline; color: #96969C; margin-bottom: 15px; } .contact__content p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 22px; line-height: 1.36; letter-spacing: -0.02em; color: var(--tp-common-black); margin-bottom: 0; } .contact__content p a:hover { color: var(--tp-theme-1); } .contact__content-2 { margin-bottom: 43px; } .contact__content-2 .contact-title { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 5px; } .contact__content-2 p { font-size: 15px; line-height: 1.6; } .contact__info-box { padding: 40px 40px 45px; background: #FFFFFF; box-shadow: 0px 2px 4px rgba(3, 4, 28, 0.1); } .contact__info-box-title { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 6px; } .contact__info-box p { font-size: 14px; line-height: 1.57; margin-bottom: 32px; } @media (max-width: 575px) { .contact__info-box p br { display: none; } } .contact__info-box-refund p { font-size: 14px; margin-bottom: 0; } .contact__info-box-refund p a:hover { color: var(--tp-theme-1); } .contact__info-item:not(:last-child) { margin-right: 46px; } [dir=rtl] .contact__info-item:not(:last-child) { margin-left: 46px; } .contact__info-item:hover .contact__info-icon span svg, .contact__info-item:hover .contact__info-icon span i { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .contact__info-icon span { font-size: 26px; color: var(--tp-common-purple); position: relative; display: inline-block; margin-bottom: 15px; } .contact__info-icon span::after { position: absolute; content: ""; left: 0; top: 0; width: 38px; height: 38px; background-image: -webkit-linear-gradient(151.63deg, rgba(99, 100, 219, 0) 4.91%, rgba(99, 100, 219, 0.12) 88.78%); background-image: -moz-linear-gradient(151.63deg, rgba(99, 100, 219, 0) 4.91%, rgba(99, 100, 219, 0.12) 88.78%); background-image: -ms-linear-gradient(151.63deg, rgba(99, 100, 219, 0) 4.91%, rgba(99, 100, 219, 0.12) 88.78%); background-image: -o-linear-gradient(151.63deg, rgba(99, 100, 219, 0) 4.91%, rgba(99, 100, 219, 0.12) 88.78%); background-image: linear-gradient(151.63deg, rgba(99, 100, 219, 0) 4.91%, rgba(99, 100, 219, 0.12) 88.78%); border-radius: 50%; } [dir=rtl] .contact__info-icon span::after { left: auto; right: 0; } .contact__info-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .contact__info-icon span svg, .contact__info-icon span i { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .contact__info-icon span img { width: 28px; } .contact__info-content p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; letter-spacing: -0.02em; color: var(--tp-common-black); } .contact__info-content p a:hover { color: var(--tp-theme-1); } .contact__info-content.has-fw-400 p { font-weight: 400; } .contact__info-content.has-fw-400 p a { text-decoration: underline; } .contact__agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 18px; height: 18px; background: transparent; border: 1px solid #D9D9DE; outline: none; flex: 0 0 auto; -webkit-transform: translateY(-2.5px); -moz-transform: translateY(-2.5px); -ms-transform: translateY(-2.5px); -o-transform: translateY(-2.5px); transform: translateY(-2.5px); padding: 0; } .contact__agree input:checked { position: relative; background-color: var(--tp-theme-1); border-color: transparent; } .contact__agree input:checked::after { box-sizing: border-box; position: absolute; content: "\f00c"; font-weight: 700; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .contact__agree input:hover { cursor: pointer; } .contact__agree label { padding-left: 10px; font-size: 14px; line-height: 1; color: var(--tp-text-1); font-family: var(--tp-ff-inter); } [dir=rtl] .contact__agree label { padding-left: 0; padding-right: 10px; } .contact__agree label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } [dir=rtl] .contact__agree label a { padding-left: 0; padding-right: 4px; } .contact__agree label a:hover { color: var(--tp-theme-1); } .contact__agree label:hover { cursor: pointer; } .contact__location-item { padding-top: 33px; padding-bottom: 33px; border-bottom: 1px solid #EAEAEF; } .contact__location-title { width: 300px; font-size: 20px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black-solid); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .contact__location-info { margin-top: 30px; } } @media (max-width: 575px) { .contact__location-info { margin-top: 30px; margin-bottom: 30px; } } [dir=rtl] .contact__location-icon { margin-right: 0; margin-left: 45px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__location-icon { margin-right: 15px; } [dir=rtl] .contact__location-icon { margin-right: 0; margin-left: 15px; } } @media (max-width: 575px) { .contact__location-icon { margin-bottom: 20px; } } .contact__location-content p { font-family: var(--tp-ff-space); font-size: 15px; line-height: 1.47; letter-spacing: -0.02em; color: #525258; margin-bottom: 0; word-wrap: break-word; } .contact__location-content p a:hover { color: var(--tp-theme-1); } @media only screen and (min-width: 768px) and (max-width: 991px) { .contact__location-btn { margin-top: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .contact__location-btn { margin-top: 15px; } } .contact__location-btn .tp-btn-border { padding: 9px 31px; font-size: 15px; letter-spacing: -0.02em; text-transform: capitalize; } .contact__location-btn .tp-btn-border:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .contact__location-box { padding: 60px 50px; box-shadow: 0px 20px 40px rgba(3, 4, 28, 0.08); } .contact__location-box:hover .contact__location-box-icon img { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .contact__location-box-title { font-size: 22px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 20px; padding-bottom: 23px; border-bottom: 1px solid #EAEAEF; } .contact__location-box-icon { margin-bottom: 33px; min-height: 56px; } .contact__location-box-icon img { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .contact__location-box-info { margin-bottom: 30px; } .contact__location-box-info p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.5; letter-spacing: -0.02em; color: var(--tp-text-1); margin-bottom: 0; } .contact__location-box-info p a:hover { color: var(--tp-theme-1); } .contact__location-box-btn .tp-btn-border { padding: 9px 36px; font-size: 15px; letter-spacing: -0.02em; text-transform: capitalize; } .contact__location-box-btn .tp-btn-border:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .contact__social a { font-size: 16px; color: #B9B9BF; margin: 0 10px; } .contact__social a:hover { color: var(--tp-theme-1); } .contact__translate { position: relative; z-index: 1; margin-top: -180px; border: 0; } .contact__translate-2 { position: relative; z-index: 1; margin-top: -190px; border: 0; } .contact__map-height { height: 500px; } .contact__map-height iframe { width: 100%; height: 100%; border: 0; } .contact__map-black { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .contact__style-2 { background-color: var(--tp-common-white); box-shadow: 0px 20px 40px rgba(3, 4, 28, 0.08); } .contact__style-2 .contact__form-call { display: block; } @-webkit-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @-moz-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @-ms-keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } @keyframes tpshake { 10% { transform: translateY(-10px); } 50% { transform: skew(15deg); } 80% { transform: rotate(10deg); } 100% { transform: translate(0); } } /*----------------------------------------*/ /* 26. TICKET CSS START /*----------------------------------------*/ .ticket__shape-1 { position: absolute; top: 0; left: 0; z-index: -1; } .ticket__shape-2 { position: absolute; top: 0; right: 40%; z-index: -1; } .ticket__shape-3 { position: absolute; bottom: 0; right: 0; z-index: -1; } .ticket__wrapper { padding: 20px 50px; position: relative; z-index: 1; border-radius: 14px; overflow: hidden; } @media (max-width: 575px) { .ticket__wrapper { padding-top: 40px; padding-bottom: 40px; } } .ticket__title { font-family: var(--tp-ff-space); font-weight: 300; font-size: 20px; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 0; } .ticket__title-pre { font-size: 14px; color: var(--tp-common-white); display: inline-block; } .ticket__content p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 20px; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 0; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .ticket__inner { margin-bottom: 30px; } } [dir=rtl] .ticket__icon { margin-right: 0; margin-left: 15px; } @media (max-width: 575px) { .ticket__icon { margin-bottom: 20px; } } /*----------------------------------------*/ /* 27. FEATURES CSS START /*----------------------------------------*/ .features__section-title { font-weight: 700; font-size: 40px; line-height: 1.14; letter-spacing: -0.04em; color: var(--tp-common-black); } @media (max-width: 575px) { .features__section-title { font-size: 30px; } } .features__section-title-wrapper { padding-left: 35px; padding-right: 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) { .features__section-title-wrapper { padding-left: 0; padding-right: 0; } } .features__wrapper-9 { padding-top: 15px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__wrapper-9 { margin-top: 0; margin-right: 0; } } .features__wrapper-10 .row [class*=col-]:nth-child(2n) .features__item-10 { margin-top: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__wrapper-10 .row [class*=col-]:nth-child(2n) .features__item-10 { margin-top: 0; } } .features__wrapper-15 { position: relative; z-index: 1; box-shadow: 0px 20px 40px rgba(3, 4, 28, 0.08); } .features__wrapper-15.is-translate-50 { -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__wrapper-15.is-translate-50 { -webkit-transform: translateY(-25%); -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__wrapper-15.is-translate-50 { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%); margin-top: 50px; margin-bottom: 120px; } } .features__wrapper-15 .row [class*=col-]:nth-child(3n) .features__item-15 { border-right: 0; } [dir=rtl] .features__wrapper-15 .row [class*=col-]:nth-child(3n) .features__item-15 { border-left: 0; } .features__item { padding: 40px 30px 30px; background-color: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(13, 18, 30, 0.08); position: relative; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 576px) and (max-width: 767px) { .features__item { padding: 35px 20px 10px; } } .features__item::after { position: absolute; content: ""; left: auto; right: 0; top: 0; width: 0; height: 2px; background-color: var(--tp-common-blue-3); } [dir=rtl] .features__item::after { left: 0; right: auto; } .features__item:hover { box-shadow: 0px 30px 30px rgba(13, 18, 30, 0.08); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px); } .features__item:hover::after { width: 100%; left: 0; right: auto; } .features__item.has-green::after { background-color: var(--tp-common-green-5); } .features__item.has-green .features__icon span { color: var(--tp-common-green-5); } .features__item.has-green .features__btn a { color: var(--tp-common-green-5); } .features__item.has-pink::after { background-color: var(--tp-common-pink-3); } .features__item.has-pink .features__icon span { color: var(--tp-common-pink-3); } .features__item.has-pink .features__btn a { color: var(--tp-common-pink-3); } .features__item.has-purple::after { background-color: var(--tp-common-purple-5); } .features__item.has-purple .features__icon span { color: var(--tp-common-purple-5); } .features__item.has-purple .features__btn a { color: var(--tp-common-purple-5); } .features__item-7 { border: 1px solid rgba(4, 18, 31, 0.1); border-radius: 40px; padding: 52px 45px 57px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .features__item-7 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .features__item-7 { padding-left: 25px; padding-right: 25px; } } .features__item-7:hover { background-color: #F8F4EE; border-color: #F8F4EE; } .features__item-10 { padding: 55px 50px 57px; border: 2px solid #EAEAEF; border-radius: 14px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .features__item-10 { padding: 35px 30px 37px; } } .features__item-10:hover { border-color: #FC3839; } .features__item-10:hover .features__icon-10 span { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .features__item-13:hover .features__icon-13 span svg, .features__item-13:hover .features__icon-13 span i { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .features__item-14 { padding: 0 40px 15px; } .features__item-15 { padding: 65px 60px 45px; border-right: 1px solid #EAEAEF; height: 100%; } [dir=rtl] .features__item-15 { border-right: 0; border-left: 1px solid #EAEAEF; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .features__item-15 { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__item-15 { border: 0; border-bottom: 1px solid #EAEAEF; } } .features__item-15:hover .features__icon-15 svg, .features__item-15:hover .features__icon-15 i { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .features__icon { margin-bottom: 33px; } .features__icon span { font-size: 45px; color: var(--tp-common-blue-3); } .features__icon-7 span { display: inline-block; font-size: 80px; color: var(--tp-common-yellow-3); min-height: 100px; margin-bottom: 25px; } .features__icon-10 span { display: inline-block; font-size: 70px; color: var(--tp-common-black-solid); min-height: 70px; margin-bottom: 40px; -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .features__icon-13 span { margin-right: 16px; display: inline-block; width: 60px; height: 60px; line-height: 58px; text-align: center; background: var(--tp-common-white); border: 1px solid rgba(3, 4, 28, 0.1); border-radius: 45px; color: var(--tp-common-black); } [dir=rtl] .features__icon-13 span { margin-right: 0; margin-left: 16px; } .features__icon-13 span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .features__icon-13 span svg, .features__icon-13 span i { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .features__icon-14 span { display: inline-block; font-weight: 700; font-size: 90px; line-height: 1; letter-spacing: -0.04em; color: #EEEEEE; margin-bottom: 17px; margin-top: -47px; } .features__icon-15 span { font-size: 45px; color: var(--tp-theme-1); position: relative; } .features__icon-15 span::after { position: absolute; content: ""; left: 6px; bottom: -18px; width: 58px; height: 58px; border-radius: 50%; background-image: -webkit-linear-gradient(314.27deg, rgba(245, 9, 99, 0.12) 0%, rgba(255, 255, 255, 0) 79.01%); background-image: -moz-linear-gradient(314.27deg, rgba(245, 9, 99, 0.12) 0%, rgba(255, 255, 255, 0) 79.01%); background-image: -ms-linear-gradient(314.27deg, rgba(245, 9, 99, 0.12) 0%, rgba(255, 255, 255, 0) 79.01%); background-image: -o-linear-gradient(314.27deg, rgba(245, 9, 99, 0.12) 0%, rgba(255, 255, 255, 0) 79.01%); background-image: linear-gradient(314.27deg, rgba(245, 9, 99, 0.12) 0%, rgba(255, 255, 255, 0) 79.01%); } [dir=rtl] .features__icon-15 span::after { left: auto; right: 6px; } .features__icon-15 span svg, .features__icon-15 span i { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .features__title { font-family: var(--tp-ff-roboto); font-weight: 700; font-size: 20px; line-height: 26px; color: var(--tp-common-black-9); margin-bottom: 10px; } .features__title-7 { font-family: var(--tp-ff-inter); font-size: 16px; letter-spacing: -0.01em; font-weight: 400; color: var(--tp-text-23); margin-bottom: 23px; } .features__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 44px; line-height: 1; letter-spacing: -0.02em; position: relative; display: inline-block; color: var(--tp-text-25); } .features__title-10 { font-size: 26px; letter-spacing: -0.02em; margin-bottom: 17px; } .features__title-10 a:hover { color: var(--tp-theme-10); } .features__title-13 { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 18px; color: var(--tp-common-black-solid); margin-bottom: 5px; } .features__title-13 a:hover { color: var(--tp-theme-1); } .features__title-14 { font-size: 24px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black-solid); } .features__title-15 { font-size: 22px; letter-spacing: -0.04em; } .features__title-15 a:hover { color: var(--tp-theme-1); } .features__content > p { color: var(--tp-text-18); font-size: 15px; margin-bottom: 30px; font-family: var(--tp-ff-roboto); } .features__content-7 > p { font-family: var(--tp-ff-inter); font-size: 22px; line-height: 1.4; color: var(--tp-common-black-11); margin-bottom: 30px; } .features__content-9 { border: 1px solid #EAEAEF; margin-bottom: 10px; padding: 30px 28px 18px; position: relative; } .features__content-9::after { position: absolute; content: ""; left: 0; top: auto; bottom: 0; width: 3px; height: 0; background-color: var(--tp-common-black); } [dir=rtl] .features__content-9::after { left: auto; right: 0; } .features__content-9:last-child { margin-bottom: 0; } .features__content-9 span { font-family: var(--tp-ff-syne); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tp-common-black); display: block; margin-bottom: 1px; } #features-item-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--tp-common-black-12); overflow: hidden; } #features-item-thumb.features-img-0 .features-img-0 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-1 .features-img-1 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-2 .features-img-2 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-3 .features-img-3 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-4 .features-img-4 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-5 .features-img-5 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-6 .features-img-6 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-7 .features-img-7 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-8 .features-img-8 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-9 .features-img-9 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-10 .features-img-10 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-11 .features-img-11 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-12 .features-img-12 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-13 .features-img-13 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-14 .features-img-14 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-15 .features-img-15 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-16 .features-img-16 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-17 .features-img-17 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-18 .features-img-18 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-19 .features-img-19 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-20 .features-img-20 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-21 .features-img-21 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-22 .features-img-22 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-23 .features-img-23 { visibility: visible; opacity: 1; } #features-item-thumb.features-img-24 .features-img-24 { visibility: visible; opacity: 1; } .features__content-9:hover, .features__content-9.active { cursor: pointer; } .features__content-9:hover::after, .features__content-9.active::after { height: 100%; bottom: auto; top: 0; } .features__content-9:hover .features__title-9, .features__content-9.active .features__title-9 { color: var(--tp-common-black); } .features__content-10 > span { font-family: var(--tp-ff-space); font-size: 16px; line-height: 20px; color: #84848B; margin-bottom: 5px; } .features__content-10 > p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1.38; color: #525258; margin-bottom: 40px; } .features__content-13 p { font-family: var(--tp-ff-roboto); font-size: 15px; line-height: 1.33; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__content-13 p br { display: none; } } .features__content-14 p { line-height: 1.57; } .features__content-15 p { font-size: 15px; line-height: 1.6; color: rgba(3, 4, 28, 0.8); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__more-10 { margin-bottom: 40px; } } .features__btn a { color: var(--tp-common-blue-3); } .features__btn a:hover { color: var(--tp-common-blue-3); } .features__btn-7 a { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--tp-common-black-solid); } .features__btn-7 a:hover { color: var(--tp-theme-7); } .features__shape-1 { position: absolute; right: 0; top: 19%; z-index: -1; } .features__shape-2 { position: absolute; left: 0; bottom: 10%; z-index: -1; } .features__shape-3 { position: absolute; left: 19%; top: 23%; z-index: -1; -moz-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; -webkit-animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; animation: tpupdown 1s ease-in-out 1s forwards infinite alternate; } .features__shape-4 { position: absolute; right: 8%; top: 14%; z-index: -1; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } .features__shape-5 { position: absolute; left: 0; top: 10%; z-index: -1; } .features__shape-6 { position: absolute; left: 0; top: 16%; z-index: -1; } .features__shape-7 { position: absolute; top: -15%; right: 10%; z-index: -2; } .features__shape-8 { position: absolute; top: 3%; right: 2%; z-index: -1; } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__shape-8 { top: 0%; right: 0%; } } @media (max-width: 575px) { .features__shape-8 { top: 10%; } } .features__offer { background-color: #F8F4EE; border-radius: 100px; padding: 20px 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__offer { padding: 20px 20px; } } .features__offer span { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 600; font-size: 12px; line-height: 30px; letter-spacing: 0.04em; color: var(--tp-common-black-11); background-color: #FFD584; border-radius: 20px; padding: 2px 25px; margin-right: 15px; } [dir=rtl] .features__offer span { margin-right: 0; margin-left: 15px; } .features__offer p { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; color: var(--tp-common-black-11); margin-bottom: 0; } .features__offer p a { font-weight: 600; font-size: 16px; color: var(--tp-theme-7); position: relative; } .features__offer p a::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 1px; background-color: var(--tp-theme-7); } .features__offer p a:hover { color: var(--tp-common-black-11); } .features__offer p a:hover::after { background-color: var(--tp-common-black-11); } .features__list-inner { border-radius: 45px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .features__list-inner { padding: 70px 70px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .features__list-inner { padding: 40px 30px; } } @media (max-width: 575px) { .features__list-inner { padding: 40px 20px; } } .features__list-wrapper { position: relative; z-index: 1; padding-right: 12px; } [dir=rtl] .features__list-wrapper { padding-right: 0; padding-left: 12px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .features__list-wrapper { padding-right: 0; } [dir=rtl] .features__list-wrapper { padding-left: 0; } } .features__list-wrapper .nav-tabs .nav-item { width: 100%; } .features__list-wrapper .nav-tabs .nav-item:not(:last-child) { margin-bottom: 10px; } .features__list-wrapper .nav-tabs .nav-item .nav-link { width: 100%; } .features__list-wrapper .nav-tabs .nav-item .nav-link.active { background-color: transparent; } .features__list-wrapper .nav-tabs .nav-item .nav-link:hover, .features__list-wrapper .nav-tabs .nav-item .nav-link.active { box-shadow: 0px 30px 50px rgba(5, 47, 40, 0.12); z-index: 1; cursor: pointer; } .features__list-wrapper .nav-tabs .nav-item .nav-link:hover::after, .features__list-wrapper .nav-tabs .nav-item .nav-link.active::after { left: -3px; } .features__list-wrapper .nav-tabs .nav-item .nav-link:hover .features__list-title, .features__list-wrapper .nav-tabs .nav-item .nav-link.active .features__list-title { color: var(--tp-theme-7); } .features__list-wrapper .nav-tabs .nav-item .nav-link:hover .features__list-btn a, .features__list-wrapper .nav-tabs .nav-item .nav-link.active .features__list-btn a { color: var(--tp-common-white); background-color: var(--tp-theme-7); } .features__list-item { border-radius: 45px; position: relative; } .features__list-item-wrapper { padding: 20px 25px 15px 30px; border-radius: 45px; } .features__list-item::after { position: absolute; content: ""; left: 3px; top: 0; width: 40%; height: 100%; background-color: var(--tp-theme-7); z-index: -1; border-radius: 45px; } [dir=rtl] .features__list-item::after { left: auto; right: 3px; } @media (max-width: 575px) { .features__list-item-inner { margin-bottom: 20px; } } [dir=rtl] .features__list-icon { margin-right: 0; margin-left: 20px; } @media (max-width: 575px) { .features__list-icon { margin-bottom: 20px; } } .features__list-icon span { font-size: 24px; color: var(--tp-theme-7); } .features__list-title { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 18px; line-height: 1.1; color: var(--tp-common-black-11); margin-bottom: 0; text-align: left; } [dir=rtl] .features__list-title { text-align: right; } .features__list-title a:hover { color: var(--tp-theme-7); } .features__list-content > p { font-family: var(--tp-ff-inter); font-size: 14px; margin-bottom: 0; } .features__list-btn a { background-color: rgba(4, 18, 31, 0.0588235294); color: var(--tp-common-black-11); border-radius: 50%; width: 32px; height: 32px; line-height: 32px; text-align: center; font-size: 14px; display: inline-block; } .features__list-btn a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-7); } .features__list-thumb-wrapper { 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) { .features__list-thumb-wrapper { margin-top: 50px; } } div.features__list-thumb-wrapper .features__list-thumb-1 { position: relative; z-index: 1; left: 45px; top: 0; box-shadow: 0px 40px 70px rgba(86, 55, 8, 0.1); border-radius: 20px; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-1 { left: auto; right: 45px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { div.features__list-thumb-wrapper .features__list-thumb-1 { left: 0; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-1 { left: auto; right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.features__list-thumb-wrapper .features__list-thumb-1 { left: 45px; top: 0; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-1 { left: auto; right: 45px; } } @media (max-width: 575px) { div.features__list-thumb-wrapper .features__list-thumb-1 { left: 0; top: 0; width: 100%; } } div.features__list-thumb-wrapper .features__list-thumb-2 { position: absolute; top: 58%; left: 19%; box-shadow: 0px 30px 70px rgba(86, 55, 8, 0.1); border-radius: 20px; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-2 { left: auto; right: 19%; } @media only screen and (min-width: 992px) and (max-width: 1199px) { div.features__list-thumb-wrapper .features__list-thumb-2 { left: 0; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-2 { left: auto; right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.features__list-thumb-wrapper .features__list-thumb-2 { position: relative; top: 0; left: 0; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-2 { left: auto; right: 0; } } @media (max-width: 575px) { div.features__list-thumb-wrapper .features__list-thumb-2 { position: relative; top: 0; left: 0; width: 100%; } } div.features__list-thumb-wrapper .features__list-thumb-3 { position: absolute; bottom: -95%; right: 13%; z-index: -1; border-radius: 10px; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-3 { right: auto; left: 13%; } @media only screen and (min-width: 768px) and (max-width: 991px) { div.features__list-thumb-wrapper .features__list-thumb-3 { bottom: 22%; right: -14%; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-3 { right: auto; left: -14%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { div.features__list-thumb-wrapper .features__list-thumb-3 { position: relative; bottom: 0; right: 0; } [dir=rtl] div.features__list-thumb-wrapper .features__list-thumb-3 { right: auto; left: 0; } } @media (max-width: 575px) { div.features__list-thumb-wrapper .features__list-thumb-3 { position: relative; bottom: 0; right: 0; width: 100%; } } .features__tab .nav-tabs .nav-item .nav-link span { font-family: var(--tp-ff-syne); font-weight: 500; font-size: 13px; line-height: 16px; letter-spacing: 0.02em; text-transform: uppercase; color: #525258; display: block; margin-bottom: 5px; } .features__tab .nav-tabs .nav-item .nav-link h3 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 50px; line-height: 0.8; letter-spacing: -0.02em; color: var(--tp-common-black); position: relative; padding-left: 0; display: inline-block; } [dir=rtl] .features__tab .nav-tabs .nav-item .nav-link h3 { padding-right: 0; } .features__tab .nav-tabs .nav-item .nav-link h3::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 10px; border-radius: 50%; background-image: -webkit-linear-gradient(327.72deg, #FA6490 29.82%, #F7D86A 91.13%); background-image: -moz-linear-gradient(327.72deg, #FA6490 29.82%, #F7D86A 91.13%); background-image: -ms-linear-gradient(327.72deg, #FA6490 29.82%, #F7D86A 91.13%); background-image: -o-linear-gradient(327.72deg, #FA6490 29.82%, #F7D86A 91.13%); background-image: linear-gradient(327.72deg, #FA6490 29.82%, #F7D86A 91.13%); visibility: hidden; opacity: 0; } [dir=rtl] .features__tab .nav-tabs .nav-item .nav-link h3::after { left: auto; right: 0; } .features__tab .nav-tabs .nav-item .nav-link h3::before { position: absolute; content: ""; left: 23px; bottom: 0; width: calc(0% - 23px); height: 2px; background-color: var(--tp-common-black); } [dir=rtl] .features__tab .nav-tabs .nav-item .nav-link h3::before { left: auto; right: 23px; } .features__tab .nav-tabs .nav-item .nav-link:hover { cursor: pointer; } .features__tab .nav-tabs .nav-item .nav-link.active h3 { padding-left: 23px; } [dir=rtl] .features__tab .nav-tabs .nav-item .nav-link.active h3 { padding-left: 0; padding-right: 23px; } .features__tab .nav-tabs .nav-item .nav-link.active h3::after { opacity: 1; visibility: visible; } .features__tab .nav-tabs .nav-item .nav-link.active h3::before { width: calc(100% - 23px); } .features__tab-content { height: 100%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .features__tab-content { margin-top: 30px; padding-left: 0; } [dir=rtl] .features__tab-content { padding-right: 0; } } .features__tab-content * { height: 100%; } .features__tab-content img { object-fit: cover; } .features__thumb-wrapper-9 { height: 100%; width: 100%; position: relative; z-index: 1; } .features__thumb-wrapper-9::after { position: absolute; content: ""; right: -20px; top: 20px; width: 330px; height: 100%; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); z-index: -1; } [dir=rtl] .features__thumb-wrapper-9::after { right: auto; left: -20px; } .features__thumb-9 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; opacity: 0; } .features__thumb-9 > img { width: 100%; height: 100%; object-fit: cover; } .features__thumb-9-content { position: absolute; bottom: 0; left: 0; background-color: var(--tp-common-white); padding: 20px 40px 25px; width: 294px; } [dir=rtl] .features__thumb-9-content { left: auto; right: 0; } .features__thumb-9-content p { font-family: var(--tp-ff-syne); font-size: 18px; line-height: 1.33; color: var(--tp-common-black); margin-bottom: 10px; } /*----------------------------------------*/ /* 28. SUPPORT CSS START /*----------------------------------------*/ .support__wrapper .tp-el-content p { font-family: var(--tp-ff-inter); font-size: 18px; line-height: 28px; margin-bottom: 50px; } .support__item { padding-right: 55px; } [dir=rtl] .support__item { padding-right: 0; padding-left: 55px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .support__item { padding-right: 0; } [dir=rtl] .support__item { padding-left: 0; } } .support__item:hover .support__icon span { -webkit-transform: translateY(0) translate3d(0, -5px, 0); -moz-transform: translateY(0) translate3d(0, -5px, 0); -ms-transform: translateY(0) translate3d(0, -5px, 0); -o-transform: translateY(0) translate3d(0, -5px, 0); transform: translateY(0) translate3d(0, -5px, 0); } .support__item-2 { border: 1px solid #EAEAEF; padding: 18px 30px; min-width: 240px; margin-right: 10px; } [dir=rtl] .support__item-2 { margin-right: 0; margin-left: 10px; } .support__item-2:last-child { margin-right: 0; } [dir=rtl] .support__item-2:last-child { margin-left: 0; } .support__icon { margin-bottom: 23px; } .support__icon span { font-size: 20px; color: var(--tp-theme-7); display: inline-block; width: 56px; height: 56px; line-height: 56px; text-align: center; background: linear-gradient(35.1deg, #E8D8C1 18.5%, #FFF9F0 92.94%); box-shadow: 0px 3px 5px rgba(47, 28, 6, 0.1); border-radius: 50%; backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -moz-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -ms-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); -o-transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); transition: transform 0.3s cubic-bezier(0.21, 0.6, 0.44, 2.18); } [dir=rtl] .support__icon-2 { margin-right: 0; margin-left: 15px; } .support__icon-2 span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .support__title { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 22px; line-height: 27px; color: var(--tp-common-black-11); } .support__title-2 { font-weight: 500; font-size: 16px; margin-bottom: 0; } .support__content p { font-family: var(--tp-ff-inter); font-size: 15px; line-height: 22px; } div.support__thumb img { border-radius: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { div.support__thumb img { width: 100%; } } .support__thumb-wrapper { position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .support__thumb-wrapper { padding-left: 0; margin-top: 50px; } [dir=rtl] .support__thumb-wrapper { padding-right: 0; } } [dir=rtl] .support__btn .tp-btnr-2 { margin-right: 0; margin-left: 5px; } .support__btn .tp-btnr-2:hover { background-color: var(--tp-common-yellow-3); border-color: var(--tp-common-yellow-3); color: var(--tp-common-black); } .support__shape-2 { position: absolute; z-index: -1; bottom: -10%; right: -7%; } @media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .support__shape-2 { right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .support__shape-2 { right: auto; left: 0; } } .support__shape-3 { position: absolute; z-index: -1; top: 10%; right: -12%; } @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) { .support__shape-3 { right: 0; } } .support__shape-4 { position: absolute; z-index: -1; top: 0%; right: 0%; } .support__shape img.support__shape-1 { width: 300px; position: absolute; z-index: 1; bottom: 60px; left: 1%; border-radius: 30px; box-shadow: 0px 30px 50px rgba(4, 18, 31, 0.1); -moz-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 4s ease-in-out 1s forwards infinite alternate; } @media (max-width: 575px) { .support__shape img.support__shape-1 { display: none; } } /*----------------------------------------*/ /* 29. DONATE CSS START /*----------------------------------------*/ .donate__inner { padding: 90px 180px 100px; border-radius: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .donate__inner { padding: 90px 150px 100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .donate__inner { padding: 90px 30px 100px; } } @media (max-width: 575px) { .donate__inner { padding: 90px 20px 100px; } } .donate__title { font-size: 50px; letter-spacing: -0.04em; line-height: 1.08; } @media (max-width: 575px) { .donate__title { font-size: 35px; } } .donate__content > p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 20px; color: #84848B; } .donate__ammount { margin-right: 16px; margin-bottom: 10px; } [dir=rtl] .donate__ammount { margin-right: 0; margin-left: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .donate__ammount { margin-right: 10px; } [dir=rtl] .donate__ammount { margin-right: 0; margin-left: 10px; } } .donate__ammount:last-child { margin-right: 0; } [dir=rtl] .donate__ammount:last-child { margin-left: 0; } [dir=rtl] .donate__ammount-wrapper { margin-right: 0; margin-left: 20px; } .donate__ammount button, .donate__ammount input { display: inline-block; width: 90px; height: 60px; line-height: 60px; text-align: center; background: var(--tp-common-white); border: 0; outline: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); border-radius: 6px; font-size: 18px; font-family: var(--tp-ff-space); padding: 0 15px; } .donate__ammount button:hover, .donate__ammount input:hover { box-shadow: 0px 30px 40px rgba(3, 4, 28, 0.1); } .donate__ammount input::-webkit-input-placeholder { font-family: var(--tp-ff-space); font-size: 16px; color: #525258; } .donate__ammount input:-moz-placeholder { font-family: var(--tp-ff-space); font-size: 16px; color: #525258; } .donate__ammount input::-moz-placeholder { font-family: var(--tp-ff-space); font-size: 16px; color: #525258; } .donate__ammount input:-ms-input-placeholder { font-family: var(--tp-ff-space); font-size: 16px; color: #525258; } .donate__ammount-more button, .donate__ammount-more input { width: 110px; } .donate__ammount-more button:hover, .donate__ammount-more input:hover { box-shadow: 0px 30px 40px rgba(3, 4, 28, 0.1); } .donate__more .tp-btn-7 { padding: 16px 31px 18px; box-shadow: none; } .donate__more .tp-btn-7:hover { box-shadow: 0px 4px 10px rgba(150, 21, 35, 0.3); } /*----------------------------------------*/ /* 30. VISION CSS START /*----------------------------------------*/ .vision__tab .nav-tabs .nav-item { margin-bottom: 12px; } .vision__tab .nav-tabs .nav-item:last-child { margin-bottom: 0; } .vision__tab .nav-tabs .nav-item .nav-link { font-family: var(--tp-ff-space); font-weight: 500; font-size: 17px; color: var(--tp-text-1); padding: 24px 36px; width: 100%; text-align: left; background: #FFFFFF; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); border-radius: 10px; position: relative; z-index: 1; overflow: hidden; transition: all 0.3s ease-in-out; } [dir=rtl] .vision__tab .nav-tabs .nav-item .nav-link { text-align: right; } .vision__tab .nav-tabs .nav-item .nav-link::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); opacity: 0; visibility: hidden; z-index: -1; } .vision__tab .nav-tabs .nav-item .nav-link span { color: #5253CE; margin-right: 20px; display: inline-block; width: 26px; text-align: right; } [dir=rtl] .vision__tab .nav-tabs .nav-item .nav-link span { text-align: left; margin-right: 0; margin-left: 20px; } .vision__tab .nav-tabs .nav-item .nav-link span svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .vision__tab .nav-tabs .nav-item .nav-link:hover, .vision__tab .nav-tabs .nav-item .nav-link.active { box-shadow: 0px 4px 10px rgba(150, 21, 35, 0.3); color: var(--tp-common-white); } .vision__tab .nav-tabs .nav-item .nav-link:hover span, .vision__tab .nav-tabs .nav-item .nav-link.active span { color: var(--tp-common-white); } .vision__tab .nav-tabs .nav-item .nav-link:hover::after, .vision__tab .nav-tabs .nav-item .nav-link.active::after { opacity: 1; visibility: visible; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .vision__tab-content { padding-left: 30px; } [dir=rtl] .vision__tab-content { padding-left: 0; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .vision__tab-content { padding-left: 30px; } [dir=rtl] .vision__tab-content { padding-left: 0; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .vision__tab-content { padding-left: 0; } [dir=rtl] .vision__tab-content { padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .vision__tab-content { padding-left: 0; margin-top: 30px; } [dir=rtl] .vision__tab-content { padding-right: 0; } } div.vision__thumb img { background: #FFFFFF; border: 10px solid var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); border-radius: 20px; } .vision__content p { font-family: var(--tp-ff-space); font-size: 20px; line-height: 1.5; color: var(--tp-common-black); margin-bottom: 25px; } .vision__list ul li { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 2.12; color: var(--tp-text-1); list-style: none; } .vision__list ul li span { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background-image: -webkit-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: -moz-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: -ms-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: -o-linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); background-image: linear-gradient(142.96deg, #28D58A 14.78%, #2CAE76 95.99%); box-shadow: 0px 1px 2px rgba(6, 138, 75, 0.3); color: var(--tp-common-white); margin-right: 8px; } [dir=rtl] .vision__list ul li span { margin-right: 0; margin-left: 8px; } .vision__list ul li span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link { color: var(--tp-text-1); border-radius: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); } .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link span { color: var(--tp-text-1); } .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link::after { display: none; } .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link:hover, .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link.active { color: var(--tp-common-white); background-color: var(--tp-theme-1); box-shadow: 0; } .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link:hover span, .vision__style-2 .vision__tab .nav-tabs .nav-item .nav-link.active span { color: var(--tp-common-white); } .vision__style-2 .vision__thumb img { border-radius: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); } /*----------------------------------------*/ /* 31. BIOGRAPHY CSS START /*----------------------------------------*/ .biography__height { height: 800px; } .biography__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; } [dir=rtl] .biography__bg { left: auto; right: 0; } .biography__bg::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(3, 4, 28, 0.6); } [dir=rtl] .biography__bg::after { left: auto; right: 0; } .biography__title { font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 20px; animation-delay: 0.4s; animation-duration: 1s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .biography__title { font-size: 45px; } } @media (max-width: 575px) { .biography__title { font-size: 35px; } } .biography__content { padding-top: 130px; } .biography__content p { font-family: var(--tp-ff-space); font-size: 18px; line-height: 1.44; letter-spacing: -0.04em; color: rgba(255, 255, 255, 0.8); margin-bottom: 40px; padding-right: 140px; animation-delay: 0.6s; animation-duration: 1s; } [dir=rtl] .biography__content p { padding-right: 0; padding-left: 140px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .biography__content p { padding-right: 40px; } [dir=rtl] .biography__content p { padding-right: 0; padding-left: 40px; } } @media (max-width: 575px) { .biography__content p { padding-right: 0; } [dir=rtl] .biography__content p { padding-left: 0; } } .biography__meta { margin-bottom: 12px; animation-delay: 0.2s; animation-duration: 1s; } .biography__meta span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 1.25; color: var(--tp-common-white); } .biography__year { position: relative; padding: 0 30px; padding-top: 10px; } .biography__year:hover { cursor: pointer; } .biography__year p { font-family: var(--tp-ff-space); font-size: 26px; text-align: center; color: var(--tp-common-white); display: inline-block; background-color: transparent; padding: 21px 31px 11px; position: relative; z-index: 1; } .biography__year p::after { position: absolute; content: ""; top: -10px; left: 47%; width: 6px; height: 6px; background-color: white; border-radius: 50%; } [dir=rtl] .biography__year p::after { left: auto; right: 47%; } .biography__year p .tp-biography-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } [dir=rtl] .biography__year p .tp-biography-bg { left: auto; right: 0; } .biography__year p .tp-biography-bg.is-solid { visibility: hidden; opacity: 0; } .biography__year p:hover { box-shadow: 0px 4px 10px rgba(150, 21, 35, 0.3); } .biography__year p:hover::after { background-color: var(--tp-theme-10); } .biography__year p:hover .tp-biography-bg { visibility: hidden; opacity: 0; } .biography__year p:hover .tp-biography-bg.is-solid { visibility: visible; opacity: 1; } .biography__slider { margin-right: -350px; margin-top: -198px; } [dir=rtl] .biography__slider { margin-right: 0; margin-left: -350px; } @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) { .biography__slider { margin-right: 0; } [dir=rtl] .biography__slider { margin-left: 0; } } .biography__slider-content-active .slick-active .biography__title, .biography__slider-content-active .slick-active .biography__content p, .biography__slider-content-active .slick-active .biography__meta, .biography__slider-content-active .slick-active .biography__btn { animation-name: fadeInUp; animation-fill-mode: both; } .biography__slider-nav { position: relative; } .biography__slider-nav::after { position: absolute; content: ""; top: 3px; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.3); } [dir=rtl] .biography__slider-nav::after { left: auto; right: 0; } .biography__slider-nav .slick-active.slick-current .biography__year p::after { background-color: var(--tp-theme-10); } .biography__slider-nav .slick-active.slick-current .biography__year p .tp-biography-bg { visibility: hidden; opacity: 0; } .biography__slider-nav .slick-active.slick-current .biography__year p .tp-biography-bg.is-solid { visibility: visible; opacity: 1; } .biography__btn { animation-delay: 0.8s; animation-duration: 1s; } .biography__btn a { font-size: 16px; color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.2); padding: 9px 27px 11px; } /*----------------------------------------*/ /* 32. PRODUCT CSS START /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px) { .product__features-wrapper { margin-top: 110px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product__features-wrapper { -webkit-transform: scale(0.9) translateY(65px); -moz-transform: scale(0.9) translateY(65px); -ms-transform: scale(0.9) translateY(65px); -o-transform: scale(0.9) translateY(65px); transform: scale(0.9) translateY(65px); } } @media (max-width: 575px) { .product__features-wrapper { -webkit-transform: scale(0.9) translateY(50px); -moz-transform: scale(0.9) translateY(50px); -ms-transform: scale(0.9) translateY(50px); -o-transform: scale(0.9) translateY(50px); transform: scale(0.9) translateY(50px); } } .product__features-wrapper .product-section-title { font-family: var(--tp-ff-rajdhani); font-size: 70px; line-height: 0.74; letter-spacing: -0.02em; margin-bottom: 60px; } @media (max-width: 575px) { .product__features-wrapper .product-section-title { font-size: 35px; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__features-item { margin-bottom: 20px; } } .product__features-item-wrapper .row [class*=col-]:nth-last-child(2) .product__features-item, .product__features-item-wrapper .row [class*=col-]:last-child .product__features-item { margin-bottom: 0; } .product__features-item:hover .product__features-icon span svg, .product__features-item:hover .product__features-icon span i { animation-name: tpshake; animation-timing-function: ease-in-out; animation-duration: 0.4s; animation-iteration-count: 1; } .product__features-title { font-family: var(--tp-ff-rajdhani); font-size: 22px; margin-bottom: 1px; line-height: 1; } .product__features-content > p { font-family: var(--tp-ff-syne); font-size: 16px; color: #525258; line-height: 1.3; } .product__features-icon span { display: inline-block; width: 64px; height: 64px; line-height: 64px; text-align: center; font-size: 24px; color: var(--tp-common-black); border-radius: 50%; background-color: var(--tp-common-white); box-shadow: 0px 1px 2px 1px rgba(50, 5, 48, 0.06); margin-bottom: 19px; } .product__features-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .product__features-icon span svg, .product__features-icon span i { -webkit-transition: 0.2s ease-in-out; transition: 0.2s ease-in-out; } .product__features-thumb { position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product__features-thumb { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__features-thumb { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product__features-thumb { -webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); -o-transform: scale(0.4); transform: scale(0.4); } } @media (max-width: 575px) { .product__features-thumb { display: none; } } .product__features-thumb img { -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; margin-top: 95px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__features-thumb img { margin-left: -145px; } [dir=rtl] .product__features-thumb img { margin-left: 0; margin-right: -145px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product__features-thumb img { margin-left: -205px; } [dir=rtl] .product__features-thumb img { margin-left: 0; margin-right: -205px; } } .product__features-thumb::after { position: absolute; content: ""; left: 8%; bottom: 8%; width: 342px; height: 342px; border-radius: 50%; background-image: -webkit-linear-gradient(90deg, #91DEDE 0%, #3CBAB2 100%); background-image: -moz-linear-gradient(90deg, #91DEDE 0%, #3CBAB2 100%); background-image: -ms-linear-gradient(90deg, #91DEDE 0%, #3CBAB2 100%); background-image: -o-linear-gradient(90deg, #91DEDE 0%, #3CBAB2 100%); background-image: linear-gradient(90deg, #91DEDE 0%, #3CBAB2 100%); z-index: -1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition-delay: 0s; transition-duration: 1s; } [dir=rtl] .product__features-thumb::after { left: auto; right: 8%; } .product__features-thumb::before { position: absolute; content: ""; right: -11%; top: 17%; width: 420px; height: 420px; border-radius: 50%; background-image: -webkit-linear-gradient(151.79deg, #FFDAD6 8.35%, #FF4343 98.03%); background-image: -moz-linear-gradient(151.79deg, #FFDAD6 8.35%, #FF4343 98.03%); background-image: -ms-linear-gradient(151.79deg, #FFDAD6 8.35%, #FF4343 98.03%); background-image: -o-linear-gradient(151.79deg, #FFDAD6 8.35%, #FF4343 98.03%); background-image: linear-gradient(151.79deg, #FFDAD6 8.35%, #FF4343 98.03%); z-index: -1; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); transition-delay: 0.3s; transition-duration: 1s; } [dir=rtl] .product__features-thumb::before { left: -11%; right: auto; } .product__category-slider .tp-scrollbar { background-color: #E7E7E7; height: 2px; } .product__category-slider .tp-scrollbar .swiper-scrollbar-drag { background-color: var(--tp-theme-1); height: 2px; border-radius: 0; } .product__category-title { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 16px; line-height: 1; color: var(--tp-text-1); margin-bottom: 0; } .product__category-title a:hover { color: var(--tp-theme-1); } .product__category-content { padding-top: 21px; padding-bottom: 21px; } .product__tab .nav-tabs .nav-item:not(:last-child) { margin-right: 25px; } [dir=rtl] .product__tab .nav-tabs .nav-item:not(:last-child) { margin-right: 0; margin-left: 25px; } .product__tab .nav-tabs .nav-item .nav-link { font-weight: 500; font-size: 14px; color: var(--tp-text-1); padding-left: 5px; padding-right: 5px; position: relative; text-transform: capitalize; } .product__tab .nav-tabs .nav-item .nav-link::after { position: absolute; content: ""; bottom: 1px; left: auto; right: 0; width: 0; height: 2px; background-color: var(--tp-theme-1); } [dir=rtl] .product__tab .nav-tabs .nav-item .nav-link::after { left: 0; right: auto; } .product__tab .nav-tabs .nav-item .nav-link.active { color: var(--tp-theme-1); } .product__tab .nav-tabs .nav-item .nav-link.active::after { width: 100%; left: 0; right: auto; } [dir=rtl] .product__tab .nav-tabs .nav-item .nav-link.active::after { left: auto; right: 0; } .product__tab .nav-tabs .nav-item .nav-link:hover { color: var(--tp-theme-1); } .product__item:hover .product__thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .product__item:hover .product__add { opacity: 1; visibility: visible; bottom: 0; } .product__item:hover .product__action a, .product__item:hover .product__action button, .product__item:hover .product__action .product-action-btn { transform: translateX(0); visibility: visible; opacity: 1; } .product__item:hover .product__action a:nth-child(1), .product__item:hover .product__action button:nth-child(1), .product__item:hover .product__action .product-action-btn:nth-child(1) { transition-delay: 0s; } .product__item:hover .product__action a:nth-child(2), .product__item:hover .product__action button:nth-child(2), .product__item:hover .product__action .product-action-btn:nth-child(2) { transition-delay: 0.1s; } .product__item:hover .product__action a:nth-child(3), .product__item:hover .product__action button:nth-child(3), .product__item:hover .product__action .product-action-btn:nth-child(3) { transition-delay: 0.12s; } .product__item:hover .product__action a:nth-child(4), .product__item:hover .product__action button:nth-child(4), .product__item:hover .product__action .product-action-btn:nth-child(4) { transition-delay: 0.14s; } .product__thumb { margin-bottom: 14px; } .product__rating span { font-size: 11px; color: var(--tp-common-yellow-5); display: inline-block; } .product__rating span:not(:last-child) { margin-right: 3px; } [dir=rtl] .product__rating span:not(:last-child) { margin-right: 0; margin-left: 3px; } .product__rating-2 { margin-bottom: 7px; } .product__rating-2 span { font-size: 12px; } .product__title { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; } .product__title a:hover { color: var(--tp-theme-1); } .product__ammount { font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .product__price span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .product__price span del { color: #c2c2d3; } .product__price span del .woocommerce-Price-amount, .product__price span del span { font-size: 13px; color: #c2c2d3; } .product__price span ins { text-decoration: none; } .product__price span ins .woocommerce-Price-amount { font-size: 16px; color: var(--tp-common-black); } .product__price span ins span { color: var(--tp-common-black); } .product__badge { position: absolute; left: 0; top: 20px; } .product__badge-item { display: inline-block; font-size: 13px; line-height: 1; color: var(--tp-common-white); background-color: var(--tp-common-black); padding: 4px 10px 4px; margin-bottom: 5px; text-transform: capitalize; } .product__badge-item.has-new { background-color: var(--tp-theme-1); } .product__action { position: absolute; top: 40px; right: 10px; } .product__action .product-action-btn { display: inline-block; width: 38px; height: 38px; line-height: 38px; background-color: #FFFFFF; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.12); text-align: center; position: relative; margin-bottom: 6px; transform: translateX(100%); opacity: 0; visibility: hidden; transition: visibility 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-out, background-color 0.3s ease-out; } .product__action .product-action-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .product__action .product-action-btn .button.br_compare_button { transition: color 0.3s ease-out; display: inline-block; padding: 0; margin: 0 !important; } .product__action .product-action-btn .button.br_compare_button i { width: auto; } .product__action .product-action-btn .button.br_compare_button:hover { color: #fff; background-color: transparent; } .product__action .product-action-btn:nth-child(1) { transition-delay: 0.14s; } .product__action .product-action-btn:nth-child(2) { transition-delay: 0.12s; } .product__action .product-action-btn:nth-child(3) { transition-delay: 0.1s; } .product__action .product-action-btn:nth-child(4) { transition-delay: 0s; } .product__action .product-action-btn:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .product__add { position: absolute; bottom: -60px; left: 0; right: 0; visibility: hidden; opacity: 0; } .product__list-item { background: var(--tp-common-white); border: 1px solid #E9E9F0; } .product__list-thumb { height: 100%; } .product__list-thumb img { height: 100%; object-fit: cover; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .product__list-thumb img { width: 100%; } } .product__list-title { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 20px; margin-bottom: 12px; } .product__list-title a:hover { color: var(--tp-theme-1); } .product__list-action button, .product__list-action div { margin-bottom: 6px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__list-action button:not(:last-child), .product__list-action div:not(:last-child) { margin-right: 6px; } [dir=rtl] .product__list-action button:not(:last-child), [dir=rtl] .product__list-action div:not(:last-child) { margin-right: 0; margin-left: 6px; } .product__list-action button button, .product__list-action button a, .product__list-action div button, .product__list-action div a { transition: none; } .product__list-action button.product-action-btn, .product__list-action div.product-action-btn { width: 40px; height: 40px; line-height: 38px; text-align: center; font-size: 18px; color: var(--tp-common-black); border: 1px solid #DADCE0; font-size: 16px; } .product__list-action button.product-action-btn .product-action-tooltip, .product__list-action div.product-action-btn .product-action-tooltip { top: auto; bottom: 90%; left: 50%; right: auto; margin: auto; margin-bottom: 10px; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } .product__list-action button.product-action-btn .product-action-tooltip::after, .product__list-action div.product-action-btn .product-action-tooltip::after { top: 100%; right: 50%; left: auto; -webkit-transform: translate(50%, -50%) rotate(45deg); -moz-transform: translate(50%, -50%) rotate(45deg); -ms-transform: translate(50%, -50%) rotate(45deg); -o-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg); } .product__list-action button.product-action-btn:hover, .product__list-action div.product-action-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .product__list-action button.product-action-btn:hover .product-action-tooltip, .product__list-action div.product-action-btn:hover .product-action-tooltip { bottom: 100%; top: auto; right: auto; } .product__list-action button .br_compare_button, .product__list-action div .br_compare_button { padding: 0; margin-top: 0 !important; display: block; width: 100%; height: 100%; } .product__list-action button .br_compare_button i, .product__list-action div .br_compare_button i { line-height: 38px; } .product__list-action button .br_compare_button .br_compare_button_text, .product__list-action div .br_compare_button .br_compare_button_text { display: none; } .product__list-action button .br_compare_button:hover, .product__list-action div .br_compare_button:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .product__list-action button a.added_to_cart::before, .product__list-action div a.added_to_cart::before { color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__list-action button a.button.loading::before, .product__list-action div a.button.loading::before { color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__list-action button:hover a.added_to_cart::before, .product__list-action div:hover a.added_to_cart::before { color: var(--tp-common-white); } .product__list-action button:hover a.button.loading::before, .product__list-action div:hover a.button.loading::before { color: var(--tp-common-white); } .product__list-content { padding-right: 75px; padding-top: 47px; padding-bottom: 40px; margin-left: 10px; } [dir=rtl] .product__list-content { padding-right: 0; padding-left: 75px; margin-left: 0; margin-right: 10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .product__list-content { padding-right: 45px; margin-left: 0; padding-left: 15px; } [dir=rtl] .product__list-content { padding-right: 0; padding-left: 45px; margin-right: 0; padding-left: 0; padding-right: 15px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product__list-content { padding-right: 30px; margin-left: 0; padding-left: 15px; } [dir=rtl] .product__list-content { padding-right: 0; margin-right: 0; padding-left: 0; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__list-content { padding-right: 20px; padding-top: 25px; padding-bottom: 25px; margin-left: 0; padding-left: 20px; } [dir=rtl] .product__list-content { padding-right: 0; padding-left: 20px; padding-left: 0; padding-right: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product__list-content { padding: 35px; margin-left: 0; } [dir=rtl] .product__list-content { margin-right: 0; } } @media (max-width: 575px) { .product__list-content { padding: 25px; margin-left: 0; } [dir=rtl] .product__list-content { margin-right: 0; } } .product__list-content p { font-size: 14px; line-height: 1.57; margin-bottom: 28px; } .product__list-price { margin-bottom: 8px; } .product__list-price span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .product__list-price span del .woocommerce-Price-amount { font-size: 13px; color: var(--tp-text-1); } .product__list-price span ins { text-decoration: none; } .product__list-price span ins .woocommerce-Price-amount { font-size: 16px; color: var(--tp-common-black); } .product__list-ammount { font-weight: 500; font-size: 18px; color: var(--tp-text-1); } [dir=rtl] .product__details-thumb-tab { margin-right: 0; margin-left: 70px; } @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) { .product__details-thumb-tab { margin-right: 0; } [dir=rtl] .product__details-thumb-tab { margin-left: 0; } } .product__details-thumb-tab .product-thumbnails { padding-left: 0; margin-top: 15px; } .product__details-thumb-tab .product-thumbnails .slick-slide { border: 1px solid transparent; } .product__details-thumb-tab .product-thumbnails .slick-slide.slick-current.slick-active { border-color: var(--tp-theme-1); } .product__details-thumb-tab .product-thumbnails .slick-slide img { width: 110px; height: 110px; object-fit: cover; } .product__details-thumb-tab .product-thumbnails .slick-slide:hover { cursor: pointer; } .product__details-thumb-content { margin-bottom: 14px; } .product__details-thumb-nav .nav-link { width: 110px; height: 110px; position: relative; margin-bottom: 10px; } @media (max-width: 575px) { .product__details-thumb-nav .nav-link { margin-right: 12px; } [dir=rtl] .product__details-thumb-nav .nav-link { margin-right: 0; margin-left: 12px; } } .product__details-thumb-nav .nav-link::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: transparent; border: 1px solid var(--tp-theme-1); opacity: 0; visibility: hidden; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } .product__details-thumb-nav .nav-link.active::after { visibility: visible; opacity: 1; } .product__details-stock { margin-bottom: 13px; } .product__details-stock span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; line-height: 1; color: var(--tp-theme-1); border: 1px solid rgba(245, 9, 99, 0.1); padding: 5px 18px; } .product__details-title { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 34px; margin-bottom: 5px; } .product__details-rating { margin-bottom: 13px; } .product__details-rating .product__rating { margin-right: 10px; } [dir=rtl] .product__details-rating .product__rating { margin-right: 0; margin-left: 10px; } .product__details-rating-count { position: relative; margin-bottom: 2px; padding-left: 9px; } [dir=rtl] .product__details-rating-count { padding-left: 0; padding-right: 9px; } .product__details-rating-count::after { position: absolute; content: ""; left: 0; top: 3px; width: 1px; height: 20px; background-color: #DADCE0; } [dir=rtl] .product__details-rating-count::after { left: auto; right: 0; } .product__details-rating-count span { font-family: var(--tp-ff-roboto); font-size: 14px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .product__details-wrapper { margin-top: 40px; } } .product__details-wrapper .woocommerce-product-details__short-description { font-family: var(--tp-ff-roboto); font-size: 15px; line-height: 1.6; margin-bottom: 23px; margin-top: 13px; } .product__details-wrapper > p { font-family: var(--tp-ff-roboto); font-size: 15px; line-height: 1.6; margin-bottom: 23px; margin-top: 13px; } .product__details-wrapper > .add_to_cart_button.br_compare_button { display: none !important; } .product__details-wrapper .add_to_cart_button.br_compare_button { display: inline-block; width: 50px; height: 50px; line-height: 48px; text-align: center; font-size: 18px; color: var(--tp-common-black); border: 1px solid #DADCE0; padding: 0; margin: 0 !important; margin-right: 5px !important; } .product__details-wrapper .add_to_cart_button.br_compare_button i { width: auto; } .product__details-wrapper .add_to_cart_button.br_compare_button.br_compare_added i:first-child { display: none; } .product__details-wrapper .add_to_cart_button.br_compare_button.br_compare_added i:nth-child(2) { display: inline-block; } .product__details-wrapper .add_to_cart_button.br_compare_button i:nth-child(2) { display: none; } .product__details-wrapper .add_to_cart_button.br_compare_button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .product__details-wrapper .add_to_cart_button .br_compare_button_text { display: none; } .product__details-wrapper .tinvwl_add_to_wishlist_button { display: inline-block; width: 50px; height: 50px; line-height: 48px; text-align: center; font-size: 18px; color: var(--tp-common-black); border: 1px solid #DADCE0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; margin-right: 5px; } .product__details-wrapper .tinvwl_add_to_wishlist_button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .product__details-wrapper .tinv-wraper.tinv-wishlist { display: inline-block; } .product__details-wrapper .tinv-wraper.tinv-wishlist .tinvwl_add_to_wishlist-text { display: none; } .product__details-wrapper > form { display: inline-block; } .product__details-price { display: flex; align-items: center; margin-bottom: 22px; } .product__details-price > p { margin-bottom: 0; } .product__details-price .product-percentage-badges { margin-left: 10px; transform: translateY(3px); } .product__details-price span { font-family: var(--tp-ff-roboto); line-height: 1; } .product__details-price > .price > .woocommerce-Price-amount { font-weight: 600; font-size: 24px; color: var(--tp-common-black); margin-left: 1px; } .product__details-price ins { font-weight: 600; font-size: 24px; color: var(--tp-common-black); margin-left: 1px; text-decoration: none; } .product__details-price del { font-weight: 400; font-size: 16px; text-decoration-line: line-through; color: var(--tp-text-1); } .product__details-ammount { font-weight: 600; font-size: 24px; color: var(--tp-common-black); } .product__details-ammount.old-ammount { font-weight: 400; font-size: 16px; text-decoration-line: line-through; color: var(--tp-text-1); } .product__details-ammount.new-ammount { font-weight: 600; font-size: 24px; color: var(--tp-common-black); margin-left: 1px; } [dir=rtl] .product__details-ammount.new-ammount { margin-left: 0; margin-right: 1px; } .product__details-offer { margin-left: 2px; font-weight: 700; font-size: 13px; color: var(--tp-common-white); background-color: var(--tp-theme-1); padding: 3px 9px; display: inline-block; -webkit-transform: translateY(-4px); -moz-transform: translateY(-4px); -ms-transform: translateY(-4px); -o-transform: translateY(-4px); transform: translateY(-4px); } [dir=rtl] .product__details-offer { margin-left: 0; margin-right: 2px; } .product__details-quantity { margin-bottom: 40px; } .product__details-quantity .product-add-cart-btn-3 { margin-right: 5px; } .product__details-action button, .product__details-action .product-action-btn { display: inline-block; margin-bottom: 6px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__details-action button:not(:last-child), .product__details-action .product-action-btn:not(:last-child) { margin-right: 6px; } [dir=rtl] .product__details-action button:not(:last-child), [dir=rtl] .product__details-action .product-action-btn:not(:last-child) { margin-right: 0; margin-left: 6px; } .product__details-action button button, .product__details-action button a, .product__details-action .product-action-btn button, .product__details-action .product-action-btn a { transition: none; } .product__details-action button.product-action-btn, .product__details-action .product-action-btn.product-action-btn { width: 50px; height: 50px; line-height: 48px; text-align: center; font-size: 18px; color: var(--tp-common-black); border: 1px solid #DADCE0; } .product__details-action button.product-action-btn .product-action-tooltip, .product__details-action .product-action-btn.product-action-btn .product-action-tooltip { top: auto; bottom: 90%; left: auto; right: auto; margin: auto; margin-bottom: 10px; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); } [dir=rtl] .product__details-action button.product-action-btn .product-action-tooltip, [dir=rtl] .product__details-action .product-action-btn.product-action-btn .product-action-tooltip { -webkit-transform: translate(50%, 0%); -moz-transform: translate(50%, 0%); -ms-transform: translate(50%, 0%); -o-transform: translate(50%, 0%); transform: translate(50%, 0%); } .product__details-action button.product-action-btn .product-action-tooltip::after, .product__details-action .product-action-btn.product-action-btn .product-action-tooltip::after { top: 100%; right: 50%; left: auto; -webkit-transform: translate(50%, -50%) rotate(45deg); -moz-transform: translate(50%, -50%) rotate(45deg); -ms-transform: translate(50%, -50%) rotate(45deg); -o-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg); } .product__details-action button.product-action-btn:hover, .product__details-action .product-action-btn.product-action-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .product__details-action button.product-action-btn:hover .product-action-tooltip, .product__details-action .product-action-btn.product-action-btn:hover .product-action-tooltip { bottom: 100%; top: auto; right: auto; } .product__details-action button .woosc-btn, .product__details-action .product-action-btn .woosc-btn { font-size: 0; width: 100%; height: 100%; } .product__details-action button .woosc-btn::before, .product__details-action .product-action-btn .woosc-btn::before { font-size: 16px; content: "\f0ec"; font-family: var(--tp-ff-fontawesome); margin: 0; } .product__details-action button .woosc-btn.woosc-btn-added::before, .product__details-action .product-action-btn .woosc-btn.woosc-btn-added::before { content: "\f00c"; font-family: var(--tp-ff-fontawesome); } .product__details-action button.product-add-wishlist-btn button, .product__details-action .product-action-btn.product-add-wishlist-btn button { font-size: 0; width: 100%; height: 100%; } .product__details-action button.product-add-wishlist-btn button::before, .product__details-action .product-action-btn.product-add-wishlist-btn button::before { font-size: 16px; content: "\f004"; font-family: var(--tp-ff-fontawesome); margin: 0; } .product__details-action button.product-add-wishlist-btn button.woosw-btn-added::before, .product__details-action .product-action-btn.product-add-wishlist-btn button.woosw-btn-added::before { font-weight: 700; } .product__details-more p { display: inline-block; margin-bottom: 5px; font-weight: 600; font-size: 15px; line-height: 1; color: var(--tp-common-black); } .product__details-more p a { font-size: 15px; line-height: 1; color: var(--tp-text-1); font-weight: 400; } .product__details-more p a:hover { color: var(--tp-theme-1); } .product__details-more span { font-size: 15px; line-height: 1; color: var(--tp-text-1); } .product__details-more span a:hover { color: var(--tp-theme-1); } .product__details-categories { margin-bottom: 15px; } .product__details-tags { margin-bottom: 15px; } .product__details-tags span { display: inline-block; margin-bottom: 5px; font-weight: 600; font-size: 15px; line-height: 1; color: var(--tp-common-black); margin-right: 3px; } [dir=rtl] .product__details-tags span { margin-right: 0; margin-left: 3px; } .product__details-tags a { font-size: 14px; line-height: 1; color: var(--tp-text-1); border: 1px solid #DADCE0; padding: 4px 12px; margin-bottom: 6px; display: inline-block; } .product__details-tags a:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .product__details-share span { display: inline-block; margin-bottom: 5px; font-weight: 600; font-size: 15px; line-height: 1; color: var(--tp-common-black); margin-right: 9px; } [dir=rtl] .product__details-share span { margin-right: 0; margin-left: 9px; } .product__details-share a { font-size: 14px; line-height: 1; color: var(--tp-text-1); margin-bottom: 6px; margin-right: 10px; } [dir=rtl] .product__details-share a { margin-right: 0; margin-left: 10px; } .product__details-share a:hover { color: var(--tp-theme-1); } .product__details-tab-nav-inner { position: relative; } .product__details-tab-nav .nav-link { position: relative; padding: 11px 14px; font-weight: 500; font-size: 16px; color: var(--tp-text-1); } .product__details-tab-nav .nav-link.active, .product__details-tab-nav .nav-link:hover { color: var(--tp-common-black); } .product__details-tab-nav .nav-link.active::after, .product__details-tab-nav .nav-link:hover::after { width: 100%; left: 0; right: auto; } [dir=rtl] .product__details-tab-nav .nav-link.active::after, [dir=rtl] .product__details-tab-nav .nav-link:hover::after { left: auto; right: 0; } @media (max-width: 575px) { .product__details-tab-nav .nav-link::after { position: absolute; content: ""; left: auto; right: 0; bottom: -1px; width: 0%; height: 2px; background-color: var(--tp-theme-3); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } [dir=rtl] .product__details-tab-nav .nav-link::after { left: 0; right: auto; } } .product__details-tab-nav .tp-tab-menu { position: relative; border-bottom: 1px solid #DADCE0; } .product__details-tab-nav .tp-tab-line { position: absolute; content: ""; left: 0; bottom: -1px; width: 38%; height: 2px; background-color: var(--tp-theme-1); } [dir=rtl] .product__details-tab-nav .tp-tab-line { left: auto; right: 0; } @media (max-width: 575px) { .product__details-description-content { padding-right: 0; } [dir=rtl] .product__details-description-content { padding-left: 0; } } .product__details-description-content .product-desc-title { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 34px; color: var(--tp-common-black-solid); margin-bottom: 10px; } @media (max-width: 575px) { .product__details-description-content .product-desc-title { font-size: 25px; } } .product__details-description-content p { font-family: var(--tp-ff-roboto); font-size: 18px; line-height: 1.67; color: var(--tp-text-1); margin-bottom: 25px; } .product__details-description .product-desc-feature-thumb { margin-bottom: 30px; } [dir=rtl] .product__details-description .product-desc-feature-thumb { margin-right: 0; margin-left: 25px; } .product__details-description .product-desc-feature-content p { line-height: 1.56; padding-right: 75px; } [dir=rtl] .product__details-description .product-desc-feature-content p { padding-right: 0; padding-left: 75px; } @media (max-width: 575px) { .product__details-description .product-desc-feature-content p { padding-right: 0; } [dir=rtl] .product__details-description .product-desc-feature-content p { padding-left: 0; } } .product__details-additional { margin-top: 67px; background-color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .product__details-additional { overflow-x: scroll; } } .product__details-additional-inner { padding: 45px 70px 45px; border: 1px solid #E9E9F0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__details-additional-inner { padding: 15px 40px 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .product__details-additional-inner { width: 768px; } } .product__details-additional table { width: 100%; } .product__details-additional table tr { padding: 16px 0 14px; display: block; } .product__details-additional table tr:not(:last-child) { border-bottom: 1px solid #E9E9F0; } .product__details-additional table tr th { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; color: var(--tp-common-black); width: 28%; display: inline-block; } .product__details-additional table tr td { width: 71%; display: inline-block; font-family: var(--tp-ff-roboto); font-size: 15px; color: var(--tp-text-1); } .product__details-review-inner { padding: 62px 70px 70px; border: 1px solid #E9E9F0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__details-review-inner { padding: 35px 40px 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product__details-review-inner { padding: 25px 30px 30px; } } @media (max-width: 575px) { .product__details-review-inner { padding: 15px 20px 20px; } } .product__details-review .product-rating-title { font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 24px; margin-bottom: 22px; } .product__details-review .product-rating-number { text-align: center; width: 160px; height: 125px; border: 1px solid #E9E9F0; padding-top: 21px; padding-bottom: 21px; } [dir=rtl] .product__details-review .product-rating-number { margin-right: 0; margin-left: 40px; } @media (max-width: 575px) { .product__details-review .product-rating-number { margin-bottom: 15px; } } .product__details-review .product-rating-number-title { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 60px; line-height: 1; color: var(--tp-common-black-solid); margin-bottom: 0; } .product__details-review .product-rating-star { line-height: 1; } .product__details-review .product-rating-star span { line-height: 1; font-size: 12px; color: var(--tp-common-yellow-5); display: inline-block; } .product__details-review .product-rating-star span:not(:last-child) { margin-right: 3px; } [dir=rtl] .product__details-review .product-rating-star span:not(:last-child) { margin-right: 0; margin-left: 3px; } .product__details-review .product-rating-bar { width: 100%; background-color: #E9E9E9; border-radius: 10px; } .product__details-review .product-rating-bar-wrapper { width: 71.5%; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .product__details-review .product-rating-bar-wrapper { width: 70%; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__details-review .product-rating-bar-wrapper { width: 66%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .product__details-review .product-rating-bar-wrapper { width: 52%; } } @media (max-width: 575px) { .product__details-review .product-rating-bar-wrapper { width: 100%; } } .product__details-review .product-rating-bar .single-progress { background-color: var(--tp-theme-1); height: 8px; border-radius: 10px; } .product__details-review .product-rating-bar-text { width: 3.5%; line-height: 1; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .product__details-review .product-rating-bar-text { width: 7.5%; } } .product__details-review .product-rating-bar-text span { font-family: var(--tp-ff-roboto); font-size: 14px; color: var(--tp-text-1); } .product__details-review .product-rating-bar-item:not(:last-child) { margin-bottom: 5px; } .product__details-review .product-review-item { margin-bottom: 30px; } .product__details-review .product-review-item:last-child { margin-bottom: 0; } .product__details-review .product-review-item p { font-family: var(--tp-ff-roboto); font-size: 15px; line-height: 1.6; color: var(--tp-text-1); } .product__details-review .product-review-avater { margin-bottom: 11px; } .product__details-review .product-review-avater-thumb img { width: 34px; height: 34px; border-radius: 50%; margin-right: 10px; } [dir=rtl] .product__details-review .product-review-avater-thumb img { margin-right: 0; margin-left: 10px; } .product__details-review .product-review-avater-title { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: 0; } .product__details-review .product-review-rating { margin-bottom: 5px; } .product__details-review .product-review-rating-wrapper { margin-right: 10px; } [dir=rtl] .product__details-review .product-review-rating-wrapper { margin-right: 0; margin-left: 10px; } .product__details-review .product-review-rating-wrapper span { line-height: 1; font-size: 12px; color: var(--tp-common-yellow-5); display: inline-block; } .product__details-review .product-review-rating-wrapper span:not(:last-child) { margin-right: 3px; } [dir=rtl] .product__details-review .product-review-rating-wrapper span:not(:last-child) { margin-right: 0; margin-left: 3px; } .product__details-review .product-review-rating-date span { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 13px; color: var(--tp-text-1); } .product__details-review .product-review-form p { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 14px; color: var(--tp-text-1); margin-bottom: 20px; } .product__details-review .product-review-form-title { font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 4px; } .product__details-review .product-review-form-rating .rate-title { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; line-height: 14px; letter-spacing: -0.02em; color: var(--tp-text-1); } .product__details-review .product-review-input { margin-bottom: 18px; line-height: 1; } .product__details-review .product-review-input.is-textarea { margin-bottom: 30px; } .product__details-review .product-review-input input, .product__details-review .product-review-input textarea { height: 60px; line-height: 60px; background-color: #F7F7F7; border: 1.5px solid #F7F7F7; } .product__details-review .product-review-input input:focus, .product__details-review .product-review-input textarea:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .product__details-review .product-review-input textarea { height: 180px; line-height: 1.2; padding-bottom: 20px; } .product__details-review .product-review-agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 18px; height: 18px; background: transparent; border: 2px solid #B2B2B9; border-radius: 4px; outline: none; flex: 0 0 auto; -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px); -o-transform: translateY(3px); transform: translateY(3px); padding: 0; } .product__details-review .product-review-agree input:checked { position: relative; background-color: var(--tp-theme-1); border-color: transparent; } .product__details-review .product-review-agree input:checked::after { box-sizing: border-box; position: absolute; content: "\f00c"; font-weight: 700; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .product__details-review .product-review-agree input:hover { cursor: pointer; } .product__details-review .product-review-agree label { padding-left: 8px; font-size: 14px; line-height: 1.71; color: var(--tp-text-1); } [dir=rtl] .product__details-review .product-review-agree label { padding-left: 0; padding-right: 8px; } .product__details-review .product-review-agree label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } .product__details-review .product-review-agree label a:hover { color: var(--tp-theme-1); } .product__details-review .product-review-agree label:hover { cursor: pointer; } .product__details-review .product-review-btn .tp-btn { font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 15px; padding: 12px 37px; } .product__details-review .product-review-btn .tp-btn:hover { background-color: var(--tp-common-black); } .product__modal .modal-dialog { max-width: 1200px; border-radius: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .product__modal .modal-dialog { max-width: 1100px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .product__modal .modal-dialog { max-width: 900px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .product__modal .modal-dialog { max-width: 700px; } } .product__modal .modal-content { padding: 40px; border-radius: 0; } @media (max-width: 575px) { .product__modal .modal-content { padding: 20px; } } .product__modal .product__details-thumb-nav .nav-link { width: 90px; height: 90px; margin-bottom: 10px; } .product__modal .product__details-thumb-nav .nav-link img { width: 100%; } @media (max-width: 575px) { .product__modal .product__details-thumb-nav .nav-link { width: 70px; height: 70px; } } .product__modal-close { position: absolute; top: 20px; right: 20px; } [dir=rtl] .product__modal-close { right: auto; left: 20px; } .product__modal-close-btn { display: inline-block; font-size: 16px; height: 44px; width: 44px; line-height: 44px; background-color: transparent; color: var(--tp-text-1); border-radius: 50%; } .product__modal-close-btn:hover { color: var(--tp-theme-1); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .product__modal-close-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .product-action-btn { position: relative; } .product-action-btn .product-action-tooltip { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); right: 90%; font-weight: 500; font-size: 12px; color: var(--tp-common-white); background-color: var(--tp-common-black); z-index: 1; display: inline-block; width: max-content; line-height: 1; padding: 4px 8px; margin-right: 8px; visibility: hidden; opacity: 0; } .product-action-btn .product-action-tooltip::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translate(50%, -50%) rotate(45deg); -moz-transform: translate(50%, -50%) rotate(45deg); -ms-transform: translate(50%, -50%) rotate(45deg); -o-transform: translate(50%, -50%) rotate(45deg); transform: translate(50%, -50%) rotate(45deg); height: 8px; width: 8px; background-color: var(--tp-common-black); } .product-action-btn svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .product-action-btn:hover .product-action-tooltip { visibility: visible; opacity: 1; right: 100%; } .product-add-cart-btn { font-weight: 600; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-common-black); display: inline-block; text-align: center; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product-add-cart-btn svg, .product-add-cart-btn i { margin-right: 7px; } [dir=rtl] .product-add-cart-btn svg, [dir=rtl] .product-add-cart-btn i { margin-right: 0; margin-left: 7px; } .product-add-cart-btn svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .product-add-cart-btn a { display: block; padding: 7px 25px; background-color: transparent; } .product-add-cart-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .product-add-cart-btn-2 { border: 1px solid #DADCE0; color: var(--tp-common-black); background-color: var(--tp-common-white); font-size: 15px; font-weight: 500; } .product-add-cart-btn-2 a { padding: 6px 33px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .product-add-cart-btn-2 a { padding: 6px 21px; } } @media (max-width: 575px) { .product-add-cart-btn-2 { width: 100%; } } .product-add-cart-btn-2:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .product-add-cart-btn-3 { background-color: var(--tp-common-black); color: var(--tp-common-white); margin-right: 5px; } .product-add-cart-btn-3.single_add_to_cart_button { padding: 12px 45px; } .product-add-cart-btn-3 a { padding: 12px 45px; } .product-add-cart-btn-3:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } @media (max-width: 575px) { .product-add-cart-btn-3 { width: 100%; } } .shop__top { padding: 15px 20px; padding-left: 30px; border: 1px solid rgba(3, 4, 28, 0.1); } [dir=rtl] .shop__top { padding-left: 20px; padding-right: 30px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .shop__result { margin-bottom: 15px; } } .shop__result p { font-family: var(--tp-ff-roboto); font-size: 16px; margin-bottom: 0; } .shop__sort-tab .nav-link { font-size: 18px; color: #ABABAB; margin-right: 20px; } [dir=rtl] .shop__sort-tab .nav-link { margin-right: 0; margin-left: 20px; } @media (max-width: 575px) { .shop__sort-tab .nav-link { margin-bottom: 20px; } } .shop__sort-tab .nav-link.active { color: var(--tp-theme-1); } .shop__sort-select .nice-select { height: 40px; line-height: 40px; border: 1px solid #E9E9F0; width: 230px; border-radius: 0; font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 14px; color: var(--tp-text-1); padding: 0 20px; } .shop__sort-select .nice-select::after { right: 14px; } [dir=rtl] .shop__sort-select .nice-select::after { right: auto; left: 14px; } .shop__sort-select .nice-select .list { width: 100%; margin-top: 0; border-radius: 0; padding: 12px 0; } .shop__sort-select .nice-select .list .option { line-height: 30px; min-height: 30px; } .shop__sort-select .nice-select .list .option:hover { color: var(--tp-common-black); } .shop__sort-select .nice-select .list .option.selected { font-weight: 400; color: var(--tp-common-black); } .shop__sidebar.on-left { margin-right: 30px; margin-bottom: 50px; } [dir=rtl] .shop__sidebar.on-left { margin-right: 0; margin-left: 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) { .shop__sidebar.on-left { margin-right: 0; } [dir=rtl] .shop__sidebar.on-left { margin-left: 0; } } .shop__sidebar.on-right { margin-right: 0; margin-left: 30px; margin-bottom: 50px; } [dir=rtl] .shop__sidebar.on-right { margin-right: 30px; margin-left: 0; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .shop__sidebar.on-right { margin-left: 0; margin-bottom: 0; margin-top: 50px; } [dir=rtl] .shop__sidebar.on-right { margin-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .shop__sidebar.on-right { margin-left: 0; margin-bottom: 0; margin-top: 0; } [dir=rtl] .shop__sidebar.on-right { margin-right: 0; } } .shop__widget { margin-bottom: 8px; } .shop__widget .accordion-button { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 17px; line-height: 12px; color: var(--tp-common-black-solid); border-bottom: 1px solid #DADCE0; padding: 10px 0; margin-bottom: 25px; } [dir=rtl] .shop__widget .accordion-button { justify-content: end; } .shop__widget .accordion-button:not(.collapsed) { color: var(--tp-common-black-solid); } .shop__widget .accordion-button::after { top: 37%; color: var(--tp-common-black-solid); } .shop__widget .accordion-button.collapsed::after { color: var(--tp-common-black-solid); } .shop__widget .accordion-button:hover { color: var(--tp-theme-1); } .shop__widget .accordion-button:hover::after { color: var(--tp-theme-1); } .shop__widget-list-item:not(:last-child) { margin-bottom: 6px; } .shop__widget-list-item input { display: none; } .shop__widget-list-item input:checked ~ label { color: var(--tp-common-black); } .shop__widget-list-item input:checked ~ label::after { background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .shop__widget-list-item input:checked ~ label::before { color: var(--tp-common-white); } .shop__widget-list-item label { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 14px; color: var(--tp-text-1); position: relative; padding-left: 31px; } [dir=rtl] .shop__widget-list-item label { padding-left: 0; padding-right: 31px; } .shop__widget-list-item label::after, .shop__widget-list-item label::before { position: absolute; content: ""; top: 2px; left: 0; width: 18px; height: 18px; border: 1px solid #DADCE0; -webkit-transition: all 0.1s ease-out 0s; -moz-transition: all 0.1s ease-out 0s; -ms-transition: all 0.1s ease-out 0s; -o-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; } [dir=rtl] .shop__widget-list-item label::after, [dir=rtl] .shop__widget-list-item label::before { left: auto; right: 0; } .shop__widget-list-item label::before { content: "\f00c"; font-family: var(--tp-ff-fontawesome); color: transparent; z-index: 1; border: 0; width: inherit; height: inherit; top: -2px; left: 4px; font-size: 12px; } [dir=rtl] .shop__widget-list-item label::before { left: auto; right: 4px; } .shop__widget-list-item label:hover { cursor: pointer; } .shop__widget-list-item-2:not(:last-child) { margin-bottom: 10px; } .shop__widget-list-item-2 input { display: none; } .shop__widget-list-item-2 input:checked ~ label::before { color: var(--tp-common-white); } .shop__widget-list-item-2 label { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 14px; color: var(--tp-text-1); position: relative; padding-left: 31px; } [dir=rtl] .shop__widget-list-item-2 label { padding-left: 0; padding-right: 31px; } .shop__widget-list-item-2 label::after, .shop__widget-list-item-2 label::before { position: absolute; content: ""; top: 2px; left: 0; width: 22px; height: 22px; border-radius: 50%; -webkit-transition: all 0.1s ease-out 0s; -moz-transition: all 0.1s ease-out 0s; -ms-transition: all 0.1s ease-out 0s; -o-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; background-color: var(--tp-common-black); } [dir=rtl] .shop__widget-list-item-2 label::after, [dir=rtl] .shop__widget-list-item-2 label::before { left: auto; right: 0; } .shop__widget-list-item-2 label::before { content: "\f00c"; font-family: var(--tp-ff-fontawesome); color: transparent; z-index: 1; border: 0; width: inherit; height: inherit; top: 0px; left: 6px; font-size: 12px; background-color: transparent; } [dir=rtl] .shop__widget-list-item-2 label::before { left: auto; right: 6px; } .shop__widget-list-item-2 label:hover { cursor: pointer; } .shop__widget-list-item-2.has-orange label::after { background-color: #FFB733; } .shop__widget-list-item-2.has-green label::after { background-color: #95C995; } .shop__widget-list-item-2.has-red label::after { background-color: #FF5656; } .shop__widget-list-item-2.has-yellow label::after { background-color: #E2E20D; } .shop__widget-search-input { position: relative; } .shop__widget-search-input input { width: 100%; height: 46px; border: 1px solid #DADCE0; padding: 0 20px; background-color: var(--tp-common-white); font-size: 14px; font-family: var(--tp-ff-roboto); padding-right: 45px; outline: 0; } [dir=rtl] .shop__widget-search-input input { padding-right: 20px; padding-left: 45px; } .shop__widget-search-input input::-webkit-input-placeholder { color: #767A7D; } .shop__widget-search-input input:-moz-placeholder { color: #767A7D; } .shop__widget-search-input input::-moz-placeholder { color: #767A7D; } .shop__widget-search-input input:-ms-input-placeholder { color: #767A7D; } .shop__widget-search-input input:focus { border-color: var(--tp-theme-1); } .shop__widget-search-input button { position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 0; } [dir=rtl] .shop__widget-search-input button { right: auto; left: 20px; } .shop__widget-search-input button svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .shop__widget-search-input button:hover { color: var(--tp-theme-1); } .single-product .breadcrumb__area { display: none !important; } /*----------------------------------------*/ /* 33. NEWSLETTER CSS START /*----------------------------------------*/ .newsletter-popup { visibility: hidden; opacity: 0; transition-delay: 0s; } .newsletter-popup.opened { opacity: 1; visibility: visible; transition-delay: 5s; } .newsletter-overlay { background-color: var(--tp-common-black); height: 100%; width: 100%; position: fixed; top: 0; z-index: 9999; left: 0; opacity: 0; visibility: hidden; transition-delay: 0s; } .newsletter-overlay.opened { opacity: 0.9; visibility: visible; transition-delay: 5s; } .newsletter__area { position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 870px; background-color: var(--tp-common-white); z-index: 999999; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__area { width: 670px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .newsletter__area { width: 500px; } } @media (max-width: 575px) { .newsletter__area { width: 95%; } } .newsletter__area-2 { width: 770px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__area-2 { width: 670px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .newsletter__area-2 { width: 500px; } } @media (max-width: 575px) { .newsletter__area-2 { width: 95%; } } .newsletter__area-3 { width: 800px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__area-3 { width: 670px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .newsletter__area-3 { width: 500px; } } @media (max-width: 575px) { .newsletter__area-3 { width: 95%; } } .newsletter__area.newsletter-demo { position: relative; top: 0; left: 50%; -webkit-transform: translate(-50%, 0%); -moz-transform: translate(-50%, 0%); -ms-transform: translate(-50%, 0%); -o-transform: translate(-50%, 0%); transform: translate(-50%, 0%); z-index: inherit; } .newsletter__close { position: absolute; top: 20px; right: 20px; z-index: 1; } [dir=rtl] .newsletter__close { left: 20px; right: auto; } .newsletter__close-3 { top: 30px; right: 30px; } [dir=rtl] .newsletter__close-3 { right: auto; left: 30px; } @media (max-width: 575px) { .newsletter__close-3 { top: 15px; right: 15px; } [dir=rtl] .newsletter__close-3 { right: auto; left: 15px; } } .newsletter__close-btn { color: var(--tp-common-white); font-size: 18px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__close-btn { color: #7E7E83; } } .newsletter__close-btn svg, .newsletter__close-btn i { display: inline-block; } .newsletter__close-btn:hover { color: var(--tp-theme-1); } .newsletter__close-btn:hover svg, .newsletter__close-btn:hover i { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg); } .newsletter__close-btn-2 { color: rgba(255, 255, 255, 0.5); } .newsletter__close-btn-2:hover { color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__close-btn-2 { color: #7E7E83; } .newsletter__close-btn-2:hover { color: var(--tp-theme-1); } } .newsletter__close-btn-3 { color: #7E7E83; } .newsletter__close-btn-3:hover { color: #484AFF; } .newsletter__wrapper { padding: 56px 40px 42px; padding-right: 415px; position: relative; background-color: var(--tp-common-white); } [dir=rtl] .newsletter__wrapper { padding-right: 40px; padding-left: 415px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__wrapper { padding-right: 250px; } [dir=rtl] .newsletter__wrapper { padding-left: 250px; padding-right: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__wrapper { padding: 20px 20px; padding-top: 60px; } } .newsletter__wrapper-2 { padding: 65px 50px 32px; padding-right: 365px; } [dir=rtl] .newsletter__wrapper-2 { padding-left: 365px; padding-left: 50px; } .newsletter__wrapper-2 p { margin-bottom: 32px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__wrapper-2 { padding-right: 280px; } [dir=rtl] .newsletter__wrapper-2 { padding-left: 280px; padding-right: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .newsletter__wrapper-2 { padding-right: 50px; } [dir=rtl] .newsletter__wrapper-2 { padding-left: 50px; } } @media (max-width: 575px) { .newsletter__wrapper-2 { padding: 20px; padding-top: 40px; } } .newsletter__wrapper-3 { padding: 65px 60px 32px; padding-left: 380px; } [dir=rtl] .newsletter__wrapper-3 { padding-right: 380px; padding-left: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__wrapper-3 { padding-left: 280px; } [dir=rtl] .newsletter__wrapper-3 { padding-right: 280px; padding-left: 60px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__wrapper-3 { padding: 20px; padding-top: 40px; } } .newsletter__wrapper-3 p { font-size: 16px; line-height: 1.38; color: var(--tp-common-black); margin-bottom: 33px; } .newsletter__thumb { position: absolute; width: 340px; height: 100%; top: 0; right: 0; } [dir=rtl] .newsletter__thumb { right: auto; left: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .newsletter__thumb { width: 230px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__thumb { display: none; } } .newsletter__thumb-3 { left: 0; right: auto; } [dir=rtl] .newsletter__thumb-3 { right: 0; left: auto; } .newsletter__title { font-size: 32px; line-height: 1.12; margin-bottom: 32px; } .newsletter__title-pre { font-weight: 500; font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; color: #484AFF; } .newsletter__title-2 { font-size: 34px; line-height: 1; margin-bottom: 5px; } .newsletter__title-3 { font-size: 50px; text-transform: uppercase; line-height: 1; margin-bottom: 9px; } @media (max-width: 575px) { .newsletter__title-3 { font-size: 40px; } } .newsletter__input { position: relative; margin-bottom: 20px; margin-right: 15px; } [dir=rtl] .newsletter__input { margin-right: 0; margin-left: 15px; } .newsletter__input input { width: 100%; height: 52px; line-height: 52px; padding: 0 27px; padding-right: 120px; background-color: #F2F2F2; border: 1px solid #EAEAEA; font-size: 14px; color: var(--tp-common-black); font-family: var(--tp-ff-space); border-radius: 6px; } [dir=rtl] .newsletter__input input { padding-right: 27px; padding-left: 120px; } .newsletter__input input::-webkit-input-placeholder { color: #7E7E83; } .newsletter__input input:-moz-placeholder { color: #7E7E83; } .newsletter__input input::-moz-placeholder { color: #7E7E83; } .newsletter__input input:-ms-input-placeholder { color: #7E7E83; } .newsletter__input input:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__input input { padding-right: 27px; } } .newsletter__input button { position: absolute; top: 0; right: 0; font-family: var(--tp-ff-space); font-weight: 700; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-theme-1); padding: 13px 28px; border-radius: 0px 6px 6px 0; } [dir=rtl] .newsletter__input button { right: auto; left: 0; } .newsletter__input button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .newsletter__input button { position: static; margin-top: 10px; border-radius: 6px; } } .newsletter__input-2 { margin-bottom: 19px; margin-right: 0; } [dir=rtl] .newsletter__input-2 { margin-left: 0; } .newsletter__input-2 input { width: 220px; height: 54px; border: 2px solid #E4E5EB; font-family: var(--tp-ff-space); font-size: 14px; outline: 0; margin-right: 4px; background-color: transparent; padding: 0 26px; border-radius: 0; } [dir=rtl] .newsletter__input-2 input { margin-right: 0; margin-left: 4px; } @media (max-width: 575px) { .newsletter__input-2 input { width: 100%; } } .newsletter__input-2 input:focus { border-color: var(--tp-theme-1); } .newsletter__input-2 button { font-family: var(--tp-ff-space); font-weight: 700; font-size: 16px; color: var(--tp-common-white); padding: 14px 27px; background-color: var(--tp-theme-1); border-radius: 0; } @media only screen and (min-width: 576px) and (max-width: 767px) { .newsletter__input-2 button { margin-top: 0; } } @media (max-width: 575px) { .newsletter__input-2 button { margin-top: 15px; } } .newsletter__input-2 button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .newsletter__input-3 input { width: 100%; background: #F0F0F5; border: 1px solid #E4E5EB; border-radius: 0; } .newsletter__input-3 input:focus { border-color: #484AFF; } .newsletter__input-3 button { position: static; margin-top: 15px; font-size: 16px; background-color: #484AFF; border-radius: 0; padding: 10px 31px; margin-bottom: 5px; } .newsletter__input-3 button i, .newsletter__input-3 button svg { margin-left: 3px; } [dir=rtl] .newsletter__input-3 button i, [dir=rtl] .newsletter__input-3 button svg { margin-left: 0; margin-right: 3px; } .newsletter__input-3 button svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .newsletter__agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 18px; height: 18px; background: transparent; border: 2px solid #B2B2B9; border-radius: 4px; outline: none; flex: 0 0 auto; -webkit-transform: translateY(3px); -moz-transform: translateY(3px); -ms-transform: translateY(3px); -o-transform: translateY(3px); transform: translateY(3px); padding: 0; } .newsletter__agree input:checked { position: relative; background-color: var(--tp-theme-1); border-color: transparent; } .newsletter__agree input:checked::after { box-sizing: border-box; position: absolute; content: "\f00c"; font-weight: 700; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .newsletter__agree input:hover { cursor: pointer; } .newsletter__agree label { padding-left: 8px; font-size: 14px; line-height: 1.5; color: var(--tp-text-1); } .newsletter__agree label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } [dir=rtl] .newsletter__agree label a { padding-left: 0; padding-right: 4px; } .newsletter__agree label a:hover { color: var(--tp-theme-1); } .newsletter__agree label:hover { cursor: pointer; } .newsletter__agree-2 label a { color: var(--tp-text-1); text-decoration: underline; } .newsletter__option p { font-size: 18px; line-height: 22px; color: var(--tp-common-black); } .newsletter__proposal p { margin-bottom: 12px; } .newsletter__proposal p a { color: #484AFF; text-decoration: underline; } .newsletter__proposal p a:hover { color: var(--tp-common-black); } .newsletter__social a { color: #7E7E83; margin-right: 6px; } [dir=rtl] .newsletter__social a { margin-right: 0; margin-left: 6px; } .newsletter__social a:hover { color: #484AFF; } /*----------------------------------------*/ /* 34. JOB CSS START /*----------------------------------------*/ .job__item { background: var(--tp-common-white); border: 1px solid #EAEAEF; padding: 33px 60px 32px 40px; } [dir=rtl] .job__item { padding-right: 40px; padding-left: 60px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .job__item { padding: 33px 30px 32px 30px; } } .job__item:not(:last-child) { margin-bottom: 20px; } .job__item:hover { border-color: var(--tp-theme-1); } .job__title { font-size: 24px; letter-spacing: -0.02em; margin-bottom: 7px; } .job__title a:hover { color: var(--tp-theme-1); } .job__meta-item { margin-right: 14px; } [dir=rtl] .job__meta-item { margin-right: 0; margin-left: 14px; } .job__meta-item span { font-size: 14px; display: inline-block; position: relative; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .job__meta-item span { margin-bottom: 15px; } } .job__meta-item span:not(:last-child) { margin-right: 15px; padding-right: 18px; } [dir=rtl] .job__meta-item span:not(:last-child) { margin-right: 0; padding-right: 0; margin-left: 15px; padding-left: 18px; } .job__meta-item span:not(:last-child)::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 20px; background-color: #D9D9D9; } [dir=rtl] .job__meta-item span:not(:last-child)::after { right: auto; left: 0; } .job__meta-item span i, .job__meta-item span svg, .job__meta-item span img { margin-right: 4px; } [dir=rtl] .job__meta-item span i, [dir=rtl] .job__meta-item span svg, [dir=rtl] .job__meta-item span img { margin-right: 0; margin-left: 4px; } .job__meta-item span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .job__meta-item span img { max-width: 20px; } .job__tag span { display: inline-block; padding: 4px 10px 5px; margin-bottom: 0; color: var(--tp-common-purple); background-color: rgba(99, 100, 219, 0.06); line-height: 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) { .job__tag span { margin-bottom: 15px; } } .job__vacancies { position: relative; padding-left: 30px; } [dir=rtl] .job__vacancies { padding-left: 0; padding-right: 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) { .job__vacancies { padding-left: 0; margin-top: 15px; margin-bottom: 30px; } [dir=rtl] .job__vacancies { padding-right: 0; } .job__vacancies::after { display: none; } } .job__vacancies::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1px; height: 80px; background-color: #EAEAEF; } [dir=rtl] .job__vacancies::after { left: auto; right: 0; } .job__vacancies span { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; color: var(--tp-text-10); line-height: 1; margin-bottom: 7px; } .job__vacancies p { font-size: 14px; color: var(--tp-text-10); line-height: 1; margin-bottom: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .job__btn { padding-left: 0; } [dir=rtl] .job__btn { padding-right: 0; } } .job__btn a { font-size: 16px; font-weight: 500; color: var(--tp-text-1); padding: 13px 47px; position: relative; } .job__btn a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .job__btn a::after { position: absolute; content: ""; left: -68px; top: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 1px; height: 80px; background-color: #EAEAEF; } [dir=rtl] .job__btn a::after { left: auto; right: -68px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .job__btn a::after { left: -35px; } [dir=rtl] .job__btn a::after { left: auto; right: -35px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .job__btn a::after { display: none; } } .job__box-145 { padding-left: 145px; padding-right: 145px; padding-bottom: 125px; } @media only screen and (min-width: 1700px) and (max-width: 1899px) { .job__box-145 { padding-left: 120px; padding-right: 120px; } } @media only screen and (min-width: 1600px) and (max-width: 1699px) { .job__box-145 { padding-left: 110px; padding-right: 110px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .job__box-145 { padding-left: 70px; padding-right: 70px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .job__box-145 { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .job__box-145 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .job__box-145 { padding-left: 15px; padding-right: 15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .job__box-145 { padding-left: 0; padding-right: 0; padding-bottom: 70px; } } .job__details-tag span { display: inline-block; font-weight: 600; font-size: 14px; line-height: 1; color: var(--tp-common-white); background-color: var(--tp-common-purple); padding: 8px 17px 10px; } .job__details-title { font-size: 50px; letter-spacing: -0.04em; margin-bottom: 6px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .job__details-title { font-size: 35px; } } @media (max-width: 575px) { .job__details-title { font-size: 27px; } } .job__details-content p { font-size: 22px; line-height: 1.55; color: var(--tp-common-black); } .job__details-about-title { font-size: 40px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); } @media (max-width: 575px) { .job__details-about-title { font-size: 33px; } } .job__details-about p { font-size: 16px; line-height: 1.75; padding-right: 70px; } [dir=rtl] .job__details-about p { padding-right: 0; padding-left: 70px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .job__details-about p { padding-right: 0; } [dir=rtl] .job__details-about p { padding-left: 0; } } .job__details-list-title { font-size: 24px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); margin-bottom: 20px; } .job__details-list-title-2 { font-size: 34px; margin-bottom: 20px; } .job__details-list ul li { list-style: none; font-size: 16px; position: relative; padding-left: 17px; } [dir=rtl] .job__details-list ul li { padding-right: 17px; padding-left: 0; } .job__details-list ul li:not(:last-child) { margin-bottom: 8px; } .job__details-list ul li::after { position: absolute; content: ""; left: 0; top: 11px; width: 5px; height: 5px; background-color: var(--tp-text-1); border-radius: 50%; } [dir=rtl] .job__details-list ul li::after { left: auto; right: 0; } .job__details-info-wrapper { margin-bottom: 27px; } .job__details-info:not(:last-child) { margin-bottom: 30px; } .job__details-info-title { font-size: 22px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); margin-bottom: 0; } .job__details-info p { font-size: 15px; } .job__details-info p span { color: var(--tp-common-black); font-weight: 500; } .job__details-deadline { margin-bottom: 46px; } .job__details-deadline p { font-weight: 600; font-size: 15px; color: var(--tp-common-black); } .job__details-deadline p span { font-weight: 400; color: var(--tp-text-1); } .job__details-cv { margin-bottom: 34px; } .job__details-cv p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); } .job__details-btn .tp-btn { padding: 14px 39px; } .job__details-btn .tp-btn:hover { background-color: var(--tp-common-black); } .job__form { background-color: var(--tp-grey-4); padding: 55px 70px 45px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .job__form { padding: 55px 40px 45px; } } @media (max-width: 575px) { .job__form { padding: 35px 30px 35px; } } .job__form-title { font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 23px; } [dir=rtl] .job__form-title { text-align: right; } [dir=rtl] .job__form-details { text-align: right; } .job__form-details-title { font-weight: 500; font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 23px; } [dir=rtl] .job__form-details-title { text-align: right; } .job__form-details p { font-weight: 500; font-size: 15px; line-height: 1.6; margin-top: 23px; margin-bottom: 21px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .job__form-details p br { display: none; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .job__form-details-meta span { margin-right: 22px; padding-right: 28px; } [dir=rtl] .job__form-details-meta span { margin-right: 0; padding-right: 0; margin-left: 22px; padding-right: 28px; } } .job__form-level { margin-top: 45px; margin-bottom: 45px; } .job__form-level-title { font-weight: 500; font-size: 18px; letter-spacing: -0.02em; margin-bottom: 20px; } .job__form-level-input { margin-bottom: 6px; } .job__form-level-input input[type=radio], .job__form-level-input input[type=checkbox] { display: none; } .job__form-level-input input[type=radio]:checked ~ label::after, .job__form-level-input input[type=checkbox]:checked ~ label::after { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .job__form-level-input input[type=radio]:checked ~ label::before, .job__form-level-input input[type=checkbox]:checked ~ label::before { background-color: var(--tp-theme-1); } .job__form-level-input label { position: relative; font-size: 14px; padding-left: 30px; } [dir=rtl] .job__form-level-input label { padding-left: 0; padding-right: 30px; } .job__form-level-input label:hover { cursor: pointer; } .job__form-level-input label::after, .job__form-level-input label::before { position: absolute; content: ""; left: 0; top: 3px; width: 18px; height: 18px; background-color: var(--tp-common-white); border: 1px solid #EAEAEF; border-radius: 50%; transition: all 0.2s linear; } [dir=rtl] .job__form-level-input label::after, [dir=rtl] .job__form-level-input label::before { left: auto; right: 0; } .job__form-level-input label::before { -webkit-transform: scale(0.35); -moz-transform: scale(0.35); -ms-transform: scale(0.35); -o-transform: scale(0.35); transform: scale(0.35); border: 0; background-color: var(--tp-common-white); z-index: 1; } [dir=rtl] .job__form-btn { justify-content: end; } .job__form-btn .tp-btn { font-size: 15px; padding: 17px 34px; letter-spacing: 0; margin-right: 15px; margin-bottom: 16px; } [dir=rtl] .job__form-btn .tp-btn { margin-right: 0; margin-left: 15px; } .job__form-btn .tp-btn:hover { background-color: var(--tp-theme-1-dark); } .job__form-btn .tp-btn.is-purple { background-color: var(--tp-common-purple); } .job__form-btn .tp-btn.is-purple:hover { background-color: #4546B7; } .job__form-btn input[type=file] { display: none; } .job__form-btn label:hover { cursor: pointer; } .job__input { position: relative; margin-bottom: 20px; } .job__input-icon { position: absolute; top: 30px; left: 27px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .job__input-icon { left: auto; right: 27px; } .job__input-icon svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .job__input-wrapper { position: relative; margin-bottom: 20px; } .job__input input, .job__input textarea { background: var(--tp-common-white); border: 1px solid #EAEAEF; padding-left: 55px; padding-right: 27px; height: 60px; } [dir=rtl] .job__input input, [dir=rtl] .job__input textarea { padding-left: 27px; padding-right: 55px; } .job__input input:focus, .job__input textarea:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .job__input textarea { height: 160px; resize: none; } .job__input.input-sm input { width: 405px; } @media (max-width: 575px) { .job__input.input-sm input { width: 100%; } } .job__input.no-icon input { padding-left: 27px; padding-right: 27px; } .job__input .nice-select { width: 100%; float: none; height: 60px; border: 1px solid #EAEAEF; border-radius: 0; line-height: 58px; padding-left: 27px; } [dir=rtl] .job__input .nice-select { padding-left: 0; padding-right: 27px; } .job__input .nice-select .current { color: var(--tp-common-black); } .job__input .nice-select::after { right: 25px; color: var(--tp-common-black); } [dir=rtl] .job__input .nice-select::after { right: auto; left: 25px; } .job__input .nice-select .list { width: 100%; border-radius: 0; margin-top: 0; padding: 13px 8px; } .job__input .nice-select .list .option:hover { color: var(--tp-common-black); } .job-apply-form { display: none; } /*----------------------------------------*/ /* 35. LOGIN CSS START /*----------------------------------------*/ .login__wrapper { padding: 50px 85px 55px; background: var(--tp-common-white); box-shadow: 0px 30px 60px rgba(3, 4, 28, 0.1); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .login__wrapper { padding: 50px 60px 55px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .login__wrapper { padding: 50px 40px 55px; } } @media (max-width: 575px) { .login__wrapper { padding: 40px 25px 45px; } } .login__title { font-size: 34px; letter-spacing: -0.04em; margin-bottom: 6px; } .login__top p { font-size: 16px; } .login__input { position: relative; } .login__input-wrapper { margin-bottom: 14px; } .login__input input { background: #FFFFFF; border: 1px solid #EAEAEF; padding-left: 55px; padding-right: 50px; height: 60px; line-height: 60px; } [dir=rtl] .login__input input { padding-left: 50px; padding-right: 55px; } .login__input input:focus { border-color: var(--tp-theme-1); } .login__input span { position: absolute; top: 50%; left: 27px; -webkit-transform: translateY(calc(-50% - 3px)); -moz-transform: translateY(calc(-50% - 3px)); -ms-transform: translateY(calc(-50% - 3px)); -o-transform: translateY(calc(-50% - 3px)); transform: translateY(calc(-50% - 3px)); } [dir=rtl] .login__input span { left: auto; right: 27px; } .login__input .password-input { display: block; position: static; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } .login__input .show-password-input { position: absolute; top: 50%; left: auto; right: 22px; -webkit-transform: translate(0%, -50%); -moz-transform: translate(0%, -50%); -ms-transform: translate(0%, -50%); -o-transform: translate(0%, -50%); transform: translate(0%, -50%); z-index: 9; width: 20px; height: 20px; display: inline-block; background-color: transparent; } .login__input .show-password-input::after { position: absolute; content: "\f070"; left: 0; top: -2px; font-size: 16px; color: var(--tp-text-1); font-family: var(--tp-ff-fontawesome); } .login__input .show-password-input.display-password::after { content: "\f06e"; } .login__input .show-password-input:hover { cursor: pointer; } .login__input-item { position: relative; } .login__input-item:not(:last-child) { margin-bottom: 20px; } .login__input-item > span { position: absolute; top: 50%; right: 22px; -webkit-transform: translateY(calc(-50% - 3px)); -moz-transform: translateY(calc(-50% - 3px)); -ms-transform: translateY(calc(-50% - 3px)); -o-transform: translateY(calc(-50% - 3px)); transform: translateY(calc(-50% - 3px)); } [dir=rtl] .login__input-item > span { right: auto; left: 22px; } .login__input-item > span:hover { cursor: pointer; } .login__remember input[type=checkbox], .login__remember input[type=radio] { display: none; } .login__remember input[type=checkbox]:checked ~ label::after, .login__remember input[type=radio]:checked ~ label::after { background-color: transparent; border-color: var(--tp-theme-1); } .login__remember input[type=checkbox]:checked ~ label::before, .login__remember input[type=radio]:checked ~ label::before { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .login__remember label { font-size: 14px; position: relative; padding-left: 30px; } [dir=rtl] .login__remember label { padding-left: 0; padding-right: 30px; } .login__remember label::after, .login__remember label::before { position: absolute; content: ""; left: 0; top: 2px; width: 20px; height: 20px; background-color: var(--tp-common-white); border: 1px solid #EAEAEF; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } [dir=rtl] .login__remember label::after, [dir=rtl] .login__remember label::before { left: auto; right: 0; } .login__remember label::before { width: 14px; height: 14px; background-color: var(--tp-theme-1); left: 3px; top: 5px; right: 3px; bottom: 3px; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); } [dir=rtl] .login__remember label::before { left: auto; right: 3px; } .login__remember label:hover { cursor: pointer; } .login__forgot a { font-size: 14px; color: var(--tp-common-black); text-transform: capitalize; } .login__forgot a:hover { color: var(--tp-theme-1); } .login__btn { margin-bottom: 18px; } .login__btn .tp-btn { font-size: 18px; padding: 17px 30px; } .login__btn .tp-btn:hover { background-color: var(--tp-common-black); } .login__social-header { font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); position: relative; display: inline-block; text-align: center; padding: 0 10px; margin-bottom: 25px; } .login__social-header::after, .login__social-header::before { position: absolute; content: ""; left: 100%; top: 10px; width: 30px; height: 1px; background-color: var(--tp-common-black); } [dir=rtl] .login__social-header::after, [dir=rtl] .login__social-header::before { left: auto; right: 100%; } .login__social-header::before { left: auto; right: 100%; } [dir=rtl] .login__social-header::before { left: 100%; right: auto; } .login__social-item a { display: inline-block; padding: 11px 25px; font-weight: 500; font-size: 14px; background: var(--tp-common-white); border: 1px solid #EAEAEF; margin-bottom: 20px; margin-right: 5px; } [dir=rtl] .login__social-item a { margin-right: 0; margin-left: 5px; } @media (max-width: 575px) { .login__social-item a { width: 100%; margin-right: 0; } [dir=rtl] .login__social-item a { margin-left: 0; } } .login__social-item a:last-child { margin-right: 0; } [dir=rtl] .login__social-item a:last-child { margin-left: 0; } .login__social-item a .login-social-icon { margin-right: 3px; } [dir=rtl] .login__social-item a .login-social-icon { margin-right: 0; margin-left: 3px; } .login__social-item a .login-social-icon svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .login__social-item a:hover { border-color: var(--tp-theme-1); } .login__register-now { text-align: center; } .login__register-now p { font-size: 14px; color: #525258; margin-bottom: 0; } .login__register-now p a { color: var(--tp-theme-1); font-weight: 500; } .login__shape-1 { position: absolute; right: 14%; bottom: 32%; z-index: -1; } .login__shape-2 { position: absolute; right: -1%; bottom: 14%; z-index: -1; } .login__shape-3 { position: absolute; left: 3%; top: 35%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .login__shape-3 { left: -4%; } } .login__shape-4 { position: absolute; left: 18%; bottom: 10%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .login__shape-4 { left: 0%; } } .login__shape-5 { position: absolute; right: 20%; top: 43%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .login__shape-5 { right: 0%; } } .login__shape-6 { position: absolute; right: 22%; top: 27%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .login__shape-6 { right: 1%; } } /*----------------------------------------*/ /* 36. ERROR CSS START /*----------------------------------------*/ .error__title { font-size: 50px; letter-spacing: -0.04em; } @media (max-width: 575px) { .error__title { font-size: 30px; } } .error__content p { font-size: 16px; line-height: 1.6; padding: 0 70px; margin-bottom: 27px; } @media (max-width: 575px) { .error__content p { padding: 0; } } .error__content .tp-btn { padding: 12px 26px; } .error__content .tp-btn:hover { background-color: var(--tp-common-black); } .error__bg { background-image: -webkit-linear-gradient(180deg, #F0F0F5 0%, rgba(240, 240, 245, 0) 82.84%); background-image: -moz-linear-gradient(180deg, #F0F0F5 0%, rgba(240, 240, 245, 0) 82.84%); background-image: -ms-linear-gradient(180deg, #F0F0F5 0%, rgba(240, 240, 245, 0) 82.84%); background-image: -o-linear-gradient(180deg, #F0F0F5 0%, rgba(240, 240, 245, 0) 82.84%); background-image: linear-gradient(180deg, #F0F0F5 0%, rgba(240, 240, 245, 0) 82.84%); } @media (max-width: 575px) { .error__thumb svg { width: 100%; height: auto; } } .error__hair { transform-origin: top center; animation: one 3s cubic-bezier(0.65, 0, 0.35, 1) 0s infinite forwards; } .error__z { animation: note-anim 2s 4.5s infinite linear; animation-fill-mode: forwards; -webkit-animation: note-anim 2s 4.5s infinite linear; -webkit-animation-fill-mode: forwards; } .error__z.z-2 { animation: note-anim 2s 4s infinite linear; animation-fill-mode: forwards; -webkit-animation: note-anim 2s 4s infinite linear; -webkit-animation-fill-mode: forwards; } .error__z.z-3 { animation: note-anim 2s 3.5s infinite linear; animation-fill-mode: forwards; -webkit-animation: note-anim 2s 3.5s infinite linear; -webkit-animation-fill-mode: forwards; } .error__leaves { animation: skew 3s infinite; transform: skew; animation-direction: alternate; transform-origin: bottom center; } .error__leaves-2 { animation: skew-2 3s infinite; transform: skew-2; animation-direction: alternate; transform-origin: bottom center; } .error__leaves-3 { animation: skew-3 3s infinite; transform: skew-3; animation-direction: alternate; transform-origin: bottom center; } .error__leaves-line { animation: skew 3s infinite; transform: skew; animation-direction: alternate; transform-origin: bottom center; } .error__leaves-line-2 { animation: skew-2 3s infinite; transform: skew-2; animation-direction: alternate; transform-origin: bottom center; } .error__leaves-line-3 { animation: skew-3 3s infinite; transform: skew-3; animation-direction: alternate; transform-origin: bottom center; } .error__sm-leaves { animation: skew 3s infinite; transform: skew; animation-direction: alternate; transform-origin: bottom center; } .error__sm-leaves-2 { animation: skew-2 3s infinite; transform: skew-2; animation-direction: alternate; transform-origin: bottom center; } .error__sm-leaves-3 { animation: skew-3 3s infinite; transform: skew-3; animation-direction: alternate; transform-origin: bottom center; } .error__sm-leaves-line { animation: skew 3s infinite; transform: skew; animation-direction: alternate; transform-origin: bottom center; } .error__sm-leaves-line-2 { animation: skew-2 3s infinite; transform: skew-2; animation-direction: alternate; transform-origin: bottom center; } .error__sm-leaves-line-3 { animation: skew-3 3s infinite; transform: skew-3; animation-direction: alternate; transform-origin: bottom center; } .error__text { font-size: 440px; color: var(--tp-common-white); position: absolute; top: 0; left: 0; font-family: var(--tp-ff-inter); font-weight: 600; -webkit-transform: translate(-150px, 0); -moz-transform: translate(-150px, 0); -ms-transform: translate(-150px, 0); -o-transform: translate(-150px, 0); transform: translate(-150px, 0); z-index: -1; } [dir=rtl] .error__text { left: auto; right: 0; -webkit-transform: translate(150px, 0); -moz-transform: translate(150px, 0); -ms-transform: translate(150px, 0); -o-transform: translate(150px, 0); transform: translate(150px, 0); } @media only screen and (min-width: 768px) and (max-width: 991px) { .error__text { -webkit-transform: translate(-98px, 0); -moz-transform: translate(-98px, 0); -ms-transform: translate(-98px, 0); -o-transform: translate(-98px, 0); transform: translate(-98px, 0); font-size: 385px; } [dir=rtl] .error__text { -webkit-transform: translate(98px, 0); -moz-transform: translate(98px, 0); -ms-transform: translate(98px, 0); -o-transform: translate(98px, 0); transform: translate(98px, 0); } } @media only screen and (min-width: 576px) and (max-width: 767px) { .error__text { -webkit-transform: translate(0px, 60px); -moz-transform: translate(0px, 60px); -ms-transform: translate(0px, 60px); -o-transform: translate(0px, 60px); transform: translate(0px, 60px); font-size: 268px; } [dir=rtl] .error__text { -webkit-transform: translate(0px, -60px); -moz-transform: translate(0px, -60px); -ms-transform: translate(0px, -60px); -o-transform: translate(0px, -60px); transform: translate(0px, -60px); } } @media (max-width: 575px) { .error__text { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); font-size: 150px; } } @keyframes one { 0%, 100% { -webkit-transform: rotate(7deg) translateY(23px) translateX(33px); -moz-transform: rotate(7deg) translateY(23px) translateX(33px); -ms-transform: rotate(7deg) translateY(23px) translateX(33px); -o-transform: rotate(7deg) translateY(23px) translateX(33px); transform: rotate(7deg) translateY(23px) translateX(33px); } 30%, 60% { -webkit-transform: rotate(0) translateY(0) translateX(0); -moz-transform: rotate(0) translateY(0) translateX(0); -ms-transform: rotate(0) translateY(0) translateX(0); -o-transform: rotate(0) translateY(0) translateX(0); transform: rotate(0) translateY(0) translateX(0); } } @keyframes note-anim { 0% { -webkit-transform: translate(0, 0) translateZ(0); -moz-transform: translate(0, 0) translateZ(0); -ms-transform: translate(0, 0) translateZ(0); -o-transform: translate(0, 0) translateZ(0); transform: translate(0, 0) translateZ(0); opacity: 1; } 100% { opacity: 0; -webkit-transform: translate(-10px, 0) translateZ(0); -moz-transform: translate(-10px, 0) translateZ(0); -ms-transform: translate(-10px, 0) translateZ(0); -o-transform: translate(-10px, 0) translateZ(0); transform: translate(-10px, 0) translateZ(0); } } @keyframes skew { 0% { transform: skewX(5deg) translate(-7px); } 100% { transform: skewX(-5deg) translate(7px); } } @keyframes skew-2 { 0% { transform: skewX(-10deg) translate(7px); } 100% { transform: skewX(10deg) translate(-7px); } } @keyframes skew-3 { 0% { transform: skewX(-2deg) translate(4px); } 100% { transform: skewX(2deg) translate(-4px); } } /*----------------------------------------*/ /* 37. COMING CSS START /*----------------------------------------*/ .coming__height { min-height: 950px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .coming__height { min-height: 750px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .coming__thumb { padding-top: 60px; padding-bottom: 60px; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .coming__thumb img { width: 100%; } } .coming__countdown { margin-bottom: 17px; } .coming__countdown ul li { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: var(--tp-text-1); line-height: 1; margin-right: 43px; position: relative; } [dir=rtl] .coming__countdown ul li { margin-right: 0; margin-left: 43px; } @media (max-width: 575px) { .coming__countdown ul li { margin-right: 30px; } [dir=rtl] .coming__countdown ul li { margin-right: 0; margin-left: 30px; } } .coming__countdown ul li:last-child { margin-right: 0; } [dir=rtl] .coming__countdown ul li:last-child { margin-left: 0; } .coming__countdown ul li:not(:last-child)::after, .coming__countdown ul li:not(:last-child)::before { position: absolute; content: ""; right: -24px; top: 14px; width: 3px; height: 3px; background-color: #BCC2C6; border-radius: 50%; } [dir=rtl] .coming__countdown ul li:not(:last-child)::after, [dir=rtl] .coming__countdown ul li:not(:last-child)::before { right: auto; left: -24px; } @media (max-width: 575px) { .coming__countdown ul li:not(:last-child)::after, .coming__countdown ul li:not(:last-child)::before { right: -15px; } [dir=rtl] .coming__countdown ul li:not(:last-child)::after, [dir=rtl] .coming__countdown ul li:not(:last-child)::before { right: auto; left: -15px; } } .coming__countdown ul li:not(:last-child)::after { bottom: 14px; top: auto; } .coming__countdown ul li span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 24px; color: var(--tp-common-black); display: block; margin-bottom: 5px; text-transform: capitalize; } .coming__title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .coming__title { font-size: 50px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .coming__title { font-size: 58px; } } @media (max-width: 575px) { .coming__title { font-size: 33px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .coming__content { padding-top: 150px; } } .coming__content p { font-size: 18px; line-height: 1.56; margin-bottom: 42px; padding-right: 135px; } [dir=rtl] .coming__content p { padding-right: 0; padding-left: 135px; } @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) { .coming__content p { padding-right: 0; } [dir=rtl] .coming__content p { padding-left: 0; } } .coming__input { position: relative; margin-right: 120px; margin-bottom: 50px; } [dir=rtl] .coming__input { margin-right: 0; margin-left: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .coming__input { margin-right: 20px; } [dir=rtl] .coming__input { margin-right: 0; margin-left: 20px; } } @media (max-width: 575px) { .coming__input { margin-right: 0; } [dir=rtl] .coming__input { margin-left: 0; } } .coming__input input { width: 100%; height: 60px; background: var(--tp-common-white); border: 1.5px solid #EAEAEF; padding-right: 160px; } [dir=rtl] .coming__input input { padding-right: 25px; padding-left: 160px; } .coming__input input:focus { border-color: var(--tp-theme-1); } .coming__input button { position: absolute; top: 0; right: 0; padding: 17px 38px; } [dir=rtl] .coming__input button { right: auto; left: 0; } @media (max-width: 575px) { .coming__input button { position: relative; margin-top: 15px; } } .coming__input button:hover { background-color: var(--tp-common-black); } .coming__social a { display: inline-block; width: 40px; height: 40px; line-height: 38px; background: var(--tp-common-white); border: 1px solid #EAEAEF; backdrop-filter: blur(30px); border-radius: 25px; text-align: center; margin-right: 3px; } [dir=rtl] .coming__social a { margin-right: 0; margin-left: 3px; } .coming__social a:hover { background-color: var(--tp-theme-1); border-color: transparent; color: var(--tp-common-white); } .coming__shape-1 { position: absolute; left: 0; top: 32%; z-index: -1; -moz-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; animation: tptranslateY2 3s ease-in-out 1s forwards infinite alternate; } [dir=rtl] .coming__shape-1 { left: auto; right: 0; } /*----------------------------------------*/ /* 38. POLICY CSS START /*----------------------------------------*/ .policy__translate { margin-top: -200px; } .policy__meta { font-weight: 500; font-size: 16px; letter-spacing: -0.02em; } .policy__wrapper { padding: 60px 60px 63px; padding-right: 70px; background: var(--tp-common-white); box-shadow: 0px 30px 40px rgba(3, 4, 28, 0.1); } [dir=rtl] .policy__wrapper { padding-right: 60px; padding-left: 70px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .policy__wrapper { padding: 50px 40px; } } @media (max-width: 575px) { .policy__wrapper { padding: 30px 35px; } } .policy__wrapper p { font-size: 16px; line-height: 1.62; margin-bottom: 11px; } .policy__title { font-size: 34px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); } @media (max-width: 575px) { .policy__title { font-size: 25px; } } .policy__list ul li { font-size: 16px; position: relative; padding-left: 15px; list-style: none; } [dir=rtl] .policy__list ul li { padding-left: 0; padding-right: 17px; } .policy__list ul li:not(:last-child) { margin-bottom: 10px; } .policy__list ul li::after { position: absolute; content: ""; left: 0; top: 11px; width: 5px; height: 5px; background-color: var(--tp-text-1); border-radius: 50%; } [dir=rtl] .policy__list ul li::after { left: auto; right: 0; } .policy__contact ul { margin-bottom: 15px; } .policy__contact ul li { list-style: none; font-size: 16px; color: var(--tp-common-black); } .policy__contact ul li:not(:last-child) { margin-bottom: 4px; } .policy__contact ul li span a:hover { color: var(--tp-theme-1); } .policy__address p { font-size: 16px; line-height: 1.5; } .policy__address p a:hover { color: var(--tp-theme-1); } /*----------------------------------------*/ /* 39. HELP CSS START /*----------------------------------------*/ .help__title { font-size: 70px; line-height: 1; letter-spacing: -0.04em; margin-bottom: 12px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .help__title { font-size: 55px; } } @media (max-width: 575px) { .help__title { font-size: 35px; } } .help__content p { font-size: 16px; margin-bottom: 42px; } .help__input { position: relative; } .help__input-box { position: relative; margin-bottom: 35px; } .help__input-box button { position: absolute; top: 0; right: 0; padding: 22px 43px; } [dir=rtl] .help__input-box button { right: auto; left: 0; } @media (max-width: 575px) { .help__input-box button { position: relative; margin-top: 15px; } } .help__input-box button:hover { background-color: var(--tp-common-black); } .help__input input { width: 100%; height: 70px; padding-left: 60px; padding-right: 167px; background-color: var(--tp-common-white); border: 1px solid var(--tp-common-white); box-shadow: -3px 0px 0px var(--tp-theme-1), 0px 1px 2px rgba(3, 4, 28, 0.14); outline: 0; } [dir=rtl] .help__input input { padding-left: 167px; padding-right: 60px; } @media (max-width: 575px) { .help__input input { padding-right: 25px; } [dir=rtl] .help__input input { padding-right: 0; padding-left: 25px; } } .help__input span { position: absolute; top: 50%; left: 30px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-size: 18px; color: #A0A0B5; } [dir=rtl] .help__input span { left: auto; right: 30px; } .help__input span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .help__features-item { margin-right: 50px; margin-bottom: 30px; } [dir=rtl] .help__features-item { margin-right: 10p0x; margin-left: 50px; } .help__features-item:last-child { margin-right: 0; } [dir=rtl] .help__features-item:last-child { margin-left: 0; } .help__features-icon span { margin-right: 13px; display: inline-block; background-color: var(--tp-common-white); box-shadow: 0px 2px 4px rgba(3, 4, 28, 0.1); border-radius: 30px; height: 54px; width: 54px; line-height: 54px; text-align: center; color: var(--tp-common-black); } [dir=rtl] .help__features-icon span { margin-right: 0; margin-left: 13px; } .help__features-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .help__features-content p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 1; margin-bottom: 3px; } .help__features-title { font-weight: 500; font-size: 16px; line-height: 1; color: var(--tp-common-black-solid); margin-bottom: 0; } /*----------------------------------------*/ /* 40. ARTICLE CSS START /*----------------------------------------*/ .articles__item { padding: 35px 40px; min-height: 450px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .articles__item { padding: 25px 25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .articles__item { padding: 20px; } } @media (max-width: 575px) { .articles__item { padding: 30px 20px; } } .articles__item-sm { min-height: 290px; } .articles__thumb img { position: absolute; bottom: 0; right: 0; width: 100%; mix-blend-mode: overlay; z-index: -1; } [dir=rtl] .articles__thumb img { right: auto; left: 0; } .articles__thumb img.has-opacity-6 { opacity: 0.6; } .articles__title { font-size: 30px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 15px; margin-right: 10px; } [dir=rtl] .articles__title { margin-right: 0; margin-left: 10px; } .articles__number { margin-bottom: 15px; display: inline-block; font-weight: 500; font-size: 13px; line-height: 1; color: rgba(255, 255, 255, 0.7); background-color: #3F40B7; padding: 5px 12px; } .articles__content p { font-weight: 500; font-size: 14px; line-height: 1.43; color: rgba(255, 255, 255, 0.9); } .articles__icon { position: absolute; right: 40px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .articles__icon { right: auto; left: 40px; } @media (max-width: 575px) { .articles__icon { right: 20px; } [dir=rtl] .articles__icon { right: auto; left: 20px; } } .articles__icon span { font-size: 50px; color: var(--tp-common-khaki-4); } .articles__icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } @media only screen and (min-width: 768px) and (max-width: 991px) { .articles__icon span { opacity: 0.4; } } .articles__style-2 { min-height: 130px; padding-right: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .articles__style-2 { padding: 20px; padding-right: 35px; } } @media (max-width: 575px) { .articles__style-2 { padding-right: 15px; } } .articles__style-2 .articles__title { color: var(--tp-common-black); } .articles__style-2 .articles__number { background-color: var(--tp-common-khaki-3); color: var(--tp-text-1); } .articles__style-2 .articles__content p { color: rgba(82, 82, 88, 0.9); margin-bottom: -4px; } /*----------------------------------------*/ /* 41. BANNER CSS START /*----------------------------------------*/ .banner__inner { padding: 100px 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .banner__inner { padding: 100px 70px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .banner__inner { padding: 60px 60px; background-position: left; } [dir=rtl] .banner__inner { background-position: right; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .banner__inner { padding: 45px; background-position: left; } [dir=rtl] .banner__inner { background-position: right; } } @media (max-width: 575px) { .banner__inner { padding: 35px; background-position: left; } [dir=rtl] .banner__inner { background-position: right; } } .banner__title { font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 44px; line-height: 1.09; margin-bottom: 21px; } @media (max-width: 575px) { .banner__title { font-size: 28px; } } .banner__title a:hover { color: var(--tp-theme-1); } .banner__content > span { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; color: var(--tp-text-1); display: inline-block; margin-bottom: 7px; } .banner__content p { font-family: var(--tp-ff-roboto); font-style: normal; font-size: 16px; line-height: 17px; margin-bottom: 35px; } .banner__content p span { font-weight: 700; font-size: 24px; color: var(--tp-common-black); } .banner__btn .tp-btn { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 14px; background-color: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.1); color: var(--tp-common-black); padding: 9px 25px; } .banner__btn .tp-btn:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .banner__btn .tp-btn svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } /*----------------------------------------*/ /* 42. PROFILE CSS START /*----------------------------------------*/ @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px) { .profile__tab { margin-right: 0; margin-bottom: 50px; } } .profile__tab .nav-tabs { background-color: var(--tp-common-white); padding: 0; border: 0; margin: 0; box-shadow: 0px 30px 50px rgba(5, 47, 40, 0.12); } .profile__tab .nav-tabs .nav-link { font-weight: 500; font-size: 15px; color: var(--tp-text-1); padding: 14px 30px; background-color: var(--tp-common-white); position: relative; border-radius: 0; text-align: left; border: 0; } [dir=rtl] .profile__tab .nav-tabs .nav-link { text-align: right; } .profile__tab .nav-tabs .nav-link span { margin-right: 7px; } [dir=rtl] .profile__tab .nav-tabs .nav-link span { margin-right: 0; margin-left: 7px; } .profile__tab .nav-tabs .nav-link.active { color: var(--tp-theme-1); background-color: rgba(245, 9, 99, 0.06); } .profile__tab .nav-tabs .nav-link.active:hover { background-color: rgba(245, 9, 99, 0.06); } .profile__tab .nav-tabs .nav-link:hover { background-color: var(--tp-grey-16); } .profile__tab .tp-tab-menu { position: relative; } .profile__tab .tp-tab-line { position: absolute; content: ""; left: 0; bottom: -1px; width: 2px; height: auto; background-color: var(--tp-theme-3); } [dir=rtl] .profile__tab .tp-tab-line { left: auto; right: 0; } .profile__tab-content { padding: 25px 30px 30px; background-color: var(--tp-common-white); box-shadow: 0px 30px 50px rgba(5, 47, 40, 0.12); } .profile__info-title { font-size: 20px; margin-bottom: 25px; } .profile__input { margin-bottom: 25px; position: relative; } .profile__input-box h4 { font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 10px; } .profile__input-box h4 span { color: var(--tp-theme-1); } .profile__input-box p { font-size: 13px; color: var(--tp-common-white); opacity: 0.7; margin-bottom: 10px; } .profile__input > span { position: absolute; top: 50%; left: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .profile__input > span { left: auto; right: 20px; } .profile__input > span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .profile__input input, .profile__input textarea { width: 100%; height: 60px; line-height: 60px; padding: 0 25px; padding-left: 50px; border: 0; outline: 0; border: 1px solid #EAEAEF; background-color: var(--tp-common-white); color: var(--tp-common-black); } [dir=rtl] .profile__input input, [dir=rtl] .profile__input textarea { padding-left: 25px; padding-right: 50px; } .profile__input input:focus, .profile__input textarea:focus { border-color: var(--tp-theme-1); } .profile__input textarea { line-height: 1.5; padding: 20px; resize: none; height: 200px; resize: none; } .profile__input .nice-select { width: 100%; float: none; height: 60px; border: 1px solid #EAEAEF; border-radius: 0; line-height: 58px; padding-left: 27px; } [dir=rtl] .profile__input .nice-select { padding-left: 0; padding-right: 27px; } .profile__input .nice-select .current { color: var(--tp-common-black); } .profile__input .nice-select::after { right: 25px; color: var(--tp-common-black); } [dir=rtl] .profile__input .nice-select::after { left: 25px; right: auto; } .profile__input .nice-select .list { width: 100%; border-radius: 0; margin-top: 0; padding: 13px 8px; } .profile__input .nice-select .list .option:hover { color: var(--tp-common-black); } .profile__password input { padding: 0 20px; } .profile__ticket { border: 1px solid #EAEAEF; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .profile__ticket { overflow-x: scroll; } } .profile__ticket table thead tr { background-color: transparent; } .profile__ticket table th { color: var(--tp-common-black); border-color: #EAEAEF; box-shadow: none; } .profile__ticket table td { color: var(--tp-common-black); } .profile__ticket table tbody > tr:first-child { background-color: transparent; } .profile__ticket table tbody > tr:not(:last-child) { border-bottom: 1px solid #EAEAEF; } .profile__ticket table tbody > tr td, .profile__ticket table tbody > tr th { color: var(--tp-common-black); vertical-align: middle; } .profile__ticket table tbody > tr > th { padding-left: 15px; padding-right: 15px; } .profile__ticket table tbody > tr th[scope=row] { color: var(--tp-theme-1); } .profile__ticket table tbody > tr td[data-info="status done"] { color: var(--tp-common-green-2); } .profile__ticket table tbody > tr td[data-info="status pending"] { color: var(--tp-common-purple); } .profile__ticket table tbody > tr td[data-info="status reply"] { color: var(--tp-common-brown-dark-2); } .profile__ticket table tbody > tr td[data-info="status hold"] { color: var(--tp-common-yellow); } .profile__ticket table tbody > tr .tp-btn { padding: 7px 18px; background-color: var(--tp-grey-1); color: var(--tp-common-black); font-weight: 500; min-width: 90px; } .profile__ticket table tbody > tr .tp-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .profile__ticket .table { margin-bottom: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .profile__ticket .table { width: 700px; } } .profile__ticket .table > :not(:first-child) { border-color: #EAEAEF; border-top-width: 1px; } .profile__ticket .table > :not(caption) > * > * { padding: 1rem 1.5rem; border: 0; box-shadow: none; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .profile__address-item { margin-bottom: 40px; } } .profile__address-title { font-size: 22px; margin-bottom: 20px; } .profile__address-icon span { display: inline-block; min-width: 45px; margin-right: 20px; } [dir=rtl] .profile__address-icon span { margin-right: 0; margin-left: 20px; } @media (max-width: 575px) { .profile__address-icon span { margin-bottom: 20px; } } .profile__address-icon span svg { width: 45px; } .profile__address-icon span svg path { fill: var(--tp-theme-1); } .profile__address-content p { font-size: 14px; margin-bottom: 10px; } .profile__address-content p span { color: var(--tp-common-black); font-weight: 500; margin-right: 7px; } [dir=rtl] .profile__address-content p span { margin-right: 0; margin-left: 7px; } .profile__notification-title { font-size: 24px; color: var(--tp-common-black); margin-bottom: 10px; } .profile__notification-item .form-check-input { margin-top: 0; width: 40px; height: 20px; box-shadow: none; } .profile__notification-item .form-check-label { font-size: 16px; color: var(--tp-common-black); margin-left: 10px; } [dir=rtl] .profile__notification-item .form-check-label { margin-left: 0; margin-right: 10px; } .profile__notification-item .form-check-label:hover { cursor: pointer; color: var(--tp-common-black); } .profile__notification-item .form-check-input:checked { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .profile__btn .tp-btn { padding: 14px 39px; } .profile__btn .tp-btn:hover { background-color: var(--tp-common-black); } @media (max-width: 575px) { .profile__main-inner { margin-bottom: 20px; } } .profile__main-thumb { position: relative; } .profile__main-thumb img { width: 80px; height: 80px; border-radius: 50%; margin-right: 16px; } [dir=rtl] .profile__main-thumb img { margin-right: 0; margin-left: 16px; } @media (max-width: 575px) { .profile__main-thumb img { margin-bottom: 20px; } } .profile__main-thumb-edit input { display: none; } .profile__main-thumb-edit label { position: absolute; bottom: 8px; right: 8px; color: var(--tp-common-white); width: 30px; height: 30px; line-height: 24px; border: 2px solid var(--tp-common-white); text-align: center; background-color: var(--tp-theme-1); -webkit-border-radius: 50%; -moz-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; border-radius: 50%; } [dir=rtl] .profile__main-thumb-edit label { right: 0; bottom: 0; } .profile__main-thumb-edit label i { margin-left: 2px; } .profile__main-thumb-edit label:hover { cursor: pointer; color: var(--tp-common-white); background-color: var(--tp-common-black); } .profile__main-title { font-size: 24px; margin-bottom: 0; } .profile__main-content p { font-size: 14px; margin-bottom: 0; } .profile__main-content p span { color: var(--tp-theme-1); font-weight: 500; } .profile__main-info-item { border: 1px solid #EAEAEF; text-align: center; padding: 27px 30px 25px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .profile__main-info-item { margin-bottom: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .profile__main-info-item { padding: 22px 0 20px; } } .profile__main-info-icon { position: relative; margin-bottom: 15px; } .profile__main-info-icon > span { position: relative; display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; } .profile__main-info-icon > span svg { width: 60px; } .profile__main-info-icon > span svg path { fill: var(--tp-common-black); } .profile__main-info-icon .profile-icon-count { position: absolute; top: 2px; right: -8px; width: 25px; height: 25px; line-height: 20px; border: 2px solid var(--tp-common-white); background-color: var(--tp-theme-1); color: var(--tp-common-white); border-radius: 50%; font-size: 13px; font-weight: 500; } [dir=rtl] .profile__main-info-icon .profile-icon-count { right: auto; left: -8px; } .profile__main-info-title { font-size: 18px; margin-bottom: 0; } @media (max-width: 575px), only screen and (min-width: 576px) and (max-width: 767px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1600px) and (max-width: 1699px) { .profile__shape { display: none; } } .profile__shape-1 { position: absolute; right: -10%; bottom: 32%; z-index: -1; } .profile__shape-2 { position: absolute; right: -19%; bottom: 14%; z-index: -1; } .profile__shape-3 { position: absolute; left: -12%; top: 12%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile__shape-3 { left: -4%; } } .profile__shape-4 { position: absolute; left: -7%; bottom: 10%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile__shape-4 { left: 0%; } } .profile__shape-5 { position: absolute; right: -20%; top: 43%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile__shape-5 { right: 0%; } } .profile__shape-6 { position: absolute; right: -4%; top: 9%; z-index: -1; } @media only screen and (min-width: 768px) and (max-width: 991px) { .profile__shape-6 { right: 1%; } } /*----------------------------------------*/ /* 43. BLOG CSS START /*----------------------------------------*/ .blog__section-title-7 .section__title-wrapper-7 > p { font-family: var(--tp-ff-inter); font-size: 20px; line-height: 1.5; color: #525258; } .blog__border-7 .row [class*=col-]:last-child .blog__item-7::after { display: none; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__border-7 .row [class*=col-]:nth-child(2n) .blog__item-7::after { display: none; } } .blog__item { padding: 20px 20px; position: relative; } .blog__item:hover { box-shadow: 0px 20px 40px rgba(3, 4, 28, 0.1); z-index: 1; } .blog__item-2 { box-shadow: 0px 6px 0px #EFEFEF, 0px 1px 2px rgba(22, 34, 19, 0.1); } .blog__item-2:hover { box-shadow: 0px 30px 50px rgba(22, 34, 19, 0.1), 0px 6px 0px #008080; } .blog__item-2:hover .blog__thumb-2 img { -webkit-transform: scale(1.17) rotate(6deg); -moz-transform: scale(1.17) rotate(6deg); -ms-transform: scale(1.17) rotate(6deg); -o-transform: scale(1.17) rotate(6deg); transform: scale(1.17) rotate(6deg); } .blog__item-4 { margin-bottom: 70px; box-shadow: 0px 20px 30px rgba(3, 4, 28, 0.1); visibility: hidden; opacity: 0; transition-duration: 0.5s; } @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) { .blog__item-4 { visibility: visible; opacity: 1; } } .blog__item-4.swiper-slide-prev, .blog__item-4.swiper-slide-active, .blog__item-4.swiper-slide-next { visibility: visible; opacity: 1; } .blog__item-5 { border-radius: 10px; border: 1px solid rgba(3, 4, 28, 0.1); overflow: hidden; background-color: var(--tp-common-white); position: relative; } .blog__item-6 { position: relative; padding-top: 25px; padding-bottom: 15px; border-bottom: 1px solid rgba(13, 18, 30, 0.1); } .blog__item-6:first-child { border-top: 1px solid rgba(13, 18, 30, 0.1); } .blog__item-6:hover .blog__thumb-6 { visibility: visible; opacity: 1; -webkit-transform: scale(1) rotate(-13deg); -moz-transform: scale(1) rotate(-13deg); -ms-transform: scale(1) rotate(-13deg); -o-transform: scale(1) rotate(-13deg); transform: scale(1) rotate(-13deg); } .blog__item-7 { position: relative; } .blog__item-7::after { position: absolute; content: ""; right: -30px; top: 0; width: 1px; height: 100%; background-color: rgba(4, 18, 31, 0.1019607843); } [dir=rtl] .blog__item-7::after { right: auto; left: -30px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__item-7::after { right: -25px; } [dir=rtl] .blog__item-7::after { right: auto; left: -25px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__item-7::after { right: -15px; } [dir=rtl] .blog__item-7::after { right: auto; left: -15px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__item-7::after { display: none; } } .blog__item-7:hover .blog__thumb-7::after { -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, 150%, 0); } div.blog__item-8 { height: 500px; } div.blog__item-8:hover .blog__thumb-8 { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .blog__item-9:hover .blog__thumb-9 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .blog__item-10 { border: 0; border-radius: 14px; } .blog__item-10:hover .blog__thumb-10 img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__item-10-wrapper { margin: 0 -10px; } } .blog__item-10-sm { margin-bottom: 12px; border: 2px solid #EAEAEF; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__item-10-sm { margin: 0 10px; margin-bottom: 12px; } } .blog__item-10-sm:hover { border-color: var(--tp-theme-10); } .blog__item-10-sm:last-child { bottom: 0; } .blog__item-10-sm .blog__content-10 { border: 0; } .blog__item-10-sm .blog__content-10-top { padding: 19px 22px 0; } .blog__item-10-sm .blog__content-10-bottom { padding: 14px 22px 13px; padding-top: 0; border-top: 0; } .blog__item-10-overlay { position: relative; height: 511px; border: 0; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__item-10-overlay { height: 605px; } } .blog__item-10-overlay:hover .blog__thumb-10 { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .blog__item-10-overlay .blog__thumb-10 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } [dir=rtl] .blog__item-10-overlay .blog__thumb-10 { left: auto; right: 0; } .blog__item-10-overlay .blog__thumb-10::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(180deg, rgba(3, 4, 28, 0) 0%, rgba(3, 4, 28, 0.4) 58.32%, #03041C 100%); background-image: -moz-linear-gradient(180deg, rgba(3, 4, 28, 0) 0%, rgba(3, 4, 28, 0.4) 58.32%, #03041C 100%); background-image: -ms-linear-gradient(180deg, rgba(3, 4, 28, 0) 0%, rgba(3, 4, 28, 0.4) 58.32%, #03041C 100%); background-image: -o-linear-gradient(180deg, rgba(3, 4, 28, 0) 0%, rgba(3, 4, 28, 0.4) 58.32%, #03041C 100%); background-image: linear-gradient(180deg, rgba(3, 4, 28, 0) 0%, rgba(3, 4, 28, 0.4) 58.32%, #03041C 100%); } [dir=rtl] .blog__item-10-overlay .blog__thumb-10::after { left: auto; right: 0; } .blog__item-10-overlay .blog__content-10 { position: absolute; bottom: 25px; left: 0; right: 0; z-index: 1; padding: 0 22px; border: 0; border-radius: 0; } @media (max-width: 575px) { .blog__item-10-overlay .blog__content-10 { padding: 0; } } .blog__item-10-overlay .blog__content-10-bottom { border-top: 2px; padding-top: 1px; } .blog__item-10-overlay .blog__tag-10 a { border-color: rgba(255, 255, 255, 0.2); color: var(--tp-common-white); } .blog__item-10-overlay .blog__tag-10 a:hover { background-color: var(--tp-common-white); border-color: var(--tp-common-white); color: var(--tp-common-black-11); } .blog__item-10-overlay .blog__meta-10 span { color: var(--tp-common-white); } .blog__item-10-overlay .blog__meta-10 span a:hover { color: var(--tp-common-white); } .blog__item-10-overlay .blog__meta-10.blog-meta-10-2 span { color: var(--tp-common-white); } .blog__item-10-overlay .blog__meta-author-content-10::after { background-color: var(--tp-common-white); } .blog__item-10-overlay .blog__meta-author-content-10 span { color: var(--tp-common-white); } .blog__item-10-overlay .blog__meta-author-content-10 span a { color: var(--tp-common-white); } .blog__item-10-overlay .blog__title-10 { color: var(--tp-common-white); font-size: 34px; line-height: 1; } .blog__item-10-overlay .blog__title-10 a { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .blog__item-10-overlay .blog__title-10 a:hover { color: var(--tp-common-white); background-size: 0 2px, 100% 2px; } .blog__title { font-size: 22px; font-family: var(--tp-ff-space); margin-bottom: 17px; line-height: 1.15; } @media (max-width: 575px) { .blog__title { font-size: 20px; } } .blog__title a:hover { color: var(--tp-theme-1); } .blog__title-2 { font-size: 24px; font-weight: 500; opacity: 0.9; font-family: var(--tp-ff-oswald); margin-bottom: 17px; } .blog__title-2 a { opacity: 1; } .blog__title-2 a:hover { color: var(--tp-theme-2); } .blog__title-4 { font-family: var(--tp-ff-space); font-size: 23px; letter-spacing: -0.02em; } .blog__title-4 a:hover { color: var(--tp-theme-4); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .blog__title-4 { font-size: 22px; } } .blog__title-5 { font-family: var(--tp-ff-space); font-size: 24px; letter-spacing: -0.03em; } .blog__title-5 a:hover { color: var(--tp-theme-5); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__title-5 { font-size: 22px; } } .blog__title-6 { padding-left: 50px; font-weight: 700; font-size: 22px; line-height: 26px; color: var(--tp-common-black-9); font-family: var(--tp-ff-roboto); } [dir=rtl] .blog__title-6 { padding-left: 0; padding-right: 50px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .blog__title-6 { padding-left: 0; margin-bottom: 15px; } [dir=rtl] .blog__title-6 { padding-right: 0; } } @media (max-width: 575px) { .blog__title-6 { padding-left: 0; margin-bottom: 20px; } [dir=rtl] .blog__title-6 { padding-right: 0; } .blog__title-6 br { display: none; } } .blog__title-6 a:hover { color: var(--tp-theme-6); } .blog__title-7 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.01em; color: var(--tp-common-black-11); margin-bottom: 9px; } .blog__title-7 a:hover { color: var(--tp-theme-7); } .blog__title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 30px; line-height: 1.13; letter-spacing: -0.04em; color: var(--tp-common-white); } @media (max-width: 575px) { .blog__title-8 { font-size: 24px; } } .blog__title-8 a { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .blog__title-8 a:hover { background-size: 0 1px, 100% 1px; } .blog__title-9 { font-family: var(--tp-ff-syne); font-weight: 700; font-size: 26px; line-height: 1.23; color: var(--tp-common-black); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__title-9 br { display: none; } } .blog__title-9 a { background-image: linear-gradient(#03041C, #03041C), linear-gradient(#03041C, #03041C); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 100%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .blog__title-9 a:hover { background-size: 0 2px, 100% 2px; } .blog__title-10 { font-size: 20px; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 13px; } .blog__title-10 a:hover { color: var(--tp-theme-10); } .blog__tag a { font-size: 12px; font-weight: 500; color: var(--tp-text-1); display: inline-block; padding: 0 16px; border: 2px solid var(--tp-border-5); font-family: var(--tp-ff-space); text-transform: uppercase; margin-right: 5px; margin-bottom: 12px; } [dir=rtl] .blog__tag a { margin-right: 0; margin-left: 5px; } .blog__tag a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .blog__tag-2 { margin-bottom: 12px; } .blog__tag-2 a { display: inline-block; padding: 0px 11px; font-size: 14px; font-weight: 600; font-family: var(--tp-ff-inter); color: var(--tp-theme-2); background-color: rgba(0, 128, 128, 0.1); } .blog__tag-2 a:hover { background-color: var(--tp-theme-2); color: var(--tp-common-white); } .blog__tag-4 { margin-bottom: 12px; } .blog__tag-4 a { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; color: var(--tp-theme-4); background-color: rgba(171, 108, 86, 0.1019607843); padding: 1px 13px; } .blog__tag-4 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4); } .blog__tag-5 { margin-bottom: 11px; } .blog__tag-5 a { display: inline-block; padding: 0 17px 1px; background-color: rgba(244, 106, 53, 0.1); color: var(--tp-common-orange); font-family: var(--tp-ff-inter); font-weight: 500; border-radius: 20px; } .blog__tag-5 a:hover { color: var(--tp-common-white); background-color: var(--tp-common-orange); } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__tag-6 { margin-bottom: 15px; } } .blog__tag-6 a { display: inline-block; color: var(--tp-text-18); font-family: var(--tp-ff-roboto); } .blog__tag-6 a i, .blog__tag-6 a svg { margin-right: 5px; } [dir=rtl] .blog__tag-6 a i, [dir=rtl] .blog__tag-6 a svg { margin-right: 0; margin-left: 5px; } .blog__tag-6 a:hover { color: var(--tp-theme-6); } .blog__tag-7 a { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-theme-7); position: relative; padding-right: 18px; margin-right: 20px; } [dir=rtl] .blog__tag-7 a { padding-right: 0; margin-right: 0; padding-left: 18px; margin-left: 20px; } .blog__tag-7 a::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 21px; background-color: rgba(4, 18, 31, 0.2); } [dir=rtl] .blog__tag-7 a::after { right: auto; left: 0; } .blog__tag-7 a:hover { color: var(--tp-common-black-11); } .blog__tag-8 { position: absolute; top: 20px; right: 25px; } [dir=rtl] .blog__tag-8 { right: auto; left: 25px; } .blog__tag-8 a { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; line-height: 18px; color: var(--tp-common-black-12); padding: 4px 13px 5px; background-color: var(--tp-common-white); } .blog__tag-8 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); } [dir=rtl] .blog__tag-10 { margin-right: 0; margin-left: 10px; } .blog__tag-10 a { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; color: var(--tp-common-purple-7); display: inline-block; border: 1px solid rgba(82, 83, 206, 0.1215686275); border-radius: 6px; line-height: 1; padding: 3px 11px; } .blog__tag-10 a:hover { color: var(--tp-common-white); background-color: var(--tp-common-purple-7); border-color: var(--tp-common-purple-7); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__content { padding-top: 25px; } } .blog__content-2 { padding: 40px 40px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content-2 { padding-left: 35px; padding-right: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__content-2 { padding-left: 25px; padding-right: 25px; } } @media (max-width: 575px) { .blog__content-2 { padding-left: 20px; padding-right: 20px; } } .blog__content-2 > p { font-size: 15px; color: var(--tp-text-6); margin-bottom: 30px; } .blog__content-4 { padding-top: 30px; padding-right: 40px; margin-left: -10px; } .blog__content-4.no-thumbnail { margin-left: 0; padding-left: 40px; } [dir=rtl] .blog__content-4 { padding-right: 0; margin-left: 0; padding-left: 40px; margin-right: -10px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content-4 { padding-right: 30px; } [dir=rtl] .blog__content-4 { padding-right: 0; padding-left: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__content-4 { padding-right: 30px; margin-left: -15px; } [dir=rtl] .blog__content-4 { padding-right: 0; padding-left: 15px; margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog__content-4 { margin-left: -30px; padding-right: 25px; } [dir=rtl] .blog__content-4 { margin-left: 0; margin-right: -30px; } } @media (max-width: 575px) { .blog__content-4 { margin-left: 0; padding-left: 30px; padding-right: 30px; } [dir=rtl] .blog__content-4 { margin-right: 0; } } .blog__content-4 p { font-family: var(--tp-ff-inter); font-size: 16px; letter-spacing: -0.04em; margin-bottom: 15px; } .blog__content-5 { padding: 46px 50px 48px 20px; } .blog__content-5.blog__content-5-padding { padding: 46px 50px 48px 35px; } [dir=rtl] .blog__content-5.blog__content-5-padding { padding-left: 50px; padding-right: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content-5.blog__content-5-padding { padding: 23px 30px 22px 25px; } [dir=rtl] .blog__content-5.blog__content-5-padding { padding: 23px 35px 22px 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) { .blog__content-5.blog__content-5-padding { padding: 40px 30px; } [dir=rtl] .blog__content-5.blog__content-5-padding { padding: 40px 30px; } } @media (max-width: 575px) { .blog__content-5.blog__content-5-padding { padding: 20px 15px; } [dir=rtl] .blog__content-5.blog__content-5-padding { padding: 20px 20px; } } [dir=rtl] .blog__content-5 { padding-left: 60px; padding-right: 20px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content-5 { padding: 23px 30px 22px 30px; } [dir=rtl] .blog__content-5 { padding: 23px 30px 22px 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) { .blog__content-5 { padding: 40px 30px; } [dir=rtl] .blog__content-5 { padding: 40px 30px; } } @media (max-width: 575px) { .blog__content-5 { padding: 20px 15px; } [dir=rtl] .blog__content-5 { padding: 20px 15px; } } .blog__content-5 p { font-family: var(--tp-ff-inter); font-size: 16px; letter-spacing: -0.02em; line-height: 22px; margin-bottom: 15px; } .blog__content-6 { padding-left: 55px; padding-right: 35px; } [dir=rtl] .blog__content-6 { padding-right: 55px; padding-left: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) { .blog__content-6 { padding-left: 0; } [dir=rtl] .blog__content-6 { padding-right: 0; } } @media (max-width: 575px) { .blog__content-6 { padding-left: 0; padding-right: 0; } } .blog__content-6 > p { font-size: 15px; line-height: 22px; color: var(--tp-text-18); margin-bottom: 70px; font-family: var(--tp-ff-roboto); } .blog__content-7 > p { font-family: var(--tp-ff-inter); font-size: 15px; line-height: 1.6; letter-spacing: -0.01em; margin-bottom: 23px; } .blog__content-8 { position: absolute; bottom: 35px; left: 0; padding: 0 50px; padding-right: 40px; } [dir=rtl] .blog__content-8 { left: auto; right: 0; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content-8 { padding-left: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__content-8 { bottom: 30px; padding: 0 30px; } } @media (max-width: 575px) { .blog__content-8 { bottom: 15px; padding: 0 20px; } } .blog__content-9 { padding-top: 25px; } .blog__content-top-7 { margin-bottom: 18px; } .blog__content-10 { border: 2px solid #EAEAEF; border-top: 0; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; } .blog__content-10 p { font-family: var(--tp-ff-space); font-size: 15px; line-height: 1.47; color: var(--tp-text-1); margin-bottom: 69px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__content-10 p { margin-bottom: 9px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__content-10 p { margin-bottom: 23px; } } .blog__content-10-top { padding: 25px 22px 0; } .blog__content-10-bottom { padding: 14px 22px 13px; border-top: 1px solid #EAEAEF; } .blog__meta { border-top: 1px solid var(--tp-border-7); padding-top: 10px; } .blog__meta span { font-size: 14px; color: var(--tp-text-1); font-family: var(--tp-ff-inter); position: relative; padding-right: 10px; margin-right: 9px; display: inline-block; } [dir=rtl] .blog__meta span { padding-right: 0; margin-right: 0; margin-left: 6px; padding-left: 8px; } .blog__meta span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .blog__meta span::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); height: 100%; width: 1px; background-color: var(--tp-border-6); } [dir=rtl] .blog__meta span::after { left: 0; right: auto; } .blog__meta span:last-child { margin-right: 0; padding-right: 0; } [dir=rtl] .blog__meta span:last-child { margin-left: 0; padding-left: 0; } .blog__meta span:last-child::after { display: none; } .blog__meta span a:hover { color: var(--tp-theme-1); } .blog__meta-2 { position: absolute; top: 20px; right: 20px; background-color: var(--tp-common-white); padding: 10px 16px; } [dir=rtl] .blog__meta-2 { right: auto; left: 20px; } .blog__meta-2 h4 { font-size: 20px; font-weight: 600; font-family: var(--tp-ff-oswald); margin-bottom: 0; } .blog__meta-2 h4 span { font-size: 13px; font-weight: 500; color: var(--tp-text-6); display: block; font-family: var(--tp-ff-inter); } .blog__meta-4 { padding-top: 12px; padding-bottom: 12px; border-top: 1px solid rgba(3, 4, 28, 0.1019607843); } .blog__meta-4 span { font-size: 14px; color: var(--tp-text-1); font-family: var(--tp-ff-inter); } .blog__meta-4 span a:hover { color: var(--tp-theme-4); } .blog__meta-4 span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .blog__meta-5 { margin-bottom: 20px; } .blog__meta-5 span { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 13px; color: var(--tp-text-14); margin-right: 13px; } [dir=rtl] .blog__meta-5 span { margin-right: 0; margin-left: 13px; } .blog__meta-5 span i { margin-right: 3px; } [dir=rtl] .blog__meta-5 span i { margin-right: 0; margin-left: 3px; } .blog__meta-5 span:last-child { margin-right: 0; } [dir=rtl] .blog__meta-5 span:last-child { margin-left: 0; } .blog__meta-5 span a:hover { color: var(--tp-theme-5); } .blog__meta-6 span { display: inline-block; font-weight: 500; font-size: 14px; color: var(--tp-text-21); margin-right: 13px; font-family: var(--tp-ff-roboto); } [dir=rtl] .blog__meta-6 span { margin-right: 0; margin-left: 13px; } .blog__meta-6 span i { margin-right: 3px; color: var(--tp-text-18); } [dir=rtl] .blog__meta-6 span i { margin-right: 0; margin-left: 3px; } .blog__meta-6 span:last-child { margin-right: 0; } [dir=rtl] .blog__meta-6 span:last-child { margin-left: 0; } .blog__meta-6 span a:hover { color: var(--tp-theme-5); } .blog__meta-7 span { font-family: var(--tp-ff-inter); font-size: 14px; margin-right: 15px; } [dir=rtl] .blog__meta-7 span { margin-right: 0; margin-left: 15px; } .blog__meta-7 span i { margin-right: 3px; color: var(--tp-text-1); } [dir=rtl] .blog__meta-7 span i { margin-left: 3px; margin-right: 0; } .blog__meta-7 span:last-child { margin-right: 0; } [dir=rtl] .blog__meta-7 span:last-child { margin-left: 0; } .blog__meta-7 span a:hover { color: var(--tp-theme-7); } .blog__meta-8 { margin-bottom: 8px; } .blog__meta-8 span { font-family: var(--tp-ff-space); font-size: 14px; padding-right: 16px; margin-right: 18px; color: var(--tp-common-white); position: relative; display: inline-block; } [dir=rtl] .blog__meta-8 span { padding-right: 0; margin-right: 0; padding-left: 16px; margin-left: 18px; } .blog__meta-8 span::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 2px; height: 100%; background-color: rgba(255, 255, 255, 0.3); } [dir=rtl] .blog__meta-8 span::after { left: 0; right: auto; } .blog__meta-8 span.blog-category { font-weight: 500; text-transform: uppercase; } .blog__meta-8 span i { margin-right: 3px; color: var(--tp-common-white); } [dir=rtl] .blog__meta-8 span i { margin-right: 0; margin-left: 3px; } .blog__meta-8 span:last-child { margin-right: 0; padding-right: 0; } .blog__meta-8 span:last-child::after { display: none; } .blog__meta-8 span a:hover { color: var(--tp-theme-8); } .blog__meta-9 { margin-bottom: 5px; } .blog__meta-9 span { font-family: var(--tp-ff-syne); font-weight: 500; font-size: 14px; line-height: 12px; letter-spacing: 0.02em; color: #525258; position: relative; padding-right: 20px; margin-right: 8px; display: inline-block; } [dir=rtl] .blog__meta-9 span { padding-right: 0; margin-right: 0; padding-left: 20px; margin-left: 8px; } .blog__meta-9 span::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 14px; height: 1px; background-color: #525258; } [dir=rtl] .blog__meta-9 span::after { right: auto; left: 0; } .blog__meta-9 span:last-child::after { display: none; } .blog__meta-9 span a:hover { color: var(--tp-common-black); } .blog__meta-10-wrapper { margin-bottom: 12px; } .blog__meta-10 span { font-family: var(--tp-ff-space); font-size: 14px; color: var(--tp-text-1); margin-right: 10px; } [dir=rtl] .blog__meta-10 span { margin-right: 0; margin-left: 10px; } .blog__meta-10 span:last-child { margin-right: 0; } [dir=rtl] .blog__meta-10 span:last-child { margin-left: 0; } .blog__meta-10 span svg, .blog__meta-10 span i { margin-right: 3px; } [dir=rtl] .blog__meta-10 span svg, [dir=rtl] .blog__meta-10 span i { margin-right: 0; margin-left: 3px; } .blog__meta-10 span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .blog__meta-10 span a:hover { color: var(--tp-theme-10); } .blog__meta-10.blog-meta-10-2 span { font-family: var(--tp-ff-space); font-size: 14px; color: var(--tp-text-1); color: #84848B; } .blog__meta-10.blog-meta-10-2 span a:hover { color: var(--tp-theme-10); } .blog__meta-author-10 { position: relative; padding-right: 15px; margin-right: 15px; } [dir=rtl] .blog__meta-author-10 { padding-right: 0; margin-right: 0; padding-left: 15px; margin-left: 15px; } .blog__meta-author-10::after { position: absolute; content: ""; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 1px; height: 20px; background-color: #EAEAEF; } [dir=rtl] .blog__meta-author-10::after { right: auto; left: 0; } div.blog__meta-author-thumb img { width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; } [dir=rtl] div.blog__meta-author-thumb img { margin-right: 0; margin-left: 10px; } div.blog__meta-author-thumb-10 img { width: 24px; height: 24px; border-radius: 50%; margin-right: 10px; } [dir=rtl] div.blog__meta-author-thumb-10 img { margin-right: 0; margin-left: 10px; } .blog__meta-author-content span { display: inline-block; font-family: var(--tp-ff-inter); font-size: 14px; color: #7A7E83; } .blog__meta-author-content span a { color: var(--tp-common-black-11); font-weight: 500; } .blog__meta-author-content span a:hover { color: var(--tp-theme-7); } .blog__meta-author-content-10 span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; color: #7A7E83; } .blog__meta-author-content-10 span a { color: var(--tp-common-black-11); } .blog__meta-author-content-10 span a:hover { color: var(--tp-theme-10); } .blog__thumb { position: relative; animation-duration: 1s; animation-delay: 0.5s; animation-iteration-count: 1; animation-fill-mode: both; height: 100%; } div.blog__thumb img { height: 100%; object-fit: cover; } @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) { div.blog__thumb img { width: 100%; } } .blog__thumb-2 { height: 225px; } .blog__thumb-2 a { display: block; height: 225px; } div.blog__thumb-2 img { height: 100%; object-fit: cover; -webkit-transition: all 0.4s ease-out 0s; -moz-transition: all 0.4s ease-out 0s; -ms-transition: all 0.4s ease-out 0s; -o-transition: all 0.4s ease-out 0s; transition: all 0.4s ease-out 0s; } .blog__thumb-4 { height: 100%; } div.blog__thumb-4 img { height: 100% !important; object-fit: cover; padding-right: 25px; } [dir=rtl] div.blog__thumb-4 img { padding-left: 25px; padding-right: 0; } @media (max-width: 575px) { div.blog__thumb-4 img { width: 100%; height: 250px; padding-right: 0; } [dir=rtl] div.blog__thumb-4 img { padding-left: 0; } } .blog__thumb-5 { height: 100%; } @media (max-width: 575px) { .blog__thumb-5 { position: relative; width: inherit; } } div.blog__thumb-5 img { height: 100%; object-fit: cover; } @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) { div.blog__thumb-5 img { width: 100%; height: 300px; } } .blog__thumb-6 { position: absolute; top: -35%; left: 0; -webkit-transform: rotate(-13deg) scale(0.8); -moz-transform: rotate(-13deg) scale(0.8); -ms-transform: rotate(-13deg) scale(0.8); -o-transform: rotate(-13deg) scale(0.8); transform: rotate(-13deg) scale(0.8); transform-origin: center; visibility: hidden; opacity: 0; } [dir=rtl] .blog__thumb-6 { left: auto; right: 0; } @media (max-width: 575px) { .blog__thumb-6 { top: -12%; } } div.blog__thumb-6 img { width: 200px; height: 195px; object-fit: cover; } .blog__thumb-7 { border-radius: 30px; overflow: hidden; position: relative; height: 250px; } .blog__thumb-7::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); -webkit-transition: all 0.6s; transition: all 0.6s; -webkit-transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0); transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, -45deg) translate3d(0, -150%, 0); } [dir=rtl] .blog__thumb-7::after { left: auto; right: 0; } div.blog__thumb-7 img { height: 100%; width: 100%; object-fit: cover; } .blog__thumb-8 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } [dir=rtl] .blog__thumb-8 { left: auto; right: 0; } .blog__thumb-8::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(2, 3, 9, 0.5019607843); } [dir=rtl] .blog__thumb-8::after { left: auto; right: 0; } div.blog__thumb-9 { height: 457px; } div.blog__thumb-9 img { height: 100%; width: 100%; object-fit: cover; } .blog__thumb-10 { height: 217px; } div.blog__thumb-10 img { height: 100%; } div.blog__author-thumb img { width: 34px; height: 34px; border-radius: 50%; margin-right: 10px; } [dir=rtl] div.blog__author-thumb img { margin-right: 0; margin-left: 10px; } .blog__author-title { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 16px; color: var(--tp-common-black); margin-bottom: 0; } .blog__author-title a:hover { color: var(--tp-theme-4); } .blog__slider { position: relative; } .blog__slider .swiper-container { margin-right: -600px; overflow: visible; } [dir=rtl] .blog__slider .swiper-container { margin-right: 0; margin-left: -600px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__slider .swiper-container { margin-right: 0; } [dir=rtl] .blog__slider .swiper-container { margin-left: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__slider .swiper-container { margin-right: -300px; } [dir=rtl] .blog__slider .swiper-container { margin-right: 0; margin-left: -300px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__slider .swiper-container { margin-right: -400px; } [dir=rtl] .blog__slider .swiper-container { margin-right: 0; margin-left: -400px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__slider .swiper-container { margin-right: 0; } [dir=rtl] .blog__slider .swiper-container { margin-left: 0; } } .blog__slider .blog-slider-4 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-4); } .blog__slider .blog-slider-4 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-theme-4); } .blog__slider-8 .swiper-slide-active { margin-right: 30px; width: calc(60% - 30px) !important; } [dir=rtl] .blog__slider-8 .swiper-slide-active { margin-right: 0; margin-left: 30px; } .blog__slider-8 .swiper-slide-next { width: 40% !important; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__slider-8 .swiper-slide-active { margin-right: 30px; width: calc(50% - 30px) !important; } [dir=rtl] .blog__slider-8 .swiper-slide-active { margin-right: 0; margin-left: 30px; } .blog__slider-8 .swiper-slide-next { width: 50% !important; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__slider-8 .swiper-slide-active { margin-right: 0; width: inherit !important; } [dir=rtl] .blog__slider-8 .swiper-slide-active { margin-left: 0; } .blog__slider-8 .swiper-slide-next { width: inherit !important; } } @media (max-width: 575px) { .blog__nav { margin-bottom: 60px; } } .blog__nav button { display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; border: 2px solid var(--tp-border-5); font-size: 18px; color: var(--tp-common-black); } .blog__nav button:hover { color: var(--tp-common-white); border-color: var(--tp-theme-4); background-color: var(--tp-theme-4); } .blog__nav button.blog-slider-button-next { margin-left: 5px; } [dir=rtl] .blog__nav button.blog-slider-button-next { margin-left: 0; margin-right: 5px; } .blog__shape-1 { position: absolute; z-index: -1; bottom: 21%; left: 10%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .blog__shape-1 { left: auto; right: 10%; } .blog__shape-2 { position: absolute; z-index: -1; top: 18%; left: 17%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .blog__shape-2 { left: auto; right: 17%; } .blog__shape-3 { position: absolute; z-index: -1; top: 21%; right: 10%; -webkit-animation: tpupdown 1s infinite alternate; animation: tpupdown 1s infinite alternate; } [dir=rtl] .blog__shape-3 { right: auto; left: 10%; } .blog__shape-4 { position: absolute; z-index: -1; bottom: 36%; right: 15%; -webkit-animation: tprotate 1s infinite alternate; animation: tprotate 1s infinite alternate; } [dir=rtl] .blog__shape-4 { right: auto; left: 15%; } .blog__play { margin-top: 25px; } .blog__play-btn { display: inline-block; width: 56px; height: 56px; line-height: 53px; text-align: center; background: #FFFFFF; border: 1px solid rgba(13, 18, 30, 0.1); border-radius: 50%; } .blog__play-btn i { margin-left: 3px; } [dir=rtl] .blog__play-btn i { margin-left: 0; margin-right: 3px; } .blog__play-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); border-color: var(--tp-theme-6); } .blog__more-6 a { padding: 9px 26px; } .blog__more-10 a { font-size: 16px; padding: 15px 122px 15px; } @media (max-width: 575px) { .blog__more-10 a { padding: 15px 50px 15px; } } .blog__btn-5 .tp-link-btn-circle { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; letter-spacing: -0.02em; color: var(--tp-common-black); } .blog__btn-5 .tp-link-btn-circle span { margin-left: 7px; } [dir=rtl] .blog__btn-5 .tp-link-btn-circle span { margin-left: 0; margin-right: 7px; } .blog__btn-5 .tp-link-btn-circle:hover { color: var(--tp-theme-5); } .blog__btn-5 .tp-link-btn-circle:hover span { border-color: var(--tp-theme-5); background-color: var(--tp-theme-5); color: var(--tp-common-white); } .blog__breadcrumb-item.swiper-slide-active .blog__breadcrumb-title, .blog__breadcrumb-item.swiper-slide-active .blog__breadcrumb-content p, .blog__breadcrumb-item.swiper-slide-active .blog__breadcrumb-meta, .blog__breadcrumb-item.swiper-slide-active .blog__breadcrumb-tag, .blog__breadcrumb-item.swiper-slide-active .blog__breadcrumb-btn { animation-name: fadeInUp; animation-fill-mode: both; } .blog__breadcrumb-height { min-height: 600px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__breadcrumb-height { min-height: 500px; } } .blog__breadcrumb-tag { margin-bottom: 10px; animation-delay: 0.3s; animation-duration: 1s; } .blog__breadcrumb-tag a { display: inline-block; font-family: var(--tp-ff-space); font-weight: 700; font-size: 15px; color: var(--tp-common-white); background-color: var(--tp-theme-1); line-height: 1; padding: 4px 12px 6px; } .blog__breadcrumb-content { padding-bottom: 80px; } .blog__breadcrumb-content p { font-size: 16px; color: var(--tp-common-white); margin-bottom: 20px; animation-delay: 0.7s; animation-duration: 1s; } .blog__breadcrumb-title { font-size: 60px; line-height: 1; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 13px; animation-delay: 0.5s; animation-duration: 1s; } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog__breadcrumb-title { font-size: 42px; } } @media (max-width: 575px) { .blog__breadcrumb-title { font-size: 30px; } } .blog__breadcrumb-title a { background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff); background-size: 0% 2px, 0 2px; background-position: 100% 100%, 0 85%; background-repeat: no-repeat; transition: background-size 0.4s linear; } .blog__breadcrumb-title a:hover { background-size: 0 2px, 100% 2px; } .blog__breadcrumb-meta { margin-bottom: 22px; animation-delay: 0.7s; animation-duration: 1s; } .blog__breadcrumb-meta span { display: inline-block; font-size: 14px; color: var(--tp-common-white); margin-right: 23px; margin-bottom: 10px; } [dir=rtl] .blog__breadcrumb-meta span { margin-right: 0; margin-left: 23px; } .blog__breadcrumb-meta span i, .blog__breadcrumb-meta span svg { margin-right: 3px; } [dir=rtl] .blog__breadcrumb-meta span i, [dir=rtl] .blog__breadcrumb-meta span svg { margin-right: 0; margin-left: 3px; } .blog__breadcrumb-meta span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .blog__breadcrumb-meta span a:hover { color: var(--tp-theme-1); } .blog__breadcrumb-overlay { position: relative; z-index: 1; } .blog__breadcrumb-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-image: -webkit-linear-gradient(184.84deg, rgba(3, 4, 28, 0) 3.74%, rgba(3, 4, 28, 0.9) 96.1%); background-image: -moz-linear-gradient(184.84deg, rgba(3, 4, 28, 0) 3.74%, rgba(3, 4, 28, 0.9) 96.1%); background-image: -ms-linear-gradient(184.84deg, rgba(3, 4, 28, 0) 3.74%, rgba(3, 4, 28, 0.9) 96.1%); background-image: -o-linear-gradient(184.84deg, rgba(3, 4, 28, 0) 3.74%, rgba(3, 4, 28, 0.9) 96.1%); background-image: linear-gradient(184.84deg, rgba(3, 4, 28, 0) 3.74%, rgba(3, 4, 28, 0.9) 96.1%); z-index: -1; } [dir=rtl] .blog__breadcrumb-overlay::after { left: auto; right: 0; } .blog__breadcrumb-btn { animation-delay: 0.9s; animation-duration: 1s; } .blog__breadcrumb-btn .tp-btn-border-2 { font-size: 16px; font-weight: 50; letter-spacing: -0.02em; padding: 9px 32px 11px; } .blog-slider-dot-breadcrumb { position: absolute; bottom: 30px; right: 19%; z-index: 1; } [dir=rtl] .blog-slider-dot-breadcrumb { right: auto; left: 19%; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog-slider-dot-breadcrumb { right: 6%; } [dir=rtl] .blog-slider-dot-breadcrumb { right: auto; left: 6%; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .blog-slider-dot-breadcrumb { right: 4%; bottom: 20px; } [dir=rtl] .blog-slider-dot-breadcrumb { right: auto; left: 4%; } } @media (max-width: 575px) { .blog-slider-dot-breadcrumb { bottom: 10px; right: 3%; } [dir=rtl] .blog-slider-dot-breadcrumb { right: auto; left: 3%; } } .blog-slider-dot-breadcrumb .swiper-pagination-bullet { background-color: rgba(255, 255, 255, 0.3019607843); margin: 0 4px; } .blog-slider-dot-breadcrumb .swiper-pagination-bullet::after { display: none; } .blog-slider-dot-breadcrumb .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-common-white); } .blog__grid-item.blog__masonary.no-img .blog__thumb-10 { display: none; } .blog__grid-item.blog__masonary.no-img .blog__content-10 { border: 1px solid #EAEAEF; } .blog__grid-item.blog__masonary.no-img .blog__content-10-top { padding-top: 32px; } .blog__grid-item.blog__masonary.no-img .blog__content-10-top .blog__tag-10 { display: block; position: static; margin-bottom: 17px; } .blog__grid-item.blog__masonary.no-img .blog__content-10-top .blog__tag-10 a { color: var(--tp-common-black); border: 1px solid #EAEAEF; } .blog__grid-item.blog__masonary.no-img .blog__content-10-top .blog__tag-10.tp-masonary-no-img-tag a:hover { background-color: var(--tp-common-purple); border-color: var(--tp-common-purple); color: var(--tp-common-white); } .blog__grid-item.blog__masonary .blog__item-10 { box-shadow: none; } .blog__grid-item.blog__masonary .blog__content-10 { border: 1px solid #EAEAEF; border-top: 0; border-radius: 0; } .blog__grid-item.blog__masonary .blog__content-10-top { padding: 33px 35px; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .blog__grid-item.blog__masonary .blog__content-10-top { padding: 33px 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__grid-item.blog__masonary .blog__content-10-top { padding: 33px 30px; padding-right: 50px; } [dir=rtl] .blog__grid-item.blog__masonary .blog__content-10-top { padding-right: 30px; padding-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__grid-item.blog__masonary .blog__content-10-top { padding: 27px 25px; padding-right: 40px; } [dir=rtl] .blog__grid-item.blog__masonary .blog__content-10-top { padding-right: 25px; padding-left: 40px; } } @media (max-width: 575px) { .blog__grid-item.blog__masonary .blog__content-10-top { padding: 20px 20px; padding-right: 15px; } [dir=rtl] .blog__grid-item.blog__masonary .blog__content-10-top { padding-right: 20px; padding-left: 15px; } } .blog__grid-item.blog__masonary .blog__content-10-top .blog__tag-10 { display: none; } .blog__grid-item.blog__masonary .blog__content-10-bottom { padding: 15px 35px 14px; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px) { .blog__grid-item.blog__masonary .blog__content-10-bottom { padding-left: 20px; padding-right: 20px; } } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__grid-item.blog__masonary .blog__content-10-bottom { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__grid-item.blog__masonary .blog__content-10-bottom { padding-left: 25px; padding-right: 25px; } } @media (max-width: 575px) { .blog__grid-item.blog__masonary .blog__content-10-bottom { padding-left: 15px; padding-right: 15px; } } .blog__grid-item.blog__masonary .blog__grid-quote { padding: 50px 40px 45px; border: 1px solid #EAEAEF; box-shadow: none; } .blog__grid-item.blog__masonary .blog__grid-quote p { margin-bottom: 70px; } .blog__grid-item .blog__thumb-10 { position: relative; } .blog__grid-item .blog__thumb-10[data-height] img { object-fit: cover; } .blog__grid-item .blog__tag-10 { position: absolute; top: 20px; right: 20px; z-index: 1; } [dir=rtl] .blog__grid-item .blog__tag-10 { right: auto; left: 20px; } .blog__grid-item .blog__tag-10 a { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 13px; text-align: center; color: var(--tp-common-black); border: 0; background-color: var(--tp-common-white); border-radius: 0; padding: 6px 12px 7px; line-height: 1; } .blog__grid-item .blog__item-10 { border: 0; border-radius: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); } .blog__grid-item .blog__title-10 { font-size: 22px; line-height: 1.18; color: var(--tp-common-black); } .blog__grid-item .blog__title-10 a:hover { color: var(--tp-theme-1); } .blog__grid-item .blog__meta-10-wrapper { margin-bottom: 8px; } .blog__grid-item .blog__meta-10 span { font-family: var(--tp-ff-inter); color: var(--tp-text-1); margin-right: 12px; } .blog__grid-item .blog__meta-10 span:last-child { margin-right: 0; } .blog__grid-item .blog__meta-10 span a { color: var(--tp-text-1); } .blog__grid-item .blog__meta-10 span svg { stroke: #7A7E83; } .blog__grid-item .blog__meta-10 span i { color: #7A7E83; } .blog__grid-item .blog__meta-10 span svg, .blog__grid-item .blog__meta-10 span i { margin-right: 4px; } [dir=rtl] .blog__grid-item .blog__meta-10 span svg, [dir=rtl] .blog__grid-item .blog__meta-10 span i { margin-right: 0; margin-left: 4px; } .blog__grid-item .blog__meta-10 span a:hover { color: var(--tp-theme-1); } .blog__grid-item .blog__meta-10.has-date span svg, .blog__grid-item .blog__meta-10.has-date span i { margin-right: 3px; } [dir=rtl] .blog__grid-item .blog__meta-10.has-date span svg, [dir=rtl] .blog__grid-item .blog__meta-10.has-date span i { margin-right: 0; margin-left: 3px; } .blog__grid-item .blog__meta-author-10 { padding-right: 0; margin-right: 10px; } [dir=rtl] .blog__grid-item .blog__meta-author-10 { margin-right: 0; margin-left: 10px; } .blog__grid-item .blog__meta-author-10::after { display: none; } .blog__grid-item .blog__meta-author-content-10 span { color: #7A7E83; font-family: var(--tp-ff-inter); } .blog__grid-item .blog__meta-author-content-10 span a:hover { color: var(--tp-theme-1); } .blog__grid-item .blog__content-10 { border-radius: 0; border: 0; } .blog__grid-item .blog__content-10 p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 15px; line-height: 1.47; color: var(--tp-text-1); margin-bottom: 10px; } .blog__grid-item .blog__content-10-top { padding: 33px 40px; padding-right: 60px; } [dir=rtl] .blog__grid-item .blog__content-10-top { padding-right: 40px; padding-left: 60px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__grid-item .blog__content-10-top { padding: 33px 30px; padding-right: 50px; } [dir=rtl] .blog__grid-item .blog__content-10-top { padding-right: 30px; padding-left: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__grid-item .blog__content-10-top { padding: 27px 25px; padding-right: 40px; } [dir=rtl] .blog__grid-item .blog__content-10-top { padding-right: 25px; padding-left: 40px; } } @media (max-width: 575px) { .blog__grid-item .blog__content-10-top { padding: 20px 20px; padding-right: 15px; } [dir=rtl] .blog__grid-item .blog__content-10-top { padding-right: 20px; padding-left: 15px; } } .blog__grid-item .blog__content-10-bottom { border-color: #EFF0F7; padding: 15px 40px 14px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__grid-item .blog__content-10-bottom { padding-left: 30px; padding-right: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__grid-item .blog__content-10-bottom { padding-left: 25px; padding-right: 25px; } } @media (max-width: 575px) { .blog__grid-item .blog__content-10-bottom { padding-left: 15px; padding-right: 15px; } } .blog__grid-quote { padding: 70px 40px 67px; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); background-color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__grid-quote { padding: 60px 30px 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__grid-quote { height: calc(100% - 30px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__grid-quote { padding: 40px 40px 35px; } } .blog__grid-quote-2 { border: 1px solid #EAEAEF; box-shadow: none; } .blog__grid-quote-icon { margin-bottom: 20px; } .blog__grid-quote-icon span { display: inline-block; font-size: 24px; color: var(--tp-theme-1); width: 60px; height: 60px; text-align: center; line-height: 56px; border: 2px solid #EFF0F6; border-radius: 50%; } .blog__grid-quote-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .blog__grid-quote-content span { font-size: 14px; color: #525258; display: inline-block; margin-bottom: 15px; } .blog__grid-quote-content p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 21.5px; line-height: 1.27; color: var(--tp-common-black); margin-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__grid-quote-content p { margin-bottom: 65px; } } .blog__grid-quote-content cite { font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; color: var(--tp-common-black-solid); font-style: normal; position: relative; padding-top: 12px; } .blog__grid-quote-content cite::after { position: absolute; content: ""; left: 0; top: 0; width: 30px; height: 2px; background-color: var(--tp-theme-1); } [dir=rtl] .blog__grid-quote-content cite::after { left: auto; right: 0; } .blog__list-item { padding: 25px 25px; padding-right: 45px; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); margin-bottom: 20px; } [dir=rtl] .blog__list-item { padding-right: 25px; padding-left: 45px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__list-item { padding: 25px; } } .blog__list-item:hover .blog__thumb-10 img { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } .blog__list-item-wrapper ~ .tp-pagination.mt-20 ul { margin-top: 50px; } .blog__list-item.no-img .blog__content-10 { padding: 0; } .blog__list-item .blog__thumb-10 { position: relative; width: 300px; height: 232px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__list-item .blog__thumb-10 { width: 100%; height: 100%; } } .blog__list-item .blog__thumb-10 img { width: 100%; height: 100%; object-fit: cover; } .blog__list-item .blog__thumb-10:hover img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .blog__list-item .blog__tag-10 { margin-right: 15px; } [dir=rtl] .blog__list-item .blog__tag-10 { margin-right: 0; margin-left: 15px; } .blog__list-item .blog__tag-10 a { font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; color: var(--tp-common-purple); background-color: rgba(99, 100, 219, 0.06); border: 0; border-radius: 0; line-height: 1; padding: 5px 12px; } .blog__list-item .blog__tag-10 a:hover { color: var(--tp-common-white); background-color: var(--tp-common-purple); } .blog__list-item .blog__item-10 { border: 0; border-radius: 0; } .blog__list-item .blog__title-10 { font-size: 22px; line-height: 1.27; color: var(--tp-common-black); } .blog__list-item .blog__title-10 a:hover { color: var(--tp-theme-1); } .blog__list-item .blog__meta-10-wrapper { margin-bottom: 12px; } .blog__list-item .blog__meta-10 span { font-family: var(--tp-ff-inter); color: var(--tp-text-1); margin-right: 30px; } [dir=rtl] .blog__list-item .blog__meta-10 span { margin-right: 0; margin-left: 30px; } .blog__list-item .blog__meta-10 span:last-child { margin-right: 0; } [dir=rtl] .blog__list-item .blog__meta-10 span:last-child { margin-left: 0; } .blog__list-item .blog__meta-10 span a:hover { color: var(--tp-theme-1); } .blog__list-item .blog__meta-10 span svg { stroke: var(--tp-text-1); } .blog__list-item .blog__meta-10 span i { color: var(--tp-text-1); } .blog__list-item .blog__meta-10.has-date span svg, .blog__list-item .blog__meta-10.has-date span i { margin-right: 3px; } [dir=rtl] .blog__list-item .blog__meta-10.has-date span svg, [dir=rtl] .blog__list-item .blog__meta-10.has-date span i { margin-right: 0; margin-left: 3px; } .blog__list-item .blog__meta-author-10 { padding-right: 0; margin-right: 30px; } [dir=rtl] .blog__list-item .blog__meta-author-10 { padding-left: 0; margin-right: 0; margin-left: 30px; } .blog__list-item .blog__meta-author-10::after { display: none; } .blog__list-item .blog__meta-author-content-10 span { color: #7A7E83; font-family: var(--tp-ff-inter); } .blog__list-item .blog__meta-author-content-10 span a:hover { color: var(--tp-theme-1); } .blog__list-item .blog__content-10 { padding-left: 25px; padding-top: 14px; border-radius: 0; border: 0; } [dir=rtl] .blog__list-item .blog__content-10 { padding-left: 0; padding-right: 25px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__list-item .blog__content-10 { padding-left: 40px; } [dir=rtl] .blog__list-item .blog__content-10 { padding-left: 0; padding-right: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__list-item .blog__content-10 { padding-left: 0; padding-top: 10px; } [dir=rtl] .blog__list-item .blog__content-10 { padding-right: 0; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .blog__list-item .blog__content-10 { padding-left: 0; padding-top: 25px; } [dir=rtl] .blog__list-item .blog__content-10 { padding-right: 0; } } .blog__list-item .blog__content-10 p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 15px; line-height: 1.47; color: var(--tp-text-1); margin-bottom: 23px; padding-right: 30px; } [dir=rtl] .blog__list-item .blog__content-10 p { padding-right: 0; padding-left: 30px; } .blog__list-item .blog__content-10-top { padding: 0; } .blog__list-item .blog__content-10-bottom { border: 0; padding: 0; } .blog__list-quote { padding: 70px 40px 65px; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); background-color: var(--tp-common-white); } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .blog__list-quote { padding: 60px 30px 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .blog__list-quote { height: calc(100% - 30px); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__list-quote { padding: 40px 40px 35px; } } .blog__list-quote-icon { margin-bottom: 20px; } .blog__list-quote-icon span { display: inline-block; font-size: 24px; color: var(--tp-theme-1); width: 60px; height: 60px; text-align: center; line-height: 56px; border: 2px solid #EFF0F6; border-radius: 50%; } .blog__list-quote-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .blog__list-quote-content span { font-size: 14px; color: #525258; display: inline-block; margin-bottom: 15px; } .blog__list-quote-content p { font-family: var(--tp-ff-space); font-weight: 700; font-size: 22px; line-height: 1.27; color: var(--tp-common-black); margin-bottom: 90px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .blog__list-quote-content p { margin-bottom: 81px; } } .blog__list-quote-content cite { font-family: var(--tp-ff-space); font-weight: 500; font-size: 18px; color: var(--tp-common-black-solid); font-style: normal; position: relative; padding-top: 12px; } .blog__list-quote-content cite::after { position: absolute; content: ""; left: 0; top: 0; width: 30px; height: 2px; background-color: var(--tp-theme-1); } [dir=rtl] .blog__list-quote-content cite::after { left: auto; right: 0; } .blog__style-2 .blog__nav button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .blog__style-2 .blog__author-title a:hover { color: var(--tp-theme-1); } .blog__style-2 .blog__tag-4 a { color: var(--tp-common-purple); background-color: rgba(99, 100, 219, 0.1); } .blog__style-2 .blog__tag-4 a:hover { color: var(--tp-common-white); background-color: var(--tp-common-purple); } .blog__style-2 .blog__title-4 a:hover { color: var(--tp-theme-1); } .blog__style-2 .blog-slider-4 .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--tp-theme-1); } .blog__style-2 .blog-slider-4 .swiper-pagination-bullet.swiper-pagination-bullet-active::after { border-color: var(--tp-theme-1); } .postbox__breadcrumb { margin-bottom: 72px; } .postbox__main-wrapper p { font-size: 16px; line-height: 1.75; color: var(--tp-text-body); margin-bottom: 17px; } .postbox__category { margin-bottom: 5px; } .postbox__category a { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; line-height: 1; color: var(--tp-common-white); background-color: var(--tp-theme-1); padding: 4px 12px 5px; } .postbox__category a:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .postbox__title { font-size: 38px; margin-bottom: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .postbox__title { font-size: 35px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .postbox__title { font-size: 35px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__title { font-size: 30px; } } @media (max-width: 575px) { .postbox__title { font-size: 25px; } } .postbox__title a:hover { color: var(--tp-theme-1); } .postbox__meta { margin-bottom: 7px; } .postbox__meta-wrapper { margin-bottom: 10px; text-align: left; } [dir=rtl] .postbox__meta-wrapper { text-align: right; } .postbox__meta-author-thumb img { height: 50px; width: 50px; border-radius: 50%; margin-right: 12px; } [dir=rtl] .postbox__meta-author-thumb img { margin-right: 0; margin-left: 12px; } .postbox__meta-item { margin-right: 47px; } [dir=rtl] .postbox__meta-item { margin-right: 0; margin-left: 47px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .postbox__meta-item { margin-right: 40px; } [dir=rtl] .postbox__meta-item { margin-right: 0; margin-left: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__meta-item { margin-right: 35px; } [dir=rtl] .postbox__meta-item { margin-right: 0; margin-left: 35px; } } @media (max-width: 575px) { .postbox__meta-item { margin-right: 25px; } [dir=rtl] .postbox__meta-item { margin-right: 0; margin-left: 25px; } } .postbox__meta-item:last-child { margin-right: 0; } [dir=rtl] .postbox__meta-item:last-child { margin-left: 0; } .postbox__meta-type { font-size: 14px; line-height: 1; color: #6B6B7B; } p.postbox__meta-name { font-weight: 500; font-size: 15px; line-height: 1; color: var(--tp-common-black); margin-bottom: 4px; } .postbox__meta span { font-family: var(--tp-ff-space); font-size: 14px; color: var(--tp-text-1); margin-right: 30px; font-weight: 500; display: inline-block; margin-bottom: 5px; text-transform: capitalize; } .postbox__meta span:last-child { margin-right: 0; } [dir=rtl] .postbox__meta span:last-child { margin-left: 0; } .postbox__meta span svg, .postbox__meta span i { margin-right: 5px; } [dir=rtl] .postbox__meta span svg, [dir=rtl] .postbox__meta span i { margin-right: 0; margin-left: 5px; } .postbox__meta span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .postbox__meta span svg path { stroke: var(--tp-common-black); } .postbox__meta span i { color: var(--tp-theme-1); } .postbox__meta span a:hover { color: var(--tp-theme-1); } .postbox__details-title { font-size: 30px; line-height: 1.27; letter-spacing: -0.02em; margin-bottom: 35px; } @media (max-width: 575px) { .postbox__details-title { font-size: 25px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox__details-title br { display: none; } } .postbox__details-title-2 { font-size: 40px; letter-spacing: -0.04em; color: var(--tp-common-black-solid); line-height: 1; margin-bottom: 20px; } .postbox__details-title-3 { font-size: 22px; line-height: 1.27; letter-spacing: -0.02em; color: var(--tp-common-black-solid); } .postbox__details-social a { display: inline-block; width: 40px; height: 40px; line-height: 36px; border: 1px solid #DDDDE3; text-align: center; color: var(--tp-common-black); margin-bottom: 8px; border-radius: 50%; margin-right: 6px; } [dir=rtl] .postbox__details-social a { margin-right: 0; margin-left: 6px; } .postbox__details-social a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .postbox__details-social ul li { list-style: none; } .postbox__details-social ul li a { display: inline-block; width: 40px; height: 40px; line-height: 38px; border: 1px solid #DDDDE3; text-align: center; color: var(--tp-common-black); } .postbox__details-social ul li a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .postbox__details-content { padding-top: 52px; margin-top: 50px; margin-bottom: 35px; border-top: 1px solid #EAEAEF; } .postbox__details-content p { padding-right: 15px; } [dir=rtl] .postbox__details-content p { padding-right: 0; padding-left: 15px; } .postbox__details-content-wrapper .nice-select { border-radius: 0; width: 100%; height: 60px; border: 1px solid var(--tp-common-white); border-radius: 0; line-height: 58px; background-color: var(--tp-common-white); color: var(--tp-common-black); padding: 0 25px; } .postbox__details-content-wrapper .nice-select::after { right: 25px; } .postbox__details-content-wrapper .nice-select .list .option:hover { color: var(--tp-theme-1); } .postbox__details-content-wrapper div.wp-block-calendar #wp-calendar thead th { color: var(--tp-common-black); padding: 12px 12px; } .postbox__details-content-wrapper div.wp-block-calendar #wp-calendar caption { color: var(--tp-common-black); } .postbox__details-content-wrapper .wp-block-search__input { background-color: var(--tp-common-white); color: var(--tp-common-black); outline: 0; } .postbox__details-content-wrapper .wp-block-search__input:focus { border-color: var(--tp-theme-1); } .postbox__details-content-wrapper .wp-block-search__button { background-color: var(--tp-theme-1); } .postbox__details-content-wrapper div.wp-block-file a { font-size: 14px; } .postbox__details-content-wrapper div.wp-block-file .wp-block-file__button { background: #32373c; border-radius: 2em; color: #fff; font-size: 10px; padding: 0.5em 1em; } .postbox__img-caption { text-align: center; font-family: var(--tp-ff-inter); font-weight: 400; font-size: 13px; color: #6B6B7B; margin-top: 18px; } .postbox__img-caption a { font-weight: 500; color: var(--tp-common-black); } .postbox__features { margin-bottom: 30px; } .postbox__features-title { font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black-solid); margin-bottom: 15px; } .postbox__features p { margin-bottom: 30px; } .postbox__features ul li { font-size: 16px; line-height: 2; color: var(--tp-common-black); position: relative; list-style: none; padding-left: 15px; } [dir=rtl] .postbox__features ul li { padding-left: 0; padding-right: 15px; } .postbox__features ul li::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background-color: var(--tp-common-black); } [dir=rtl] .postbox__features ul li::after { left: auto; right: 0; } .postbox__features-2 { margin-top: 25px; margin-bottom: 25px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__more-menu { margin: 20px 0; } } .postbox__more-menu span { display: inline-block; width: 50px; height: 50px; line-height: 46px; text-align: center; border: 2px solid rgba(3, 4, 28, 0.14); border-radius: 50%; } .postbox__more-menu span svg { -webkit-transform: translateY(-1px); -moz-transform: translateY(-1px); -ms-transform: translateY(-1px); -o-transform: translateY(-1px); transform: translateY(-1px); } .postbox__more-menu span:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .postbox__more-navigation { margin-top: 50px; padding: 35px 30px; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); } .postbox__more-navigation-2 { padding: 40px 30px 25px; } .postbox__more-icon a { color: var(--tp-common-black); font-size: 16px; margin-right: 15px; } [dir=rtl] .postbox__more-icon a { margin-right: 0; margin-left: 15px; } .postbox__more-icon a svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .postbox__more-icon a:hover { color: var(--tp-theme-1); } .postbox__more-content p { font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: #88888B; margin-bottom: 5px; } .postbox__more-content p a:hover { color: var(--tp-theme-1); } .postbox__more-content h4 { font-size: 18px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0; } .postbox__more-content h4 a:hover { color: var(--tp-theme-1); } .postbox__more-left { width: 50%; word-wrap: anywhere; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .postbox__more-left { width: 80%; } } .postbox__more-right { width: 50%; text-align: right; word-wrap: anywhere; float: right; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .postbox__more-right { width: 80%; } } [dir=rtl] .postbox__more-right { text-align: left; float: left; } .postbox__more-right .postbox__more-icon a { margin-left: 15px; margin-right: 0; } [dir=rtl] .postbox__more-right .postbox__more-icon a { margin-left: 0; margin-right: 15px; } .postbox__author { padding: 34px 34px; padding-right: 75px; } [dir=rtl] .postbox__author { padding-right: 34px; padding-left: 75px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__author { padding-right: 35px; } [dir=rtl] .postbox__author { padding-right: 0; padding-left: 35px; } } @media (max-width: 575px) { .postbox__author { padding-right: 34px; } [dir=rtl] .postbox__author { padding-right: 0; padding-left: 34px; } } .postbox__author-thumb { flex: 0 0 auto; } @media (max-width: 575px) { .postbox__author-thumb { margin-bottom: 20px; } } .postbox__author-thumb img { width: 70px; height: 70px; border-radius: 50%; margin-right: 24px; } [dir=rtl] .postbox__author-thumb img { margin-right: 0; margin-left: 24px; } .postbox__author-title { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 18px; color: var(--tp-common-black); } .postbox__author-content p { font-size: 15px; line-height: 1.6; color: var(--tp-text-1); margin-bottom: 22px; } .postbox__author-social a { display: inline-block; width: 36px; height: 36px; line-height: 34px; text-align: center; color: var(--tp-common-black); border: 1px solid #EAEAEF; margin-right: 4px; } [dir=rtl] .postbox__author-social a { margin-right: 0; margin-left: 4px; } .postbox__author-social a:last-child { margin-right: 0; } [dir=rtl] .postbox__author-social a:last-child { margin-left: 0; } .postbox__author-social a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .postbox__author-2 { border: 1px solid var(--tp-common-black); padding-bottom: 45px; } .postbox__comment > ul li { list-style: none; } .postbox__comment ul li { margin-bottom: 20px; } .postbox__comment ul.children { margin-top: 20px; margin-left: 100px; } [dir=rtl] .postbox__comment ul.children { margin-left: 0; margin-right: 100px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__comment ul.children { margin-left: 40px; } [dir=rtl] .postbox__comment ul.children { margin-left: 0; margin-right: 40px; } } @media (max-width: 575px) { .postbox__comment ul.children { margin-left: 15px; } [dir=rtl] .postbox__comment ul.children { margin-left: 15px; margin-right: 15px; } } .postbox__comment ul.children .postbox__comment-avater img { width: 60px; height: 60px; } .postbox__comment-wrapper .required-field-message .required { color: var(--tp-theme-1); } .postbox__comment-wrapper .logged-in-as { transition: none; } .postbox__comment-wrapper .logged-in-as a:last-child { transition: none; transition: color 0.2s ease-in-out 0s; } .postbox__comment-wrapper .logged-in-as a:last-child:hover { color: var(--tp-theme-1); } .postbox__comment-form-title { font-size: 34px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 10px; } .postbox__comment-form p { font-size: 14px; line-height: 1; color: var(--tp-text-1); margin-bottom: 47px; } .postbox__comment-input { position: relative; margin-bottom: 20px; } .postbox__comment-input span { font-weight: 600; color: var(--tp-common-black); margin-bottom: 12px; display: block; } .postbox__comment-input input, .postbox__comment-input textarea { height: 60px; padding: 0 25px; width: 100%; font-size: 14px; color: var(--tp-common-black); border-color: var(--tp-common-white); background: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); border-width: 1px; } .postbox__comment-input input:focus, .postbox__comment-input textarea:focus { border-color: var(--tp-theme-1); } .postbox__comment-input input::-webkit-input-placeholder, .postbox__comment-input textarea::-webkit-input-placeholder { color: #85858B; } .postbox__comment-input input:-moz-placeholder, .postbox__comment-input textarea:-moz-placeholder { color: #85858B; } .postbox__comment-input input::-moz-placeholder, .postbox__comment-input textarea::-moz-placeholder { color: #85858B; } .postbox__comment-input input:-ms-input-placeholder, .postbox__comment-input textarea:-ms-input-placeholder { color: #85858B; } .postbox__comment-input textarea { height: 180px; resize: none; padding-top: 25px; padding-bottom: 25px; } .postbox__comment-title { font-size: 34px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 37px; } .postbox__comment-box { padding: 30px; padding-right: 45px; padding-bottom: 33px; background: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); } [dir=rtl] .postbox__comment-box { padding-right: 0; padding-left: 85px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px) { .postbox__comment-box { padding-right: 35px; } [dir=rtl] .postbox__comment-box { padding-right: 0; padding-left: 35px; } } @media (max-width: 575px) { .postbox__comment-box { padding-right: 35px; } [dir=rtl] .postbox__comment-box { padding-right: 0; padding-left: 35px; } } .postbox__comment-info { flex: 0 0 auto; } .postbox__comment-avater img { width: 80px; height: 80px; margin-right: 20px; } [dir=rtl] .postbox__comment-avater img { margin-right: 0; margin-left: 20px; } .postbox__comment-name { margin-bottom: 5px; } .postbox__comment-name h5 { font-size: 20px; line-height: 1; color: var(--tp-common-black-solid); margin-bottom: 10px; } .postbox__comment-name span { font-family: var(--tp-ff-space); font-weight: 500; font-size: 13px; line-height: 1; letter-spacing: 0.02em; color: var(--tp-text-1); } .postbox__comment-text { width: calc(100% - 90px); } @media (max-width: 575px) { .postbox__comment-text { margin-left: 0; margin-top: 15px; } [dir=rtl] .postbox__comment-text { margin-right: 0; } } .postbox__comment-text p { font-size: 16px; line-height: 1.5; color: var(--tp-text-1); margin-bottom: 22px; } .postbox__comment-text blockquote { border: 1px solid #EAEAEF; box-shadow: none; } .postbox__comment-reply { margin-top: 10px; } .postbox__comment-reply a { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: -0.02em; color: var(--tp-common-black); border: 1px solid #EAEAEF; padding: 7px 18px; } .postbox__comment-reply a:hover { color: var(--tp-common-white); background: var(--tp-theme-1); border-color: var(--tp-theme-1); } .postbox__comment-agree { padding-left: 5px; } [dir=rtl] .postbox__comment-agree { padding-left: 0; padding-right: 5px; } .postbox__comment-agree input { margin: 0; appearance: none; -moz-appearance: none; display: block; width: 18px; height: 18px; background: #F0F0F5; border: 1px solid #C5C5CE; outline: none; flex: 0 0 auto; -webkit-transform: translateY(-2.5px); -moz-transform: translateY(-2.5px); -ms-transform: translateY(-2.5px); -o-transform: translateY(-2.5px); transform: translateY(-2.5px); padding: 0; } .postbox__comment-agree input:checked { position: relative; background-color: var(--tp-theme-1); border-color: transparent; } .postbox__comment-agree input:checked::after { box-sizing: border-box; position: absolute; content: "\f00c"; font-weight: 700; font-family: var(--tp-ff-fontawesome); font-size: 10px; color: var(--tp-common-white); top: 46%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .postbox__comment-agree input:hover { cursor: pointer; } .postbox__comment-agree label { padding-left: 8px; font-size: 14px; line-height: 1; color: var(--tp-text-1); } [dir=rtl] .postbox__comment-agree label { padding-left: 0; padding-right: 8px; } .postbox__comment-agree label a { color: var(--tp-common-black); font-weight: 600; padding-left: 4px; } [dir=rtl] .postbox__comment-agree label a { padding-left: 0; padding-right: 4px; } .postbox__comment-agree label a:hover { color: var(--tp-theme-1); } .postbox__comment-agree label:hover { cursor: pointer; } .postbox__comment-btn .tp-btn { font-size: 14px; padding: 12px 29px; } .postbox__comment-btn .tp-btn:hover { background-color: var(--tp-common-black); } .postbox__comment-style-2 .postbox__comment ul li { margin-bottom: 0; } .postbox__comment-style-2 .postbox__comment ul.children { margin-top: 0; } .postbox__comment-style-2 .postbox__comment ul.children li { border-bottom: 1px solid #EAEAEF; } .postbox__comment-style-2 .postbox__comment ul.children li:first-child { border-top: 1px solid #EAEAEF; } .postbox__comment-style-2 .postbox__comment ul.children .postbox__comment-box { padding-top: 37px; } .postbox__comment-style-2 .postbox__comment-title { margin-bottom: 15px; } .postbox__comment-style-2 .postbox__comment-box { box-shadow: none; padding-left: 0; padding-bottom: 38px; } [dir=rtl] .postbox__comment-style-2 .postbox__comment-box { padding-right: 0; } .postbox__comment-style-2 .postbox__comment-input input, .postbox__comment-style-2 .postbox__comment-input textarea { background-color: var(--tp-grey-7); border-color: var(--tp-grey-7); box-shadow: none; } .postbox__comment-style-2 .postbox__comment-input input:focus, .postbox__comment-style-2 .postbox__comment-input textarea:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .postbox__comment-style-2 .postbox__comment-agree input { border: 2px solid #D9D9DE; background-color: transparent; border-radius: 3px; } .postbox__comment-style-2 .postbox__comment-agree input:checked { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .postbox__related-title { font-size: 30px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 35px; } .postbox__quote { margin-top: 40px; text-align: center; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); } .postbox__quote-icon span { font-size: 34px; display: inline-block; color: #E1E1E9; margin-bottom: 9px; } .postbox__quote p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 22px; line-height: 1.36; text-align: center; letter-spacing: -0.02em; color: var(--tp-common-black); margin-bottom: 0; } .postbox__quote blockquote { padding: 32px 60px 35px; background-color: var(--tp-common-white); margin-bottom: 45px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__quote blockquote { padding-left: 40px; padding-right: 40px; } } @media (max-width: 575px) { .postbox__quote blockquote { padding-left: 30px; padding-right: 30px; } } .postbox__quote-style-2 { box-shadow: none; } .postbox__quote-style-2 blockquote { border: 1px solid var(--tp-common-black); padding-bottom: 37px; margin-top: 50px; margin-bottom: 50px; } .postbox__quote-style-3 { text-align: left; } [dir=rtl] .postbox__quote-style-3 { text-align: right; } .postbox__quote-style-3 .blog__grid-quote { padding: 70px 60px 67px; } @media (max-width: 575px) { .postbox__quote-style-3 .blog__grid-quote { padding: 50px 40px 47px; } } .postbox__quote-style-3 p { text-align: left; margin-bottom: 40px; } [dir=rtl] .postbox__quote-style-3 p { text-align: right; } .postbox__quote-style-3 blockquote { border: 1px solid var(--tp-common-black); padding-bottom: 37px; margin-top: 50px; margin-bottom: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .postbox__tag { margin-top: 40px; } } @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) { .postbox__share-wrapper .tagcloud { margin-bottom: 20px; } } .postbox__share span { font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; color: var(--tp-common-black); margin-right: 12px; } [dir=rtl] .postbox__share span { margin-left: 0; margin-right: 12px; } .postbox__share a { display: inline-block; width: 36px; height: 36px; line-height: 36px; text-align: center; color: var(--tp-text-1); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); background-color: var(--tp-common-white); margin-bottom: 6px; } .postbox__share a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .postbox__share-2 a { border: 1px solid #EAEAEF; line-height: 34px; box-shadow: none; margin-right: 1px; } [dir=rtl] .postbox__share-2 a { margin-right: 0; margin-left: 1px; } .postbox__share-2 a:hover { border-color: var(--tp-theme-1); } .postbox__thumb-overlay { position: relative; } .postbox__thumb-overlay::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(3, 4, 28, 0.3); } .postbox__content { background-color: var(--tp-common-white); padding: 43px 50px 45px; } @media (max-width: 575px) { .postbox__content { padding: 33px 28px 35px; } } .postbox__content p { margin-bottom: 30px; } .postbox__content .tp-btn { font-size: 16px; text-transform: capitalize; padding: 12px 26px; } .postbox__content .tp-btn:hover { background-color: var(--tp-common-black); } .postbox__video .play-btn { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .postbox__video .play-btn:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .postbox__audio { height: 420px; } .postbox__audio iframe { width: 100%; height: 100%; } .postbox__nav button { width: 50px; height: 50px; text-align: center; line-height: 48px; border: 1px solid rgba(255, 255, 255, 0.7); background-color: transparent; color: var(--tp-common-white); position: absolute; top: 50%; left: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); z-index: 1; font-size: 18px; } .postbox__nav button:hover { background-color: var(--tp-common-white); border-color: var(--tp-common-white); color: var(--tp-common-black); } .postbox__nav button.postbox-slider-button-next { right: 15px; left: auto; } [dir=rtl] .postbox__nav button.postbox-slider-button-next { left: 15px; right: auto; } .postbox__style-2 .postbox__top { position: relative; z-index: 1; text-align: center; padding-top: 185px; padding-bottom: 150px; } .postbox__style-2 .postbox__title { color: var(--tp-common-white); margin-bottom: 27px; font-size: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .postbox__style-2 .postbox__title { font-size: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .postbox__style-2 .postbox__title { font-size: 45px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__style-2 .postbox__title { font-size: 40px; } } @media (max-width: 575px) { .postbox__style-2 .postbox__title { font-size: 30px; } } .postbox__style-2 .postbox__thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: center; background-size: cover; background-repeat: no-repeat; z-index: -1; } .postbox__style-2 .postbox__meta-type { color: rgba(255, 255, 255, 0.7607843137); } .postbox__style-2 p.postbox__meta-name { color: var(--tp-common-white); } .tp-postbox-details p { font-size: 16px; } .rc__post { padding: 12px; padding-right: 35px; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); margin-bottom: 6px; } [dir=rtl] .rc__post { padding-right: 12px; padding-left: 35px; } .rc__post:hover .rc__post-thumb img { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } .rc__post:last-child { margin-bottom: 0; } .rc__post-thumb { overflow: hidden; margin-right: 25px; flex: 0 0 auto; } [dir=rtl] .rc__post-thumb { margin-right: 0; margin-left: 25px; } div.rc__post-thumb img { width: 90px; height: 90px; object-fit: cover; } .rc__post-title { font-size: 16px; line-height: 1.25; } .rc__post-title a:hover { color: var(--tp-theme-1); } .rc__meta span { font-size: 14px; } .rc__meta span svg, .rc__meta span i { margin-right: 6px; } [dir=rtl] .rc__meta span svg, [dir=rtl] .rc__meta span i { margin-right: 0; margin-left: 6px; } .rc__meta span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .rc__meta span:hover a { color: var(--tp-theme-1); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .sidebar__wrapper { padding-left: 0; } [dir=rtl] .sidebar__wrapper { padding-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .sidebar__wrapper { margin-top: 40px; padding-left: 0; } [dir=rtl] .sidebar__wrapper { padding-right: 0; } } .sidebar__widget-title { position: relative; display: inline-block; font-weight: 500; font-size: 22px; margin-bottom: 23px; } .sidebar__widget ul li { list-style: none; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 12px; color: var(--tp-text-1); margin-bottom: 6px; } .sidebar__widget ul li:last-child { margin-bottom: 0; } .sidebar__widget ul li a { font-family: var(--tp-ff-space); font-weight: 500; font-size: 15px; color: var(--tp-common-black); position: relative; padding-left: 14px; background: #FFFFFF; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); display: block; padding: 7px 14px; padding-left: 33px; } [dir=rtl] .sidebar__widget ul li a { padding-left: 14px; padding-right: 33px; } .sidebar__widget ul li a::after { position: absolute; content: ""; top: 50%; left: 20px; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 4px; height: 4px; background-color: var(--tp-common-black); border-radius: 50%; } [dir=rtl] .sidebar__widget ul li a::after { left: auto; right: 20px; } .sidebar__widget ul li a span { float: right; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 12px; color: var(--tp-text-1); display: inline-block; line-height: 1; padding: 4px 11px 5px; border: 1px solid #EAEAEF; border-radius: 20px; margin-top: 2px; } [dir=rtl] .sidebar__widget ul li a span { float: left; } .sidebar__widget ul li a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); } .sidebar__widget ul li a:hover::after { background-color: var(--tp-common-white); } .sidebar__widget ul li a:hover span { color: var(--tp-common-white); border-color: rgba(255, 255, 255, 0.3); } .sidebar__widget ul li:hover { color: var(--tp-common-white); } .sidebar__widget ul li ul { padding-left: 15px; padding-top: 6px; } [dir=rtl] .sidebar__widget ul li ul { padding-left: 0; padding-right: 15px; } .sidebar__widget .nice-select { height: 50px; line-height: 50px; border-radius: 0; border: 0; } .sidebar__widget .nice-select .list { border-radius: 0; } .sidebar__widget .nice-select .list .option:hover { color: var(--tp-theme-1); } .sidebar__widget #wp-calendar thead th { color: var(--tp-common-black); } .sidebar__widget #wp-calendar caption { color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .sidebar__widget #wp-calendar caption:hover { color: var(--tp-theme-1); } .sidebar__widget.widget_recent_comments ul li a { display: inline; padding: 0; background-color: transparent; box-shadow: none; } .sidebar__widget.widget_recent_comments ul li a:hover { color: var(--tp-theme-1); background-color: transparent; } .sidebar__widget.widget_recent_comments ul li:hover { color: var(--tp-text-1); } .sidebar__widget.widget_recent_entries ul li a { color: var(--tp-common-black); display: inline; padding: 0; background-color: transparent; box-shadow: none; } .sidebar__widget.widget_recent_entries ul li a:hover { background-color: transparent; color: var(--tp-theme-1); } .sidebar__widget.widget_rss ul li a { color: var(--tp-common-black); display: inline; padding: 0; background-color: transparent; box-shadow: none; } .sidebar__widget.widget_rss ul li a:hover { background-color: transparent; color: var(--tp-theme-1); } .sidebar__widget.widget_rss ul li:hover { color: var(--tp-text-1); } .sidebar__widget-style-2 ul li a { border: 1px solid #EAEAEF; box-shadow: none; } .sidebar__widget-style-2 ul li a:hover { border-color: var(--tp-theme-1); } .sidebar__widget-style-2 .sidebar__author { border: 1px solid #EAEAEF; box-shadow: none; } .sidebar__widget-style-2 .sidebar__search input { border: 1px solid #EAEAEF; box-shadow: none; } .sidebar__widget-style-2 .sidebar__search input:focus, .sidebar__widget-style-2 .sidebar__search input:hover { border-color: var(--tp-common-black); } .sidebar__widget-style-2 .sidebar__search button { background-color: transparent; } .sidebar__widget-style-2 .rc__post { background: var(--tp-common-white); border: 1px solid #EAEAEF; box-shadow: none; } .sidebar__widget-style-2 .tagcloud a { border: 1px solid #EAEAEF; box-shadow: none; } .sidebar__widget-style-2 .tagcloud a:hover { border-color: var(--tp-theme-1); } .sidebar__widget-style-2 .widget_search .wp-block-search__input { box-shadow: none; border: 1px solid var(--tp-border-5); } .sidebar__widget-style-2 .widget_search .wp-block-search__input:focus { border-color: var(--tp-theme-1); } .sidebar__widget-style-2 .widget_block ul.wp-block-latest-posts li a { border: 0; } .sidebar__search { position: relative; } .sidebar__search input { width: 100%; height: 60px; line-height: 60px; padding-left: 25px; padding-right: 50px; background-color: var(--tp-common-white); outline: 0; border: 0; box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); font-size: 15px; } [dir=rtl] .sidebar__search input { padding-right: 25px; padding-left: 50px; } .sidebar__search input::-webkit-input-placeholder { font-size: 15px; letter-spacing: -0.02em; color: #919193; } .sidebar__search input:-moz-placeholder { font-size: 15px; letter-spacing: -0.02em; color: #919193; } .sidebar__search input::-moz-placeholder { font-size: 15px; letter-spacing: -0.02em; color: #919193; } .sidebar__search input:-ms-input-placeholder { font-size: 15px; letter-spacing: -0.02em; color: #919193; } .sidebar__search button { position: absolute; top: 0; right: 0; height: 100%; padding: 0 24px; color: var(--tp-common-black); line-height: 60px; background-color: var(--tp-common-white); } [dir=rtl] .sidebar__search button { right: auto; left: 0; } .sidebar__search button svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .sidebar__search button:hover { color: var(--tp-theme-1); } .sidebar__banner::after { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); } [dir=rtl] .sidebar__banner::after { left: auto; right: 0; } .sidebar__banner-content { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 1; background: var(--tp-common-white); } .sidebar__banner-content h4 { padding: 15px 20px; font-size: 24px; color: var(--tp-common-black); text-transform: uppercase; margin-bottom: 0; } .sidebar__author { padding: 45px 50px 50px; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); text-align: center; } .sidebar__author-thumb { margin-bottom: 25px; } div.sidebar__author-thumb img { width: 144px; height: 144px; border-radius: 50%; padding: 12px; border: 1px solid #E0E0E0; } .sidebar__author-title { font-size: 18px; margin-bottom: 14px; } .sidebar__author-content p { font-size: 15px; line-height: 1.47; margin-bottom: 22px; } .sidebar__author-social a { display: inline-block; width: 40px; height: 40px; line-height: 38px; text-align: center; border: 1px solid #EAEAEF; color: var(--tp-common-black); margin-right: 3px; } [dir=rtl] .sidebar__author-social a { margin-right: 0; margin-left: 3px; } .sidebar__author-social a:last-child { margin-right: 0; } [dir=rtl] .sidebar__author-social a:last-child { margin-left: 0; } .sidebar__author-social a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); } .tagcloud { overflow: hidden; clear: both; } .tagcloud span { font-family: var(--tp-ff-space); font-weight: 700; font-size: 14px; color: var(--tp-common-black); margin-right: 12px; } [dir=rtl] .tagcloud span { margin-right: 0; margin-left: 12px; } .tagcloud a { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px !important; line-height: 1; color: var(--tp-common-black); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.06); padding: 9px 18.5px; background-color: var(--tp-common-white); text-transform: capitalize; margin-bottom: 6px; margin-right: 2px; } [dir=rtl] .tagcloud a { margin-right: 0; margin-left: 2px; } .tagcloud a:hover { background: var(--tp-theme-1); color: var(--tp-common-white); } .tagcloud-sm a { padding: 8px 12.5px; } .tagcloud-style-2 a { padding: 7px 11.5px; border: 1px solid #EAEAEF; box-shadow: none; } .tagcloud-style-2 a:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } .postbox__details-content-wrapper blockquote { margin-top: 40px; text-align: center; background-color: var(--tp-common-white); box-shadow: 0px 1px 3px rgba(3, 4, 28, 0.1); padding: 32px 60px 35px; background-color: var(--tp-common-white); margin-bottom: 45px; } @media only screen and (min-width: 576px) and (max-width: 767px) { .postbox__details-content-wrapper blockquote { padding-left: 40px; padding-right: 40px; } } @media (max-width: 575px) { .postbox__details-content-wrapper blockquote { padding-left: 30px; padding-right: 30px; } } @media (max-width: 575px) { .postbox__details-content-wrapper blockquote { padding-left: 15px; padding-right: 15px; } } .postbox__details-content-wrapper blockquote p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 22px; line-height: 1.36; letter-spacing: -0.02em; color: var(--tp-common-black); margin-bottom: 0; } .postbox__details-content-wrapper blockquote cite { font-size: 18px; display: block; margin-top: 10px; color: #070337; font-style: inherit; font-weight: 600; position: relative; } .postbox__details-content-wrapper blockquote cite::before { content: ""; font-size: 28px; color: var(--tp-theme-1); padding-bottom: 0px; display: inline-block; background: var(--tp-theme-1); height: 2px; width: 40px; font-weight: 400; text-align: center; top: -4px; margin-right: 10px; position: relative; } [dir=rtl] .postbox__details-content-wrapper blockquote cite::before { margin-right: 0; margin-left: 10px; } /*----------------------------------------*/ /* 44. FOOTER CSS START /*----------------------------------------*/ .footer__widget .nice-select { border-radius: 0; } .footer__widget .nice-select .list { border-radius: 0; } .footer__widget-space { padding-top: 40px; padding-bottom: 40px; } .footer__widget-title { font-size: 24px; color: var(--tp-common-white); margin-bottom: 25px; position: relative; font-family: var(--tp-ff-space); } .footer__widget-title-6 { font-weight: 600; font-size: 20px; color: var(--tp-common-white); margin-bottom: 25px; margin-top: 15px; } .footer__widget-title-7 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 24px; color: var(--tp-common-white); margin-bottom: 40px; margin-top: 0; } .footer__widget-title-8 { font-family: var(--tp-ff-space); font-weight: 700; font-size: 22px; color: var(--tp-common-white); margin-bottom: 45px; margin-top: 0; } .footer__widget ul li { list-style: none; margin-bottom: 17px; line-height: 1; color: var(--tp-text-3); } .footer__widget ul li a { font-family: var(--tp-ff-inter); font-size: 16px; color: var(--tp-text-3); position: relative; padding-left: 13px; line-height: 1.5; } [dir=rtl] .footer__widget ul li a { padding-left: 0; padding-right: 13px; } .footer__widget ul li a::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); background-color: var(--tp-text-3); width: 5px; height: 5px; background-color: var(--tp-text-3); border-radius: 50%; } [dir=rtl] .footer__widget ul li a::after { left: auto; right: 0; } .footer__widget ul li a:hover { color: var(--tp-theme-1); } .footer__widget p { color: var(--tp-text-4); font-size: 16px; font-weight: 500; font-family: var(--tp-ff-inter); margin-bottom: 20px; } .footer__widget-3 .footer__widget-title { margin-bottom: 50px; font-size: 22px; } .footer__widget-3 ul li { list-style: none; margin-bottom: 24px; line-height: 1; } .footer__widget-3 ul li a { font-family: var(--tp-ff-inter); font-size: 16px; color: var(--tp-text-8); position: relative; padding-left: 0; font-weight: 500; } [dir=rtl] .footer__widget-3 ul li a { padding-right: 0; } .footer__widget-3 ul li a::after { display: none; } .footer__widget-3 ul li a:hover { color: var(--tp-theme-1); } .footer__widget-4 p { font-size: 16px; font-weight: 500; font-family: var(--tp-ff-inter); margin-bottom: 27px; color: #FFFFFF; opacity: 0.7; } .footer__widget-4 ul li { color: var(--tp-text-12); } .footer__widget-4 ul li a { color: var(--tp-text-12); } .footer__widget-4 ul li a::after { background-color: var(--tp-text-12); } .footer__widget-4 ul li a:hover { color: var(--tp-theme-4); } .footer__widget-5 p { font-family: var(--tp-ff-inter); font-size: 16px; font-weight: 400; line-height: 24px; color: var(--tp-text-3); margin-bottom: 27px; } .footer__widget-5 ul li { color: var(--tp-text-3); } .footer__widget-5 ul li a { color: var(--tp-text-3); } .footer__widget-5 ul li a::after { background-color: var(--tp-text-3); } .footer__widget-5 ul li a:hover { color: var(--tp-common-white); } .footer__widget-5 .footer__logo { margin-bottom: 25px; } .footer__widget-5 .footer__logo .footer-logo-light { display: block; } .footer__widget-5 .footer__logo .footer-logo-black { display: none; } .footer__widget-7 p { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 16px; line-height: 1.38; color: var(--tp-text-24); margin-bottom: 27px; } .footer__widget-6 p { font-family: var(--tp-ff-roboto); font-size: 16px; font-weight: 400; line-height: 24px; color: var(--tp-text-3); margin-bottom: 27px; } .footer__widget-6 ul li { list-style: none; color: rgba(255, 255, 255, 0.7); margin-bottom: 8px; font-size: 15px; font-weight: 500; font-family: var(--tp-ff-roboto); } .footer__widget-6 ul li a { color: rgba(255, 255, 255, 0.7); font-family: var(--tp-ff-roboto); } [dir=rtl] .footer__widget-6 ul li a { padding-right: 0; } .footer__widget-6 ul li a:hover { color: var(--tp-common-white); } .footer__widget-6 .footer__logo { margin-bottom: 25px; } .footer__widget-6 .footer__info p { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; line-height: 22px; color: var(--tp-common-white); margin-bottom: 20px; } .footer__widget-6 .footer__info .link-btn-2 { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; color: #8F98AA; } .footer__widget-6 .footer__info .link-btn-2::after { background-color: #8F98AA; } .footer__widget-6 .footer__info .link-btn-2::before { background-color: var(--tp-theme-6); } .footer__widget-6 .footer__info .link-btn-2:hover { color: var(--tp-theme-6); } .footer__widget-8 p { font-family: var(--tp-ff-space); font-size: 16px; line-height: 24px; color: #C5C5C5; } .footer__widget-8 ul li { list-style: none; color: #C5C5C5; margin-bottom: 22px; font-size: 16px; font-weight: 500; font-family: var(--tp-ff-space); } .footer__widget-8 ul li a { color: #C5C5C5; padding-left: 0; font-family: var(--tp-ff-space); } [dir=rtl] .footer__widget-8 ul li a { padding-right: 0; } .footer__widget-8 ul li a::after { display: none; } .footer__widget-8 ul li a:hover { color: var(--tp-theme-8); } .footer__widget-8 .footer__logo { margin-bottom: 26px; } .footer__widget-9 .footer__logo { margin-bottom: 0; } .footer__widget-9 p { font-family: var(--tp-ff-syne); font-weight: 500; font-size: 16px; line-height: 24px; color: rgba(5, 18, 20, 0.8); } .footer__widget-9 ul li { list-style: none; color: rgba(5, 18, 20, 0.8); margin-bottom: 22px; font-size: 16px; font-weight: 500; font-family: var(--tp-ff-syne); } .footer__widget-9 ul li a { color: rgba(5, 18, 20, 0.8); padding-left: 0; font-family: var(--tp-ff-syne); } [dir=rtl] .footer__widget-9 ul li a { padding-right: 0; } .footer__widget-9 ul li a::after { display: none; } .footer__widget-9 ul li a:hover { color: var(--tp-common-black); } .footer__widget-10 .footer__logo { margin-bottom: 21px; } .footer__widget-10 .footer__widget-title { margin-bottom: 30px; } .footer__widget-10 p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 1.5; color: #C5C5C5; } .footer__widget-10 ul li { font-family: var(--tp-ff-space); font-size: 16px; color: #C5C5C5; } .footer__widget-10 ul li a { color: #C5C5C5; padding-left: 15px; font-family: var(--tp-ff-space); } [dir=rtl] .footer__widget-10 ul li a { padding-left: 0; padding-right: 15px; } .footer__widget-10 ul li a::after { background-color: #C5C5C5; } .footer__widget-10 ul li a:hover { color: var(--tp-theme-10); } .footer__widget-10 ul li a:hover::after { background-color: var(--tp-theme-10); } .footer__logo { margin-bottom: 15px; } .footer__blog-item { margin-bottom: 15px; } .footer__blog-item:last-child { margin-bottom: 0; } .footer__blog-item-2 { margin-bottom: 22px; } .footer__blog-item-2:last-child { margin-bottom: 0; } .footer__blog-meta { margin-bottom: 3px; } .footer__blog-meta span { font-size: 14px; color: rgba(255, 255, 255, 0.7); } .footer__blog-meta span i { color: var(--tp-theme-3); margin-right: 3px; } [dir=rtl] .footer__blog-meta span i { margin-right: 0; margin-left: 3px; } .footer__blog-meta span a:hover { color: var(--tp-theme-3); } .footer__blog-meta-4 span { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 14px; line-height: 14px; color: var(--tp-text-11); } .footer__blog-thumb { flex: 0 0 auto; } .footer__blog-thumb img { width: 86px; height: 86px; border-radius: 2px; margin-right: 13px; object-fit: cover; } [dir=rtl] .footer__blog-thumb img { margin-right: 0; margin-left: 13px; } .footer__blog-title { font-size: 17px; text-transform: capitalize; color: var(--tp-common-white); margin-bottom: 4px; line-height: 1.3; font-family: var(--tp-ff-space); letter-spacing: -1px; } .footer__blog-title a:hover { color: var(--tp-theme-3); } .footer__blog-title-4 { font-family: var(--tp-ff-inter); font-weight: 600; font-size: 16px; letter-spacing: -0.04em; color: var(--tp-common-white); margin-bottom: 7px; line-height: 1.3; } .footer__blog-title-4 a:hover { color: var(--tp-theme-4); } .footer__blog-content { padding-top: 4px; } .footer__blog-tag a { display: inline-block; font-family: var(--tp-ff-inter); font-weight: 600; font-size: 12px; text-transform: uppercase; color: var(--tp-theme-4); position: relative; padding-left: 12px; } [dir=rtl] .footer__blog-tag a { padding-left: 0; padding-right: 12px; } .footer__blog-tag a::after { position: absolute; content: ""; left: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); width: 5px; height: 5px; background-color: var(--tp-theme-4); border-radius: 50%; } [dir=rtl] .footer__blog-tag a::after { left: auto; right: 0; } .footer__info-8 p { font-weight: 500; font-size: 18px; color: var(--tp-common-white); margin-bottom: 27px; } .footer__info-10 .footer__info-icon-8 span { color: var(--tp-theme-10); } .footer__info-10 .footer__info-icon-8 span svg { width: 20px; } .footer__info-10 .footer__info-text-8 h4 { color: #C5C5C5; opacity: 1; font-weight: 400; } .footer__info-10 .footer__info-text-8 a:hover { color: var(--tp-theme-10); } .footer__info-item { margin-bottom: 20px; } .footer__info-item-6 { margin-bottom: 10px; } .footer__info-item-6:last-child { margin-bottom: 35px; } .footer__info-item-8 { margin-bottom: 20px; } .footer__info-item-8:last-child { margin-bottom: 0px; } [dir=rtl] .footer__info-icon { margin-right: 0; margin-left: 20px; } .footer__info-icon i { display: inline-block; color: var(--tp-common-white); font-size: 16px; width: 46px; height: 46px; line-height: 46px; text-align: center; background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; } .footer__info-icon span { display: inline-block; color: var(--tp-common-white); font-size: 16px; width: 46px; height: 46px; line-height: 46px; text-align: center; background-color: rgba(255, 255, 255, 0.1); border-radius: 8px; } .footer__info-icon span svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } [dir=rtl] .footer__info-icon-6 { margin-right: 0; margin-left: 20px; } .footer__info-icon-6 i, .footer__info-icon-6 span { font-size: 16px; color: var(--tp-common-white); } .footer__info-icon-6 svg { width: 16px; } [dir=rtl] .footer__info-icon-8 { margin-right: 0; margin-left: 20px; } .footer__info-icon-8 i, .footer__info-icon-8 span { font-size: 16px; color: var(--tp-theme-8); } .footer__info-icon-8 svg { -webkit-transform: translateY(-3px); -moz-transform: translateY(-3px); -ms-transform: translateY(-3px); -o-transform: translateY(-3px); transform: translateY(-3px); } .footer__info-text h4 { color: var(--tp-common-white); font-family: var(--tp-ff-space); font-weight: 700; font-size: 16px; margin-bottom: 0; } .footer__info-text a { color: var(--tp-text-3); font-weight: 400; font-size: 14px; font-family: var(--tp-ff-inter); } .footer__info-text a:hover { color: var(--tp-common-white); } .footer__info-text-6 a { font-weight: 500; font-size: 15px; color: rgba(255, 255, 255, 0.7); font-family: var(--tp-ff-roboto); } .footer__info-text-6 a:hover { color: var(--tp-common-white); } .footer__info-text-8 h4 { font-family: var(--tp-ff-space); font-weight: 400; font-size: 14px; line-height: 18px; color: var(--tp-common-white); opacity: 0.7; margin-bottom: 0; } .footer__info-text-8 a { font-weight: 500; font-size: 16px; color: var(--tp-common-white); font-family: var(--tp-ff-space); } .footer__info-text-8 a:hover { color: var(--tp-theme-8); } .footer__info .tp-link-btn-text { color: var(--tp-text-20); font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; line-height: 18px; position: relative; padding-right: 20px; } [dir=rtl] .footer__info .tp-link-btn-text { padding-right: 0; padding-left: 20px; } .footer__info .tp-link-btn-text::after { position: absolute; content: ""; left: 0; bottom: -1px; width: 100%; background-color: var(--tp-text-20); height: 1px; } .footer__info .tp-link-btn-text:hover { color: var(--tp-common-white); } .footer__info .tp-link-btn-text:hover::after { background-color: var(--tp-common-white); } .footer__contact { margin-bottom: 12px; } .footer__contact p { color: var(--tp-text-1); font-size: 16px; margin-bottom: 20px; } .footer__contact iframe { width: 100%; height: 110px; filter: grayscale(100%); } .footer__contact-call span { font-size: 20px; font-weight: 500; color: var(--tp-common-white); font-family: var(--tp-ff-inter); } .footer__contact-call span i { color: var(--tp-theme-1); } .footer__contact-call span a:hover { color: var(--tp-theme-1); } .footer__contact-mail span { font-size: 16px; color: var(--tp-text-3); font-family: var(--tp-ff-inter); line-height: 1; } .footer__contact-mail span i { color: var(--tp-theme-1); } .footer__contact-mail span a:hover { color: var(--tp-theme-1); } .footer__subscribe p { color: var(--tp-text-1); font-size: 16px; margin-bottom: 20px; } .footer__subscribe-7 p { margin-bottom: 22px; } .footer__subscribe-8 p { font-weight: 500; font-size: 16px; line-height: 24px; color: #C5C5C5; margin-bottom: 17px; } .footer__subscribe-box { position: relative; } .footer__subscribe-box-3 { position: relative; } .footer__subscribe-box-3 .footer-sub-btn-3 { display: inline-block; font-size: 20px; color: var(--tp-common-white); position: absolute; top: 50%; right: 20px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .footer__subscribe-box-3 .footer-sub-btn-3 { right: auto; left: 20px; } .footer__subscribe-box-3 .footer-sub-btn-3:hover { color: var(--tp-theme-1); } .footer__subscribe-input input { width: 100%; height: 60px; padding: 0 23px; padding-right: 70px; border: 1px solid #ccc; background-color: transparent; font-size: 16px; color: var(--tp-common-black); } [dir=rtl] .footer__subscribe-input input { padding-right: 23px; padding-left: 70px; } .footer__subscribe-input input::-webkit-input-placeholder { color: var(--tp-text-1); } .footer__subscribe-input input:-moz-placeholder { color: var(--tp-text-1); } .footer__subscribe-input input::-moz-placeholder { color: var(--tp-text-1); } .footer__subscribe-input input:-ms-input-placeholder { color: var(--tp-text-1); } .footer__subscribe-input-3 { position: relative; } .footer__subscribe-input-3 input { width: 100%; height: 60px; padding: 0 60px; padding-right: 45px; border: 0; box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.04); box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.24); backdrop-filter: blur(4px); font-size: 16px; color: var(--tp-common-white); } [dir=rtl] .footer__subscribe-input-3 input { padding-left: 45px; padding-right: 60px; text-align: right; } .footer__subscribe-input-3 input::-webkit-input-placeholder { font-size: 16px; color: rgba(255, 255, 255, 0.6); font-family: var(--tp-ff-inter); } .footer__subscribe-input-3 input:-moz-placeholder { font-size: 16px; color: rgba(255, 255, 255, 0.6); font-family: var(--tp-ff-inter); } .footer__subscribe-input-3 input::-moz-placeholder { font-size: 16px; color: rgba(255, 255, 255, 0.6); font-family: var(--tp-ff-inter); } .footer__subscribe-input-3 input:-ms-input-placeholder { font-size: 16px; color: rgba(255, 255, 255, 0.6); font-family: var(--tp-ff-inter); } .footer__subscribe-input-3 input:focus { box-shadow: 0px 2px 0px var(--tp-theme-3); } .footer__subscribe-input-3 i, .footer__subscribe-input-3 svg { display: inline-block; font-size: 16px; color: rgba(255, 255, 255, 0.6); position: absolute; top: 50%; left: 25px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } [dir=rtl] .footer__subscribe-input-3 i, [dir=rtl] .footer__subscribe-input-3 svg { left: auto; right: 25px; } .footer__subscribe-input-3 svg path { stroke: rgba(255, 255, 255, 0.6); } .footer__subscribe-input-7 { position: relative; } .footer__subscribe-input-7 input { width: 100%; height: 60px; background-color: var(--tp-common-white); border-radius: 30px; font-family: var(--tp-ff-inter); font-size: 15px; border: 0; outline: 0; padding-left: 30px; padding-right: 60px; } [dir=rtl] .footer__subscribe-input-7 input { padding-left: 60px; padding-right: 30px; text-align: right; } .footer__subscribe-input-7 input::-webkit-input-placeholder { color: #7D8995; } .footer__subscribe-input-7 input:-moz-placeholder { color: #7D8995; } .footer__subscribe-input-7 input::-moz-placeholder { color: #7D8995; } .footer__subscribe-input-7 input:-ms-input-placeholder { color: #7D8995; } .footer__subscribe-input-7 button { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; color: var(--tp-common-black-11); background-color: var(--tp-common-yellow-3); border-radius: 50%; font-size: 18px; position: absolute; top: 5px; right: 5px; } [dir=rtl] .footer__subscribe-input-7 button { right: auto; left: 5px; } .footer__subscribe-input-7 button:hover { color: var(--tp-common-white); background-color: var(--tp-theme-7); } .footer__subscribe-input-8 { position: relative; } .footer__subscribe-input-8 input { width: 100%; height: 60px; background-color: #313446; font-family: var(--tp-ff-inter); font-size: 16px; border: 0; outline: 0; padding-left: 25px; padding-right: 140px; color: var(--tp-common-white); } [dir=rtl] .footer__subscribe-input-8 input { padding-left: 140px; padding-right: 25px; text-align: right; } .footer__subscribe-input-8 input::-webkit-input-placeholder { color: #FFFFFF; opacity: 0.6; } .footer__subscribe-input-8 input:-moz-placeholder { color: #FFFFFF; opacity: 0.6; } .footer__subscribe-input-8 input::-moz-placeholder { color: #FFFFFF; opacity: 0.6; } .footer__subscribe-input-8 input:-ms-input-placeholder { color: #FFFFFF; opacity: 0.6; } .footer__subscribe-input-8 button { display: inline-block; font-family: var(--tp-ff-space); font-weight: 500; font-size: 16px; line-height: 60px; height: 60px; text-align: center; padding: 0 26px; color: var(--tp-common-white); background-color: var(--tp-theme-8); position: absolute; top: 0; right: 0; } [dir=rtl] .footer__subscribe-input-8 button { right: auto; left: 0; } .footer__subscribe-input-8 button:hover { color: var(--tp-common-black-12); background-color: var(--tp-common-white); } .footer__subscribe-title { font-size: 50px; line-height: 1; font-weight: 700; font-family: var(--tp-ff-space); background-image: -webkit-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -moz-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -ms-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: -o-linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); background-image: linear-gradient(89.64deg, #F87171 0.32%, #FACC15 32.07%, #4ADE80 60.55%, #38BDF8 99.28%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; -moz-animation: sectionPreTitle 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: sectionPreTitle 3s ease-in-out 1s forwards infinite alternate; animation: sectionPreTitle 3s ease-in-out 1s forwards infinite alternate; background-size: 150% 150%; margin-bottom: 35px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__subscribe-title { font-size: 45px; } } @media (max-width: 575px) { .footer__subscribe-title { font-size: 40px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__copyright { margin-bottom: 20px; } } .footer__copyright p { font-size: 14px; color: var(--tp-text-3); font-weight: 500; margin-bottom: 0; font-family: var(--tp-ff-inter); } .footer__copyright p a { color: var(--tp-common-white); display: inline-block; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__copyright-2 { margin-bottom: 20px; } } .footer__copyright-2 p { font-size: 14px; font-weight: 400; color: #7E7E7E; font-family: var(--tp-ff-inter); margin-bottom: 0; } .footer__copyright-2 p a { font-weight: 600; color: var(--tp-theme-2); display: inline-block; } .footer__copyright-2 p a:hover { color: var(--tp-common-black); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__copyright-3 { margin-bottom: 20px; } } .footer__copyright-3 p { font-size: 14px; font-weight: 400; color: var(--tp-text-9); font-family: var(--tp-ff-inter); margin-bottom: 0; } .footer__copyright-3 p a { font-weight: 600; color: var(--tp-common-white); display: inline-block; } .footer__copyright-4 p { color: var(--tp-text-11); font-size: 14px; font-weight: 500; margin-bottom: 0; font-family: var(--tp-ff-inter); } .footer__copyright-4 p a { color: var(--tp-common-white); display: inline-block; } .footer__copyright-5 p { color: var(--tp-text-15); font-size: 14px; font-weight: 400; margin-bottom: 0; font-family: var(--tp-ff-inter); } .footer__copyright-5 p a { font-weight: 600; color: var(--tp-common-white); display: inline-block; } .footer__copyright-6 p { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 500; margin-bottom: 0; } .footer__copyright-6 p a { font-weight: 500; color: var(--tp-common-white); display: inline-block; } .footer__copyright-7 p { font-family: var(--tp-ff-inter); color: var(--tp-text-24); font-size: 14px; font-weight: 500; margin-bottom: 0; } .footer__copyright-7 p a { font-weight: 500; color: var(--tp-theme-7); display: inline-block; } .footer__copyright-8 p { font-family: var(--tp-ff-inter); font-size: 15px; color: #93949B; margin-bottom: 0; } .footer__copyright-8 p a { font-weight: 500; color: var(--tp-common-white); display: inline-block; } .footer__copyright-8 p a:hover { color: var(--tp-theme-8); } .footer__copyright-9 p { font-family: var(--tp-ff-syne); font-weight: 400; font-size: 16px; color: #626272; margin-bottom: 0; } .footer__copyright-9 p a { font-weight: 500; color: var(--tp-common-black); display: inline-block; } .footer__copyright-10 p { font-family: var(--tp-ff-space); font-size: 15px; color: #C5C5C5; } .footer__copyright-10 p a { color: var(--tp-theme-10); display: inline-block; } .footer__social.tp-footer-social-orange a:hover { color: var(--tp-theme-8); } .footer__social-title { font-size: 16px; color: var(--tp-common-white); margin-bottom: 15px; } .footer__social a { display: inline-block; color: var(--tp-common-white); font-size: 16px; margin-right: 15px; } [dir=rtl] .footer__social a { margin-right: 0; margin-left: 15px; } .footer__social a:last-child { margin-right: 0; } [dir=rtl] .footer__social a:last-child { margin-left: 0; } .footer__social a:hover { color: var(--tp-theme-1); } .footer__social-2 a { display: inline-block; width: 40px; height: 40px; line-height: 36px; border: 2px solid rgba(22, 34, 19, 0.1); font-size: 14px; color: #5E6167; text-align: center; margin-right: 5px; } [dir=rtl] .footer__social-2 a { margin-right: 0; margin-left: 5px; } .footer__social-2 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-2 a:last-child { margin-left: 5px; } .footer__social-2 a:hover { color: var(--tp-common-white); border-color: var(--tp-theme-2); background-color: var(--tp-theme-2); } .footer__social-3 a { display: inline-block; width: 40px; height: 40px; line-height: 38px; text-align: center; color: var(--tp-common-white); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%; font-size: 14px; margin-right: 3px; } [dir=rtl] .footer__social-3 a { margin-right: 0; margin-left: 3px; } .footer__social-3 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-3 a:last-child { margin-left: 0; } .footer__social-3 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-3); border-color: var(--tp-theme-3); } .footer__social-4 h5 { font-family: var(--tp-ff-space); font-size: 18px; color: var(--tp-common-white); } .footer__social-4 a { display: inline-block; width: 40px; height: 40px; line-height: 36px; text-align: center; color: var(--tp-common-white); border: 2px solid rgba(255, 255, 255, 0.1019607843); margin-right: 2px; } [dir=rtl] .footer__social-4 a { margin-right: 0; margin-left: 2px; } .footer__social-4 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-4 a:last-child { margin-left: 0; } .footer__social-4 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-4); border-color: var(--tp-theme-4); } @media (max-width: 575px) { .footer__social-5 { margin-top: 15px; } } .footer__social-5 a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: var(--tp-common-white); margin-right: 3px; background-color: rgba(255, 255, 255, 0.06); border-radius: 8px; } [dir=rtl] .footer__social-5 a { margin-right: 0; margin-left: 3px; } .footer__social-5 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-5 a:last-child { margin-left: 0; } .footer__social-5 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-5); } @media (max-width: 575px) { .footer__social-6 { margin-top: 15px; } } .footer__social-6 a { display: inline-block; width: 36px; height: 36px; line-height: 34px; text-align: center; color: var(--tp-common-white); margin-right: 3px; border: 1px solid rgba(255, 255, 255, 0.1); } [dir=rtl] .footer__social-6 a { margin-right: 0; margin-left: 3px; } .footer__social-6 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-6 a:last-child { margin-left: 0; } .footer__social-6 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-6); border-color: var(--tp-theme-6); } @media (max-width: 575px) { .footer__social-8 { margin-top: 15px; } } .footer__social-8 a { display: inline-block; width: 40px; height: 40px; line-height: 40px; text-align: center; color: var(--tp-common-white); margin-right: 2px; background-color: #313446; } [dir=rtl] .footer__social-8 a { margin-right: 0; margin-left: 2px; } .footer__social-8 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-8 a:last-child { margin-left: 0; } .footer__social-8 a:hover { color: var(--tp-common-white); background-color: var(--tp-theme-8); } @media (max-width: 575px) { .footer__social-9 { margin-top: 15px; justify-content: start; } [dir=rtl] .footer__social-9 { justify-content: end; } } .footer__social-9 a { display: inline-block; width: 44px; height: 44px; line-height: 44px; text-align: center; color: rgba(5, 18, 20, 0.7); margin-right: 6px; background-color: #fff; box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.08); } [dir=rtl] .footer__social-9 a { margin-right: 0; margin-left: 6px; } .footer__social-9 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-9 a:last-child { margin-left: 0; } .footer__social-9 a:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } .footer__social-10 { margin-top: 2px; } @media (max-width: 575px) { .footer__social-10 { margin-top: 15px; } } .footer__social-10 a { display: inline-block; text-align: center; color: var(--tp-common-white); margin-right: 15px; } [dir=rtl] .footer__social-10 a { margin-right: 0; margin-left: 15px; } .footer__social-10 a:last-child { margin-right: 0; } [dir=rtl] .footer__social-10 a:last-child { margin-left: 0; } .footer__social-10 a:hover { color: var(--tp-theme-10); } .footer__top { position: relative; padding-top: 100px; padding-bottom: 40px; z-index: 1; } .footer__top-2 { padding-top: 130px; padding-bottom: 13px; border-bottom: 1px solid var(--tp-border-9); } .footer__top-3 { position: relative; padding-top: 100px; padding-bottom: 70px; z-index: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .footer__top-4 { padding-top: 95px; padding-bottom: 30px; } .footer__top-5 { position: relative; padding-top: 100px; padding-bottom: 20px; z-index: 1; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .footer__top-6 { position: relative; padding-top: 120px; padding-bottom: 50px; z-index: 1; } .footer__top-7 { position: relative; padding-top: 103px; padding-bottom: 45px; z-index: 1; } .footer__top-8 { position: relative; padding-top: 113px; padding-bottom: 65px; z-index: 1; border-bottom: 1px solid var(--tp-border-1); } .footer__top-9 { padding: 0; } .footer__top-9-inner { position: relative; padding-top: 24px; padding-bottom: 24px; z-index: 1; border-bottom: 1px solid #E2E2E8; } .footer__bottom { position: relative; z-index: 1; } .footer__bottom-inner { padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--tp-border-1); } .footer__bottom-inner-2 { padding-top: 20px; padding-bottom: 33px; } .footer__bottom-inner-4 { padding-top: 20px; padding-bottom: 20px; border-top: 1px solid var(--tp-border-1); } .footer__bottom-inner-6 { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid var(--tp-border-1); } .footer__bottom-inner-7 { padding-top: 22px; padding-bottom: 40px; border-top: 1px solid var(--tp-border-1); } .footer__bottom-3 { padding-top: 26px; padding-bottom: 37px; position: relative; z-index: 1; } .footer__bottom-5 { padding-top: 22px; padding-bottom: 40px; } .footer__bottom-8 { padding-top: 23px; padding-bottom: 23px; background-color: rgba(17, 20, 40, 0.4); } .footer__bottom-9 { padding-top: 23px; padding-bottom: 28px; position: relative; } .footer__bottom-9 .tp-footer-gradient-line { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 5px; background-image: -webkit-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -moz-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -ms-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: -o-linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); background-image: linear-gradient(329deg, #FF91FA 13.55%, #FA6490 48.54%, #F7D86A 86.44%); } .footer__bottom-10 { padding: 14px 0 7px; background-color: rgba(255, 255, 255, 0.04); } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__bottom-10 { padding-bottom: 20px; } } .footer__bottom-line { position: relative; } .footer__bottom-line::after { position: absolute; content: ""; left: 0; bottom: 0; width: 100%; height: 5px; background-image: -webkit-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -moz-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -ms-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: -o-linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); background-image: linear-gradient(180deg, #FF3939 0.01%, #BF2132 100%); } .footer__app-item { margin-bottom: 10px; } .footer__qrcode { background-color: var(--tp-common-white); padding: 10px 10px; } [dir=rtl] .footer__qrcode-thumb { margin-right: 0; margin-left: 10px; } .footer__qrcode-thumb img { width: 44px; height: 44px; } .footer__qrcode-content p { margin-bottom: 0; font-family: var(--tp-ff-inter); color: #525258; font-size: 14px; line-height: 1.14; } .footer__qrcode-content p a:hover { color: var(--tp-theme-1); } .footer__link a { display: inline-block; font-family: var(--tp-ff-inter); font-size: 14px; font-weight: 500; color: var(--tp-text-3); margin-right: 25px; } [dir=rtl] .footer__link a { margin-right: 0; margin-left: 25px; } .footer__link a:last-child { margin-right: 0; } [dir=rtl] .footer__link a:last-child { margin-left: 0; } .footer__link a:hover { color: var(--tp-common-white); } .footer__link-4 a { display: inline-block; font-family: var(--tp-ff-inter); font-size: 14px; font-weight: 500; color: var(--tp-text-11); margin-right: 25px; } [dir=rtl] .footer__link-4 a { margin-right: 0; margin-left: 25px; } .footer__link-4 a:last-child { margin-right: 0; } [dir=rtl] .footer__link-4 a:last-child { margin-left: 0; } .footer__link-4 a:hover { color: var(--tp-common-white); } .footer__link-6 a { display: inline-block; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.5); position: relative; padding-right: 12px; margin-right: 5px; font-family: var(--tp-ff-roboto); } [dir=rtl] .footer__link-6 a { padding-right: 0; margin-right: 0; padding-left: 12px; margin-left: 5px; } .footer__link-6 a::after { position: absolute; content: ""; right: 0; top: 50%; width: 3px; height: 3px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); } [dir=rtl] .footer__link-6 a::after { right: auto; left: 0; } .footer__link-6 a:last-child { margin-right: 0; padding-right: 0; } [dir=rtl] .footer__link-6 a:last-child { margin-left: 0; padding-left: 0; } .footer__link-6 a:last-child::after { display: none; } .footer__link-6 a:hover { color: var(--tp-common-white); } @media (max-width: 575px) { .footer__link-7 { margin-bottom: 15px; } } .footer__link-7 a { font-family: var(--tp-ff-inter); font-size: 14px; font-weight: 500; color: var(--tp-text-24); position: relative; margin-right: 25px; } [dir=rtl] .footer__link-7 a { margin-right: 0; margin-left: 25px; } .footer__link-7 a:last-child { margin-right: 0; } .footer__link-7 a:first-child { margin-left: 0; } .footer__link-7 a:hover { color: var(--tp-common-white); } .footer__link-10 a { font-family: var(--tp-ff-space); font-size: 15px; color: #C5C5C5; margin-right: 15px; display: inline-block; } [dir=rtl] .footer__link-10 a { margin-right: 0; margin-left: 15px; } .footer__link-10 a:last-child { margin-right: 0; } [dir=rtl] .footer__link-10 a:last-child { margin-left: 0; } .footer__link-10 a:hover { color: var(--tp-theme-10); } .footer__hello a { display: inline-block; line-height: 1; font-size: 15px; font-weight: 500; color: var(--tp-text-6); font-family: var(--tp-ff-inter); } .footer__hello a:hover { color: var(--tp-theme-2); } [dir=rtl] .footer__opening-icon { margin-right: 0; margin-left: 15px; } .footer__opening-icon i { color: var(--tp-common-orange); font-size: 35px; } .footer__opening-icon span { color: var(--tp-common-orange); } .footer__opening-content { padding-right: 80px; } [dir=rtl] .footer__opening-content { padding-right: 0; padding-left: 80px; } .footer__opening-content h4 { font-family: var(--tp-ff-space); font-size: 17px; letter-spacing: -0.02em; color: var(--tp-common-white); } .footer__opening-content p { font-family: var(--tp-ff-space); font-weight: 500; font-size: 14px; line-height: 22px; color: var(--tp-text-3); } .footer__shape-1 { position: absolute; bottom: 35%; left: 8%; -moz-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; -webkit-animation: tprotate 3s ease-in-out 1s forwards infinite alternate; animation: tprotate 3s ease-in-out 1s forwards infinite alternate; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__shape-1 { bottom: 47%; left: 6%; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__shape-1 { bottom: 65%; } } .footer__shape-3 { position: absolute; top: -6%; left: 10%; z-index: -1; } @media only screen and (min-width: 1700px) and (max-width: 1899px), only screen and (min-width: 1600px) and (max-width: 1699px), only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__shape-3 { left: 0; } } @media only screen and (min-width: 1400px) and (max-width: 1599px), only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__shape-3 { left: 0; width: 100%; } } .footer__shape-4 { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; z-index: -1; object-fit: cover; } .footer__bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; opacity: 0.1; background-blend-mode: luminosity; } .footer__lang { position: relative; padding-right: 0; z-index: 9; } [dir=rtl] .footer__lang { padding-left: 0; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer__lang { margin-top: 15px; } } .footer__lang .nice-select { padding: 0; padding-right: 18px; padding-left: 28px; font-size: 14px; border: 0; color: var(--tp-common-white); background-color: transparent; } [dir=rtl] .footer__lang .nice-select { padding-right: 28px; padding-left: 18px; } .footer__lang .nice-select .current { color: var(--tp-common-white); font-size: 14px; font-weight: 500; } .footer__lang .nice-select .list { border-radius: 0; margin-top: 0; left: auto; right: 0; } [dir=rtl] .footer__lang .nice-select .list { right: auto; left: 0; } .footer__lang .nice-select .list .option { color: var(--tp-text-1); } .footer__lang .nice-select .list .option:hover, .footer__lang .nice-select .list .option.selected.focus { color: var(--tp-theme-1); } .footer__lang-selected-lang { color: var(--tp-common-white-op-7); font-size: 14px; font-weight: 500; background-color: transparent; position: relative; padding-right: 20px; font-family: var(--tp-ff-inter); } [dir=rtl] .footer__lang-selected-lang { padding-right: 0; padding-left: 20px; } .footer__lang-selected-lang:hover { cursor: pointer; } .footer__lang-selected-lang::after { position: absolute; content: "\f107"; right: 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); color: var(--tp-common-white); font-size: 14px; font-family: var(--tp-ff-fontawesome); } [dir=rtl] .footer__lang-selected-lang::after { right: auto; left: -20px; } .footer__lang-wrapper { position: relative; } .footer__lang-list { position: absolute; bottom: 150%; right: 0; background-color: var(--tp-common-white); z-index: 11; padding: 15px 28px; border-radius: 4px; visibility: hidden; opacity: 0; -webkit-transition: all 0.2s ease-out 0s; -moz-transition: all 0.2s ease-out 0s; -ms-transition: all 0.2s ease-out 0s; -o-transition: all 0.2s ease-out 0s; transition: all 0.2s ease-out 0s; } [dir=rtl] .footer__lang-list { right: auto; left: 0; } .footer__lang-list.tp-lang-list-2.tp-lang-list-open-2 { visibility: visible; opacity: 1; bottom: 112%; } .footer__lang-list li { list-style: none; color: var(--tp-common-black); text-align: left; } [dir=rtl] .footer__lang-list li { text-align: right; } .footer__lang-list li:hover { color: var(--tp-theme-7); cursor: pointer; } [dir=rtl] .footer__lang-img { margin-right: 0; margin-left: 15px; } .footer__text { font-size: 14px; line-height: 1.43; color: var(--tp-text-1); margin-bottom: 8px; } .footer__text a { color: var(--tp-theme-1); text-decoration: underline; } #footer-list-inline li { display: inline-block; list-style: none; margin-right: 25px; margin-bottom: 0; } [dir=rtl] #footer-list-inline li { margin-right: 0; margin-left: 25px; } #footer-list-inline li:last-child { margin-right: 0; } [dir=rtl] #footer-list-inline li:last-child { margin-left: 0; } #footer-list-inline li a { font-size: 14px; font-weight: 500; color: var(--tp-text-6); font-family: var(--tp-ff-inter); display: inline-block; padding-left: 0; text-transform: uppercase; } [dir=rtl] #footer-list-inline li a { padding-right: 0; } #footer-list-inline li a::after { display: none; } #footer-list-inline li a:hover { color: var(--tp-theme-2); } #footer-list-inline-2 li { display: inline-block; list-style: none; margin-right: 25px; margin-bottom: 0; } [dir=rtl] #footer-list-inline-2 li { margin-right: 0; margin-left: 25px; } #footer-list-inline-2 li:last-child { margin-right: 0; } [dir=rtl] #footer-list-inline-2 li:last-child { margin-left: 0; } #footer-list-inline-2 li a { font-size: 14px; font-weight: 500; color: var(--tp-text-6); font-family: var(--tp-ff-inter); display: inline-block; padding-left: 0; text-transform: uppercase; } [dir=rtl] #footer-list-inline-2 li a { padding-right: 0; } #footer-list-inline-2 li a::after { display: none; } #footer-list-inline-2 li a:hover { color: var(--tp-theme-2); } ul#footer-list-inline-3, ul.footer-list-inline-3 { float: right; } [dir=rtl] ul#footer-list-inline-3, [dir=rtl] ul.footer-list-inline-3 { float: left; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { ul#footer-list-inline-3, ul.footer-list-inline-3 { float: none; margin-top: 15px; } } ul#footer-list-inline-3 li, ul.footer-list-inline-3 li { display: inline-block; list-style: none; margin: 0; margin-right: 35px; } [dir=rtl] ul#footer-list-inline-3 li, [dir=rtl] ul.footer-list-inline-3 li { margin-right: 0; margin-left: 35px; } @media (max-width: 575px) { ul#footer-list-inline-3 li, ul.footer-list-inline-3 li { margin-right: 15px; } [dir=rtl] ul#footer-list-inline-3 li, [dir=rtl] ul.footer-list-inline-3 li { margin-right: 0; margin-left: 15px; } } ul#footer-list-inline-3 li:last-child, ul.footer-list-inline-3 li:last-child { margin-right: 0; } [dir=rtl] ul#footer-list-inline-3 li:last-child, [dir=rtl] ul.footer-list-inline-3 li:last-child { margin-left: 0; } ul#footer-list-inline-3 li a, ul.footer-list-inline-3 li a { font-size: 16px; font-weight: 500; color: rgba(5, 18, 20, 0.8); font-family: var(--tp-ff-syne); display: inline-block; padding-left: 0; position: relative; } [dir=rtl] ul#footer-list-inline-3 li a, [dir=rtl] ul.footer-list-inline-3 li a { padding-right: 0; } ul#footer-list-inline-3 li a::after, ul.footer-list-inline-3 li a::after { display: none; } ul#footer-list-inline-3 li a::before, ul.footer-list-inline-3 li a::before { position: absolute; content: ""; left: auto; right: 0; bottom: 0; width: 0%; height: 1px; background-color: var(--tp-common-black); } [dir=rtl] ul#footer-list-inline-3 li a::before, [dir=rtl] ul.footer-list-inline-3 li a::before { left: 0; right: auto; } ul#footer-list-inline-3 li a:hover, ul.footer-list-inline-3 li a:hover { color: var(--tp-common-black); } ul#footer-list-inline-3 li a:hover::before, ul.footer-list-inline-3 li a:hover::before { left: 0; right: auto; width: 100%; } [dir=rtl] ul#footer-list-inline-3 li a:hover::before, [dir=rtl] ul.footer-list-inline-3 li a:hover::before { left: auto; right: 0; } #footer-float-link, .footer__widget.footer__widget-5 #menu-footer-company-link { overflow: hidden; } #footer-float-link li, .footer__widget.footer__widget-5 #menu-footer-company-link li { float: left; width: 50%; } [dir=rtl] #footer-float-link li, [dir=rtl] .footer__widget.footer__widget-5 #menu-footer-company-link li { float: right; } @media (max-width: 575px) { #footer-float-link li, .footer__widget.footer__widget-5 #menu-footer-company-link li { width: 100%; float: none; } } .footer-sub-btn { position: absolute; top: 0; right: 0; display: inline-block; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 20px; color: var(--tp-common-white); background-color: var(--tp-theme-1); } [dir=rtl] .footer-sub-btn { right: auto; left: 0; } .footer-sub-btn:hover { color: var(--tp-common-white); background-color: var(--tp-common-black); } /* footer col design for home 1 */ .footer-col-1 { padding-right: 15px; } [dir=rtl] .footer-col-1 { padding-right: 0; padding-left: 15px; } .footer-col-2 { padding-left: 30px; } [dir=rtl] .footer-col-2 { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-2 { padding-left: 20px; } [dir=rtl] .footer-col-2 { padding-left: 0; padding-right: 40px; } } @media (max-width: 575px) { .footer-col-2 { padding-left: 0; } [dir=rtl] .footer-col-2 { padding-right: 0; } } .footer-col-3 { padding-left: 30px; } [dir=rtl] .footer-col-3 { padding-left: 0; padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-3 { padding-left: 0; } [dir=rtl] .footer-col-3 { padding-right: 0; } } .footer-col-4 { padding-right: 0px; padding-left: 30px; } [dir=rtl] .footer-col-4 { padding-right: 0; padding-left: 70px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { [dir=rtl] .footer-col-4 { padding-right: 0; padding-left: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-4 { padding-right: 0px; padding-left: 20px; } [dir=rtl] .footer-col-4 { padding-right: 0; padding-left: 20px; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-4 { padding-right: 0; padding-left: 0; } [dir=rtl] .footer-col-4 { padding-right: 0; padding-left: 0; } } /* footer col design for home 2 */ .footer-col-2-1 .footer__logo { margin-bottom: 0; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-2-1 { margin-bottom: 20px; text-align: center; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-2-1 { margin-bottom: 20px; } } .footer-col-2-2 { margin-left: -50px; } [dir=rtl] .footer-col-2-2 { margin-left: 0; margin-right: -50px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-2-2 { margin-left: 0; margin-bottom: 20px; } [dir=rtl] .footer-col-2-2 { margin-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer-col-2-2 { margin-bottom: 20px; text-align: right; } [dir=rtl] .footer-col-2-2 { text-align: left; } } @media (max-width: 575px) { .footer-col-2-2 { margin-bottom: 20px; margin-left: 0; } [dir=rtl] .footer-col-2-2 { margin-right: 0; } } .footer-col-2-3 { text-align: right; margin-right: -80px; } [dir=rtl] .footer-col-2-3 { text-align: left; margin-right: 0; margin-left: -80px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-2-3 { margin-right: -45px; } [dir=rtl] .footer-col-2-3 { margin-right: 0; margin-left: -45px; } } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-2-3 { text-align: left; margin-bottom: 20px; margin-right: 0; } [dir=rtl] .footer-col-2-3 { text-align: right; margin-left: 0; } } .footer-col-2-4 { text-align: right; } [dir=rtl] .footer-col-2-4 { text-align: left; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-2-4 { text-align: left; margin-right: 0; margin-bottom: 20px; } [dir=rtl] .footer-col-2-4 { text-align: right; margin-left: 0; } } /* footer col design for home 3 */ .footer-col-3-1 { padding-right: 50px; } [dir=rtl] .footer-col-3-1 { padding-right: 0; padding-left: 50px; } @media (max-width: 575px) { .footer-col-3-1 { padding-right: 0; } [dir=rtl] .footer-col-3-1 { padding-left: 0; } } .footer-col-3-1 .footer__logo { margin-bottom: 33px; padding-top: 10px; } .footer-col-3-3 { padding-left: 30px; } [dir=rtl] .footer-col-3-3 { padding-left: 0; padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .footer-col-3-3 { padding-left: 0; } [dir=rtl] .footer-col-3-3 { padding-right: 0; } } /* footer col design for home 4 */ .footer-col-4-2 { padding-left: 100px; } [dir=rtl] .footer-col-4-2 { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-4-2 { padding-left: 0; } [dir=rtl] .footer-col-4-2 { padding-right: 0; } } .footer-col-4-3 { padding-left: 40px; } [dir=rtl] .footer-col-4-3 { padding-left: 0; padding-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-4-3 { padding-left: 0; } [dir=rtl] .footer-col-4-3 { padding-right: 0; } } /* footer col design for home 5 */ .footer-col-5-1 { padding-right: 75px; } [dir=rtl] .footer-col-5-1 { padding-right: 0; padding-left: 75px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-5-1 { padding-right: 55px; } [dir=rtl] .footer-col-5-1 { padding-right: 0; padding-left: 55px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-col-5-1 { padding-right: 40px; } [dir=rtl] .footer-col-5-1 { padding-right: 0; padding-left: 40px; } } @media (max-width: 575px) { .footer-col-5-1 { padding-right: 0; } [dir=rtl] .footer-col-5-1 { padding-left: 0; } } .footer-col-5-3 { padding-left: 100px; } [dir=rtl] .footer-col-5-3 { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer-col-5-3 { padding-left: 70px; } [dir=rtl] .footer-col-5-3 { padding-left: 0; padding-right: 70px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-5-3 { padding-left: 0; } [dir=rtl] .footer-col-5-3 { padding-left: 0; } } /* footer col design for home 6 */ .footer-col-6-1 { padding-right: 5px; } [dir=rtl] .footer-col-6-1 { padding-right: 0; padding-left: 5px; } .footer-col-6-2 { padding-left: 70px; } [dir=rtl] .footer-col-6-2 { padding-left: 0; padding-right: 70px; } @media (max-width: 575px) { .footer-col-6-2 { padding-left: 0; } [dir=rtl] .footer-col-6-2 { padding-right: 0; } } .footer-col-6-4 { padding-left: 70px; } [dir=rtl] .footer-col-6-4 { padding-left: 0; padding-right: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .footer-col-6-4 { padding-left: 0; } [dir=rtl] .footer-col-6-4 { padding-right: 0; } } /* footer col design for home 7 */ .footer-col-7-1 { padding-right: 15px; } [dir=rtl] .footer-col-7-1 { padding-right: 0; padding-left: 15px; } .footer-col-7-2 { padding-left: 100px; } [dir=rtl] .footer-col-7-2 { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-7-2 { padding-left: 40px; } [dir=rtl] .footer-col-7-2 { padding-left: 0; padding-right: 40px; } } @media (max-width: 575px) { .footer-col-7-2 { padding-left: 0; } [dir=rtl] .footer-col-7-2 { padding-right: 0; } } .footer-col-7-3 { padding-left: 40px; } [dir=rtl] .footer-col-7-3 { padding-left: 0; padding-right: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-7-3 { padding-left: 0; } [dir=rtl] .footer-col-7-3 { padding-right: 0; } } .footer-col-7-4 { padding-left: 70px; } [dir=rtl] .footer-col-7-4 { padding-left: 0; padding-right: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-7-4 { padding-left: 0; } [dir=rtl] .footer-col-7-4 { padding-right: 0; } } /* footer col design for home 8 */ .footer-col-8-2 { padding-left: 100px; } [dir=rtl] .footer-col-8-2 { padding-left: 0; padding-right: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-8-2 { padding-left: 55px; } [dir=rtl] .footer-col-8-2 { padding-left: 0; padding-right: 55px; } } @media (max-width: 575px) { .footer-col-8-2 { padding-left: 0; } [dir=rtl] .footer-col-8-2 { padding-right: 0; } } .footer-col-8-3 { padding-left: 30px; } [dir=rtl] .footer-col-8-3 { padding-left: 0; padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-8-3 { padding-left: 0; } [dir=rtl] .footer-col-8-3 { padding-right: 0; } } .footer-col-8-4 { padding-left: 40px; } [dir=rtl] .footer-col-8-4 { padding-left: 0; padding-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-8-4 { padding-left: 0; } [dir=rtl] .footer-col-8-4 { padding-right: 0; } } /* footer col design for home 10 */ .footer-col-10-2 { padding-left: 38px; } [dir=rtl] .footer-col-10-2 { padding-left: 0; padding-right: 38px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-10-2 { padding-left: 0; } [dir=rtl] .footer-col-10-2 { padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-10-2 { padding-left: 0; } [dir=rtl] .footer-col-10-2 { padding-right: 0; } } .footer-col-10-3 { padding-left: 60px; } [dir=rtl] .footer-col-10-3 { padding-left: 0; padding-right: 60px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-10-3 { padding-left: 0; } [dir=rtl] .footer-col-10-3 { padding-right: 0; } } .footer-col-11-1 { padding-right: 70px; } [dir=rtl] .footer-col-11-1 { padding-right: 0; padding-left: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-11-1 { padding-right: 0; } [dir=rtl] .footer-col-11-1 { padding-left: 0; } } .footer-col-11-2 { padding-left: 28px; } [dir=rtl] .footer-col-11-2 { padding-left: 0; padding-right: 28px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-11-2 { padding-left: 0; } [dir=rtl] .footer-col-11-2 { padding-right: 0; } } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-11-2 { padding-left: 0; } [dir=rtl] .footer-col-11-2 { padding-right: 0; } } .footer-col-11-3 { padding-left: 42px; } [dir=rtl] .footer-col-11-3 { padding-left: 0; padding-right: 42px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-11-3 { padding-left: 0; } [dir=rtl] .footer-col-11-3 { padding-right: 0; } } .footer-col-11-4 { margin-left: -13px; } [dir=rtl] .footer-col-11-4 { margin-left: 0; margin-right: -13px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-col-11-4 { margin-left: 0; padding-left: 15px; } [dir=rtl] .footer-col-11-4 { margin-right: 0; padding-left: 0; padding-right: 15px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .footer-col-11-4 { margin-left: 0; } [dir=rtl] .footer-col-11-4 { margin-right: 0; } } .footer-col-11-5 { padding-left: 70px; } [dir=rtl] .footer-col-11-5 { padding-left: 0; padding-right: 70px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .footer-col-11-5 { padding-left: 0; } [dir=rtl] .footer-col-11-5 { padding-right: 0; } } /* footer col design for home 3 */ .footer-col-12-1 { padding-right: 70px; } [dir=rtl] .footer-col-12-1 { padding-right: 0; padding-left: 70px; } @media (max-width: 575px) { .footer-col-12-1 { padding-right: 0; } [dir=rtl] .footer-col-12-1 { padding-left: 0; } } .footer-col-12-1 .footer__logo { margin-bottom: 33px; padding-top: 10px; } .footer-col-12-3 { padding-left: 30px; } [dir=rtl] .footer-col-12-3 { padding-left: 0; padding-right: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .footer-col-12-3 { padding-left: 0; } [dir=rtl] .footer-col-12-3 { padding-right: 0; } } /* footer style 7 */ .footer__style-green .footer__logo { margin-bottom: 20px; } .footer__style-green .footer__contact-call span i { color: var(--tp-common-yellow-3); } .footer__style-green .footer__contact-call span a:hover { color: var(--tp-theme-7); } .footer__style-green .footer__contact-mail span { color: var(--tp-text-24); } .footer__style-green .footer__contact-mail span a:hover { color: var(--tp-theme-7); } .footer__style-green .footer__widget p { color: var(--tp-text-24); } .footer__style-green .footer__social a { color: var(--tp-common-white); } .footer__style-green .footer__social a:hover { color: var(--tp-theme-7); } .footer__style-green .footer__widget ul li a { color: var(--tp-text-24); } .footer__style-green .footer__widget ul li a::after { background-color: var(--tp-text-24); } .footer__style-green .footer__widget ul li a:hover { color: var(--tp-common-white); } .footer__style-blue .footer__contact-call span i { color: #FFD584; } .footer__style-blue .footer__contact-mail span { color: var(--tp-text-24); } .footer__style-blue .footer__widget p { color: var(--tp-text-24); } .footer__style-blue .footer__widget ul li a { color: var(--tp-text-24); } .footer__style-blue .footer__widget ul li a::after { background-color: var(--tp-text-24); } .footer__style-blue .footer__widget ul li a:hover { color: var(--tp-theme-1); } .footer__style-blue .footer__link-7 a:hover { color: var(--tp-theme-1); } .footer__style-blue .footer__copyright-7 p a { color: var(--tp-theme-1); } .footer__style-blue .footer__copyright-7 p a:hover { color: var(--tp-common-white); } .footer__style-blue .footer__subscribe-input-7 input { border-radius: 0; } .footer__style-blue .footer__subscribe-input-7 button { border-radius: 0; background-color: var(--tp-theme-1); color: var(--tp-common-white); } .footer__style-blue .footer__subscribe-input-7 button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .footer__style-blue .footer__lang-selected-lang:hover::after, .footer__style-blue .footer__lang-selected-lang:hover { color: var(--tp-theme-1); } .footer__style-blue .footer__lang-list li:hover { color: var(--tp-theme-1); } .footer__style-blue .footer__lang-list { border-radius: 0; } .footer__style-2 .footer__widget p { color: #B0B0B8; } .footer__style-2 .footer__widget ul li a { color: #B0B0B8; } .footer__style-2 .footer__widget ul li a:hover { color: var(--tp-theme-1); } .footer__style-2 .footer__subscribe-title { -webkit-text-fill-color: var(--tp-common-white); background-clip: inherit; color: var(--tp-common-white); background: none; letter-spacing: -0.04em; } .footer__style-2 .footer__bottom-inner { padding-bottom: 30px; } .footer__style-3 .footer__logo .footer-logo-light { display: none; } .footer__style-3 .footer__logo .footer-logo-black { display: block; } .footer__style-3 .footer__widget-title { font-weight: 700; font-size: 24px; letter-spacing: -0.02em; color: var(--tp-common-black); } .footer__style-3 .footer__widget p { color: var(--tp-text-1); line-height: 1.5; } .footer__style-3 .footer__widget ul li a { color: var(--tp-text-1); } .footer__style-3 .footer__widget ul li a::after { background-color: var(--tp-text-1); } .footer__style-3 .footer__widget ul li a:hover { color: var(--tp-theme-1); } .footer__style-3 .footer__opening-icon span { color: var(--tp-common-purple); } .footer__style-3 .footer__opening-content h4 { color: var(--tp-common-black); } .footer__style-3 .footer__opening-content p { font-weight: 400; color: var(--tp-text-1); } .footer__style-3 .footer__info-icon span { background-color: var(--tp-common-white); box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.1); border-radius: 0; color: var(--tp-text-1); } .footer__style-3 .footer__info-text h4 { font-size: 16px; color: var(--tp-common-black); } .footer__style-3 .footer__info-text a { color: var(--tp-text-1); } .footer__style-3 .footer__info-text a:hover { color: var(--tp-theme-1); } .footer__style-3 .footer__bottom-5 { padding-top: 27px; padding-bottom: 35px; border-top: 1px solid #E1E1EC; } .footer__style-3 .footer__copyright-5 p { color: #81849B; font-size: 15px; } .footer__style-3 .footer__copyright-5 p a { color: var(--tp-theme-1); } .footer__style-3 .footer__social-5 a { border-radius: 0; box-shadow: 0px 1px 2px rgba(3, 4, 28, 0.1); background-color: var(--tp-common-white); color: var(--tp-text-1); } .footer__style-3 .footer__social-5 a:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .footer__style-4 .footer__widget .footer__widget-title { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 20px; line-height: 1; color: var(--tp-common-black); margin-bottom: 36px; padding-top: 3px; } .footer__style-4 .footer__widget p { font-size: 16px; line-height: 1.38; color: var(--tp-text-1); font-weight: 400; } .footer__style-4 .footer__widget ul li { list-style: none; margin-bottom: 15px; line-height: 1; font-size: 15px; color: var(--tp-text-1); } .footer__style-4 .footer__widget ul li a { font-family: var(--tp-ff-inter); font-weight: 400; font-size: 15px; color: var(--tp-text-1); padding-left: 0; } [dir=rtl] .footer__style-4 .footer__widget ul li a { padding-right: 0; } .footer__style-4 .footer__widget ul li a::after { display: none; } .footer__style-4 .footer__widget ul li a:hover { color: var(--tp-theme-1); } .footer__style-4 .footer__contact-call span { color: var(--tp-common-black); } .footer__style-4 .footer__contact-call span:hover { color: var(--tp-theme-1); } .footer__style-4 .footer__contact-mail span { font-size: 15px; color: var(--tp-text-1); } .footer__style-4 .footer__contact-mail span:hover { color: var(--tp-theme-1); } .footer__style-4 .footer__social a { color: var(--tp-text-1); } .footer__style-4 .footer__social a:hover { color: var(--tp-theme-1); } .footer__style-4 .footer__bottom-inner { padding-top: 20px; padding-bottom: 40px; border-color: #EBECED; } .footer__style-4 .footer__copyright p { color: #7D7F82; font-weight: 400; } .footer__style-4 .footer__copyright p a { color: var(--tp-theme-1); } .footer__area .zoom-instagram-widget__items { list-style: none; } .footer__area .zoom-instagram-widget__item { float: left; margin-right: 12px; width: 30.44%; border-radius: 6px; overflow: hidden; } [dir=rtl] .footer__area .zoom-instagram-widget__item { float: right; margin-right: 0 !important; margin-left: 12px; } .footer__area .zoom-instagram-widget__item:nth-child(3n) { margin-right: 0; } [dir=rtl] .footer__area .zoom-instagram-widget__item:nth-child(3n) { margin-left: 0 !important; } .footer__area .zoom-instagram-widget__item a { padding-left: 0 !important; position: relative; display: inline-block; } [dir=rtl] .footer__area .zoom-instagram-widget__item a { padding-right: 0 !important; } .footer__area .zoom-instagram-widget__item a::after { display: none; } .footer__area .zoom-instagram-widget__item a::before { position: absolute; content: ""; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6px; background-color: var(--tp-common-black); opacity: 0; } .footer__area .zoom-instagram-widget__item a:hover::before { opacity: 0.4; } .footer__area .zoom-instagram-widget__item img { border-radius: 6px; width: 86px; height: 86px; } @media only screen and (min-width: 1200px) and (max-width: 1399px) { .footer__area .zoom-instagram-widget__item { width: 30.2%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer__area .zoom-instagram-widget__item { width: 44%; } .footer__area .zoom-instagram-widget__item:nth-child(2n) { margin-right: 0; } [dir=rtl] .footer__area .zoom-instagram-widget__item:nth-child(2n) { margin-left: 0; } .footer__area .zoom-instagram-widget__item:nth-child(3n) { margin-right: 12px; } [dir=rtl] .footer__area .zoom-instagram-widget__item:nth-child(3n) { margin-right: 0; margin-left: 12px; } } @media only screen and (min-width: 576px) and (max-width: 767px) { .footer__area .zoom-instagram-widget__item { width: 30%; } } /*----------------------------------------*/ /* 45. ADMIN BAR CSS START /*----------------------------------------*/ .admin-bar .offcanvas__area { margin-top: 32px; } .admin-bar .header__transparent { margin-top: 32px; } .admin-bar .header__sticky.header-sticky { margin-top: 32px; } .admin-bar .cartmini__area { margin-top: 32px; } .admin-bar .offcanvas__full { margin-top: 32px; } @media only screen and (min-width: 300px) and (max-width: 767px) { .admin-bar .offcanvas__area { margin-top: 0; } .admin-bar .offcanvas__full { margin-top: 0; } .admin-bar .header__transparent { margin-top: 46px; } .admin-bar .header__sticky.header-sticky { margin-top: 0; } .cartmini__area { margin-top: 46px; } } @media only screen and (min-width: 600px) and (max-width: 767px) { .admin-bar .offcanvas__area { margin-top: 46px; } .admin-bar .offcanvas__full { margin-top: 46px; } .admin-bar .header__transparent { margin-top: 46px; } .admin-bar .header__sticky.header-sticky { margin-top: 46px; } .cartmini__area { margin-top: 46px; } } /*----------------------------------------*/ /* 45. WOOCOMMERCE CSS START /*----------------------------------------*/ .product__widget .yith-wcan-filters .yith-wcan-filter { margin-bottom: 0; padding-bottom: 30px; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-title { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 17px; line-height: 12px; color: var(--tp-common-black-solid); border-bottom: 1px solid #DADCE0; padding: 10px 0; margin-bottom: 0; position: relative; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-title::after { position: absolute; content: "\f107"; font-family: var(--tp-ff-fontawesome); background-image: none; top: 37%; color: var(--tp-common-black-solid); right: 0; width: auto; height: auto; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } [dir=rtl] .product__widget .yith-wcan-filters .yith-wcan-filter .filter-title::after { right: auto; width: auto; left: 0; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-title:hover { color: var(--tp-theme-1); cursor: pointer; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-title:hover::after { color: var(--tp-theme-1); } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-content { margin-top: 25px; } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 14px; color: var(--tp-text-1); position: relative; padding-left: 31px; } [dir=rtl] .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label { padding-left: 0; padding-right: 31px; } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label::after, .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label::before { position: absolute; content: ""; top: -1px; left: 0; width: 18px; height: 18px; border: 1px solid #DADCE0; border-top-color: rgb(218, 220, 224); border-right-color: rgb(218, 220, 224); border-bottom-color: rgb(218, 220, 224); border-left-color: rgb(218, 220, 224); -webkit-transition: all 0.1s ease-out 0s; -moz-transition: all 0.1s ease-out 0s; -ms-transition: all 0.1s ease-out 0s; -o-transition: all 0.1s ease-out 0s; transition: all 0.1s ease-out 0s; } [dir=rtl] .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label::after, [dir=rtl] .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label::before { left: auto; right: 0; } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label::before { content: "\f00c"; font-family: var(--tp-ff-fontawesome); color: transparent; z-index: 1; border: 0; width: inherit; height: inherit; top: -3px; left: 4px; font-size: 12px; } [dir=rtl] .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .term-label::before { left: auto; right: 4px; } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .filter-item > label > a { color: var(--tp-text-1); } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .filter-item > label > a:hover { color: var(--tp-common-black); } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .filter-item.active > label a { color: var(--tp-common-black); } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .filter-item.checkbox input { display: none; } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .filter-item.checkbox input:checked ~ .term-label::before { color: var(--tp-common-white); } .product__widget .yith-wcan-filters .yith-wcan-filter.checkbox-design .filter-item.checkbox input:checked ~ .term-label::after { background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-items.filter-color { margin: 0; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.active.color:not(.no-color):not(.no-image):not(.label-right) > a::after { content: "\f00c"; right: auto; top: 46%; left: 4px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); font-family: var(--tp-ff-fontawesome); background-image: none; background-color: transparent; font-size: 12px; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.color { display: block; height: inherit; width: inherit; margin: inherit; margin-bottom: 5px; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.color .term-color { border: 0; width: 22px; height: 22px; } .product__widget .yith-wcan-filters .yith-wcan-filter .filter-items .filter-item.color .term-label { display: inline-block; font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 14px; color: var(--tp-text-1); position: relative; margin-left: 3px; -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before { margin-right: 0; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .product__action .product-action-btn .br_compare_button_text { display: none; } .product__list-action .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart::before { font-size: 23px; margin-right: 0; } .product-action-btn .br_compare_button.br_compare_added i:first-child { display: none; } .product-action-btn .br_compare_button.br_compare_added i:nth-child(2) { display: block; } .product-action-btn .br_compare_button i:nth-child(2) { display: none; } .product-thumbnails .slick-list { margin: 0 -6px; } .product-thumbnails .slick-slide { margin: 0 6px; } .woocommerce-product-gallery img { width: 100%; } .tinv-wishlist.tinvwl-after-add-to-cart .tinvwl_add_to_wishlist_button { margin-top: 0; } .product__details-tab-content .product__details-description { margin-top: 45px; } .product__details-description ol.commentlist { padding-left: 0; } .product__details-description ol.commentlist li { margin-bottom: 15px; } .product__details-description ol.commentlist .review .comment_container { overflow: hidden; } .product__details-description ol.commentlist .review .comment_container img { float: left; overflow: hidden; border-radius: 50%; } .product__details-description ol.commentlist .review .comment_container .comment-text { overflow: hidden; margin-left: 75px; } .product__details-description input, .product__details-description textarea { height: 60px; line-height: 60px; background-color: #F7F7F7; border: 1.5px solid #F7F7F7; } .product__details-description input:focus, .product__details-description textarea:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } .product__details-description textarea { height: 180px; line-height: 1.2; padding-bottom: 20px; } .product__details-description input[type=submit] { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background-color: var(--tp-theme-1); text-align: center; position: relative; z-index: 1; overflow: hidden; letter-spacing: -0.02em; font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 15px; padding: 12px 37px; height: auto; line-height: 1.6; } .product__details-description input[type=submit]:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .product__details-description .woocommerce-Reviews-title { font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; margin-bottom: 25px; } .product__details-description .woocommerce-review__author { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 16px; line-height: 1; margin-bottom: 0; color: var(--tp-common-black); } .product__details-description .comment-form-rating label { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; line-height: 14px; letter-spacing: -0.02em; color: var(--tp-text-1); } .product__details-description .comment-form-rating .stars > span { color: var(--tp-common-yellow-5); } .product__details-description .comment-form-rating .nice-select { display: none; } .product__details-description .comment-form-rating select { display: none; } .product__details-description .comment-reply-title { font-family: var(--tp-ff-roboto); font-weight: 600; font-size: 19px; letter-spacing: -0.02em; margin-bottom: 4px; color: var(--tp-common-black); } .product__details-description .comment-form-comment label { font-family: var(--tp-ff-roboto); font-weight: 500; font-size: 15px; line-height: 14px; letter-spacing: -0.02em; color: var(--tp-text-1); display: inline-block; margin-bottom: 20px; } .product__details-description .comment-form-author, .product__details-description .comment-form-email { width: 48%; display: inline-block; margin-right: 30px; } .product__details-description .comment-form-email { margin-right: 0; width: 49%; } .product__details-description table { width: 74.5%; padding: 25px 50px 25px; border: 1px solid #E9E9F0; display: inline-block; } .product__details-description table tbody { display: block; } .product__details-description table tbody tr { width: 100%; display: block; padding: 16px 0 14px; } .product__details-description table tbody tr:not(:last-child) { border-bottom: 1px solid #E9E9F0; } .product__details-description table tbody tr th { width: 34%; display: inline-block; } .product__details-description table tbody tr td { display: inline-block; width: 57%; } .product__details-description table tbody tr td p { margin-bottom: 0; } .product-additional-info-title { margin-bottom: 15px; } .woocommerce-message { background: var(--tp-grey-1); padding: 9px 20px; margin-bottom: 20px; border-top: 3px solid var(--tp-theme-1); } .woocommerce-message a.wp-element-button { float: right; color: var(--tp-common-black); } .woocommerce-message a.wp-element-button:hover { color: var(--tp-theme-1); } .product-type-variable .product__details-wrapper .product-percentage-badges { transform: translateY(0px); } .product__details-wrapper .variations_form table { width: 100%; } .product__details-wrapper .variations_form table tr { display: flex; align-items: center; margin-bottom: 15px; } .product__details-wrapper .variations_form table tr .nice-select { width: 100%; border-radius: 0; padding-right: 36px; } .product__details-wrapper .variations_form table tr .nice-select::after { right: 18px; } .product__details-wrapper .variations_form table tr .nice-select .list { border-radius: 0; padding-bottom: 10px; padding-top: 9px; } @media (max-width: 575px) { .product__details-wrapper .variations_form table tr .nice-select .list { margin-top: 0; } } .product__details-wrapper .variations_form table tr .nice-select .list .option { line-height: 29px; min-height: 29px; padding-left: 18px; padding-right: 18px; } .product__details-wrapper .variations_form table tr .nice-select .list .option:hover { color: var(--tp-theme-1); } .product__details-wrapper .variations_form table tr .nice-select .list .option.selected { color: var(--tp-theme-1); } .product__details-wrapper .variations_form table tr th.label { min-width: 55px; } .product__details-wrapper .variations_form table tr td.value { position: relative; } .product__details-wrapper .variations_form table tr .reset_variations { position: absolute; top: 8px; left: calc(100% + 6px); } .product__details-wrapper .variations_form table tr .reset_variations:hover { color: var(--tp-theme-1); } .woosw-popup { transition: all 0.3s; } .woosc-area .woosc-inner .woosc-bar .woosc-bar-btn { background-color: var(--tp-theme-1) !important; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table thead th .woosc-remove, .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table thead th .woosc-table-settings { -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table thead th .woosc-remove:hover, .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table thead th .woosc-table-settings:hover { color: var(--tp-theme-1); } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .add_to_cart_button { font-size: 14px; color: var(--tp-common-white); background-color: var(--tp-theme-1); width: 100%; padding: 5px 15px; display: inline-block; text-align: center; font-weight: 500; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .add_to_cart_button svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .add_to_cart_button svg, .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .add_to_cart_button i { margin-right: 4px; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .add_to_cart_button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td p { margin-bottom: 0; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .star-rating span { font-size: 0; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td .star-rating span::before { font-size: 11px; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td del { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: #c2c2d3; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td del .woocommerce-Price-amount, .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td del span { font-size: 13px; color: #c2c2d3; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td ins { text-decoration: none; font-family: var(--tp-ff-inter); font-weight: 500; } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td ins .woocommerce-Price-amount { font-size: 16px; color: var(--tp-common-black); } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td ins span { color: var(--tp-common-black); } .woosc-area .woosc-inner .woosc-table .woosc-table-inner .woosc-table-items table tbody tr td:first-child { padding-left: 30px; } .woosc-quick-table { margin-bottom: 60px; } .woosc-quick-table h2 { margin-bottom: 25px; } .woosc-quick-table table thead th { padding: 15px; } .woosc-quick-table table tbody tr td { z-index: 1; } .woosc-quick-table table tbody tr td .add_to_cart_button { font-size: 14px; color: var(--tp-common-white); background-color: var(--tp-theme-1); width: 100%; padding: 5px 15px; display: inline-block; text-align: center; font-weight: 500; } .woosc-quick-table table tbody tr td .add_to_cart_button svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } .woosc-quick-table table tbody tr td .add_to_cart_button svg, .woosc-quick-table table tbody tr td .add_to_cart_button i { margin-right: 4px; } .woosc-quick-table table tbody tr td .add_to_cart_button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .woosc-quick-table table tbody tr td p { margin-bottom: 0; } .woosc-quick-table table tbody tr td span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .woosc-quick-table table tbody tr td del { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: #c2c2d3; } .woosc-quick-table table tbody tr td del .woocommerce-Price-amount, .woosc-quick-table table tbody tr td del span { font-size: 13px; color: #c2c2d3; } .woosc-quick-table table tbody tr td ins { text-decoration: none; font-family: var(--tp-ff-inter); font-weight: 500; } .woosc-quick-table table tbody tr td ins .woocommerce-Price-amount { font-size: 16px; color: var(--tp-common-black); } .woosc-quick-table table tbody tr td ins span { color: var(--tp-common-black); } .woosc-quick-table table tbody tr td:first-child { padding-left: 30px; } .woosc-quick-table table tbody tr:not(:first-child) td { padding: 15px 10px; } .woosc-quick-table table tbody tr:nth-child(2n) { background-color: var(--tp-grey-16); } .woosc-quick-table table tbody tr.tr-rating td .star-rating span { font-size: 0; } .woosc-quick-table table tbody tr.tr-rating td .star-rating span::before { font-size: 11px; } .product__details-wrapper .grouped_form .product__details-quantity { margin-bottom: 0; } .product__details-wrapper .grouped_form tbody tr td { border: 1px solid var(--tp-border-5); } .product__details-wrapper .grouped_form tbody tr td:first-child { padding: 9px 15px; } .product__details-wrapper .grouped_form tbody tr td:not(:first-child) { padding: 15px 15px; } .product__details-wrapper .grouped_form tbody tr td span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .product__details-wrapper .grouped_form tbody tr td del { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: #c2c2d3; } .product__details-wrapper .grouped_form tbody tr td del .woocommerce-Price-amount, .product__details-wrapper .grouped_form tbody tr td del span { font-size: 13px; color: #c2c2d3; } .product__details-wrapper .grouped_form tbody tr td ins { text-decoration: none; font-family: var(--tp-ff-inter); font-weight: 500; } .product__details-wrapper .grouped_form tbody tr td ins .woocommerce-Price-amount { font-size: 16px; color: var(--tp-common-black); } .product__details-wrapper .grouped_form tbody tr td ins span { color: var(--tp-common-black); } .product__details-wrapper .grouped_form .woocommerce-grouped-product-list { margin-bottom: 35px; } .product__details-wrapper .grouped_form .woocommerce-grouped-product-list-item__label a { color: var(--tp-common-black); } .product__details-wrapper .grouped_form .woocommerce-grouped-product-list-item__label a:hover { color: var(--tp-theme-1); } .product__details-wrapper .grouped_form .single_add_to_cart_button { padding: 12px 30px; } .product__details-wrapper .grouped_form .single_add_to_cart_button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .product__action .product-action-btn > a, .product__list-action .product-action-btn > a { width: 100%; height: 100%; } .product__action .woosc-btn, .product__list-action .woosc-btn { font-size: 0; width: 100%; height: 100%; } .product__action .woosc-btn::before, .product__list-action .woosc-btn::before { font-size: 16px; content: "\f0ec"; font-family: var(--tp-ff-fontawesome); margin: 0; } .product__action .woosc-btn.woosc-btn-added::before, .product__list-action .woosc-btn.woosc-btn-added::before { content: "\f00c"; font-family: var(--tp-ff-fontawesome); } .product__action .product-add-wishlist-btn button, .product__list-action .product-add-wishlist-btn button { font-size: 0; width: 100%; height: 100%; } .product__action .product-add-wishlist-btn button::before, .product__list-action .product-add-wishlist-btn button::before { font-size: 16px; content: "\f004"; font-family: var(--tp-ff-fontawesome); margin: 0; } .product__action .product-add-wishlist-btn button.woosw-btn-added::before, .product__list-action .product-add-wishlist-btn button.woosw-btn-added::before { font-weight: 700; } .woosw-item--time { display: none !important; } .woosw-item--price span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: var(--tp-text-1); } .woosw-item--price del { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 15px; color: #c2c2d3; } .woosw-item--price del .woocommerce-Price-amount, .woosw-item--price del span { font-size: 13px; color: #c2c2d3; } .woosw-item--price ins { text-decoration: none; font-family: var(--tp-ff-inter); font-weight: 500; } .woosw-item--price ins .woocommerce-Price-amount { font-size: 16px; color: var(--tp-common-black); } .woosw-item--price ins span { color: var(--tp-common-black); } .woosw-item--add .add_to_cart_button, .woosw-item--add .added_to_cart { font-weight: 600; color: var(--tp-common-black); background-color: var(--tp-common-white); display: inline-block; padding: 6px 16px; text-align: center; font-size: 0; border: 1px solid var(--tp-border-5); } .woosw-item--add .add_to_cart_button:hover, .woosw-item--add .added_to_cart:hover { background-color: var(--tp-theme-1); color: var(--tp-common-white); } .woosw-item--add .add_to_cart_button svg, .woosw-item--add .add_to_cart_button i, .woosw-item--add .added_to_cart svg, .woosw-item--add .added_to_cart i { font-size: 14px; margin-right: 0; } .woosw-item--add .woocommerce a.added_to_cart { font-size: 14px; } .woosw-item--add .woocommerce a.added_to_cart::before { color: var(--tp-common-black); -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } .woosw-item--add .woocommerce a.added_to_cart:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .woosw-item--add .woocommerce a.added_to_cart:hover::before { color: var(--tp-common-white); } .woosw-item--add .woocommerce a.button.loading::before { color: black; } .woosw-item--add .woocommerce a.button.loading:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); border-color: var(--tp-common-black); } .woosw-item--add .woocommerce a.button.loading:hover::before { color: var(--tp-common-black); } .woosw-item--name a { color: var(--tp-common-black); } .woosw-item--name a:hover { color: var(--tp-theme-1); } .woosw-popup-content-bot .woosw-popup-content-bot-inner a { color: var(--tp-common-black); } .woosw-popup-content-bot .woosw-popup-content-bot-inner a:hover { color: var(--tp-theme-1) !important; border-color: var(--tp-theme-1) !important; } .woosw-popup.woosw-popup-right .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top { background-color: var(--tp-common-white); border-bottom: 1px solid var(--tp-border-5); } .woosw-popup .woosw-popup-inner .woosw-popup-content .woosw-popup-content-top .woosw-popup-close:hover { color: var(--tp-theme-1); } .product_meta { padding-top: 34px; border-top: 1px solid #DADCE0; margin-top: 32px; } /* cart page css */ div.woocommerce .woocommerce-cart-form table { width: 100%; border: 0; } div.woocommerce .woocommerce-cart-form table thead { background-color: #F1F3F4; } div.woocommerce .woocommerce-cart-form table thead th { border: 0; text-align: left; font-family: var(--tp-ff-inter); font-weight: 500; font-size: 14px; color: var(--tp-common-black); } div.woocommerce .woocommerce-cart-form table thead th.product-name { padding-left: 30px; } div.woocommerce .woocommerce-cart-form table tbody tr:not(:last-child) { border-bottom: 1px solid var(--tp-border-5); } div.woocommerce .woocommerce-cart-form table tbody tr td { border: 0; text-align: left; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-thumbnail { width: 80px; padding: 20px 0; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-thumbnail img { width: 100%; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-name { padding: 12px 12px 12px 20px; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-name a { text-align: left; font-weight: 400; font-size: 16px; color: var(--tp-common-black); } div.woocommerce .woocommerce-cart-form table tbody tr td.product-name a:hover { color: var(--tp-theme-1); } div.woocommerce .woocommerce-cart-form table tbody tr td.product-price span { font-weight: 400; font-size: 16px; color: var(--tp-common-black); } div.woocommerce .woocommerce-cart-form table tbody tr td.product-subtotal span { font-weight: 400; font-size: 16px; color: var(--tp-common-black); } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .product__details-quantity { margin-bottom: 0; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity { width: 100px; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-plus, div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-minus { height: 34px; line-height: 34px; width: 40px; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-plus::after, div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-minus::after { display: none; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-plus svg, div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-minus svg { width: 10px; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-plus i, div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-minus i { font-size: 12px; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-quantity .tp-product-quantity .tp-cart-input[type=text] { padding: 0 25px; height: 34px; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-remove a { color: #818487; } div.woocommerce .woocommerce-cart-form table tbody tr td.product-remove a:hover { color: var(--tp-theme-1); } div.woocommerce .woocommerce-cart-form table tbody tr td.actions { padding: 25px 0; } div.woocommerce .woocommerce-cart-form table tbody tr td.actions .coupon { float: left; } div.woocommerce .woocommerce-cart-form table tbody tr td.actions .coupon label { display: block; font-size: 14px; color: var(--tp-common-black); font-weight: 500; margin-bottom: 7px; } div.woocommerce .woocommerce-cart-form table tbody tr td.actions .coupon #coupon_code { width: 282px; height: 46px; line-height: 46px; } div.woocommerce .woocommerce-cart-form table tbody tr td.actions button { padding: 10px 30px; font-weight: 500; transform: translateY(-1px); } div.woocommerce .woocommerce-cart-form table tbody tr td.actions button[name=update_cart]:disabled { color: #C2C2D3; background-color: #F3F3F6; cursor: not-allowed; transform: translateY(0); } div.woocommerce .woocommerce-cart-form table tbody tr td.actions button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } div.woocommerce .woocommerce-cart-form table tbody tr td.actions > button { float: right; margin-top: 30px; } div.woocommerce .select2-container .select2-selection--single { height: 46px; line-height: 44px; border: 1px solid var(--tp-border-5); background-color: #EFF0F2; border-radius: 0; } div.woocommerce .select2-container .select2-selection--single:focus { background-color: var(--tp-common-white); } div.woocommerce .select2-container .select2-selection--single:focus .select2-selection--single { background-color: var(--tp-common-white); border-color: var(--tp-theme-1); } div.woocommerce .select2-container .select2-selection__rendered { line-height: 44px; padding-left: 29px; padding-right: 29px; } div.woocommerce .select2-container .select2-selection__arrow { height: 46px; right: 25px; } div.woocommerce .cart_totals { background-color: var(--tp-common-white); box-shadow: 0px 30px 70px rgba(1, 15, 28, 0.1); padding: 20px 24px 24px; } div.woocommerce .cart_totals > h2 { font-size: 22px; margin-bottom: 15px; display: none; } div.woocommerce .cart_totals table { width: 100%; border: 0; } div.woocommerce .cart_totals table tbody tr:not(:last-child) { border-bottom: 1px solid #E0E2E3; } div.woocommerce .cart_totals table tbody tr th { border: 0; text-align: left; font-weight: 500; font-size: 15px; color: var(--tp-common-black); padding-left: 0; } [dir=rtl] div.woocommerce .cart_totals table tbody tr th { text-align: right; } div.woocommerce .cart_totals table tbody tr td { border: 0; text-align: right; font-size: 15px; font-weight: 500; color: var(--tp-common-black); } [dir=rtl] div.woocommerce .cart_totals table tbody tr td { text-align: left; } div.woocommerce .cart_totals table tbody tr td:last-child { padding-right: 0; } [dir=rtl] div.woocommerce .cart_totals table tbody tr td:last-child { padding-left: 0; } div.woocommerce .cart_totals table tbody tr td[data-title=Shipping] { text-align: left; line-height: 1.3; padding-left: 15px; } div.woocommerce .cart_totals table tbody tr td[data-title=Total] { font-size: 16px; font-weight: 400; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .shipping-calculator-button { margin-top: 7px; display: inline-block; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .shipping-calculator-form { margin-top: 14px; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator input { border-width: 1px; height: 46px; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator input:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .select2.select2-container { width: 215px !important; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select { min-width: 100%; font-family: var(--tp-ff-space); color: var(--tp-common-black); font-size: 14px; border: 0; padding-left: 26px; padding-right: 50px; font-weight: 500; border-radius: 0; border: 1px solid var(--tp-grey-15); float: none; height: 46px; line-height: 44px; background-color: var(--tp-grey-15); color: var(--tp-common-black); width: 100%; } [dir=rtl] div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select { padding-right: 26px; padding-left: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select { width: 100%; border-radius: 40px; border: 1px solid var(--tp-border-2); height: 50px; line-height: 50px; } } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select::after { right: 25px; } [dir=rtl] div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select::after { right: auto; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select::after { right: 25px; } [dir=rtl] div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select::after { right: auto; left: 15px; } } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select .list { margin-top: 0; border-radius: 0; width: 100%; padding-bottom: 10px; padding-top: 9px; } @media (max-width: 575px) { div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select .list { margin-top: 0; } } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select .list .option { line-height: 29px; min-height: 29px; padding-left: 18px; padding-right: 18px; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select .list .option:hover { color: var(--tp-theme-1); } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select .list .option.selected { color: var(--tp-theme-1); } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .nice-select:focus { border-color: var(--tp-theme-1); background-color: var(--tp-common-white); } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .tp-btn { padding: 9px 30px; background-color: transparent; color: var(--tp-common-black); border: 1px solid var(--tp-common-black); font-weight: 500; } div.woocommerce .cart_totals table tbody tr td .woocommerce-shipping-calculator .tp-btn:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } div.woocommerce .cart_totals table tbody tr.order-total td { color: var(--tp-common-black); } div.woocommerce .cart_totals .checkout-button { padding: 9px 30px; background-color: var(--tp-common-black); color: var(--tp-common-white); border: 1px solid var(--tp-common-black); font-weight: 500; } div.woocommerce .cart_totals .checkout-button:hover { background-color: var(--tp-theme-1); border-color: var(--tp-theme-1); color: var(--tp-common-white); } div.woocommerce .woocommerce-billing-fields__field-wrapper .select2-selection--single, div.woocommerce .woocommerce-shipping-fields__field-wrapper .select2-selection--single { height: 46px; line-height: 44px; border: 1px solid var(--tp-border-5); background-color: #fff; border-radius: 0; } div.woocommerce .woocommerce-billing-fields__field-wrapper .select2-selection--single:focus, div.woocommerce .woocommerce-shipping-fields__field-wrapper .select2-selection--single:focus { background-color: var(--tp-common-white); } div.woocommerce .woocommerce-billing-fields__field-wrapper .select2-selection--single:focus .select2-selection--single, div.woocommerce .woocommerce-shipping-fields__field-wrapper .select2-selection--single:focus .select2-selection--single { background-color: var(--tp-common-white); border-color: var(--tp-theme-1); } div.woocommerce .woocommerce-billing-fields__field-wrapper .select2-selection__rendered, div.woocommerce .woocommerce-shipping-fields__field-wrapper .select2-selection__rendered { line-height: 44px; padding-left: 29px; padding-right: 29px; } div.woocommerce .woocommerce-billing-fields__field-wrapper .select2-selection__arrow, div.woocommerce .woocommerce-shipping-fields__field-wrapper .select2-selection__arrow { height: 46px; right: 25px; } div.woocommerce .cart-wrapper .woocommerce-checkout-payment .wc_payment_methods .wc_payment_method { list-style: none; margin-bottom: 10px; } div.woocommerce .cart-wrapper .woocommerce-checkout-payment .wc_payment_methods .wc_payment_method label:hover { cursor: pointer; } div.woocommerce .cart-wrapper .woocommerce-checkout-payment .wc_payment_methods .wc_payment_method .payment_box { margin-top: 10px; position: relative; padding: 20px 30px 23px; background-color: #F6F7F9; margin-left: 17px; } div.woocommerce .cart-wrapper .woocommerce-checkout-payment .wc_payment_methods .wc_payment_method .payment_box::after { position: absolute; content: ""; left: 30px; top: -8px; width: 16px; height: 16px; background-color: #f6f7f9; transform: rotate(45deg); } div.woocommerce .cart-wrapper .woocommerce-checkout-payment .wc_payment_methods .wc_payment_method .payment_box p { font-size: 14px; line-height: 1.57; color: #55585B; margin-bottom: 0; } div.woocommerce .woocommerce-shipping-totals .woocommerce-shipping-methods { padding-left: 0; } div.woocommerce .woocommerce-shipping-totals .woocommerce-shipping-methods li { list-style: none; } div.woocommerce .woocommerce-shipping-totals .woocommerce-shipping-methods li label { margin-left: 5px; } div.woocommerce .woocommerce-shipping-totals .woocommerce-shipping-methods li label:hover { cursor: pointer; } /* checkout css start */ [dir=rtl] .woocommerce-checkout .wc_payment_methods.payment_methods { padding-left: 0; padding-right: 15px; } .woocommerce-checkout .breadcrumb__area { display: none; } .woocommerce-checkout .tp-page-area { background-color: var(--tp-grey-4); } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info { margin-bottom: 15px; display: block; border: 1px dashed #AAB0B2; font-weight: 400; font-size: 14px; color: var(--tp-common-black); padding: 8px 25px; } .woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info a { color: var(--tp-theme-1); text-decoration: underline; } .woocommerce-checkout .checkout_coupon { margin-bottom: 30px; } .woocommerce-checkout .checkout_coupon p { font-size: 14px; color: var(--tp-common-black); margin-bottom: 0; } .woocommerce-checkout .checkout_coupon p:first-child { margin-bottom: 15px; } .woocommerce-checkout .checkout_coupon #coupon_code { height: 46px; line-height: 46px; background-color: var(--tp-common-white); border-color: var(--tp-common-white); margin-bottom: 15px; border-width: 1px; } .woocommerce-checkout .checkout_coupon #coupon_code:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout .checkout_coupon .tp-btn { padding: 14px 30px; } .woocommerce-checkout .checkout_coupon .tp-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .woocommerce-checkout #customer_form_details { padding: 40px 50px; background-color: var(--tp-common-white); } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields h3 { font-size: 26px; font-weight: 600; } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .form-row > label { font-weight: 500; font-size: 14px; color: var(--tp-common-black); margin: 0; } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .form-row input { background: var(--tp-common-white); border: 1px solid var(--tp-border-5); height: 46px; line-height: 46px; } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .form-row input:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .select2-container .select2-selection--single { height: 54px; line-height: 52px; border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .select2-container .select2-selection__rendered { line-height: 52px; padding-left: 29px; padding-right: 29px; } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .select2-container .select2-selection__arrow { height: 54px; right: 25px; } [dir=rtl] .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .select2-container .select2-selection__arrow { right: auto; left: 25px; } .woocommerce-checkout #customer_form_details .woocommerce-billing-fields__field-wrapper .woocommerce-form__input[type=checkbox] { width: 20px; height: 20px; border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields { margin-top: 30px; } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row > label { font-weight: 500; font-size: 14px; color: var(--tp-common-black); margin: 0; } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row input { background: var(--tp-common-white); border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row input:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row input, .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row textarea { background: var(--tp-common-white); border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row input:focus, .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .form-row textarea:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .select2-container .select2-selection--single { height: 54px; line-height: 52px; border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .select2-container .select2-selection__rendered { line-height: 52px; padding-left: 29px; padding-right: 29px; } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .select2-container .select2-selection__arrow { height: 54px; right: 25px; } .woocommerce-checkout #customer_form_details .woocommerce-shipping-fields .woocommerce-form__input[type=checkbox] { width: 20px; height: 20px; border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row > label { font-weight: 500; font-size: 14px; color: var(--tp-common-black); margin: 0; } .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row input { background: var(--tp-common-white); border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row input:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row input, .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row textarea { background: var(--tp-common-white); border: 1px solid var(--tp-border-5); } .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row input:focus, .woocommerce-checkout #customer_form_details .woocommerce-additional-fields .woocommerce-additional-fields__field-wrapper .form-row textarea:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info { margin-bottom: 15px; display: block; border: 1px dashed #AAB0B2; font-weight: 400; font-size: 14px; color: var(--tp-common-black); padding: 8px 25px; } .woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info a { color: var(--tp-theme-1); text-decoration: underline; } .woocommerce-checkout .woocommerce-form-login { margin-bottom: 30px; } .woocommerce-checkout .woocommerce-form-login p { font-size: 14px; color: var(--tp-common-black); margin-bottom: 0; } .woocommerce-checkout .woocommerce-form-login p:first-child { margin-bottom: 15px; } .woocommerce-checkout .woocommerce-form-login label { margin: 0; display: block; height: auto; } .woocommerce-checkout .woocommerce-form-login label.woocommerce-form-login__rememberme input { border: 1px solid var(--tp-border-5); background-color: transparent; margin-right: 5px; height: auto; } .woocommerce-checkout .woocommerce-form-login label.woocommerce-form-login__rememberme:hover { cursor: pointer; } .woocommerce-checkout .woocommerce-form-login .lost_password { margin-top: 15px; padding-bottom: 15px; } .woocommerce-checkout .woocommerce-form-login .lost_password a:hover { color: var(--tp-theme-1); } .woocommerce-checkout .woocommerce-form-login input { height: 54px; background-color: var(--tp-common-white); border-color: var(--tp-common-white); margin-bottom: 15px; border-width: 1px; } .woocommerce-checkout .woocommerce-form-login input:focus { border-color: var(--tp-theme-1); } .woocommerce-checkout .woocommerce-form-login .tp-btn { padding: 14px 30px; } .woocommerce-checkout .woocommerce-form-login .tp-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .woocommerce-checkout .woocommerce-form-login .woocommerce-button { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background: var(--tp-theme-1); text-align: center; font-family: var(--tp-ff-space); padding: 14px 30px; position: relative; z-index: 1; overflow: hidden; letter-spacing: -0.02em; } .woocommerce-checkout .woocommerce-form-login .woocommerce-button:hover { background-color: var(--tp-common-black); } .woocommerce-checkout .tp-free-progress-bar { background-color: var(--tp-common-white); } .cart-wrapper { background-color: var(--tp-common-white); padding: 50px; } .cart-wrapper #order_review_heading { font-weight: 600; font-size: 26px; } .cart-wrapper .order-review-wrapper table { width: 100%; border: 0; } .cart-wrapper .order-review-wrapper table thead th { border: 0; font-weight: 500; font-size: 16px; color: var(--tp-common-black); text-align: left; border-bottom: 1px solid var(--tp-border-5); padding-left: 0; } [dir=rtl] .cart-wrapper .order-review-wrapper table thead th { text-align: right; } .cart-wrapper .order-review-wrapper table thead th:last-child { text-align: right; padding-right: 0; } [dir=rtl] .cart-wrapper .order-review-wrapper table thead th:last-child { text-align: left; padding-left: 0; } .cart-wrapper .order-review-wrapper table tbody tr { border-bottom: 1px solid var(--tp-border-5); } .cart-wrapper .order-review-wrapper table tbody tr.cart_item td { font-size: 15px; } .cart-wrapper .order-review-wrapper table tbody tr.cart_item td.product-name strong { color: var(--tp-common-black); } .cart-wrapper .order-review-wrapper table tbody tr.cart_item td:first-child { text-align: left; width: 55%; padding-left: 0; } [dir=rtl] .cart-wrapper .order-review-wrapper table tbody tr.cart_item td:first-child { text-align: right; } .cart-wrapper .order-review-wrapper table tbody tr.cart_item td:last-child { padding-right: 0; text-align: right; color: var(--tp-common-black); } [dir=rtl] .cart-wrapper .order-review-wrapper table tbody tr.cart_item td:last-child { text-align: left; } .cart-wrapper .order-review-wrapper table tbody tr td { border: 0; padding: 15px 0; } .cart-wrapper .order-review-wrapper table tfoot tr { border-bottom: 1px solid var(--tp-border-5); } .cart-wrapper .order-review-wrapper table tfoot tr.woocommerce-shipping-totals.shipping th { text-align: left; } .cart-wrapper .order-review-wrapper table tfoot tr.woocommerce-shipping-totals.shipping td { text-align: left; padding: 12px 9px; } .cart-wrapper .order-review-wrapper table tfoot tr.cart-subtotal th { text-align: left; } [dir=rtl] .cart-wrapper .order-review-wrapper table tfoot tr.cart-subtotal th { text-align: right; } .cart-wrapper .order-review-wrapper table tfoot tr.cart-subtotal td { text-align: right; } [dir=rtl] .cart-wrapper .order-review-wrapper table tfoot tr.cart-subtotal td { text-align: left; } .cart-wrapper .order-review-wrapper table tfoot tr.order-total th { text-align: left; } [dir=rtl] .cart-wrapper .order-review-wrapper table tfoot tr.order-total th { text-align: right; } .cart-wrapper .order-review-wrapper table tfoot tr.order-total td { text-align: right; } [dir=rtl] .cart-wrapper .order-review-wrapper table tfoot tr.order-total td { text-align: left; } .cart-wrapper .order-review-wrapper table tfoot tr th { border: 0; padding-left: 0; } .cart-wrapper .order-review-wrapper table tfoot tr td { border: 0; padding-right: 0; } .cart-wrapper .woocommerce-checkout-payment .tp-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } /* wishlist css start */ .woosw-list .woosw-items { width: 100%; } .woosw-list .woosw-items .woosw-item--add .add_to_cart_button { font-size: 16px; font-weight: 500; } .woosw-list .woosw-items .woosw-item--add .add_to_cart_button i, .woosw-list .woosw-items .woosw-item--add .add_to_cart_button svg { margin-right: 7px; } [dir=rtl] .woosw-list .woosw-items .woosw-item--add .add_to_cart_button i, [dir=rtl] .woosw-list .woosw-items .woosw-item--add .add_to_cart_button svg { margin-right: 0; margin-left: 7px; } .woosw-list .woosw-items .woosw-item--add .add_to_cart_button svg { -webkit-transform: translateY(-2px); -moz-transform: translateY(-2px); -ms-transform: translateY(-2px); -o-transform: translateY(-2px); transform: translateY(-2px); } /* product details */ .single-product .tp-shop-area .related.products h2 { margin-bottom: 25px; } .tp-login-wrapper .tp-btn { background-color: var(--tp-common-black); } .tp-login-wrapper .tp-btn:hover { background-color: var(--tp-theme-1); } /* order details css start */ .woocommerce-order .woocommerce-notice--success.woocommerce-thankyou-order-received { font-size: 24px; font-weight: 600; color: var(--tp-common-black); border: 2px dashed var(--tp-common-green-2); padding: 35px 30px; text-align: center; margin-bottom: 25px; } .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details { padding-left: 0; display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 20px 0; box-shadow: 1px 6px 19px rgba(3, 4, 28, 0.1); margin-bottom: 55px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details { justify-content: start; } } .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li { list-style: none; display: inline-block; margin-bottom: 20px; margin-right: 30px; } .woocommerce-order .woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li strong { display: block; } .woocommerce-order-received .tp-page-area { background-color: transparent; } .tp-order-details-wrapper { display: flex; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-order-details-wrapper { display: block; } } .tp-order-details-wrapper .woocommerce-order-details { flex: 50%; margin-right: 50px; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-order-details-wrapper .woocommerce-order-details { flex: 100%; margin-right: 0; margin-bottom: 50px; } } .tp-order-details-wrapper .woocommerce-order-details .woocommerce-order-details__title { margin-bottom: 15px; font-size: 22px; } .tp-order-details-wrapper .woocommerce-customer-details { flex: 50%; } @media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tp-order-details-wrapper .woocommerce-customer-details { flex: 100%; } } .tp-order-details-wrapper .woocommerce-customer-details [class*=col-] { width: inherit; } .tp-order-details-wrapper .woocommerce-customer-details .woocommerce-column__title { margin-bottom: 15px; font-size: 22px; } .tp-order-details-wrapper .woocommerce-customer-details .woocommerce-column--billing-address { margin-bottom: 35px; } .tp-order-details-wrapper .shop_table { width: 100%; } .tp-order-details-wrapper .shop_table thead tr th { text-align: left; padding: 8px 12px; color: var(--tp-heading-primary); font-weight: 700; border-color: var(--tp-border-5); } .tp-order-details-wrapper .shop_table tbody tr td { padding: 8px 12px; border-color: var(--tp-border-5); } .tp-order-details-wrapper .shop_table tbody tr td.product-name { text-align: left; } .tp-order-details-wrapper .shop_table tbody tr td.product-name a { color: var(--tp-heading-primary); } .tp-order-details-wrapper .shop_table tbody tr td.product-total { text-align: left; } .tp-order-details-wrapper .shop_table tfoot tr th { padding: 8px 12px; text-align: left; font-weight: 700; color: var(--tp-heading-primary); border-color: var(--tp-border-5); } .tp-order-details-wrapper .shop_table tfoot tr td { border-color: var(--tp-border-5); padding: 8px 12px; text-align: left; } .tp-empty-cart { text-align: center; margin-bottom: 35px; } .tp-empty-cart img { max-width: 450px; } .return-to-shop .tp-btn:hover { background-color: var(--tp-common-black); } .cart-empty.woocommerce-info { text-align: center; text-align: center; font-size: 20px; font-weight: 500; margin-bottom: 35px; } /* my account css */ div.woocommerce .col2-set { display: flex; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.woocommerce .col2-set { display: block; } } div.woocommerce .col2-set .col-1 { width: 49%; margin-right: 30px; } div.woocommerce .col2-set .col-2 { width: 49%; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { div.woocommerce .col2-set .col-2, div.woocommerce .col2-set .col-1 { width: 100%; margin: 0; margin-bottom: 40px; } } div.woocommerce #customer_login input { border-width: 1px; } div.woocommerce #customer_login input:focus { background-color: var(--tp-common-white); border-color: var(--tp-theme-1); } div.woocommerce .woocommerce-MyAccount-navigation ul { padding-left: 0; border-bottom: 1px solid var(--tp-border-5); } div.woocommerce .woocommerce-MyAccount-navigation ul li { list-style: none; display: inline-block; margin-bottom: 0; margin-right: 20px; } div.woocommerce .woocommerce-MyAccount-navigation ul li.is-active a::after { width: 100%; left: 0; right: auto; } div.woocommerce .woocommerce-MyAccount-navigation ul li a { font-size: 16px; padding: 8px 0; display: inline-block; position: relative; } div.woocommerce .woocommerce-MyAccount-navigation ul li a:hover { color: var(--tp-theme-1); } div.woocommerce .woocommerce-MyAccount-navigation ul li a::after { position: absolute; content: ""; left: auto; right: 0; height: 2px; width: 0; bottom: 0; background-color: var(--tp-theme-1); } div.woocommerce .woocommerce-MyAccount-content .woocommerce-Button[name=save_account_details] { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background: var(--tp-theme-1); text-align: center; font-family: var(--tp-ff-space); padding: 10px 30px; position: relative; z-index: 1; overflow: hidden; letter-spacing: -0.02em; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-Button[name=save_account_details]:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } label.woocommerce-form__label.woocommerce-form__label-for-checkbox.woocommerce-form-login__rememberme { display: block; margin-bottom: 16px; } span.required { color: red; } .woocommerce-LostPassword.lost_password a:hover { color: var(--tp-theme-1); } .woocommerce-form-login__submit[name=login], .woocommerce-form-register__submit[name=register] { display: inline-block; font-size: 16px; font-weight: 700; color: var(--tp-common-white); background: var(--tp-theme-1); text-align: center; font-family: var(--tp-ff-space); padding: 10px 30px; position: relative; z-index: 1; overflow: hidden; letter-spacing: -0.02em; } .woocommerce-form-login__submit[name=login]:hover, .woocommerce-form-register__submit[name=register]:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } div.woocommerce .woocommerce-MyAccount-content > p a { color: var(--tp-theme-1); } div.woocommerce .woocommerce-MyAccount-content .my_account_orders { width: 100%; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-order-downloads .shop_table { width: 100%; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses.u-columns { display: flex; flex-wrap: wrap; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address { width: 50%; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title { display: flex; align-items: center; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-Addresses .woocommerce-Address .woocommerce-Address-title > a { color: var(--tp-theme-1); font-weight: 500; font-size: 16px; margin-left: 40px; margin-bottom: 5px; } div.woocommerce .woocommerce-MyAccount-content .woocommerce-MyAccount-orders th { font-weight: 700; } div.woocommerce .woocommerce-MyAccount-content .edit-account fieldset { margin-top: 35px; } div.woocommerce .woocommerce-MyAccount-content .edit-account legend { font-size: 22px; color: var(--tp-common-black); font-weight: 500; } div.woocommerce .woocommerce-MyAccount-content .edit-account label { color: var(--tp-common-black); } div.woocommerce .woocommerce-MyAccount-content .edit-account input { height: 46px; line-height: 46px; } div.woocommerce .woocommerce-MyAccount-content .edit-account .tp-btn:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } div.woocommerce .woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper input { height: 46px; line-height: 46px; } div.woocommerce .woocommerce-MyAccount-content .tp-btn:hover { background-color: var(--tp-common-black); } /* tp progress bar */ .tp-free-progress-bar { padding: 20px 30px 30px; border: 1px solid var(--tp-border-5); width: 100%; margin-bottom: 30px; } .tp-free-progress-bar .free-shipping-notice { color: var(--tp-common-black); font-size: 13px; margin-bottom: 5px; font-weight: 500; } .tp-free-progress-bar .free-shipping-notice a { color: var(--tp-theme-1); } .tp-free-progress-bar .free-shipping-notice span { color: var(--tp-theme-1); font-weight: 700; } .tp-free-progress-bar .tp-progress-bar { height: 6px; background-color: #f2f3f5; border-radius: 10px; overflow: hidden; } .tp-free-progress-bar .tp-progress-bar .progress { background-color: var(--tp-theme-1); height: 6px; } .tp-free-progress-bar .progress-bar-striped { background-image: linear-gradient(45deg, rgb(255, 255, 255) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent); } .cartmini__widget .woocommerce-mini-cart__total { padding: 20px; margin-bottom: 0; } .cartmini__widget .woocommerce-mini-cart__total span { float: right; } .cartmini__widget .product_list_widget { max-height: 700px; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: rgba(245, 9, 99, 0.5) #fff; } .cartmini__widget .product_list_widget::-webkit-scrollbar { display: thin; /* for Chrome, Safari, and Opera */ } .cartmini__widget .woocommerce-mini-cart__buttons { padding: 20px; } .cartmini__widget .woocommerce-mini-cart__buttons .button { display: inline-block; font-weight: 500; color: var(--tp-common-black); font-family: var(--tp-ff-space); padding: 10px 30px; font-size: 15px; text-transform: capitalize; border: 1px solid var(--tp-border-5); text-align: center; width: 100%; } .cartmini__widget .woocommerce-mini-cart__buttons .button:hover { background-color: var(--tp-common-black); color: var(--tp-common-white); } .cartmini__widget .woocommerce-mini-cart__buttons .button:not(.checkout) { background-color: var(--tp-grey-1); color: var(--tp-common-black); margin-bottom: 15px; } .cartmini__widget .woocommerce-mini-cart__buttons .button:not(.checkout):hover { color: var(--tp-common-white); background-color: var(--tp-common-black); border-color: var(--tp-common-black); } .woosq-open .select2-container { z-index: 9; } /* product sidebar */ div.product__widget { /* rating filter */ /* product filter by color list*/ /* price range slider */ /* filter categories */ } div.product__widget .product__widget-title { font-family: var(--tp-ff-roboto); font-weight: 400; font-size: 17px; line-height: 12px; color: var(--tp-common-black-solid); border-bottom: 1px solid #DADCE0; padding: 10px 0; margin-bottom: 25px; position: relative; } div.product__widget .product__widget-title::after { position: absolute; content: "\f107"; font-family: var(--tp-ff-fontawesome); background-image: none; top: 37%; right: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); color: var(--tp-common-black-solid); width: auto; height: auto; font-weight: 500; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; } div.product__widget .product__widget-title:hover { cursor: pointer; color: var(--tp-theme-1); } div.product__widget .product__widget-title:hover::after { color: var(--tp-theme-1); } div.product__widget .product__widget-title.tp-widget-active::after { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } div.product__widget .select2-container { margin-bottom: 20px; } div.product__widget .select2-container .select2-selection--single { height: 40px; line-height: 38px; border: 1px solid var(--tp-border-5); background-color: var(--tp-common-white); border-radius: 0; } div.product__widget .select2-container .select2-selection--single:focus { background-color: var(--tp-common-white); } div.product__widget .select2-container .select2-selection--single:focus .select2-selection--single { background-color: var(--tp-common-white); border-color: var(--tp-theme-1); } div.product__widget .select2-container .select2-selection__rendered { line-height: 40px; padding-left: 20px; padding-right: 20px; } div.product__widget .select2-container .select2-selection__arrow { height: 40px; right: 20px; } div.product__widget .select2-container--default .select2-selection--single .select2-selection__clear { cursor: pointer; float: right; font-weight: 700; padding-right: 4px; z-index: 2; background-color: var(--tp-common-white); top: -2px; } div.product__widget.widget_rating_filter ul li { list-style: none; } div.product__widget .woocommerce-widget-layered-nav-list li { list-style: none; font-size: 14px; color: #998f8f; margin-bottom: 5px; } div.product__widget .woocommerce-widget-layered-nav-list li span { font-weight: 400; } div.product__widget .woocommerce-widget-layered-nav-list li a { position: relative; padding-left: 15px; color: var(--tp-text-1); } div.product__widget .woocommerce-widget-layered-nav-list li a:hover { color: var(--tp-theme-1); } div.product__widget .woocommerce-widget-layered-nav-list li a::after { position: absolute; content: ""; left: 0; top: 53%; height: 4px; width: 4px; background-color: var(--tp-text-1); border-radius: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } div.product__widget .woocommerce-widget-layered-nav-list li a:hover { color: var(--tp-theme-1); } div.product__widget .price_slider_wrapper { padding-top: 5px; } div.product__widget .ui-widget-content { position: relative; height: 4px; background-color: #ECECEC; margin-bottom: 1.5625rem; } div.product__widget .ui-widget-content .ui-slider-range { position: absolute; display: block; width: 100%; height: 4px; border: 0; background-color: var(--tp-common-black); border-radius: 8px; z-index: 1; } div.product__widget .ui-widget-content .ui-slider-handle { left: 0%; position: absolute; z-index: 2; outline: 0; cursor: pointer; background-color: var(--tp-common-black); border-radius: 100%; border: 0; height: 14px; top: -5px; width: 14px; margin: 0; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translateX(0px); transform: translateX(0px); } div.product__widget .ui-widget-content .ui-slider-handle:last-child { left: 100%; -webkit-transform: translateX(-100%); transform: translateX(-100%); } div.product__widget .price_slider_amount { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } div.product__widget .price_slider_amount .button { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; font-size: 12px; font-weight: 600; text-transform: uppercase; height: auto; margin-left: auto; padding: 0; border: 0; background-color: transparent; color: var(--tp-common-black); } [dir=rtl] div.product__widget .price_slider_amount .button { margin-left: inherit; margin-right: auto; } div.product__widget .price_slider_amount .button:hover { color: var(--tp-theme-1); } div.product__widget .price_slider_amount .price_label { font-size: 14px; } div.product__widget .price_slider_amount .price_label span { font-weight: 500; color: var(--tp-common-black); } div.product__widget.widget_product_categories li { list-style: none; } div.product__widget.widget_product_categories li a { position: relative; padding-left: 15px; } div.product__widget.widget_product_categories li a:hover { color: var(--tp-theme-1); } div.product__widget.widget_product_categories li a::after { position: absolute; content: ""; left: 0; top: 53%; height: 4px; width: 4px; background-color: var(--tp-text-1); border-radius: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } div.product__widget.widget_product_categories li .children { padding-left: 15px; padding-top: 0; padding-bottom: 0; } div.product__widget.widget_top_rated_products ul li, div.product__widget.widget_recent_reviews ul li, div.product__widget.widget_products ul li { list-style: none; } div.product__widget.widget_top_rated_products ul li:not(:last-child), div.product__widget.widget_recent_reviews ul li:not(:last-child), div.product__widget.widget_products ul li:not(:last-child) { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--tp-border-5); } div.product__widget .tp-product-sidebar-rating-thumb img { max-width: inherit; width: 90px; } div.product__widget .tp-product-sidebar-rating-title { font-size: 16px; } div.product__widget .tp-product-sidebar-rating-title a:hover { color: var(--tp-theme-1); } div.product__widget .tp-product-sidebar-rating-price span { font-family: var(--tp-ff-inter); font-weight: 500; font-size: 13px; color: var(--tp-text-1); } div.product__widget .tp-product-sidebar-rating-price del { color: #c2c2d3; } div.product__widget .tp-product-sidebar-rating-price del .woocommerce-Price-amount, div.product__widget .tp-product-sidebar-rating-price del span { font-size: 13px; color: #c2c2d3; } div.product__widget .tp-product-sidebar-rating-price ins { text-decoration: none; } div.product__widget .tp-product-sidebar-rating-price ins .woocommerce-Price-amount { font-size: 14px; color: var(--tp-common-black); } div.product__widget .tp-product-sidebar-rating-price ins span { color: var(--tp-common-black); } div.product__widget .tp-product-sidebar-rating-content .star-rating { display: block; } div.product__widget .tp-product-sidebar-rating-content .reviewer span { font-weight: 400; } div.product__widget .tp-product-sidebar-rating-content .reviewer span span { font-weight: 500; } div.product__widget.widget_product_tag_cloud .tagcloud a { border: 1px solid #EAEAEF; box-shadow: none; } .product__action .tinvwl_add_to_wishlist-text { display: none; } a.icon-btn.woosq-btn { display: none; } .product__list-action span.tinvwl_add_to_wishlist-text { display: none; } .product__action a.icon-btn.woosq-btn, .product__list-action a.icon-btn.woosq-btn { display: inline-block; } .tinv-wraper.woocommerce.tinv-wishlist.tinvwl-after-add-to-cart.tinvwl-loop-button-wrapper { display: none; } /*rating*/ .product__rating .star-rating { margin-bottom: 0; } .star-rating { position: relative; font-size: 11px; width: 77px; overflow: hidden; line-height: 1; display: inline-block; } .star-rating::before { font-family: "ElegantIcons"; content: "\e033\e033\e033\e033\e033"; text-transform: uppercase; letter-spacing: 3px; color: #D9D9EA; font-size: 11px; } .star-rating span { position: absolute; top: 0; left: 0; overflow: hidden; font-size: 11px; } .star-rating span::before { font-family: "ElegantIcons"; content: "\e033\e033\e033\e033\e033"; text-transform: uppercase; letter-spacing: 3px; color: #FFBF14; font-weight: 900; display: inline-block; } /*rating end*/ a.ajax_add_to_cart.added { display: none; } /*rating icon*/ @font-face { font-family: star; src: url(../fonts/woo/star.eot); src: url(../fonts/woo/star.eot?#iefix) format("embedded-opentype"), url(../fonts/woo/star.woff) format("woff"), url(../fonts/woo/star.ttf) format("truetype"), url(../fonts/woo/star.svg#star) format("svg"); font-weight: 400; font-style: normal; } @font-face { font-family: WooCommerce; src: url(../fonts/woo/WooCommerce.eot); src: url(../fonts/woo/WooCommerce.eot?#iefix) format("embedded-opentype"), url(../fonts/woo/WooCommerce.woff) format("woff"), url(../fonts/woo/WooCommerce.ttf) format("truetype"), url(../fonts/woo/WooCommerce.svg#WooCommerce) format("svg"); font-weight: 400; font-style: normal; } .woocommerce p.stars a { position: relative; height: 1em; width: 1em; text-indent: -999em; display: inline-block; text-decoration: none; } .woocommerce p.stars a::before { display: block; position: absolute; top: 0; left: 0; width: 1em; height: 1em; line-height: 1; font-family: WooCommerce; content: "\e021"; text-indent: 0; } .woocommerce p.stars a:hover ~ a::before { content: "\e021"; } .woocommerce p.stars:hover a::before { content: "\e020"; } .woocommerce p.stars.selected a.active::before { content: "\e020"; } .woocommerce p.stars.selected a.active ~ a::before { content: "\e021"; } .woocommerce p.stars.selected a:not(.active)::before { content: "\e020"; } /*spinner */ @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } .woocommerce a.button.loading::before, .woocommerce button.button.loading::after, .woocommerce input.button.loading::after { font-family: WooCommerce; content: "\e01c"; vertical-align: top; font-weight: 400; top: 0.618em; right: 1em; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; color: #fff; display: inline-block; } .woocommerce a.added_to_cart::before { font-family: WooCommerce; content: "\e017"; vertical-align: top; font-weight: 400; color: #fff; display: inline-block; margin-right: 6px; } .loading svg { display: none; } /*compare*/ .woosc-area { background: no-repeat !important; } /*# sourceMappingURL=harry-core.css.map */