/*----------------------------------------------------------------------------------- Template Name: Pixelor Personal Portfolio Author: Queen_Tex Support: lumextheme808@gmail.com Description: Personal Portfolio HTML Template Version: 1.0.0 ----------------------------------------------------------------------------------- /************ TABLE OF CONTENTS *************** ----------------- 01. THEME CSS ----------------- 1.1 Theme Default 1.2 Common Classes 1.3 Default Spacing ----------------- 02. COMPONENTS css ----------------- 2.1 Back to top 2.2 Theme Settings 2.3 Buttons 2.4 Animations 2.5 Preloader 2.6 Mouse 2.7 Carousel 2.8 Nice Select 2.9 Pagination 2.10 Offcanvas 2.11 Breadcrumb 2.12 Accordion 2.13 Tab 2.14 iconbox 2.15 Section Title 2.16 Progress 2.17 Gallery 2.18 Feature 2.19 Pagination 2.20 Comments ----------------- 03. HEADER CSS ----------------- 3.1 Header Style 1 3.2 Header Style 2 3.3 Header Style 3 3.4 Header Style 5 --------------------------------- 04. MENU CSS --------------------------------- 4.1 Main menu css 4.2 Meanmenu css 4.3 Mobile css 4.4 Category menu css --------------------------------- 05. BLOG CSS --------------------------------- 5.1 Postbox css 5.2 Recent Post css 5.3 Sidebar css 5.4 Blog css 5.5 Blog Grid css --------------------------------- 06. FOOTER CSS --------------------------------- 6.1 Footer Style 1 6.2 Footer Style 2 6.3 Footer Style 3 6.4 Footer Style 4 6.5 Footer Style 5 --------------------------------- 07. PAGES CSS --------------------------------- 7.1 Banner css 7.2 About css 7.3 Service css 7.4 Testimonial css 7.5 CTA css 7.6 Profile css 7.7 Brand css 7.8 Pricing css 7.9 Login css 7.10 Contact css 7.11 Error css 7.12 Team 7.13 Documentation --------------------------------- 08. ECOMMERCE CSS --------------------------------- 8.1 Ecommerce Common CSS 8.2 Cartmini CSS 8.3 Cart Modal CSS 8.4 Category CSS 8.5 Banner CSS 8.6 Tooltip CSS 8.7 Featured Product CSS 8.8 Trending CSS 8.9 Product Card CSS 8.10 Product Card Style 2 CSS 8.11 Product Card Style 3 CSS 8.12 Product Card Style 4 CSS 8.13 Product Card Style 5 CSS 8.14 Product Details CSS 8.15 Product Widget CSS 8.16 Shop CSS 8.17 Filter Offcanvas CSS 8.18 Product Quantity CSS 8.19 Cart CSS 8.20 Order CSS 8.21 Checkout CSS 8.22 compare CSS 8.23 Collection CSS 8.24 Deal CSS 8.25 Side Banner CSS 8.26 Coupon CSS **********************************************/ /*----------------------------------------*/ /* 1.1 Theme Default /*----------------------------------------*/ @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&family=Onest:wght@100..900&display=swap"); :root { --primary-color:#DEFF00; --secondary-color: #FBFBFB; --text-color: #B4B2B2; --accent-color: #1E84B5; --white-color: #FFFFFF; --black-color: #0E0E0E; --black-bg:#121212; --black-bg-1:#1A1616; --offwhite:#9B9B9B; --border:#2F302C; --primary-color-2:#4C40F7; --primary-color-3:#FF7B00; } :root { --th-fonts-Inter: "Inter Tight", sans-serif; --th-fonts-Onest: "Onest", sans-serif; } /*----------------------------------------*/ /* 2.12 Accordion /*----------------------------------------*/ .vl-faqs3 .vl-accordion-item { position: relative; z-index: 1; background: #0E0E0E; border-radius: 8px; margin-bottom: 32px; } .vl-faqs3 .vl-accordion-item .vl-accordion-button { color: #FBFBFB; font-size: 20px; line-height: 28px; font-weight: 600; width: 100%; text-align: left; padding: 20px 24px; padding-bottom: 0; } .vl-faqs3 .vl-accordion-item .vl-accordion-button.collapsed { background: #0E0E0E; border: 1px solid #DEFF00; padding: 20px; border-radius: 8px; box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.09); color: #FBFBFB; border: 1px solid var(--vl-text-42); } .vl-faqs3 .vl-accordion-item .vl-accordion-button.collapsed span.vl-faqarrow { position: absolute; right: 32px; top: 21px; color: var(--vl-white); height: 24px; width: 24px; line-height: 29px; text-align: center; border-radius: 50px; font-size: 16px; transition: 0.3s; height: 40px; width: 40px; line-height: 45px; background: #121212; transform: rotate(-45deg); } @media (max-width: 575px) { .vl-faqs3 .vl-accordion-item .vl-accordion-button.collapsed span.vl-faqarrow { right: 6px; } } .vl-faqs3 .vl-accordion-item .vl-accordion-button span.vl-faqarrow { position: absolute; right: 32px; top: 18px; height: 24px; width: 24px; text-align: center; border-radius: 50px; font-size: 18px; line-height: 29px; transition: 0.3s; height: 40px; width: 40px; line-height: 45px; transform: rotate(45deg); background: #DEFF00; color: #0E0E0E; } @media (max-width: 575px) { .vl-faqs3 .vl-accordion-item .vl-accordion-button span.vl-faqarrow { right: 6px; } } .vl-faqs3 .vl-accordion-item .vl-accordion-body .para { padding-right: 24px; padding-bottom: 24px; color: #B4B2B2; font-size: 16px; line-height: 24px; font-weight: 400; border-top: 1px solid #2C2C2C; margin-top: 16px; padding-top: 16px; margin: 0 24px; margin-top: 16px; } .vl-faqs3 { /* remove all borders */ } .vl-faqs3 .vl-accordion-item { border: none; margin-bottom: 15px; } .vl-faqs3 { /* only active item border */ } .vl-faqs3 .vl-accordion-item:has(.accordion-collapse.show) { border: 1px solid #DEFF00; border-radius: 8px; } /*----------------------------------------*/ /* 2.3 Buttons /*----------------------------------------*/ .th-primary-btn { display: inline-block; transition: 0.3s; } .th-primary-btn .th-icon { background: var(--primary-color); height: 56px; width: 56px; line-height: 56px; text-align: center; border-radius: 56px; display: inline-block; transition: 0.3s; } .th-primary-btn .th-text { padding: 16px 32px; background: var(--primary-color); display: inline-block; font-size: 16px; line-height: 24px; font-weight: 600; transition: 0.3s; border-radius: 56px; margin-left: -6px; color: var(--black-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-primary-btn .th-text { font-size: 14px; padding: 16px 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-primary-btn .th-text { font-size: 15px; } } .th-primary-btn:hover { transform: translateY(-3px); transition: 0.3s; } .th-primary-btn:hover .th-icon { background: var(--white-color); transition: 0.3s; } .th-primary-btn:hover .th-text { background: var(--white-color); transition: 0.3s; } .th-primary-btn-secondary .th-icon { background: transparent; border: 1px solid var(--primary-color); } .th-primary-btn-secondary .th-icon img { transition: 0.3s; } .th-primary-btn-secondary .th-text { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } .th-primary-btn-secondary:hover .th-icon { background: var(--white-color); border: 1px solid var(--black-color); } .th-primary-btn-secondary:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary:hover .th-text { border: 1px solid var(--black-color); color: var(--black-color); } .th-primary-btn-secondary2 .th-icon { background: var(--primary-color); border: 1px solid var(--primary-color); } .th-primary-btn-secondary2 .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary2 .th-text { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } .th-primary-btn-secondary2:hover .th-icon { background: var(--white-color); border: 1px solid var(--black-color); } .th-primary-btn-secondary2:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary2:hover .th-text { border: 1px solid var(--black-color); color: var(--black-color); } .th-primary-btn-secondary22 .th-icon { background: var(--primary-color-2); border: 1px solid var(--primary-color-2); } .th-primary-btn-secondary22 .th-icon img { filter: brightness(0) invert(1); transition: 0.3s; } .th-primary-btn-secondary22 .th-text { background: transparent; border: 1px solid var(--primary-color-2); color: var(--secondary-color); } .th-primary-btn-secondary22:hover .th-icon { background: var(--white-color); border: 1px solid var(--black-color); } .th-primary-btn-secondary22:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary22:hover .th-text { border: 1px solid var(--black-color); color: var(--black-color); } .th-primary-btn-secondary3 .th-icon { background: var(--primary-color); border: 1px solid var(--primary-color); } .th-primary-btn-secondary3 .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary3 .th-text { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } .th-primary-btn-secondary3:hover .th-icon { background: var(--white-color); border: 1px solid var(--black-color); } .th-primary-btn-secondary3:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary3:hover .th-text { background: var(--black-bg-1); border: 1px solid var(--black-color); color: var(--primary-color); } .th-primary-btn-secondary4 .th-icon { background: var(--primary-color); border: 1px solid var(--black-bg); } .th-primary-btn-secondary4 .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary4 .th-text { background: var(--black-bg); border: 1px solid var(--black-bg); color: var(--white-color); } .th-primary-btn-secondary4:hover .th-icon { background: var(--white-color); border: 1px solid var(--black-color); } .th-primary-btn-secondary4:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary4:hover .th-text { background: var(--black-bg-1); border: 1px solid var(--black-color); color: var(--primary-color); } .th-primary-btn-secondary-3 .th-icon { background: transparent; border: 1px solid var(--primary-color-3); } .th-primary-btn-secondary-3 .th-icon img { transition: 0.3s; } .th-primary-btn-secondary-3 .th-text { background: transparent; border: 1px solid var(--primary-color-3); color: var(--secondary-color); } .th-primary-btn-secondary-3:hover { transform: translateY(-3px); } .th-primary-btn-secondary-3:hover .th-icon { background: var(--white-color); border: 1px solid var(--black-color); } .th-primary-btn-secondary-3:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-secondary-3:hover .th-text { border: 1px solid var(--black-color); color: var(--black-color); } .th-primary-btn-2 { text-transform: uppercase; } .th-primary-btn-2 .th-icon { background: var(--primary-color-2); } .th-primary-btn-2 .th-icon img { transition: 0.3s; } .th-primary-btn-2 .th-text { background: var(--primary-color-2); color: var(--secondary-color); } .th-primary-btn-2:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-2:hover .th-text { color: var(--black-bg); } .th-primary-btn-3 .th-icon { background: var(--primary-color-3); } .th-primary-btn-3 .th-icon img { transition: 0.3s; } .th-primary-btn-3 .th-text { background: var(--primary-color-3); color: #fff; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-primary-btn-3 .th-text { font-size: 15px; } } .th-primary-btn-3:hover { transform: translateY(-3px); transition: 0.3s; } .th-primary-btn-3:hover .th-icon { background: var(--white-color); transition: 0.3s; } .th-primary-btn-3:hover .th-icon img { filter: brightness(0); transition: 0.3s; } .th-primary-btn-3:hover .th-text { background: var(--white-color); transition: 0.3s; color: var(--black-bg); } .th-footer-social2 a { height: 48px; width: 48px; background: var(--black-bg); line-height: 48px; text-align: center; border-radius: 50px; display: inline-block; color: var(--secondary-color); transition: 0.3s; } .th-footer-social2 a:hover { background: var(--primary-color-2); transition: 0.3s; color: var(--secondary-color); } .th-footer-social2 { writing-mode: vertical-rl; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-social2 { writing-mode: inherit; text-align: center; } } .th-primary-btn.th-primary-btn-2.th-footer-btn-vertical-2 { writing-mode: sideways-lr; float: right; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-primary-btn.th-primary-btn-2.th-footer-btn-vertical-2 { writing-mode: inherit; text-align: center; float: inherit; display: block; margin-bottom: 60px; } } .th-primary-btn.th-primary-btn-2.th-footer-btn-vertical-2 .th-text { padding: 32px 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-primary-btn.th-primary-btn-2.th-footer-btn-vertical-2 .th-text { padding: 16px 32px; text-align: center; } } .mtop-78 { margin-top: 78px; } .th-footer-btn-wrap { padding-bottom: 48px; display: flex; justify-content: center; gap: 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-footer-btn-wrap { padding-bottom: 40px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-btn-wrap { padding-bottom: 30px; } } @media (max-width: 575px) { .th-footer-btn-wrap { flex-direction: column; } } .th-skill-btn { position: absolute; top: 70%; right: 0; left: 0; margin: 0 auto; text-align: center; transform: translateY(-50%); transition: 0.3s; opacity: 0; visibility: hidden; } .th-skill-wrap:hover .th-skill-btn { top: 50%; transition: 0.3s; opacity: 1; visibility: visible; } .th-skil-btn-2 { text-align: right; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-skil-btn-2 { text-align: start; } } .th-banner-btn-wrap { display: flex; gap: 24px; } @media (max-width: 575px) { .th-banner-btn-wrap { flex-direction: column; align-items: center; } } .th-btn-blog2 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--primary-color-2); transition: 0.3s; padding: 16px 24px; background: #121212; border-radius: 88px; display: inline-block; } .th-btn-blog2 span { margin-left: 8px; } .th-btn-blog2 span img { transition: 0.3s; } .th-btn-blog2:hover { transition: 0.3s; background: var(--primary-color-2); color: var(--secondary-color); } .th-btn-blog2:hover span img { filter: brightness(0) invert(1); transition: 0.3s; } .th-icn-1 { margin: 0 40px; } .th-icn-2 { margin: 0 40px; } .pbmit-portfolio-style-1 { border-radius: 10px; position: relative; } .pbmit-portfolio-style-1 .pbmit-featured-img-wrapper { overflow: hidden; position: relative; } .pbmit-portfolio-style-1 .pbmit-featured-wrapper img { width: 100%; border-radius: 10px; } .pbmit-portfolio-style-1 .pbmit-featured-wrapper::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 29%; border-radius: 10px; background: linear-gradient(180deg, rgba(25, 25, 27, 0) 0%, rgba(0, 0, 0, 0.8) 81.73%); } .pbmit-portfolio-style-1 .swiper-slide-active .pbmit-featured-wrapper img { display: block !important; } .pbmit-portfolio-style-1 .swiper-slide-active .pbminfotech-post-content { padding: 17px; background-color: var(--pbmit-light-color); border-radius: 10px; background-image: none !important; } .pbmit-portfolio-style-1 .pbminfotech-post-content { height: 100%; background-size: cover; border-radius: 10px; } .pbmit-portfolio-style-1 .pbminfotech-box-content { padding-top: 20px; } .pbmit-portfolio-style-1 .swiper-slide-active .pbminfotech-box-content { display: flex !important; align-items: center; justify-content: space-between; padding: 30px 15px 10px 20px; } .pbmit-portfolio-style-1 .pbmit-port-cat a { padding: 10px 13px; border-radius: 10px; text-transform: capitalize; margin-right: 3px; color: var(--pbmit-white-color); background-color: var(--pbmit-global-color); } .pbmit-portfolio-style-1 .pbmit-port-cat a:hover { background-color: var(--pbmit-secondary-color); } .pbmit-portfolio-style-1 .pbmit-port-cat { position: absolute; top: 23px; right: 28px; } .pbmit-portfolio-style-1 .swiper-slide:not(.swiper-slide-active) .pbmit-port-cat { display: none; } .pbmit-portfolio-style-1 h1.pbmit-portfolio-title { font-size: 26px; line-height: 32px; margin: 3px 0 10px 0; letter-spacing: -1px; } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper .pbmit-portfolio-line-title { display: none; } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:nth-child(-n+4) { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none; } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul { display: flex; grid-gap: 0; } .pbmit-portfolio-style-1 a.pbmit-portfolio-btn { min-width: 130px; } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper .pbmit-portfolio-line-value { font-weight: 500; line-height: 28px; letter-spacing: 0.42px; text-transform: uppercase; font-size: 14px; color: rgba(var(--pbmit-white-color-rgb), 0.8); } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:not(:last-child) { padding-right: 16px; margin-right: 16px; position: relative; } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -4px; width: 6px; height: 6px; border-radius: 50px; background-color: var(--pbmit-global-color); transform: translateX(0%) translateY(-50%); } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:nth-child(3)::after, .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li { display: none; } .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:nth-child(3), .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:nth-child(2), .pbmit-portfolio-style-1 .pbmit-portfolio-lines-wrapper ul li:first-child { display: inline-block; } .pbmit-portfolio-style-1 .pbmit-portfolio-btn .pbmit-btn-wrapper .pbmit-button-text { display: flex; } /** Style 2 **/ .pbmit-element-portfolio-style-2 { border-radius: 10px; position: relative; z-index: 1; } .pbmit-element-portfolio-style-2 .pbmit-featured-wrapper img { width: 100%; border-radius: 10px; display: none !important; } .pbmit-element-portfolio-style-2 .swiper-slide-active .pbmit-featured-wrapper img { display: block !important; } .pbmit-element-portfolio-style-2 .swiper-slide-active .pbminfotech-post-content { padding: 17px; background-color: var(--pbmit-light-color); border-radius: 10px; background-image: none !important; } .pbmit-element-portfolio-style-2 .pbminfotech-post-content { height: 100%; background-size: cover; border-radius: 20px; } .pbmit-element-portfolio-style-2 .pbminfotech-box-content { display: none !important; } .pbmit-element-portfolio-style-2 .swiper-slide-active .pbminfotech-box-content { display: flex !important; align-items: center; justify-content: space-between; padding: 30px 15px 10px 20px; } .pbmit-element-portfolio-style-2 .pbmit-port-cat a { padding: 7px 13px; border-radius: 5px; text-transform: capitalize; margin-right: 3px; color: var(--pbmit-white-color); background-color: var(--pbmit-global-color); } .pbmit-element-portfolio-style-2 .pbmit-port-cat { position: absolute; top: 41px; right: 34px; } .pbmit-element-portfolio-style-2 .swiper-slide:not(.swiper-slide-active) .pbmit-port-cat { display: none; } .pbmit-element-portfolio-style-2 h3.pbmit-portfolio-title { font-size: 32px; line-height: 40px; margin: 0; letter-spacing: 0; } .pbmit-element-portfolio-style-2 .pbmit-button .pbmit-btn-wrapper .pbmit-button-text { display: flex; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper .pbmit-portfolio-line-title { display: none; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:nth-child(-n+4) { padding-bottom: 0px; margin-bottom: 0px; border-bottom: none; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul { display: block; grid-gap: 0; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper .pbmit-portfolio-line-value { font-weight: 500; line-height: 28px; letter-spacing: 0.42px; text-transform: uppercase; font-size: 14px; color: #525869; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:not(:last-child) { padding-right: 16px; margin-right: 16px; position: relative; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -4px; width: 6px; height: 6px; border-radius: 50px; background-color: var(--pbmit-global-color); -khtml-transform: translateX(0%) translateY(-50%); transform: translateX(0%) translateY(-50%); } .pbmit-element-portfolio-style-2 .swiper { perspective: 1415px; padding: 0; } .pbmit-element-portfolio-style-2 .swiper-slide { filter: brightness(0.5); } .pbmit-element-portfolio-style-2 .swiper-slide.swiper-slide-visible.swiper-slide-active { margin: 0; filter: brightness(1) !important; height: 100%; } .pbmit-element-portfolio-style-2 .swiper-slide.swiper-slide-next, .pbmit-element-portfolio-style-2 .swiper-slide.swiper-slide-prev { filter: brightness(0.8); } .pbmit-element-portfolio-style-2 .swiper-slide .pbminfotech-post-content, .pbmit-element-portfolio-style-2 .swiper-slide .pbminfotech-post-content { transform: scale(1.4) !important; } .pbmit-element-portfolio-style-2 .swiper-slide.swiper-slide-active .pbminfotech-post-content { transform: scale(1) !important; } .pbmit-element-portfolio-style-2 .swiper-slide.swiper-slide-prev .pbminfotech-post-content { margin-left: 130px; } .pbmit-element-portfolio-style-2 .swiper-slide.swiper-slide-next .pbminfotech-post-content { margin-right: 130px; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:nth-child(3)::after, .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li { display: none; } .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:nth-child(3), .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:nth-child(2), .pbmit-element-portfolio-style-2 .pbmit-portfolio-lines-wrapper ul li:first-child { display: inline-block; } .pbminfotech-post-content { background: #121213; } .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active { background: #121213; border: 1px solid #4C40F7; border-radius: 16px; } .swiper-slide.swiper-slide-visible.swiper-slide-fully-visible.swiper-slide-active .pbminfotech-post-content { border: 1px solid #4C40F7; margin-bottom: -68px; } .pbminfotech-post-content { border: 1px solid #3A3A3B; } .th-portfolio-subtitle { font-size: 16px; line-height: 26px; font-weight: 600; color: #FBFBFB; transition: 0.3s; padding-bottom: 8px; } .th-portfolio-title { font-size: 24px; line-height: 32px; font-weight: 600; color: #FBFBFB; transition: 0.3s; } .pbmit-button span { background: #4D41F7; height: 48px; width: 48px; display: inline-block; line-height: 48px; text-align: center; border-radius: 50px; } .th-recent-work { font-size: 200px; line-height: 1; color: #FBFBFB; text-transform: uppercase; font-weight: 700; text-align: center; margin-bottom: -50px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-recent-work { font-size: 160px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-recent-work { font-size: 130px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-recent-work { font-size: 90px; margin-bottom: 0; } } @media (max-width: 575px) { .th-recent-work { font-size: 40px; margin-bottom: 0; } } /*----------------------------------------*/ /* 2.15 Section Title /*----------------------------------------*/ .th-section-title .sub-title { color: var(--primary-color); font-size: 18px; line-height: 26px; font-weight: 600; font-family: var(--th-fonts-Inter); } .th-section-title .title { color: var(--white-color); font-size: 48px; line-height: 56px; font-weight: 700; } .th-section-title .title span { font-style: italic; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-section-title .title { font-size: 32px; line-height: 42px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-section-title .title { font-size: 30px; line-height: 40px; } } @media (max-width: 575px) { .th-section-title .title { font-size: 28px; line-height: 38px; } } .th-section-title .para { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-section-title.mb-48 { margin-bottom: 25px; } } .th-section-title-2 .sub-title { border: 1px solid #2C2C2C; display: inline-block; padding: 5px 24px; padding-left: 44px; border-radius: 90px; position: relative; color: var(--secondary-color); } .th-section-title-2 .sub-title::after { position: absolute; content: ""; height: 10px; width: 10px; background: var(--primary-color-2); border-radius: 50%; left: 24px; top: 50%; transform: translateY(-50%); } .th-section-title-2 .title span { font-style: normal; color: var(--primary-color-2); } .th-section-title-2 .th-para { font-size: 16px; line-height: 24px; color: #B4B2B2; } .th-section-title-3 .sub-title { color: var(--text-color); } .th-section-title-3 .sub-title.th-flex { display: flex; } .th-section-title-3 .title span { font-style: normal; color: var(--primary-color-2); } .th-section-title-3 .th-para { font-size: 16px; line-height: 24px; color: #B4B2B2; } .th-arrow-line.d-none.d-xl-block { margin-left: 20px; } .th-sm-img { height: 124px; width: 56px; } .th-sec-title-main-flex-2 { display: flex; justify-content: space-between; align-items: end; margin-bottom: 48px; } @media (max-width: 575px) { .th-sec-title-main-flex-2 { display: block; margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-sec-title-main-flex-2 .th-section-title.th-section-title-2 { margin-bottom: 30px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-flex-direc-colum { flex-direction: column; justify-content: center; align-items: center; text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-sec-title-main-flex-2.th-flex-md-block { flex-direction: column; text-align: center; align-items: center; } } .th-section-title.th-section-title-3 { position: relative; z-index: 1; } /*----------------------------------------*/ /* 2.13 Tab /*----------------------------------------*/ .th-tab-content-wrap { padding: 40px; border: 1px solid #2C2C2C; border-radius: 16px; } .th-tab-content-wrap .th-icon span { background: var(--primary-color-2); display: inline-block; height: 48px; width: 48px; line-height: 48px; display: inline-block; text-align: center; border-radius: 50px; margin-right: 16px; } .th-tab-content-wrap .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-tab-content-wrap .th-title { font-size: 22px; } } .th-tab-content-wrap .th-para { font-size: 16px; line-height: 24px; color: var(--text-color); padding-bottom: 32px; padding-top: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-tab-content-wrap { padding: 28px; } } .th-tab-topflex { display: flex; align-items: center; } .th-tab-list ul li { font-size: 16px; line-height: 24px; color: var(--text-color); margin-bottom: 16px; } .th-tab-list ul li:last-child { margin-bottom: 0; } .th-tab-list ul li span img { margin-right: 16px; margin-right: 8px; } .th-tab-title-box .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-tab-title-box .th-title { font-size: 22px; } } .th-tab-title-box .th-title span { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--text-color); margin-right: 8px; } .th-tab-wrap .nav-link { padding: 20px 24px; border: 1px solid #2C2C2C; border-radius: 16px; margin-bottom: 24px; } .th-tab-wrap .nav-link.active { background: transparent; border: 1px solid var(--primary-color-2); } .th-tab-wrap .nav-link.active .th-tab-icon span { background: var(--primary-color-2); transition: 0.3s; } .th-tab-wrap .nav-link.active .th-tab-icon span img { transform: rotate(-90deg); } .th-tab-icon a span { height: 48px; width: 48px; line-height: 48px; text-align: center; border-radius: 50%; background: #121212; display: inline-block; transition: 0.3s; } .th-tab-icon a span img { transition: 0.3s; } .th-tab-content-flx { display: flex; justify-content: space-between; align-items: center; } /*----------------------------------------*/ /* 2.4 Animations /*----------------------------------------*/ @keyframes animation-5 { 0% { transform: scale(1); } 100% { transform: scale(1.1); } } .aniamtion-key-5 { position: relative; animation-name: animation-5; animation-duration: 1.5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-7 { 0% { transform: rotate(0); } 100% { transform: rotate(-1000deg); } } .keyframe5 { position: relative; animation-name: animation-7; animation-duration: 90s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: cubic-bezier(0.59, 0.59, 1, 1); } @keyframes animation-1 { 0% { transform: translateY(0); } 100% { transform: translateY(30px); } } .aniamtion-key-1 { position: relative; animation-name: animation-1; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-2 { 0% { transform: translateX(0); } 100% { transform: translateX(50px); } } .aniamtion-key-2 { position: relative; animation-name: animation-2; animation-duration: 2.5s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-3 { 0% { transform: translateY(0); } 100% { transform: translateY(60px); } } .aniamtion-key-3 { position: relative; animation-name: animation-3; animation-duration: 1.3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-4 { 0% { transform: translateY(0); } 100% { transform: translateY(40px); } } .aniamtion-key-4 { position: relative; animation-name: animation-4; animation-duration: 1.6s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-6 { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } } .aniamtion-key-6 { position: relative; animation-name: animation-6; animation-duration: 1.9s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes animation-8 { 0% { padding-left: 0px; } 100% { padding-left: 50px; } } .aniamtion-key-7 { position: relative; animation-name: animation-8; animation-duration: 1.3s; animation-iteration-count: infinite; animation-direction: alternate; } @-webkit-keyframes fade-in-down { 0% { opacity: 0; -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fade-in-down { 0% { -webkit-transform: translate3d(0, -50px, 0); transform: translate3d(0, -50px, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes pulse-border { 0% { transform: translateX(0) translateY(0) translateZ(0) scale(1); opacity: 1; } 100% { transform: translateX(0) translateY(0) translateZ(0) scale(1.5); opacity: 1; } } .pulse-border { position: relative; animation-name: pulse-border; animation-duration: 1500ms; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes infiniteAnimation { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } .element { width: 100px; height: 100px; background-color: #3498db; animation: infiniteAnimation 2s linear infinite; } .circle { animation: rotateCircle 9s linear infinite; } @keyframes rotateCircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes thfadeInDown { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } .thfadeInDown { animation: thfadeInDown 1s ease-out forwards; } @keyframes move { from { clip-path: circle(20% at 0% 50%); } to { clip-path: circle(20% at 100% 50%); } } .reveal { position: relative; display: -ms-inline-flexbox; visibility: hidden; overflow: hidden; } .reveal img { height: 100%; width: 100%; display: inline-block; -o-object-fit: cover; object-fit: cover; transform-origin: left; } .image-anime { position: relative; overflow: hidden; } .image-anime:after { content: ""; position: absolute; width: 200%; height: 0%; left: 50%; top: 50%; background-color: rgba(255, 255, 255, 0.3); transform: translate(-50%, -50%) rotate(-45deg); z-index: 1; } .image-anime:hover:after { height: 250%; transition: all 600ms linear; background-color: transparent; } .th-clip-anim { width: 100%; display: grid; align-items: center; justify-items: center; overflow: hidden; position: relative; } .th-clip-anim .th-anim-img { opacity: 0; width: 100%; height: 100%; } .th-clip-anim .mask { background-size: cover; background-position: center; transform: scale(1.005); } .th-clip-anim > * { grid-area: 1/1/2/2; width: 100%; height: 100%; max-height: 100%; } /*----------------------------------------*/ /* 2.10 Offcanvas /*----------------------------------------*/ .th-offcanvas { position: fixed; background: #fff; width: 450px; z-index: 999; right: 0; top: 0; padding: 50px 40px; height: 100%; opacity: 0; visibility: hidden; transform: translateX(100%); transition: 0.3s; overflow-y: scroll; overscroll-behavior-y: contain; scrollbar-width: none; } @media only screen and (max-width: 450px) { .th-offcanvas { width: 100%; } } .th-offcanvas-open { opacity: 1; visibility: visible; transform: translateX(0); } .th-offcanvas-close-toggle { font-size: 30px; color: var(--th-heading-color); } .th-offcanvas-close-toggle-2 { color: var(--th-black-3); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-offcanvas-header { margin-bottom: 40px; } } .th-offcanvas-title { font-size: 28px; line-height: 28px; margin-bottom: 10px; font-weight: 700; color: var(--th-black-3); } .th-offcanvas-para { font-size: 18px; line-height: 26px; color: var(--th-text); } .th-offcanvas-info span { display: block; color: #222; margin-bottom: 5px; } .th-offcanvas-sm-title { font-size: 25px; } .th-offcanvas-social a { display: inline-block; text-align: center; width: 40px; height: 40px; line-height: 40px; border-radius: 40px; color: var(--th-heading-color); border: 1px solid rgba(2, 11, 24, 0.1); font-size: 14px; transition: 0.3s; } .th-offcanvas-social a:hover { background: #333; transition: 0.3s; color: #fff; } .th-offcanvas-social-3 a { color: var(--th-black-3); } .th-offcanvas-social-3 a:hover { background: var(--th-text-5); transition: 0.3s; color: var(--th-white); } .th-offcanvas-overlay { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; visibility: hidden; opacity: 0; transition: 0.45s easc-in-out; background: rgb(24, 24, 24); } .th-offcanvas-overlay-open { opacity: 0.9; visibility: visible; } .th-offcanvas-gallery { display: grid; grid-gap: 10px; grid-template-columns: auto auto auto auto; } .th-offcanvas-info a { display: block; margin-bottom: 18px; font-size: 18px; line-height: 18px; } .th-offcanvas-info a:last-child { margin-bottom: 0; } .th-offcanvas-info a span { border: 1px solid var(--vkl-border-border-3); height: 40px; width: 40px; display: inline-block; line-height: 40px; text-align: center; border-radius: 50px; margin-right: 4px; transition: 0.3s; } .th-offcanvas-info a span img { margin-top: -4px; transition: 0.3s; } .th-offcanvas-info a:hover { color: var(--vkl-text-text-2); } .th-offcanvas-info a:hover span { background: var(--vkl-text-text-2); transition: 0.3s; } .th-offcanvas-info a:hover span img { filter: brightness(0) invert(1); transition: 0.3s; } /*----------------------------------------*/ /* 2.6 Mouse /*----------------------------------------*/ .cursor-outer { margin-inline-start: -12px; margin-top: -12px; width: 30px; height: 30px; border: 1px solid var(--primary-color); background-color: transparent; box-sizing: border-box; z-index: 10000000; opacity: 0.34; transition: all 0.4s ease-out 0s; } .cursor-outer.color-10 { border: 1px solid #333; } .cursor-outer.color-5 { border: 1px solid #7557ED; } .cursor-outer.color-2 { border: 1px solid var(--primary-color-2); } .cursor-outer.color-3 { border: 1px solid var(--primary-color-3); } .cursor-outer.cursor-hover { opacity: 0.14; } .cursor-outer.cursor-big { opacity: 0; } .mouseCursor { position: fixed; top: 0; inset-inline-start: 0; inset-inline-end: 0; bottom: 0; pointer-events: none; border-radius: 50%; transform: translateZ(0); visibility: hidden; text-align: center; } .mouseCursor.cursor-big { width: 20px; height: 20px; margin-inline-start: -12px; margin-top: -12px; } .cursor-inner { margin-inline-start: -3px; margin-top: -3px; width: 10px; height: 10px; z-index: 10000001; background-color: var(--primary-color); opacity: 1; transition: all 0.24s ease-out 0s; } .cursor-inner.color-5 { background-color: #846BED; } .cursor-inner.color-2 { background-color: var(--primary-color-2); } .cursor-inner.color-3 { background-color: var(--primary-color-3); } .cursor-inner.cursor-big span { opacity: 1; } .cursor-inner.cursor-hover { margin-inline-start: -10px; margin-top: -10px; width: 30px; height: 30px; background-color: var(--vkl-text-text-2); /* $theme-color */ border: 1px solid #686363; opacity: 0; } /*----------------------------------------*/ /* 2.5 Preloader /*----------------------------------------*/ .preloader { position: fixed; z-index: 10; height: 100vh; width: 100%; left: 0; top: 0; display: -webkit-box; display: -ms-flexbox; display: flex; overflow: hidden; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: transparent; z-index: 99999999999999; } .preloader svg { position: absolute; top: 0; width: 100vw; height: 110vh; fill: #111013; } h5.preloader-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: calc(80px + 5vw); color: #333; font-weight: 600; } @media (max-width: 1040px) { h5.preloader-text { font-size: 60px; } } h5.preloader-text::after { content: "Pixelor"; position: absolute; left: 0; top: 0; color: yellowgreen; animation: move 2s infinite alternate; } .home-2 h5.preloader-text::after { color: tomato; } /*----------------------------------------*/ /* 2.1 Back to top /*----------------------------------------*/ .progress-wrap { position: fixed; right: 30px; bottom: 30px; height: 56px; width: 56px; cursor: pointer; display: block; border-radius: 50px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.1); z-index: 1; opacity: 0; visibility: hidden; transform: translateY(15px); transition: all 200ms linear; } .progress-wrap.active-progress { opacity: 1; visibility: visible; transform: translateY(0); z-index: 999; } .progress-wrap::after { position: absolute; font-family: "FontAwesome"; content: "\f062"; text-align: center; line-height: 56px; font-size: 18px; color: var(--primary-color); left: 0; top: 0; height: 56px; width: 56px; cursor: pointer; display: block; z-index: 1; transition: all 200ms linear; } .progress-wrap-2::after { color: var(--primary-color-2); } .progress-wrap-3::after { color: var(--primary-color-3); } .progress-wrap::before { position: absolute; font-family: "FontAwesome"; content: "\f062"; text-align: center; line-height: 56px; font-size: 18px; opacity: 0; left: 0; top: 0; height: 56px; width: 56px; cursor: pointer; display: block; z-index: 2; transition: all 200ms linear; } .progress-wrap:hover::before { opacity: 1; } .progress-wrap svg path { fill: none; } .progress-wrap svg.progress-circle path { stroke: var(--primary-color); stroke-width: 4; box-sizing: border-box; transition: all 200ms linear; } .progress-wrap-2 svg.progress-circle path { stroke: var(--primary-color-2); stroke-width: 4; box-sizing: border-box; transition: all 200ms linear; } .progress-wrap-3 svg.progress-circle path { stroke: var(--primary-color-3); stroke-width: 4; box-sizing: border-box; transition: all 200ms linear; } /*----------------------------------------*/ /* 2.14 iconbox /*----------------------------------------*/ .th-circle-box-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-circle-box-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (max-width: 575px) { .th-circle-box-grid { grid-template-columns: 1fr; gap: 20px; } } .th-circle-box-grid-singlebox { background: var(--black-bg); height: 320px; width: 320px; border-radius: 50%; border: 1px solid #2C2C2C; text-align: center; display: flex; flex-direction: column; justify-content: center; transition: 0.3s; } @media (max-width: 575px) { .th-circle-box-grid-singlebox { height: 352px; width: 100%; } } .th-circle-box-grid-singlebox .title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; } .th-circle-box-grid-singlebox .title:hover { color: var(--primary-color); transition: 0.3s; } .th-circle-box-grid-singlebox:nth-child(2) { margin-left: -35px; position: relative; z-index: 2; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-circle-box-grid-singlebox:nth-child(2) { margin-left: 0; } } .th-circle-box-grid-singlebox:nth-child(3) { margin-left: -45px; margin-top: 48px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-circle-box-grid-singlebox:nth-child(3) { margin-left: 0; margin-top: 0; } } .th-circle-box-grid-singlebox:nth-child(1) { position: relative; z-index: 3; margin-top: 48px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-circle-box-grid-singlebox:nth-child(1) { margin-top: 0; } } .th-circle-box-grid-singlebox:hover { transform: translateY(-5px); transition: 0.3s; } .th-service-iconbox { background: var(--black-bg); padding: 48px 40px; border-radius: 16px; border: 1px solid #2F2F2F; transition: 0.3s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-service-iconbox { padding: 30px 24px; } } .th-service-iconbox .th-icon { background: var(--black-color); height: 72px; width: 72px; line-height: 72px; text-align: center; border-radius: 50%; display: inline-block; transition: 0.3s; } .th-service-iconbox .th-icon img { transition: 0.3s; } .th-service-iconbox .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-service-iconbox .th-title { font-size: 17px; } } @media (max-width: 575px) { .th-service-iconbox .th-title { font-size: 20px; } } .th-service-iconbox .th-title:hover { color: var(--primary-color); transition: 0.3s; } .th-service-iconbox .th-desc { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); } .th-service-iconbox .th-more-btn { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--secondary-color); transition: 0.3s; display: inline-block; border-bottom: 1px solid var(--secondary-color); } .th-service-iconbox .th-more-btn:hover { color: var(--primary-color); border-bottom: 1px solid var(--primary-color); transition: 0.3s; } .th-service-iconbox:hover { transition: 0.3s; border: 1px solid var(--primary-color); } .th-service-iconbox:hover .th-icon { transition: 0.3s; transform: rotateY(180deg); background: var(--primary-color); } .th-service-iconbox:hover .th-icon img { filter: brightness(0); } .th-service-thumb img { height: 352px; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-service-thumb img { height: 340px; } } .th-num { font-size: 100px; line-height: 108px; font-weight: 700; color: var(--primary-color); transition: 0.3s; position: absolute; bottom: 0px; left: 40px; transition: 0.3s; opacity: 0; } .th-num-2 { right: 40px; text-align: right; } .th-serviceboxwrap:hover .th-num { bottom: 24px; transition: 0.3s; opacity: 1; } .th-serviceboxwrap:hover .th-num-2 { text-align: right; } .th-single-counter { background: var(--black-bg); transition: 0.3s; padding: 32px; display: flex; align-items: center; } .th-single-counter .th-icon span { background: var(--black-color); height: 77px; width: 77px; line-height: 83px; text-align: center; border-radius: 50%; display: inline-block; margin-right: 16px; } .th-single-counter .th-icon span img { transition: 0.3s; } .th-single-counter .th-content { display: flex; align-items: center; } .th-single-counter .th-content .th-nun { font-size: 56px; line-height: 64px; font-weight: 700; color: var(--white-color); transition: 0.3s; } .th-single-counter .th-content .th-symbol { font-size: 56px; line-height: 64px; font-weight: 700; color: var(--white-color); transition: 0.3s; } .th-counter-numflex .th-para { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; } .th-counter-mt-160 { margin-top: 159px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-counter-mt-160 { margin-top: 0; } } .th-service-icnbox { border: 1px solid #2F2F2F; transition: 0.3s; background: #121212; padding: 40px; border-radius: 16px; } .th-service-icnbox-flex-2 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; } .th-service-icnbox-content .th-right-title { font-size: 16px; line-height: 24px; font-weight: 400; color: #B4B2B2; transition: 0.3s; } .th-service-icnbox-icon span { height: 56px; width: 56px; line-height: 56px; background: #0E0E0E; display: inline-block; text-align: center; transition: 0.3s; border-radius: 50%; } .th-service-icnbox-icon span img { transition: 0.3s; } .th-service-icnbox-title { font-size: 24px; line-height: 32px; font-weight: 700; color: #FBFBFB; transition: 0.3s; padding-bottom: 8px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-service-icnbox-title { font-size: 20px; } } .th-service-icnbox-title:hover { color: #DEFF00; transition: 0.3s; } .th-service-icnbox-para { font-size: 16px; line-height: 24px; font-weight: 400; color: #B4B2B2; padding-bottom: 32px; } .th-service-icnbox:hover { border: 1px solid #DEFF00; transition: 0.3s; } .th-service-arrow-icon .th-arrow-bg { height: 40px; width: 40px; line-height: 40px; background: #0E0E0E; display: inline-block; border-radius: 50%; text-align: center; transition: 0.3s; margin-right: 12px; } .th-service-arrow-icon .th-arrow-bg img { transition: 0.3s; } .th-service-arrow-icon .th-arrow-content { font-size: 16px; line-height: 24px; font-weight: 400; color: #FBFBFB; transition: 0.3s; } .th-service-icnbox:hover .th-service-icnbox-icon span { background: #DEFF00; transition: 0.3s; } .th-service-icnbox:hover .th-service-icnbox-icon span img { filter: brightness(0); transition: 0.3s; } .th-service-icnbox:hover .th-service-arrow-icon .th-arrow-bg { background: #DEFF00; transition: 0.3s; } .th-service-icnbox:hover .th-service-arrow-icon .th-arrow-bg img { filter: brightness(0); transition: 0.3s; } .th-service-icnbox:hover .th-service-arrow-icon .th-arrow-content { border-bottom: 1px solid #FBFBFB; transition: 0.3s; } /*----------------------------------------*/ /* 2.16 Progress /*----------------------------------------*/ .progress-circle1 { width: 80px; height: 80px; border-radius: 50%; position: relative; display: grid; place-items: center; font-weight: 700; font-size: 22px; color: var(--vl-text-7); background: conic-gradient(#042C33 var(--percent), #e6e6e6 0); } .progress-circle1-4 { background: var(--vl-text-19); } .progress-circle1-5 { background: #775BED; } .progress-circle1::before { content: ""; position: absolute; width: 70px; height: 70px; background: #fff; border-radius: 50%; } .progress-circle1-4::before { background: #03070C; } .progress-circle1 span { position: relative; z-index: 1; } /* Percentage Helpers */ .progress-96 { --percent: 345deg; } .progress-97 { --percent: 349deg; } .progress-80 { --percent: 288deg; } .progress-75 { --percent: 270deg; } .vl-progress-title { font-size: 20px; line-height: 20px; font-weight: 700; color: var(--vl-text-7); font-family: var(--vl-fonts-figtree); padding-bottom: 14px; } .vl-progress-title-4 { color: rgba(255, 255, 255, 0.9); } .vl-text-muted { font-size: 16px; line-height: 16px; font-weight: 500; color: var(--vl-text-6); } .vl-text-muted-4 { color: rgba(255, 255, 255, 0.8); } @media (max-width: 575px) { .margin-bottom-xs { margin-bottom: 20px; } } .progress-circle1-4 span { color: var(--vl-white); } /*----------------------------------------*/ /* 2.17 Gallery /*----------------------------------------*/ .th-self-area { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-self-thumb img { border-radius: 32px; } .th-self-title { margin-top: 49px; font-size: 51px; line-height: 62px; font-weight: 700; color: var(--secondary-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), (max-width: 575px) { .th-self-title { margin-top: 30px; font-size: 30px; line-height: 40px; } } .th-brand-wrap-flex-three { display: flex; justify-content: space-between; border-top: 1px solid #2C2C2C; border-bottom: 1px solid #2C2C2C; margin-top: 164px; } @media (max-width: 575px) { .th-brand-wrap-flex-three { margin-top: 50px; display: grid; grid-template-columns: 1fr 1fr; } } .th-brand-wrap-flex-three-inner { margin-top: 0; } .th-company-brand { border-right: 1px solid #2C2C2C; padding: 40px 0; } .th-company-brand:last-child { border-right: inherit; } @media (max-width: 575px) { .th-company-brand { border-right: inherit; } } /*----------------------------------------*/ /* 2.18 Feature /*----------------------------------------*/ .th-number-boxwrap { display: flex; align-items: center; } .th-number-boxwrap-umber { font-size: 64px; line-height: 72px; font-weight: 700; color: var(--secondary-color); margin-right: 8px; } .th-number-boxwrap-text { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--text-color); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-number-boxwrap { display: block; } } .th-achivement-box-grid { display: grid; grid-template-columns: repeat(4, 1fr); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-achivement-box-grid { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-achivement-box-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575px) { .th-achivement-box-grid { grid-template-columns: repeat(1, 1fr); } } .th-single-achivement { border: 1px solid #2C2C2C; padding: 40px 32px; border-radius: 32px; display: flex; transition: 0.3s; } .th-single-achivement-title { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; } .th-single-achivement-title:hover { color: var(--primary-color-3); transition: 0.3s; } .th-single-achivement-icon span img { margin-right: 16px; filter: brightness(0) invert(1); transition: 0.3s; } .th-single-achivement-2 { border: 1px solid #2C2C2C; } .th-single-achivement:hover { border: 1px solid var(--primary-color-3); transition: 0.3s; } .th-single-achivement:hover .th-single-achivement-icon span img { filter: none; transition: 0.3s; } .th-single-achivement:nth-child(1) { border: 1px solid transparent; } .th-single-achivement:nth-child(3) { border: 1px solid transparent; } .th-single-achivement:nth-child(6) { border: 1px solid transparent; } .th-single-achivement:nth-child(8) { border: 1px solid transparent; } /*----------------------------------------*/ /* 2.11 Breadcrumb /*----------------------------------------*/ .th-breadcrumb-area { padding-top: 244px; padding-bottom: 164px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-breadcrumb-area { padding-top: 160px; padding-bottom: 110px; } } .th-breadcrumb-content .th-breadcrumb-title { color: #FAF2EE; font-size: 72px; line-height: 80px; font-weight: 700; margin-bottom: 24px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-breadcrumb-content .th-breadcrumb-title { font-size: 40px; line-height: 50px; } } @media (max-width: 575px) { .th-breadcrumb-content .th-breadcrumb-title { font-size: 35px; line-height: 45px; } } .th-breadcrumb-content ul li { display: inline-block; color: #FAF2EE; } .th-breadcrumb-content ul li span { margin: 0 4px; } .th-breadcrumb-content ul li a { color: #FAF2EE; font-size: 20px; line-height: 28px; font-weight: 600; opacity: 0.7; font-family: var(--th-fonts-Inter); } .th-breadcrumb-content ul li a.active { color: #FAF2EE; opacity: 1; } .th-breadcrumb-content ul li a:hover { color: var(--primary-color); transition: 0.3s; opacity: 1; } /*----------------------------------------*/ /* 2.19 Pagination /*----------------------------------------*/ .th-theme-pagination ul li { display: inline-block; margin-right: 10px; } .th-theme-pagination ul li:last-child { margin-right: 0; } .th-theme-pagination ul li a.th-pagination-num { background: transparent; height: 24px; width: 24px; line-height: 24px; display: inline-block; text-align: center; border-radius: 50%; color: #FBFBFB; font-size: 16px; line-height: 24px; font-weight: 600; transition: 0.3s; } .th-theme-pagination ul li a.th-pagination-num:hover { background: #DEFF00; color: #0E0E0E; transition: 0.3s; } .th-theme-pagination ul li a .th-prev { background: #0E0E0E; font-size: 16px; line-height: 24px; color: #FFFFFF; padding: 8px 20px; border-radius: 124px; transition: 0.3s; } .th-theme-pagination ul li a .th-prev img { filter: brightness(0) invert(1); margin-top: -4px; } .th-theme-pagination ul li a .th-prev:hover { background: #DEFF00; transition: 0.3s; color: #0E0E0E; } .th-theme-pagination ul li a .th-prev:hover img { filter: none; transition: 0.3s; } .th-theme-pagination ul li a .th-prev:hover img { filter: brightness(0); } .th-work-single-thumb img { height: 422px; } /*----------------------------------------*/ /* 2.20 Comments /*----------------------------------------*/ .th-blog-details-comment-wrap .th-comment-title { color: #FBFBFB; font-size: 32px; line-height: 40px; transition: 0.3s; position: relative; font-weight: 700; padding-bottom: 12px; } .th-blog-details-comment-wrap .th-comment-title::after { position: absolute; content: ""; height: 3px; width: 80px; left: 0; bottom: 0; border-radius: 64px; background: #DEFF00; } .reply-btn { display: inline-block; background: #DEFF00; font-size: 16px; line-height: 24px; font-weight: 600; padding: 6px 25px; border-radius: 78px; text-transform: uppercase; } .reply-btn-2 { color: #FBFBFB; border: 1px solid #2F2F2F; background: #121212; } .reply-btn-2:hover { color: #DEFF00; } .th-coment-date-flex { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 575px) { .th-coment-date-flex { flex-direction: column; } } .th-coment-date-flex .th-date { font-size: 16px; line-height: 24px; font-weight: 400; color: #B4B2B2; } @media (max-width: 575px) { .th-coment-date-flex .th-date { margin-bottom: 12px; } } .ml-135 { margin-left: 135px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .ml-135 { margin-left: 0; } } .th-single-form .th-balel-title { color: #FFFFFF; font-size: 18px; line-height: 26px; font-weight: 600; padding-bottom: 12px; } .th-single-form input[type=text], .th-single-form input[type=email], .th-single-form textarea { height: 60px; font-size: 16px; line-height: 24px; color: #BCBCBC; font-weight: 400; border-radius: 8px; background: #121212; border: transparent; } .th-single-form input[type=text]::placeholder, .th-single-form input[type=email]::placeholder, .th-single-form textarea::placeholder { font-size: 16px; line-height: 24px; color: #BCBCBC; } .th-single-form textarea { height: 128px; } .th-single-form-2 input[type=text], .th-single-form-2 input[type=email], .th-single-form-2 textarea { background: #0E0E0E; height: 64px; } .th-single-form-2 textarea { height: 150px; } .th-fact-content-wrap-2 .th-section-title .th-para { color: #B4B2B2; font-size: 16px; line-height: 24px; } .th-fact-content-wrap-2 .th-section-title { padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #2C2C2C; } * { margin: 0; padding: 0; box-sizing: border-box; } /*--------------------------------- typography css start ---------------------------------*/ body { font-family: var(--th-fonts-Onest); font-size: 16px; font-weight: normal; line-height: 24px; } a { text-decoration: none; } h1, h2, h3, h4, h5, h6 { font-family: var(--th-fonts-Inter); color: var(--primary-color); margin-top: 0px; font-weight: 400; line-height: 1.2; margin: 0; } h1 { font-size: 48px; } h2 { font-size: 38px; } h3 { font-size: 28px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } ul { margin: 0px; padding: 0px; } p { font-family: var(--th-fonts-Onest); font-size: 14px; font-weight: 400; color: var(--vl-text-color); line-height: 26px; } a:not([href]):not([class]), a:not([href]):not([class]):hover { color: inherit; text-decoration: none; } 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: #fff; height: 56px; width: 100%; line-height: 56px; font-size: 14px; color: var(--common-black); padding-left: 26px; padding-right: 26px; border: 1px solid #E0E2E3; } input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=number]:focus, input[type=password]:focus, input[type=url]:focus, textarea:focus { border-color: none; } input[type=text]:focus::placeholder, input[type=email]:focus::placeholder, input[type=tel]:focus::placeholder, input[type=number]:focus::placeholder, input[type=password]:focus::placeholder, input[type=url]:focus::placeholder, textarea:focus::placeholder { opacity: 0; } textarea { line-height: 1.4; padding-top: 17px; padding-bottom: 17px; } *::-moz-selection { background: #333; color: #fff; text-shadow: none; } *::selection { background: #333; color: #fff; text-shadow: none; } *::-moz-placeholder { color: #333; font-size: 14px; opacity: 1; } *::placeholder { color: #333; font-size: 14px; opacity: 1; } /*----------------------------------------*/ /* 1.2 Common Classes /*----------------------------------------*/ ul li { list-style: none; } p { margin: 0; padding: 0; } .w-img img { width: 100%; } .m-img img { max-width: 100%; } .th-upper { text-transform: uppercase; } .br-16 { border-radius: 16px; } .br-20 { border-radius: 20px; } .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; } .overflow-x-visible { overflow-x: visible; overflow-y: hidden; } .p-relative { position: relative; } .p-absolute { position: absolute; } .th-black-bg { background: var(--black-bg); } .vl-cmon-brd { border-top: 1px solid var(--vl-text-23); border-right: 1px solid var(--vl-text-23); border-left: 1px solid var(--vl-text-23); border-bottom: 1px solid var(--vl-text-23); } .vl-cmon-brd-2 { border-top: transparent; } .tp-slide-transtion { -webkit-transition-timing-function: linear; transition-timing-function: linear; } .tp-brand-slide-element { width: auto; display: inline-block; } .tp-brand-area-1 { transform: rotate(-2.92deg) translateY(64px); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-brand-area-1 { transform: rotate(0) translateY(0); } } .tp-brand-area-1-2 { transform: rotate(0deg) translateY(64px); } .tp-brand-area-2 { transform: rotate(2.77deg) translateY(-61px); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-brand-area-2 { transform: rotate(0) translateY(0) !important; } } .tp-brand-area-2-2 { transform: rotate(5.77deg) translateY(-14px); } .th-brand-height-214 { height: 234px; } .th-brand-height-394 { height: 394px; } .th-margin-top-2 { margin-top: -64px; } .th-orange-bg { background: var(--primary-color-3); } .th-gray-bg { background: var(--secondary-color); } .th-blue-bg { background: #4C40F7; } .th-mb-48-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 48px; } @media (max-width: 575px) { .th-mb-48-flex { flex-direction: column; margin-bottom: 30px; } } /*----------------------------------------*/ /* 1.3 Default Spacing /*----------------------------------------*/ /*-- - Margin & Padding -----------------------------------------*/ /*-- Margin Top --*/ .mt-1 { margin-top: 1px; } .mt-2 { margin-top: 2px; } .mt-3 { margin-top: 3px; } .mt-4 { margin-top: 4px; } .mt-5 { margin-top: 5px; } .mt-6 { margin-top: 6px; } .mt-7 { margin-top: 7px; } .mt-8 { margin-top: 8px; } .mt-9 { margin-top: 9px; } .mt-10 { margin-top: 10px; } .mt-11 { margin-top: 11px; } .mt-12 { margin-top: 12px; } .mt-13 { margin-top: 13px; } .mt-14 { margin-top: 14px; } .mt-15 { margin-top: 15px; } .mt-16 { margin-top: 16px; } .mt-17 { margin-top: 17px; } .mt-18 { margin-top: 18px; } .mt-19 { margin-top: 19px; } .mt-20 { margin-top: 20px; } .mt-21 { margin-top: 21px; } .mt-22 { margin-top: 22px; } .mt-23 { margin-top: 23px; } .mt-24 { margin-top: 24px; } .mt-25 { margin-top: 25px; } .mt-26 { margin-top: 26px; } .mt-27 { margin-top: 27px; } .mt-28 { margin-top: 28px; } .mt-29 { margin-top: 29px; } .mt-30 { margin-top: 30px; } .mt-31 { margin-top: 31px; } .mt-32 { margin-top: 32px; } .mt-33 { margin-top: 33px; } .mt-34 { margin-top: 34px; } .mt-35 { margin-top: 35px; } .mt-36 { margin-top: 36px; } .mt-37 { margin-top: 37px; } .mt-38 { margin-top: 38px; } .mt-39 { margin-top: 39px; } .mt-40 { margin-top: 40px; } .mt-41 { margin-top: 41px; } .mt-42 { margin-top: 42px; } .mt-43 { margin-top: 43px; } .mt-44 { margin-top: 44px; } .mt-45 { margin-top: 45px; } .mt-46 { margin-top: 46px; } .mt-47 { margin-top: 47px; } .mt-48 { margin-top: 48px; } .mt-49 { margin-top: 49px; } .mt-50 { margin-top: 50px; } .mt-51 { margin-top: 51px; } .mt-52 { margin-top: 52px; } .mt-53 { margin-top: 53px; } .mt-54 { margin-top: 54px; } .mt-55 { margin-top: 55px; } .mt-56 { margin-top: 56px; } .mt-57 { margin-top: 57px; } .mt-58 { margin-top: 58px; } .mt-59 { margin-top: 59px; } .mt-60 { margin-top: 60px; } .mt-61 { margin-top: 61px; } .mt-62 { margin-top: 62px; } .mt-63 { margin-top: 63px; } .mt-64 { margin-top: 64px; } .mt-65 { margin-top: 65px; } .mt-66 { margin-top: 66px; } .mt-67 { margin-top: 67px; } .mt-68 { margin-top: 68px; } .mt-69 { margin-top: 69px; } .mt-70 { margin-top: 70px; } .mt-71 { margin-top: 71px; } .mt-72 { margin-top: 72px; } .mt-73 { margin-top: 73px; } .mt-74 { margin-top: 74px; } .mt-75 { margin-top: 75px; } .mt-76 { margin-top: 76px; } .mt-77 { margin-top: 77px; } .mt-78 { margin-top: 78px; } .mt-79 { margin-top: 79px; } .mt-80 { margin-top: 80px; } .mt-81 { margin-top: 81px; } .mt-82 { margin-top: 82px; } .mt-83 { margin-top: 83px; } .mt-84 { margin-top: 84px; } .mt-85 { margin-top: 85px; } .mt-86 { margin-top: 86px; } .mt-87 { margin-top: 87px; } .mt-88 { margin-top: 88px; } .mt-89 { margin-top: 89px; } .mt-90 { margin-top: 90px; } .mt-91 { margin-top: 91px; } .mt-92 { margin-top: 92px; } .mt-93 { margin-top: 93px; } .mt-94 { margin-top: 94px; } .mt-95 { margin-top: 95px; } .mt-96 { margin-top: 96px; } .mt-97 { margin-top: 97px; } .mt-98 { margin-top: 98px; } .mt-99 { margin-top: 99px; } .mt-100 { margin-top: 100px; } .mt-101 { margin-top: 101px; } .mt-102 { margin-top: 102px; } .mt-103 { margin-top: 103px; } .mt-104 { margin-top: 104px; } .mt-105 { margin-top: 105px; } .mt-106 { margin-top: 106px; } .mt-107 { margin-top: 107px; } .mt-108 { margin-top: 108px; } .mt-109 { margin-top: 109px; } .mt-110 { margin-top: 110px; } .mt-111 { margin-top: 111px; } .mt-112 { margin-top: 112px; } .mt-113 { margin-top: 113px; } .mt-114 { margin-top: 114px; } .mt-115 { margin-top: 115px; } .mt-116 { margin-top: 116px; } .mt-117 { margin-top: 117px; } .mt-118 { margin-top: 118px; } .mt-119 { margin-top: 119px; } .mt-120 { margin-top: 120px; } /*-- Margin Bottom --*/ .mb-1 { margin-bottom: 1px; } .mb-2 { margin-bottom: 2px; } .mb-3 { margin-bottom: 3px; } .mb-4 { margin-bottom: 4px; } .mb-5 { margin-bottom: 5px; } .mb-6 { margin-bottom: 6px; } .mb-7 { margin-bottom: 7px; } .mb-8 { margin-bottom: 8px; } .mb-9 { margin-bottom: 9px; } .mb-10 { margin-bottom: 10px; } .mb-11 { margin-bottom: 11px; } .mb-12 { margin-bottom: 12px; } .mb-13 { margin-bottom: 13px; } .mb-14 { margin-bottom: 14px; } .mb-15 { margin-bottom: 15px; } .mb-16 { margin-bottom: 16px; } .mb-17 { margin-bottom: 17px; } .mb-18 { margin-bottom: 18px; } .mb-19 { margin-bottom: 19px; } .mb-20 { margin-bottom: 20px; } .mb-21 { margin-bottom: 21px; } .mb-22 { margin-bottom: 22px; } .mb-23 { margin-bottom: 23px; } .mb-24 { margin-bottom: 24px; } .mb-25 { margin-bottom: 25px; } .mb-26 { margin-bottom: 26px; } .mb-27 { margin-bottom: 27px; } .mb-28 { margin-bottom: 28px; } .mb-29 { margin-bottom: 29px; } .mb-30 { margin-bottom: 30px; } .mb-31 { margin-bottom: 31px; } .mb-32 { margin-bottom: 32px; } .mb-33 { margin-bottom: 33px; } .mb-34 { margin-bottom: 34px; } .mb-35 { margin-bottom: 35px; } .mb-36 { margin-bottom: 36px; } .mb-37 { margin-bottom: 37px; } .mb-38 { margin-bottom: 38px; } .mb-39 { margin-bottom: 39px; } .mb-40 { margin-bottom: 40px; } .mb-41 { margin-bottom: 41px; } .mb-42 { margin-bottom: 42px; } .mb-43 { margin-bottom: 43px; } .mb-44 { margin-bottom: 44px; } .mb-45 { margin-bottom: 45px; } .mb-46 { margin-bottom: 46px; } .mb-47 { margin-bottom: 47px; } .mb-48 { margin-bottom: 48px; } .mb-49 { margin-bottom: 49px; } .mb-50 { margin-bottom: 50px; } .mb-51 { margin-bottom: 51px; } .mb-52 { margin-bottom: 52px; } .mb-53 { margin-bottom: 53px; } .mb-54 { margin-bottom: 54px; } .mb-55 { margin-bottom: 55px; } .mb-56 { margin-bottom: 56px; } .mb-57 { margin-bottom: 57px; } .mb-58 { margin-bottom: 58px; } .mb-59 { margin-bottom: 59px; } .mb-60 { margin-bottom: 60px; } .mb-61 { margin-bottom: 61px; } .mb-62 { margin-bottom: 62px; } .mb-63 { margin-bottom: 63px; } .mb-64 { margin-bottom: 64px; } .mb-65 { margin-bottom: 65px; } .mb-66 { margin-bottom: 66px; } .mb-67 { margin-bottom: 67px; } .mb-68 { margin-bottom: 68px; } .mb-69 { margin-bottom: 69px; } .mb-70 { margin-bottom: 70px; } .mb-71 { margin-bottom: 71px; } .mb-72 { margin-bottom: 72px; } .mb-73 { margin-bottom: 73px; } .mb-74 { margin-bottom: 74px; } .mb-75 { margin-bottom: 75px; } .mb-76 { margin-bottom: 76px; } .mb-77 { margin-bottom: 77px; } .mb-78 { margin-bottom: 78px; } .mb-79 { margin-bottom: 79px; } .mb-80 { margin-bottom: 80px; } .mb-81 { margin-bottom: 81px; } .mb-82 { margin-bottom: 82px; } .mb-83 { margin-bottom: 83px; } .mb-84 { margin-bottom: 84px; } .mb-85 { margin-bottom: 85px; } .mb-86 { margin-bottom: 86px; } .mb-87 { margin-bottom: 87px; } .mb-88 { margin-bottom: 88px; } .mb-89 { margin-bottom: 89px; } .mb-90 { margin-bottom: 90px; } .mb-91 { margin-bottom: 91px; } .mb-92 { margin-bottom: 92px; } .mb-93 { margin-bottom: 93px; } .mb-94 { margin-bottom: 94px; } .mb-95 { margin-bottom: 95px; } .mb-96 { margin-bottom: 96px; } .mb-97 { margin-bottom: 97px; } .mb-98 { margin-bottom: 98px; } .mb-99 { margin-bottom: 99px; } .mb-100 { margin-bottom: 100px; } .mb-101 { margin-bottom: 101px; } .mb-102 { margin-bottom: 102px; } .mb-103 { margin-bottom: 103px; } .mb-104 { margin-bottom: 104px; } .mb-105 { margin-bottom: 105px; } .mb-106 { margin-bottom: 106px; } .mb-107 { margin-bottom: 107px; } .mb-108 { margin-bottom: 108px; } .mb-109 { margin-bottom: 109px; } .mb-110 { margin-bottom: 110px; } .mb-111 { margin-bottom: 111px; } .mb-112 { margin-bottom: 112px; } .mb-113 { margin-bottom: 113px; } .mb-114 { margin-bottom: 114px; } .mb-115 { margin-bottom: 115px; } .mb-116 { margin-bottom: 116px; } .mb-117 { margin-bottom: 117px; } .mb-118 { margin-bottom: 118px; } .mb-119 { margin-bottom: 119px; } .mb-120 { margin-bottom: 120px; } /*-- Margin Left --*/ .ml-1 { margin-left: 1px; } .ml-2 { margin-left: 2px; } .ml-3 { margin-left: 3px; } .ml-4 { margin-left: 4px; } .ml-5 { margin-left: 5px; } .ml-6 { margin-left: 6px; } .ml-7 { margin-left: 7px; } .ml-8 { margin-left: 8px; } .ml-9 { margin-left: 9px; } .ml-10 { margin-left: 10px; } .ml-11 { margin-left: 11px; } .ml-12 { margin-left: 12px; } .ml-13 { margin-left: 13px; } .ml-14 { margin-left: 14px; } .ml-15 { margin-left: 15px; } .ml-16 { margin-left: 16px; } .ml-17 { margin-left: 17px; } .ml-18 { margin-left: 18px; } .ml-19 { margin-left: 19px; } .ml-20 { margin-left: 20px; } .ml-21 { margin-left: 21px; } .ml-22 { margin-left: 22px; } .ml-23 { margin-left: 23px; } .ml-24 { margin-left: 24px; } .ml-25 { margin-left: 25px; } .ml-26 { margin-left: 26px; } .ml-27 { margin-left: 27px; } .ml-28 { margin-left: 28px; } .ml-29 { margin-left: 29px; } .ml-30 { margin-left: 30px; } .ml-31 { margin-left: 31px; } .ml-32 { margin-left: 32px; } .ml-33 { margin-left: 33px; } .ml-34 { margin-left: 34px; } .ml-35 { margin-left: 35px; } .ml-36 { margin-left: 36px; } .ml-37 { margin-left: 37px; } .ml-38 { margin-left: 38px; } .ml-39 { margin-left: 39px; } .ml-40 { margin-left: 40px; } .ml-41 { margin-left: 41px; } .ml-42 { margin-left: 42px; } .ml-43 { margin-left: 43px; } .ml-44 { margin-left: 44px; } .ml-45 { margin-left: 45px; } .ml-46 { margin-left: 46px; } .ml-47 { margin-left: 47px; } .ml-48 { margin-left: 48px; } .ml-49 { margin-left: 49px; } .ml-50 { margin-left: 50px; } .ml-51 { margin-left: 51px; } .ml-52 { margin-left: 52px; } .ml-53 { margin-left: 53px; } .ml-54 { margin-left: 54px; } .ml-55 { margin-left: 55px; } .ml-56 { margin-left: 56px; } .ml-57 { margin-left: 57px; } .ml-58 { margin-left: 58px; } .ml-59 { margin-left: 59px; } .ml-60 { margin-left: 60px; } .ml-61 { margin-left: 61px; } .ml-62 { margin-left: 62px; } .ml-63 { margin-left: 63px; } .ml-64 { margin-left: 64px; } .ml-65 { margin-left: 65px; } .ml-66 { margin-left: 66px; } .ml-67 { margin-left: 67px; } .ml-68 { margin-left: 68px; } .ml-69 { margin-left: 69px; } .ml-70 { margin-left: 70px; } .ml-71 { margin-left: 71px; } .ml-72 { margin-left: 72px; } .ml-73 { margin-left: 73px; } .ml-74 { margin-left: 74px; } .ml-75 { margin-left: 75px; } .ml-76 { margin-left: 76px; } .ml-77 { margin-left: 77px; } .ml-78 { margin-left: 78px; } .ml-79 { margin-left: 79px; } .ml-80 { margin-left: 80px; } .ml-81 { margin-left: 81px; } .ml-82 { margin-left: 82px; } .ml-83 { margin-left: 83px; } .ml-84 { margin-left: 84px; } .ml-85 { margin-left: 85px; } .ml-86 { margin-left: 86px; } .ml-87 { margin-left: 87px; } .ml-88 { margin-left: 88px; } .ml-89 { margin-left: 89px; } .ml-90 { margin-left: 90px; } .ml-91 { margin-left: 91px; } .ml-92 { margin-left: 92px; } .ml-93 { margin-left: 93px; } .ml-94 { margin-left: 94px; } .ml-95 { margin-left: 95px; } .ml-96 { margin-left: 96px; } .ml-97 { margin-left: 97px; } .ml-98 { margin-left: 98px; } .ml-99 { margin-left: 99px; } .ml-100 { margin-left: 100px; } .ml-101 { margin-left: 101px; } .ml-102 { margin-left: 102px; } .ml-103 { margin-left: 103px; } .ml-104 { margin-left: 104px; } .ml-105 { margin-left: 105px; } .ml-106 { margin-left: 106px; } .ml-107 { margin-left: 107px; } .ml-108 { margin-left: 108px; } .ml-109 { margin-left: 109px; } .ml-110 { margin-left: 110px; } .ml-111 { margin-left: 111px; } .ml-112 { margin-left: 112px; } .ml-113 { margin-left: 113px; } .ml-114 { margin-left: 114px; } .ml-115 { margin-left: 115px; } .ml-116 { margin-left: 116px; } .ml-117 { margin-left: 117px; } .ml-118 { margin-left: 118px; } .ml-119 { margin-left: 119px; } .ml-120 { margin-left: 120px; } /*-- Margin Right --*/ .mr-1 { margin-right: 1px; } .mr-2 { margin-right: 2px; } .mr-3 { margin-right: 3px; } .mr-4 { margin-right: 4px; } .mr-5 { margin-right: 5px; } .mr-6 { margin-right: 6px; } .mr-7 { margin-right: 7px; } .mr-8 { margin-right: 8px; } .mr-9 { margin-right: 9px; } .mr-10 { margin-right: 10px; } .mr-11 { margin-right: 11px; } .mr-12 { margin-right: 12px; } .mr-13 { margin-right: 13px; } .mr-14 { margin-right: 14px; } .mr-15 { margin-right: 15px; } .mr-16 { margin-right: 16px; } .mr-17 { margin-right: 17px; } .mr-18 { margin-right: 18px; } .mr-19 { margin-right: 19px; } .mr-20 { margin-right: 20px; } .mr-21 { margin-right: 21px; } .mr-22 { margin-right: 22px; } .mr-23 { margin-right: 23px; } .mr-24 { margin-right: 24px; } .mr-25 { margin-right: 25px; } .mr-26 { margin-right: 26px; } .mr-27 { margin-right: 27px; } .mr-28 { margin-right: 28px; } .mr-29 { margin-right: 29px; } .mr-30 { margin-right: 30px; } .mr-31 { margin-right: 31px; } .mr-32 { margin-right: 32px; } .mr-33 { margin-right: 33px; } .mr-34 { margin-right: 34px; } .mr-35 { margin-right: 35px; } .mr-36 { margin-right: 36px; } .mr-37 { margin-right: 37px; } .mr-38 { margin-right: 38px; } .mr-39 { margin-right: 39px; } .mr-40 { margin-right: 40px; } .mr-41 { margin-right: 41px; } .mr-42 { margin-right: 42px; } .mr-43 { margin-right: 43px; } .mr-44 { margin-right: 44px; } .mr-45 { margin-right: 45px; } .mr-46 { margin-right: 46px; } .mr-47 { margin-right: 47px; } .mr-48 { margin-right: 48px; } .mr-49 { margin-right: 49px; } .mr-50 { margin-right: 50px; } .mr-51 { margin-right: 51px; } .mr-52 { margin-right: 52px; } .mr-53 { margin-right: 53px; } .mr-54 { margin-right: 54px; } .mr-55 { margin-right: 55px; } .mr-56 { margin-right: 56px; } .mr-57 { margin-right: 57px; } .mr-58 { margin-right: 58px; } .mr-59 { margin-right: 59px; } .mr-60 { margin-right: 60px; } .mr-61 { margin-right: 61px; } .mr-62 { margin-right: 62px; } .mr-63 { margin-right: 63px; } .mr-64 { margin-right: 64px; } .mr-65 { margin-right: 65px; } .mr-66 { margin-right: 66px; } .mr-67 { margin-right: 67px; } .mr-68 { margin-right: 68px; } .mr-69 { margin-right: 69px; } .mr-70 { margin-right: 70px; } .mr-71 { margin-right: 71px; } .mr-72 { margin-right: 72px; } .mr-73 { margin-right: 73px; } .mr-74 { margin-right: 74px; } .mr-75 { margin-right: 75px; } .mr-76 { margin-right: 76px; } .mr-77 { margin-right: 77px; } .mr-78 { margin-right: 78px; } .mr-79 { margin-right: 79px; } .mr-80 { margin-right: 80px; } .mr-81 { margin-right: 81px; } .mr-82 { margin-right: 82px; } .mr-83 { margin-right: 83px; } .mr-84 { margin-right: 84px; } .mr-85 { margin-right: 85px; } .mr-86 { margin-right: 86px; } .mr-87 { margin-right: 87px; } .mr-88 { margin-right: 88px; } .mr-89 { margin-right: 89px; } .mr-90 { margin-right: 90px; } .mr-91 { margin-right: 91px; } .mr-92 { margin-right: 92px; } .mr-93 { margin-right: 93px; } .mr-94 { margin-right: 94px; } .mr-95 { margin-right: 95px; } .mr-96 { margin-right: 96px; } .mr-97 { margin-right: 97px; } .mr-98 { margin-right: 98px; } .mr-99 { margin-right: 99px; } .mr-100 { margin-right: 100px; } .mr-101 { margin-right: 101px; } .mr-102 { margin-right: 102px; } .mr-103 { margin-right: 103px; } .mr-104 { margin-right: 104px; } .mr-105 { margin-right: 105px; } .mr-106 { margin-right: 106px; } .mr-107 { margin-right: 107px; } .mr-108 { margin-right: 108px; } .mr-109 { margin-right: 109px; } .mr-110 { margin-right: 110px; } .mr-111 { margin-right: 111px; } .mr-112 { margin-right: 112px; } .mr-113 { margin-right: 113px; } .mr-114 { margin-right: 114px; } .mr-115 { margin-right: 115px; } .mr-116 { margin-right: 116px; } .mr-117 { margin-right: 117px; } .mr-118 { margin-right: 118px; } .mr-119 { margin-right: 119px; } .mr-120 { margin-right: 120px; } /*-- Padding Top --*/ .pt-1 { padding-top: 1px; } .pt-2 { padding-top: 2px; } .pt-3 { padding-top: 3px; } .pt-4 { padding-top: 4px; } .pt-5 { padding-top: 5px; } .pt-6 { padding-top: 6px; } .pt-7 { padding-top: 7px; } .pt-8 { padding-top: 8px; } .pt-9 { padding-top: 9px; } .pt-10 { padding-top: 10px; } .pt-11 { padding-top: 11px; } .pt-12 { padding-top: 12px; } .pt-13 { padding-top: 13px; } .pt-14 { padding-top: 14px; } .pt-15 { padding-top: 15px; } .pt-16 { padding-top: 16px; } .pt-17 { padding-top: 17px; } .pt-18 { padding-top: 18px; } .pt-19 { padding-top: 19px; } .pt-20 { padding-top: 20px; } .pt-21 { padding-top: 21px; } .pt-22 { padding-top: 22px; } .pt-23 { padding-top: 23px; } .pt-24 { padding-top: 24px; } .pt-25 { padding-top: 25px; } .pt-26 { padding-top: 26px; } .pt-27 { padding-top: 27px; } .pt-28 { padding-top: 28px; } .pt-29 { padding-top: 29px; } .pt-30 { padding-top: 30px; } .pt-31 { padding-top: 31px; } .pt-32 { padding-top: 32px; } .pt-33 { padding-top: 33px; } .pt-34 { padding-top: 34px; } .pt-35 { padding-top: 35px; } .pt-36 { padding-top: 36px; } .pt-37 { padding-top: 37px; } .pt-38 { padding-top: 38px; } .pt-39 { padding-top: 39px; } .pt-40 { padding-top: 40px; } .pt-41 { padding-top: 41px; } .pt-42 { padding-top: 42px; } .pt-43 { padding-top: 43px; } .pt-44 { padding-top: 44px; } .pt-45 { padding-top: 45px; } .pt-46 { padding-top: 46px; } .pt-47 { padding-top: 47px; } .pt-48 { padding-top: 48px; } .pt-49 { padding-top: 49px; } .pt-50 { padding-top: 50px; } .pt-51 { padding-top: 51px; } .pt-52 { padding-top: 52px; } .pt-53 { padding-top: 53px; } .pt-54 { padding-top: 54px; } .pt-55 { padding-top: 55px; } .pt-56 { padding-top: 56px; } .pt-57 { padding-top: 57px; } .pt-58 { padding-top: 58px; } .pt-59 { padding-top: 59px; } .pt-60 { padding-top: 60px; } .pt-61 { padding-top: 61px; } .pt-62 { padding-top: 62px; } .pt-63 { padding-top: 63px; } .pt-64 { padding-top: 64px; } .pt-65 { padding-top: 65px; } .pt-66 { padding-top: 66px; } .pt-67 { padding-top: 67px; } .pt-68 { padding-top: 68px; } .pt-69 { padding-top: 69px; } .pt-70 { padding-top: 70px; } .pt-71 { padding-top: 71px; } .pt-72 { padding-top: 72px; } .pt-73 { padding-top: 73px; } .pt-74 { padding-top: 74px; } .pt-75 { padding-top: 75px; } .pt-76 { padding-top: 76px; } .pt-77 { padding-top: 77px; } .pt-78 { padding-top: 78px; } .pt-79 { padding-top: 79px; } .pt-80 { padding-top: 80px; } .pt-81 { padding-top: 81px; } .pt-82 { padding-top: 82px; } .pt-83 { padding-top: 83px; } .pt-84 { padding-top: 84px; } .pt-85 { padding-top: 85px; } .pt-86 { padding-top: 86px; } .pt-87 { padding-top: 87px; } .pt-88 { padding-top: 88px; } .pt-89 { padding-top: 89px; } .pt-90 { padding-top: 90px; } .pt-91 { padding-top: 91px; } .pt-92 { padding-top: 92px; } .pt-93 { padding-top: 93px; } .pt-94 { padding-top: 94px; } .pt-95 { padding-top: 95px; } .pt-96 { padding-top: 96px; } .pt-97 { padding-top: 97px; } .pt-98 { padding-top: 98px; } .pt-99 { padding-top: 99px; } .pt-100 { padding-top: 100px; } .pt-101 { padding-top: 101px; } .pt-102 { padding-top: 102px; } .pt-103 { padding-top: 103px; } .pt-104 { padding-top: 104px; } .pt-105 { padding-top: 105px; } .pt-106 { padding-top: 106px; } .pt-107 { padding-top: 107px; } .pt-108 { padding-top: 108px; } .pt-109 { padding-top: 109px; } .pt-110 { padding-top: 110px; } .pt-111 { padding-top: 111px; } .pt-112 { padding-top: 112px; } .pt-113 { padding-top: 113px; } .pt-114 { padding-top: 114px; } .pt-115 { padding-top: 115px; } .pt-116 { padding-top: 116px; } .pt-117 { padding-top: 117px; } .pt-118 { padding-top: 118px; } .pt-119 { padding-top: 119px; } .pt-120 { padding-top: 120px; } /*-- Padding Bottom --*/ .pb-1 { padding-bottom: 1px; } .pb-2 { padding-bottom: 2px; } .pb-3 { padding-bottom: 3px; } .pb-4 { padding-bottom: 4px; } .pb-5 { padding-bottom: 5px; } .pb-6 { padding-bottom: 6px; } .pb-7 { padding-bottom: 7px; } .pb-8 { padding-bottom: 8px; } .pb-9 { padding-bottom: 9px; } .pb-10 { padding-bottom: 10px; } .pb-11 { padding-bottom: 11px; } .pb-12 { padding-bottom: 12px; } .pb-13 { padding-bottom: 13px; } .pb-14 { padding-bottom: 14px; } .pb-15 { padding-bottom: 15px; } .pb-16 { padding-bottom: 16px; } .pb-17 { padding-bottom: 17px; } .pb-18 { padding-bottom: 18px; } .pb-19 { padding-bottom: 19px; } .pb-20 { padding-bottom: 20px; } .pb-21 { padding-bottom: 21px; } .pb-22 { padding-bottom: 22px; } .pb-23 { padding-bottom: 23px; } .pb-24 { padding-bottom: 24px; } .pb-25 { padding-bottom: 25px; } .pb-26 { padding-bottom: 26px; } .pb-27 { padding-bottom: 27px; } .pb-28 { padding-bottom: 28px; } .pb-29 { padding-bottom: 29px; } .pb-30 { padding-bottom: 30px; } .pb-31 { padding-bottom: 31px; } .pb-32 { padding-bottom: 32px; } .pb-33 { padding-bottom: 33px; } .pb-34 { padding-bottom: 34px; } .pb-35 { padding-bottom: 35px; } .pb-36 { padding-bottom: 36px; } .pb-37 { padding-bottom: 37px; } .pb-38 { padding-bottom: 38px; } .pb-39 { padding-bottom: 39px; } .pb-40 { padding-bottom: 40px; } .pb-41 { padding-bottom: 41px; } .pb-42 { padding-bottom: 42px; } .pb-43 { padding-bottom: 43px; } .pb-44 { padding-bottom: 44px; } .pb-45 { padding-bottom: 45px; } .pb-46 { padding-bottom: 46px; } .pb-47 { padding-bottom: 47px; } .pb-48 { padding-bottom: 48px; } .pb-49 { padding-bottom: 49px; } .pb-50 { padding-bottom: 50px; } .pb-51 { padding-bottom: 51px; } .pb-52 { padding-bottom: 52px; } .pb-53 { padding-bottom: 53px; } .pb-54 { padding-bottom: 54px; } .pb-55 { padding-bottom: 55px; } .pb-56 { padding-bottom: 56px; } .pb-57 { padding-bottom: 57px; } .pb-58 { padding-bottom: 58px; } .pb-59 { padding-bottom: 59px; } .pb-60 { padding-bottom: 60px; } .pb-61 { padding-bottom: 61px; } .pb-62 { padding-bottom: 62px; } .pb-63 { padding-bottom: 63px; } .pb-64 { padding-bottom: 64px; } .pb-65 { padding-bottom: 65px; } .pb-66 { padding-bottom: 66px; } .pb-67 { padding-bottom: 67px; } .pb-68 { padding-bottom: 68px; } .pb-69 { padding-bottom: 69px; } .pb-70 { padding-bottom: 70px; } .pb-71 { padding-bottom: 71px; } .pb-72 { padding-bottom: 72px; } .pb-73 { padding-bottom: 73px; } .pb-74 { padding-bottom: 74px; } .pb-75 { padding-bottom: 75px; } .pb-76 { padding-bottom: 76px; } .pb-77 { padding-bottom: 77px; } .pb-78 { padding-bottom: 78px; } .pb-79 { padding-bottom: 79px; } .pb-80 { padding-bottom: 80px; } .pb-81 { padding-bottom: 81px; } .pb-82 { padding-bottom: 82px; } .pb-83 { padding-bottom: 83px; } .pb-84 { padding-bottom: 84px; } .pb-85 { padding-bottom: 85px; } .pb-86 { padding-bottom: 86px; } .pb-87 { padding-bottom: 87px; } .pb-88 { padding-bottom: 88px; } .pb-89 { padding-bottom: 89px; } .pb-90 { padding-bottom: 90px; } .pb-91 { padding-bottom: 91px; } .pb-92 { padding-bottom: 92px; } .pb-93 { padding-bottom: 93px; } .pb-94 { padding-bottom: 94px; } .pb-95 { padding-bottom: 95px; } .pb-96 { padding-bottom: 96px; } .pb-97 { padding-bottom: 97px; } .pb-98 { padding-bottom: 98px; } .pb-99 { padding-bottom: 99px; } .pb-100 { padding-bottom: 100px; } .pb-101 { padding-bottom: 101px; } .pb-102 { padding-bottom: 102px; } .pb-103 { padding-bottom: 103px; } .pb-104 { padding-bottom: 104px; } .pb-105 { padding-bottom: 105px; } .pb-106 { padding-bottom: 106px; } .pb-107 { padding-bottom: 107px; } .pb-108 { padding-bottom: 108px; } .pb-109 { padding-bottom: 109px; } .pb-110 { padding-bottom: 110px; } .pb-111 { padding-bottom: 111px; } .pb-112 { padding-bottom: 112px; } .pb-113 { padding-bottom: 113px; } .pb-114 { padding-bottom: 114px; } .pb-115 { padding-bottom: 115px; } .pb-116 { padding-bottom: 116px; } .pb-117 { padding-bottom: 117px; } .pb-118 { padding-bottom: 118px; } .pb-119 { padding-bottom: 119px; } .pb-120 { padding-bottom: 120px; } /*-- Padding Left --*/ .pl-1 { padding-left: 1px; } .pl-2 { padding-left: 2px; } .pl-3 { padding-left: 3px; } .pl-4 { padding-left: 4px; } .pl-5 { padding-left: 5px; } .pl-6 { padding-left: 6px; } .pl-7 { padding-left: 7px; } .pl-8 { padding-left: 8px; } .pl-9 { padding-left: 9px; } .pl-10 { padding-left: 10px; } .pl-11 { padding-left: 11px; } .pl-12 { padding-left: 12px; } .pl-13 { padding-left: 13px; } .pl-14 { padding-left: 14px; } .pl-15 { padding-left: 15px; } .pl-16 { padding-left: 16px; } .pl-17 { padding-left: 17px; } .pl-18 { padding-left: 18px; } .pl-19 { padding-left: 19px; } .pl-20 { padding-left: 20px; } .pl-21 { padding-left: 21px; } .pl-22 { padding-left: 22px; } .pl-23 { padding-left: 23px; } .pl-24 { padding-left: 24px; } .pl-25 { padding-left: 25px; } .pl-26 { padding-left: 26px; } .pl-27 { padding-left: 27px; } .pl-28 { padding-left: 28px; } .pl-29 { padding-left: 29px; } .pl-30 { padding-left: 30px; } .pl-31 { padding-left: 31px; } .pl-32 { padding-left: 32px; } .pl-33 { padding-left: 33px; } .pl-34 { padding-left: 34px; } .pl-35 { padding-left: 35px; } .pl-36 { padding-left: 36px; } .pl-37 { padding-left: 37px; } .pl-38 { padding-left: 38px; } .pl-39 { padding-left: 39px; } .pl-40 { padding-left: 40px; } .pl-41 { padding-left: 41px; } .pl-42 { padding-left: 42px; } .pl-43 { padding-left: 43px; } .pl-44 { padding-left: 44px; } .pl-45 { padding-left: 45px; } .pl-46 { padding-left: 46px; } .pl-47 { padding-left: 47px; } .pl-48 { padding-left: 48px; } .pl-49 { padding-left: 49px; } .pl-50 { padding-left: 50px; } .pl-51 { padding-left: 51px; } .pl-52 { padding-left: 52px; } .pl-53 { padding-left: 53px; } .pl-54 { padding-left: 54px; } .pl-55 { padding-left: 55px; } .pl-56 { padding-left: 56px; } .pl-57 { padding-left: 57px; } .pl-58 { padding-left: 58px; } .pl-59 { padding-left: 59px; } .pl-60 { padding-left: 60px; } .pl-61 { padding-left: 61px; } .pl-62 { padding-left: 62px; } .pl-63 { padding-left: 63px; } .pl-64 { padding-left: 64px; } .pl-65 { padding-left: 65px; } .pl-66 { padding-left: 66px; } .pl-67 { padding-left: 67px; } .pl-68 { padding-left: 68px; } .pl-69 { padding-left: 69px; } .pl-70 { padding-left: 70px; } .pl-71 { padding-left: 71px; } .pl-72 { padding-left: 72px; } .pl-73 { padding-left: 73px; } .pl-74 { padding-left: 74px; } .pl-75 { padding-left: 75px; } .pl-76 { padding-left: 76px; } .pl-77 { padding-left: 77px; } .pl-78 { padding-left: 78px; } .pl-79 { padding-left: 79px; } .pl-80 { padding-left: 80px; } .pl-81 { padding-left: 81px; } .pl-82 { padding-left: 82px; } .pl-83 { padding-left: 83px; } .pl-84 { padding-left: 84px; } .pl-85 { padding-left: 85px; } .pl-86 { padding-left: 86px; } .pl-87 { padding-left: 87px; } .pl-88 { padding-left: 88px; } .pl-89 { padding-left: 89px; } .pl-90 { padding-left: 90px; } .pl-91 { padding-left: 91px; } .pl-92 { padding-left: 92px; } .pl-93 { padding-left: 93px; } .pl-94 { padding-left: 94px; } .pl-95 { padding-left: 95px; } .pl-96 { padding-left: 96px; } .pl-97 { padding-left: 97px; } .pl-98 { padding-left: 98px; } .pl-99 { padding-left: 99px; } .pl-100 { padding-left: 100px; } .pl-101 { padding-left: 101px; } .pl-102 { padding-left: 102px; } .pl-103 { padding-left: 103px; } .pl-104 { padding-left: 104px; } .pl-105 { padding-left: 105px; } .pl-106 { padding-left: 106px; } .pl-107 { padding-left: 107px; } .pl-108 { padding-left: 108px; } .pl-109 { padding-left: 109px; } .pl-110 { padding-left: 110px; } .pl-111 { padding-left: 111px; } .pl-112 { padding-left: 112px; } .pl-113 { padding-left: 113px; } .pl-114 { padding-left: 114px; } .pl-115 { padding-left: 115px; } .pl-116 { padding-left: 116px; } .pl-117 { padding-left: 117px; } .pl-118 { padding-left: 118px; } .pl-119 { padding-left: 119px; } .pl-120 { padding-left: 120px; } /*-- Padding Right --*/ .pr-1 { padding-right: 1px; } .pr-2 { padding-right: 2px; } .pr-3 { padding-right: 3px; } .pr-4 { padding-right: 4px; } .pr-5 { padding-right: 5px; } .pr-6 { padding-right: 6px; } .pr-7 { padding-right: 7px; } .pr-8 { padding-right: 8px; } .pr-9 { padding-right: 9px; } .pr-10 { padding-right: 10px; } .pr-11 { padding-right: 11px; } .pr-12 { padding-right: 12px; } .pr-13 { padding-right: 13px; } .pr-14 { padding-right: 14px; } .pr-15 { padding-right: 15px; } .pr-16 { padding-right: 16px; } .pr-17 { padding-right: 17px; } .pr-18 { padding-right: 18px; } .pr-19 { padding-right: 19px; } .pr-20 { padding-right: 20px; } .pr-21 { padding-right: 21px; } .pr-22 { padding-right: 22px; } .pr-23 { padding-right: 23px; } .pr-24 { padding-right: 24px; } .pr-25 { padding-right: 25px; } .pr-26 { padding-right: 26px; } .pr-27 { padding-right: 27px; } .pr-28 { padding-right: 28px; } .pr-29 { padding-right: 29px; } .pr-30 { padding-right: 30px; } .pr-31 { padding-right: 31px; } .pr-32 { padding-right: 32px; } .pr-33 { padding-right: 33px; } .pr-34 { padding-right: 34px; } .pr-35 { padding-right: 35px; } .pr-36 { padding-right: 36px; } .pr-37 { padding-right: 37px; } .pr-38 { padding-right: 38px; } .pr-39 { padding-right: 39px; } .pr-40 { padding-right: 40px; } .pr-41 { padding-right: 41px; } .pr-42 { padding-right: 42px; } .pr-43 { padding-right: 43px; } .pr-44 { padding-right: 44px; } .pr-45 { padding-right: 45px; } .pr-46 { padding-right: 46px; } .pr-47 { padding-right: 47px; } .pr-48 { padding-right: 48px; } .pr-49 { padding-right: 49px; } .pr-50 { padding-right: 50px; } .pr-51 { padding-right: 51px; } .pr-52 { padding-right: 52px; } .pr-53 { padding-right: 53px; } .pr-54 { padding-right: 54px; } .pr-55 { padding-right: 55px; } .pr-56 { padding-right: 56px; } .pr-57 { padding-right: 57px; } .pr-58 { padding-right: 58px; } .pr-59 { padding-right: 59px; } .pr-60 { padding-right: 60px; } .pr-61 { padding-right: 61px; } .pr-62 { padding-right: 62px; } .pr-63 { padding-right: 63px; } .pr-64 { padding-right: 64px; } .pr-65 { padding-right: 65px; } .pr-66 { padding-right: 66px; } .pr-67 { padding-right: 67px; } .pr-68 { padding-right: 68px; } .pr-69 { padding-right: 69px; } .pr-70 { padding-right: 70px; } .pr-71 { padding-right: 71px; } .pr-72 { padding-right: 72px; } .pr-73 { padding-right: 73px; } .pr-74 { padding-right: 74px; } .pr-75 { padding-right: 75px; } .pr-76 { padding-right: 76px; } .pr-77 { padding-right: 77px; } .pr-78 { padding-right: 78px; } .pr-79 { padding-right: 79px; } .pr-80 { padding-right: 80px; } .pr-81 { padding-right: 81px; } .pr-82 { padding-right: 82px; } .pr-83 { padding-right: 83px; } .pr-84 { padding-right: 84px; } .pr-85 { padding-right: 85px; } .pr-86 { padding-right: 86px; } .pr-87 { padding-right: 87px; } .pr-88 { padding-right: 88px; } .pr-89 { padding-right: 89px; } .pr-90 { padding-right: 90px; } .pr-91 { padding-right: 91px; } .pr-92 { padding-right: 92px; } .pr-93 { padding-right: 93px; } .pr-94 { padding-right: 94px; } .pr-95 { padding-right: 95px; } .pr-96 { padding-right: 96px; } .pr-97 { padding-right: 97px; } .pr-98 { padding-right: 98px; } .pr-99 { padding-right: 99px; } .pr-100 { padding-right: 100px; } .pr-101 { padding-right: 101px; } .pr-102 { padding-right: 102px; } .pr-103 { padding-right: 103px; } .pr-104 { padding-right: 104px; } .pr-105 { padding-right: 105px; } .pr-106 { padding-right: 106px; } .pr-107 { padding-right: 107px; } .pr-108 { padding-right: 108px; } .pr-109 { padding-right: 109px; } .pr-110 { padding-right: 110px; } .pr-111 { padding-right: 111px; } .pr-112 { padding-right: 112px; } .pr-113 { padding-right: 113px; } .pr-114 { padding-right: 114px; } .pr-115 { padding-right: 115px; } .pr-116 { padding-right: 116px; } .pr-117 { padding-right: 117px; } .pr-118 { padding-right: 118px; } .pr-119 { padding-right: 119px; } .pr-120 { padding-right: 120px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .pt-120 { padding-top: 60px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .pb-90 { padding-bottom: 30px; } } @media (max-width: 575px) { .mr-14 { margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .mb-60 { margin-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .ml-80 { margin-left: 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) { .mr-80 { margin-right: 0; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .pb-100 { padding-bottom: 50px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .ml-30 { margin-left: 0; } } /*----------------------------------------*/ /* 5.4 Blog css /*----------------------------------------*/ .th-blog-wrap-2 { border: 1px solid #2E2E2E; border-radius: 16px; overflow: hidden; transition: 0.3s; } .th-blog-wrap-2:hover { border: 1px solid var(--primary-color-2); transition: 0.3s; } .th-blog-tag2 { border: 1px solid #2C2C2C; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; padding: 6px 16px; padding-left: 30px; position: relative; display: inline-block; border-radius: 64px; margin-right: 32px; } .th-blog-tag2::after { position: absolute; content: ""; left: 16px; top: 50%; transform: translateY(-50%); height: 10px; width: 10px; background: var(--primary-color-2); border-radius: 50%; } .th-blog-tag2:hover { color: var(--primary-color-2); transition: 0.3s; } .th-blog-read { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; } .th-blog-read:hover { color: var(--primary-color-2); transition: 0.3s; } .th-blog-title-2 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; margin-top: 16px; margin-bottom: 72px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-title-2 { margin-bottom: 30px; } } .th-blog-title-2:hover { color: var(--primary-color-2); transition: 0.3s; } .th-blog-content-2 { padding-top: 48px; padding-bottom: 48px; padding-right: 32px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-content-2 { padding: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-thumb2 img { height: 300px; object-fit: cover; } } .vl-blog-wrap-3 { background: #121212; border-radius: 16px; object-fit: cover; overflow: hidden; transition: 0.3s; border: 1px solid #2F2F2F; } .vl-blog-wrap-3:hover { border: 1px solid var(--primary-color-3); transition: 0.3s; } .th-blog-thumb-3 img { height: 256px; object-fit: cover; } .th-blog-thumb-3.blagre-thumb img { height: 368px; } .th-blog-content-3 { padding-top: 16px; padding-left: 24px; padding-right: 24px; padding-bottom: 40px; } .th-blog-tag3 { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-blog-tag3 { font-size: 14px; } } .th-blog-tag3:hover { color: var(--primary-color-3); transition: 0.3s; } .th-slash { color: var(--text-color); margin: 0 8px; } .th-blog-title-3 { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; padding-bottom: 32px; padding-top: 8px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-blog-title-3 { font-size: 20px; } } .th-blog-title-3:hover { color: var(--primary-color-3); transition: 0.3s; } .th-btn-blog3 { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; } .th-btn-blog3 span { background: #0E0E0E; height: 40px; width: 40px; line-height: 40px; display: inline-block; text-align: center; transition: 0.3s; border-radius: 50%; margin-right: 12px; } .th-btn-blog3 span img { transition: 0.3s; } .th-btn-blog3:hover { transition: 0.3s; color: var(--primary-color-3); } .th-btn-blog3:hover span { background: var(--primary-color-3); transition: 0.3s; } .th-btn-blog3:hover span img { filter: brightness(0) invert(1); transition: 0.3s; } .th-blog-wrap-iner { background: #121212; border: 1px solid #2F2F2F; border-radius: 16px; overflow: hidden; } .th-blog-wrap-iner-content { padding-top: 16px; padding-left: 24px; padding-right: 24px; padding-bottom: 32px; } .th-blog-wrap-iner-content .th-blog-meta a { font-size: 16px; line-height: 24px; font-weight: 400; color: #B4B2B2; transition: 0.3s; } .th-blog-wrap-iner-content .th-blog-meta a span img { margin-top: -4px; } .th-blog-wrap-iner-content .th-blog-meta a:hover { color: #DEFF00; transition: 0.3s; } .th-blog-wrap-iner-content .th-blog-meta .th-slash { color: #929292; } .th-blog-wrap-iner-content .th-title { padding-top: 8px; padding-bottom: 24px; color: #FBFBFB; font-size: 24px; line-height: 32px; font-weight: 700; transition: 0.3s; } .th-blog-wrap-iner-content .th-title:hover { color: #DEFF00; transition: 0.3s; } .th-blog-iner-btn:hover .th-service-arrow-icon .th-arrow-bg { background: #DEFF00; } .th-blog-iner-btn:hover .th-service-arrow-icon .th-arrow-bg img { filter: brightness(0); } .th-blog-iner-btn:hover .th-service-arrow-icon .th-arrow-content { color: #DEFF00; } .th-single-blog-classic-area .th-thumb img { height: 400px; border-radius: 16px; } .th-single-blog-classic-area .th-content .th-meta a { margin-right: 40px; font-size: 16px; line-height: 24px; font-weight: 400; color: #B4B2B2; transition: 0.3s; } .th-single-blog-classic-area .th-content .th-meta a span img { margin-top: -4px; margin-right: 8px; } .th-single-blog-classic-area .th-content .th-meta a cite { font-style: normal; color: #DEFF00; } .th-single-blog-classic-area .th-content .th-title { font-size: 32px; line-height: 40px; font-weight: 700; color: #FBFBFB; transition: 0.3s; } .th-single-blog-classic-area .th-content .th-title:hover { color: #DEFF00; transition: 0.3s; } .th-single-blog-classic-area .th-content .th-para { font-size: 16px; line-height: 24px; color: #B4B2B2; transition: 0.3s; } .th-classic-blog-border { border-bottom: 1px solid #2C2C2C; margin-bottom: 48px; padding-top: 18px; } .th-blog-details-larg-thumb { position: relative; } .th-blog-details-larg-thumb img { border-radius: 24px; height: 564px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-details-larg-thumb img { height: 100%; } } .th-blog-details-larg-thumb-2 img { border-radius: 16px; height: 345px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-details-larg-thumb-2 img { height: 100%; } } .th-blog-details-wrapf-flex1 .th-tag-title { font-size: 32px; line-height: 40px; color: #FBFBFB; font-weight: 700; margin-right: 24px; } .th-blog-details-wrapf-flex1 .tags { padding: 6px 16px; font-size: 16px; line-height: 24px; color: #FBFBFB; font-weight: 400; background: #101010; display: inline-block; border-radius: 100px; transition: 0.3s; margin-right: 12px; } .th-blog-details-wrapf-flex1 .tags:hover { background: #DEFF00; color: #101010; transition: 0.3s; } .th-blog-details-wrapf-flex1 { display: flex; align-items: center; } @media (max-width: 575px) { .th-blog-details-wrapf-flex1 { display: block; } } .th-blog-details-wrapf-flex2 .th-social { background: #101010; color: #FBFBFB; display: inline-block; height: 36px; width: 36px; line-height: 40px; border-radius: 50%; text-align: center; transition: 0.3s; margin-right: 16px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-details-wrapf-flex2 .th-social { margin: 0 8px; } } .th-blog-details-wrapf-flex2 .th-social:hover { color: #101010; transition: 0.3s; background-color: #DEFF00; } .th-blog-details-wrapf { display: flex; align-items: center; justify-content: space-between; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-blog-details-wrapf { flex-direction: column; } } .th-nextprevious-flex .th-next { color: #FBFBFB; font-size: 16px; line-height: 24px; font-weight: 600; transition: 0.3s; } .th-nextprevious-flex .th-next span { background: #0E0E0E; height: 56px; width: 56px; line-height: 56px; display: inline-block; text-align: center; border-radius: 50%; margin-right: 24px; transition: 0.3s; } .th-nextprevious-flex .th-next:hover span { transition: 0.3s; background: #DEFF00; } .th-nextprevious-flex .th-next:hover span img { filter: brightness(0) invert(1); } .th-nextprevious-flex .th-next-2 { color: #FBFBFB; font-size: 16px; line-height: 24px; font-weight: 600; transition: 0.3s; } .th-nextprevious-flex .th-next-2 span { background: #0E0E0E; height: 56px; width: 56px; line-height: 56px; display: inline-block; text-align: center; border-radius: 50%; margin-left: 24px; transition: 0.3s; } .th-nextprevious-flex .th-next-2:hover span { transition: 0.3s; background: #DEFF00; } .th-nextprevious-flex .th-next-2:hover span img { filter: brightness(0) invert(1); } .th-nextprevious-flex .th-next:hover span img { filter: brightness(0); } .th-nextprevious-flex .th-next-2:hover span img { filter: brightness(0); } .th-nextprevious-flex { display: flex; justify-content: space-between; } /*----------------------------------------*/ /* 5.3 Sidebar css /*----------------------------------------*/ .th-sidebar-flex { display: flex; align-items: center; } .th-sidebar-flex-icon img { margin-right: 24px; } .th-sidebar-flex-content .th-para { color: #B4B2B2; font-size: 14px; line-height: 20px; padding-bottom: 2px; } .th-sidebar-flex-content .th-titlee { color: #FBFBFB; font-size: 18px; line-height: 26px; font-weight: 600; transition: 0.3s; } .th-border-img { padding-top: 16px; margin-bottom: 16px; } .th-social-mainflex { display: flex; align-items: center; justify-content: space-between; } @media (max-width: 575px) { .th-social-mainflex { flex-direction: column; } } .th-social-mainflex-text .th-titlew { color: #FBFBFB; font-size: 16px; line-height: 24px; font-weight: 400; } @media (max-width: 575px) { .th-social-mainflex-text .th-titlew { margin-bottom: 20px; } } .th-social-mainflex-icon a { background: #121212; height: 36px; width: 36px; line-height: 36px; text-align: center; border-radius: 50%; display: inline-block; color: #FBFBFB; transition: 0.3s; margin-left: 16px; } @media (max-width: 575px) { .th-social-mainflex-icon a { margin: 0 8px; } } .th-social-mainflex-icon a:hover { background: #DEFF00; color: #121212; transition: 0.3s; } .th-blog-search-box-relative { position: relative; } .th-blog-search-box-relative input[type=text] { background: #121212; border: none; border-radius: 110px; font-size: 16px; line-height: 24px; color: #B8B8B8; transition: 0.3s; height: 56px; } .th-blog-search-box-relative input[type=text]::placeholder { color: #B8B8B8; } .th-blog-search-box-relative .icon-serarch { background: #DEFF00; height: 40px; width: 40px; line-height: 44px; display: inline-block; color: #0E0E0E; border-radius: 50%; text-align: center; position: absolute; right: 8px; top: 8px; cursor: pointer; } .th-recent-post-thumb img { border-radius: 8px; height: 148px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-recent-post-thumb img { height: 100%; } } .th-recent-post-meta a { font-size: 16px; line-height: 24px; color: #B4B2B2; font-weight: 400; transition: 0.3s; } .th-recent-post-meta a span img { margin-top: -4px; margin-right: 8px; } .th-recent-post .th-titlee { font-size: 18px; line-height: 26px; font-weight: 600; color: #FFFFFF; transition: 0.3s; padding-top: 4px; } .th-recent-post .th-titlee:hover { color: #DEFF00; transition: 0.3s; } .th-recent-post-martop-24 { margin-top: 24px; } .th-blog-meta-tags a { background: #121212; font-size: 16px; line-height: 24px; color: #FFFFFF; display: inline-block; transition: 0.3s; padding: 4px 16px; border-radius: 100px; } .th-blog-meta-tags a:hover { background: #DEFF00; transition: 0.3s; color: #121212; } .th-blog-meta-tags { display: flex; gap: 12px; flex-wrap: wrap; } .th-service-widget-area { position: sticky; top: 150px; } /*----------------------------------------*/ /* 6.1 Footer Style 1 /*----------------------------------------*/ .th-footer-area { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-footer-widget-1 .th-footer-menu ul li { display: inline-block; } .th-footer-widget-1 .th-footer-menu ul li a { font-weight: 600; font-size: 16px; line-height: 24px; text-transform: uppercase; margin-right: 48px; color: var(--white-color); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-footer-widget-1 .th-footer-menu ul li a { margin-right: 23px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-footer-widget-1 .th-footer-menu ul li a { margin: 0 24px; } } @media (max-width: 575px) { .th-footer-widget-1 .th-footer-menu ul li a { margin: 0 7px; font-size: 13px; } } .th-footer-widget-1 .th-footer-menu ul li a:hover { color: var(--primary-color); transition: 0.3s; } .th-footer-widget-1 .th-footer-menu-2 ul li a:hover { transition: 0.3s; color: var(--primary-color-2); } .th-footer-social ul li { display: inline-block; } .th-footer-social ul li a { text-transform: uppercase; color: var(--offwhite); font-size: 16px; line-height: 24px; font-weight: 600; transition: 0.3s; margin-left: 48px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-footer-social ul li a { margin-left: 29px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-footer-social ul li a { margin: 0 24px; } } @media (max-width: 575px) { .th-footer-social ul li a { font-size: 13px; margin: 0 8px; } } .th-footer-social ul li a::after { position: absolute; content: ""; left: -16px; top: 50%; transform: translateY(-50%); height: 8px; width: 8px; border-radius: 50%; background: var(--offwhite); } @media (max-width: 575px) { .th-footer-social ul li a::after { left: -10px; } } .th-footer-social ul li a:hover { color: var(--primary-color); transition: 0.3s; border-bottom: 1px solid var(--primary-color); } .th-footer-social ul li a:hover::after { background: var(--primary-color); transition: 0.3s; } .th-copyright-text { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--secondary-color); } .th-copyright-text a { color: var(--primary-color); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-copyright-text { font-size: 13px; } } @media (max-width: 575px) { .th-copyright-text { text-align: center; } } .th-copyright-menu ul li { display: inline-block; } .th-copyright-menu ul li a { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--secondary-color); transition: 0.3s; margin-left: 35px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-copyright-menu ul li a { font-size: 13px; margin-left: 14px; } } @media (max-width: 575px) { .th-copyright-menu ul li a { font-size: 13px; margin: 0 6px; } } .th-copyright-menu ul li a:hover { color: var(--primary-color); transition: 0.3s; } @media (max-width: 575px) { .th-copyright-menu { text-align: center; } } @media (max-width: 575px) { .th-copyright.mb-40 { margin-bottom: 20px; } } @media (max-width: 575px) { .th-copyright-menu.mb-40 { margin-bottom: 20px; } } @media (max-width: 575px) { .th-footer-widget-2.mb-30 { margin-bottom: 0; } } .th-footer-border { border-bottom: 1px solid var(--border); padding: 0; margin: 18px 0; } .th-footer-large-title { font-size: 100px; line-height: 108px; color: var(--white-color); font-weight: 500; } .footer-title { letter-spacing: -0.02em; line-height: 1; font-size: 346px; line-height: 1; color: var(--white-color); font-weight: 700; display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-title { font-size: 350px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-title { font-size: 244px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-title { font-size: 182px; } } @media (max-width: 575px) { .footer-title { font-size: 90px; } } .footer-title-2 { font-size: 172px; line-height: 108px; text-align: center; text-transform: uppercase; margin-top: 88px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .footer-title-2 { font-size: 120px; line-height: 108px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .footer-title-2 { margin-top: 38px; font-size: 87px; line-height: 1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .footer-title-2 { margin-top: 30px; font-size: 56px; line-height: 1; } } @media (max-width: 575px) { .footer-title-2 { margin-top: 30px; font-size: 32px; line-height: 1; } } .text-scale-anim { white-space: pre-wrap; transform-origin: top left; } .tp-letter-span { display: inline-block; } .tp-word-span { display: inline-block; } .th-footer-phone { font-size: 72px; line-height: 80px; font-weight: 700; color: var(--secondary-color); margin-bottom: 16px; display: inline-block; transition: 0.3s; } .th-footer-phone:hover { color: var(--primary-color-2); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-footer-phone { font-size: 55px; line-height: 65px; } } @media (max-width: 575px) { .th-footer-phone { font-size: 34px; line-height: 44px; } } .th-footer-gmail { font-size: 72px; line-height: 80px; font-weight: 700; color: var(--secondary-color); display: inline-block; margin-bottom: 48px; transition: 0.3s; } .th-footer-gmail:hover { color: var(--primary-color-2); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-footer-gmail { font-size: 55px; line-height: 65px; } } @media (max-width: 575px) { .th-footer-gmail { font-size: 34px; line-height: 44px; } } .th-footer-logo-area-2 { background: var(--black-color); padding-top: 30px; } .th-footer-center-main-wrap { display: flex; align-items: center; justify-content: space-between; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-center-main-wrap { flex-direction: column; } } .th-footer-center-main-wrap-copyright .th-para { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-center-main-wrap-copyright { text-align: center; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-center-main-wrap-location { text-align: center; } } .th-footer-center-main-wrap-location .th-para1 { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); } .th-footer-center-main-wrap-location .th-para { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--text-color); } .th-footer-menu.th-footer-menu-3 ul li a { margin: 0 24px; } @media (max-width: 575px) { .th-footer-menu.th-footer-menu-3 ul li a { margin: 0 15px; } } .th-footer-menu.th-footer-menu-3 ul li a:hover { color: #FF7B00; } .th-footer-mail-title { font-size: 64px; line-height: 72px; color: var(--secondary-color); font-weight: 700; transition: 0.3s; } .th-footer-mail-title:hover { color: var(--primary-color); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-footer-mail-title { font-size: 55px; line-height: 65px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-mail-title { font-size: 40px; line-height: 50px; } } .th-opentowork { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--primary-color); position: relative; text-align: end; } @media (max-width: 575px) { .th-opentowork { text-align: center; } } .th-opentowork span { position: relative; height: 8px; width: 8px; background: var(--primary-color); border-radius: 50%; display: inline-block; margin-right: 16px; } .th-opentowork span::after { position: absolute; content: ""; border: 1px solid var(--primary-color); padding: 9px; left: -6px; top: -5px; border-radius: 50%; } .th-footer-left-logo { margin-bottom: 48px; } @media (max-width: 575px) { .th-footer-left-logo { text-align: center; margin-bottom: 30px; } } .th-footer-mail-title { margin-bottom: 48px; } @media (max-width: 575px) { .th-footer-mail-title { text-align: center; margin-bottom: 30px; } } .th-opentowork { margin-bottom: 48px; } @media (max-width: 575px) { .th-opentowork { text-align: center; margin-bottom: 30px; } } .th-footer-center-main-wrap-copyright .th-para span { color: #FF7B00; } .th-footer-menu-three { text-align: end; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-menu-three { text-align: center; } } .th-footer-menu-three ul li { display: inline-block; margin-left: 48px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-footer-menu-three ul li { margin: 0 20px; } } .th-footer-menu-three ul li a { color: #C1C1C1; font-size: 16px; line-height: 24px; transition: 0.3s; } .th-footer-menu-three ul li a:hover { color: var(--primary-color-3); transition: 0.3s; } /*----------------------------------------*/ /* 3.1 Header Style 1 /*----------------------------------------*/ .th-header-area { background: #121212; padding: 24px 0; } .th-header-area .th-header-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 0 100px; } @media (max-width: 1600px) { .th-header-area .th-header-wrapper { padding: 0 50px; } } @media (max-width: 1400px) { .th-header-area .th-header-wrapper { padding: 0 20px; } } @media (max-width: 767px) { .th-header-area .th-header-wrapper { padding: 0 15px; } } @media (max-width: 575px) { .th-header-area .th-header-wrapper { padding: 0 10px; } } .th-header-area .th-header-wrapper .th-logo-menu-area { display: flex; align-items: center; gap: 120px; } @media (max-width: 1600px) { .th-header-area .th-header-wrapper .th-logo-menu-area { gap: 60px; } } @media (max-width: 1200px) { .th-header-area .th-header-wrapper .th-logo-menu-area .th-main-menu { display: none; } } .th-header-area .th-header-wrapper .th-header-top-btn-flex { display: flex; align-items: center; gap: 24px; } @media (max-width: 767px) { .th-header-area .th-header-wrapper .th-header-top-btn-flex .th-header-btn { display: none; } } .th-header-area .th-header-wrapper .th-header-top-btn-flex .th-header-action-item .th-menu-btn { color: #b4b2b2; font-size: 16px; line-height: 24px; font-weight: 600; border: 1px solid #2f2f2f; padding: 16px 32px; border-radius: 100px; display: inline-block; transition: 0.3s; } .th-header-area .th-header-wrapper .th-header-top-btn-flex .th-header-action-item .th-menu-btn:hover { color: var(--primary-color); border: 1px solid var(--primary-color); } .th-header-area-two { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; padding-top: 32px; } @media (max-width: 575px) { .th-header-area-two { padding-top: 24px; } } .th-header-area-two .th-heade-wrapper { margin: 0 100px; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; background: #0E0E0E; border: 1px solid rgba(201, 201, 201, 0.16); border-radius: 150px; } @media (max-width: 1400px) { .th-header-area-two .th-heade-wrapper { margin: 0 60px; } } @media (max-width: 1200px) { .th-header-area-two .th-heade-wrapper { padding: 10px 20px; } } @media (max-width: 991px) { .th-header-area-two .th-heade-wrapper { margin: 0 30px; } } @media (max-width: 575px) { .th-header-area-two .th-heade-wrapper { margin: 0 15px; } } .th-header-area-two .th-heade-wrapper .th-main-menu ul > li > a { padding: 37px 0; } @media (max-width: 1200px) { .th-header-area-two .th-heade-wrapper .th-main-menu { display: none; } } .th-header-area-two .th-heade-wrapper .th-header-top-btn-flex { display: flex; align-items: center; gap: 24px; } .th-header-area-three { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; background: #0E0E0E; } .th-header-area-three .th-header-wrapper { display: flex; align-items: center; justify-content: space-between; padding: 0 100px; } @media (max-width: 1600px) { .th-header-area-three .th-header-wrapper { padding: 0 50px; } } @media (max-width: 1400px) { .th-header-area-three .th-header-wrapper { padding: 0 20px; } } @media (max-width: 767px) { .th-header-area-three .th-header-wrapper { padding: 0 15px; } } .th-header-area-three .th-header-wrapper .th-logo-3 { border-right: 1px solid rgba(201, 201, 201, 0.24); padding-right: 45px; width: 170px; height: 100px; display: flex; align-items: center; } .th-header-area-three .th-header-wrapper .th-logo-3 img { width: 100%; } @media (max-width: 991px) { .th-header-area-three .th-header-wrapper .th-logo-3 { border-right: none; padding-right: 0; } } @media (max-width: 767px) { .th-header-area-three .th-header-wrapper .th-logo-3 { max-width: 120px; } } .th-header-area-three .th-header-wrapper .th-main-menu ul li a { padding: 42px 0; } .th-header-area-three .th-header-wrapper .th-header-top-btn-flex { border-left: 1px solid rgba(201, 201, 201, 0.24); padding-left: 45px; height: 100px; display: flex; align-items: center; } @media (max-width: 991px) { .th-header-area-three .th-header-wrapper .th-header-top-btn-flex { border-left: none; padding-left: 0; } } .th-header-area-three .th-header-wrapper .th-header-top-btn-flex .th-header-action-item .th-menu-btn { color: #b4b2b2; font-size: 16px; line-height: 24px; font-weight: 600; border: 1px solid #2f2f2f; padding: 16px 32px; border-radius: 100px; display: inline-block; transition: 0.3s; } .th-header-area-three .th-header-wrapper .th-header-top-btn-flex .th-header-action-item .th-menu-btn:hover { color: var(--primary-color); border: 1px solid var(--primary-color); } .th-main-menu { background: #0E0E0E; border-radius: 64px; padding: 0 24px; } .th-main-menu ul > li { display: inline-block; margin-right: 24px; } .th-main-menu ul > li:last-child { margin-right: 0; } @media (max-width: 1400px) { .th-main-menu ul > li { margin-right: 10px; } } .th-main-menu ul > li { position: relative; } .th-main-menu ul > li > a { color: #FBFBFB; font-size: 16px; line-height: 24px; display: inline-block; position: relative; transition: 0.3s; padding: 16px 0; font-weight: 600; } .th-main-menu ul > li > a span.menu-dwn-arrow { font-size: 15px; line-height: 15px; } .th-main-menu ul > li .sub-menu { position: absolute; top: 105%; width: 200px; left: 0; background: #0E0E0E; border-radius: 6px; padding: 16px 0 !important; opacity: 0; visibility: hidden; box-shadow: 0px 20px 30px rgba(1, 15, 28, 0.1); transition: 0.3s; z-index: 9; } .th-main-menu ul > li .sub-menu li { margin-right: 0; display: block; text-align: start; margin-left: 24px; } .th-main-menu ul > li .sub-menu li a { color: #FBFBFB; display: block; padding: 9px 0 !important; font-size: 17px; line-height: 23px; } .th-main-menu ul > li .sub-menu li a:before { display: none; } .th-main-menu ul > li .sub-menu li .sub-menu { left: 100%; top: 105%; opacity: 0; visibility: hidden; transition: 0.3s; } .th-main-menu ul > li .sub-menu li:hover > a { color: #DEFF00; transition: 0.3s; } .th-main-menu ul > li .sub-menu li:hover > .sub-menu { opacity: 1; visibility: visible; top: 0; } .th-main-menu ul > li .sub-menu .arrow-right { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); } .th-main-menu ul > li:hover a { color: #DEFF00; transition: 0.3s; } .th-main-menu ul > li:hover .sub-menu { opacity: 1; visibility: visible; top: 100%; } .th-header-sticky.header-sticky { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); animation: stickyanimations 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; will-change: transform, opacity; } .th-header-sticky.header-sticky.th-header-area-two { background: #0E0E0E; padding: 24px 0; } .th-header-sticky.header-sticky.th-header-area-two .th-heade-wrapper { padding: 0; border-color: transparent; } @keyframes stickyanimations { 0% { transform: translateY(-100px); } 100% { transform: translateY(0px); } } /*----------------------------------------*/ /* 7.2 About css /*----------------------------------------*/ .th-exp-title { font-size: 248px; line-height: 1; color: var(--secondary-color); padding: 52px 61px; border: 1px solid var(--primary-color); border-radius: 16px; display: inline-block; font-weight: 600; width: 419px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-exp-title { width: 100%; } } .th-exp-box { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--black-color); display: inline-block; background: var(--primary-color); padding: 20px 32px; border-radius: 90px; position: absolute; top: 40%; left: 0; margin: 0 auto; text-align: center; transform: translateY(-50% px); margin-left: 70px; margin-right: 70px; transform: rotate(-12deg); } .th-about-box-wrap { margin-left: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-about-box-wrap { margin-left: 0; } } .th-exp-grop-flex { display: flex; } .th-exp-grop-flex-thumb { margin-right: 12px; } .th-exp-grop-flex-content .title { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); } .th-exp-box-review ul li { display: inline-block; } .th-awardbox { background: var(--primary-color-2); border-radius: 24px; padding: 48px 32px; text-align: center; } .th-awardbox-thumb { margin-bottom: 16px; } .th-awardbox-title { padding-bottom: 12px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); } .th-awardbox-para { font-size: 14px; line-height: 20px; color: var(--text-color); } .th-year-title { font-size: 232px; color: var(--secondary-color); line-height: 1; font-weight: 700; } @media (max-width: 575px) { .th-year-title { font-size: 96px; } } .th-expirence-title { font-size: 20px; line-height: 28px; font-weight: 600; color: #fff; } .th-year-box { display: flex; align-items: center; } .th-plus { margin-bottom: 40px; } @media (max-width: 575px) { .th-plus { margin-bottom: 0; } } @media (max-width: 575px) { .th-plus img { height: 20px; } } .th-year-expcontent { margin-left: 24px; } .th-clientbox-flex { border: 1px solid #2F2E40; border-radius: 16px; padding: 24px 20px; display: flex; align-items: center; margin-left: 78px; } .th-clientbox-flex .th-title { font-size: 48px; line-height: 56px; color: var(--secondary-color); font-weight: 700; margin-right: 12px; } .th-clientbox-flex .th-para { font-size: 18px; line-height: 26px; font-weight: 400; color: var(--text-color); } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .th-clientbox-flex { margin-left: 0; } } @media (max-width: 575px) { .th-clientbox-flex { margin-left: 0; } } .th-hire-btn-wrap { text-align: center; padding: 0 195px; padding-top: 180px; } @media (max-width: 450px) { .th-hire-btn-wrap { padding: 180px 100px 0; } } .th-btn-hire { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; text-transform: uppercase; display: inline-block; position: relative; z-index: 1; } .th-btn-hire span { display: flex; justify-content: center; } .th-btn-hire:hover { color: var(--primary-color-3); transition: 0.3s; } .th-hire-btn-shap { position: absolute; top: 23px; left: 0; right: 0; } .th-about-rotate-text { color: var(--BG-Primary, #0E0E0E); leading-trim: both; text-edge: cap; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--Broder-Primary, #2C2C2C); font-family: "Inter Tight"; font-size: 116px; font-style: normal; font-weight: 700; line-height: 56px; letter-spacing: 0.5px; writing-mode: sideways-lr; position: absolute; top: 120px; left: 80px; } .th-about-rotate-text-2 { right: 80px; left: auto; } .th-about-rotate-text-3 { color: var(--BG-Sedentary, #121212); leading-trim: both; text-edge: cap; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--Broder-Primary, #39332E); font-family: "Inter Tight"; font-size: 148px; font-style: normal; font-weight: 700; line-height: 56px; /* 37.838% */ letter-spacing: 0.5px; } .th-contact-main-wrap-3 { background: #121212; border: 1px solid #2C2C2C; border-radius: 16px; overflow: hidden; } .th-map { height: 604px; width: 100%; margin-bottom: -6px; } .th-contact-wrap { padding: 48px; } .th-contact-title { font-size: 40px; line-height: 48px; font-weight: 700; color: var(--secondary-color); border-bottom: 1px solid #2F2F2F; padding-bottom: 24px; margin-bottom: 32px; } .th-contact-wrap label { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); margin-bottom: 12px; } .th-contact-wrap input[type=text], .th-contact-wrap input[type=email], .th-contact-wrap textarea { background: #0E0E0E; color: var(--text-color); font-size: 16px; line-height: 24px; font-weight: 400; padding: 18px 20px; border: transparent; } .th-contact-wrap input[type=text]::placeholder, .th-contact-wrap input[type=email]::placeholder, .th-contact-wrap textarea::placeholder { background: #0E0E0E; color: var(--text-color); font-size: 16px; line-height: 24px; font-weight: 400; } .th-contact-wrap textarea { height: 136px; } .th-footer-social-3 ul li { display: inline-block; margin: 0 16px; } .th-footer-social-3 ul li span { background: #0E0E0E; height: 40px; width: 40px; line-height: 40px; color: #fff; text-align: center; border-radius: 50%; display: inline-block; transition: 0.3s; margin-right: 8px; } .th-footer-social-3 ul li { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; } .th-footer-social-3 ul li:hover span { background: var(--primary-color-3); transition: 0.3s; } .th-pixlora-contact-form { background: #121212; border: 1px solid #2F2F2F; border-radius: 24px; padding: 48px; } @media (max-width: 575px) { .th-pixlora-contact-form { padding: 30px; } } .th-contact-sm-widget-1 .title { font-size: 18px; line-height: 26px; font-weight: 600; color: #FBFBFB; } .th-contact-sm-widget-1 .th-parea { font-size: 16px; line-height: 24px; color: #B4B2B2; transition: 0.3s; } .th-contact-sm-widget-1 .th-parea:hover { transition: 0.3s; color: #DEFF00; } .th-contact-sm-widget-1 .contact-social { margin-right: 12px; background: #121212; height: 48px; width: 48px; line-height: 48px; display: inline-block; text-align: center; border-radius: 50%; color: #B4B2B2; transition: 0.3s; } .th-contact-sm-widget-1 .contact-social:hover { background: #DEFF00; color: #0E0E0E; transition: 0.3s; } .th-contact-map { height: 700px; width: 100%; -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); } /*----------------------------------------*/ /* 7.5 CTA css /*----------------------------------------*/ .vl-cta-bg { background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 70px; padding-bottom: 70px; border-radius: 40px; } @media (max-width: 575px) { .vl-cta-bg { padding: 28px; border-radius: inherit; } } .vl-cta-bg-5 { padding-top: 80px; padding-bottom: 120px; } .vl-cta-shape-left { position: absolute; top: 70px; left: 50px; } .vl-cta-shape-right { position: absolute; top: 70px; left: auto; right: 50px; } .vl-cta-area-wrap { margin-top: -100px; } .vl-cta-area-wrap-5 { margin-top: -160px; } .vl-cta-content { position: relative; z-index: 1; } .vl-cta-content-3 { margin-right: 20px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-content-3 { margin-right: 0; } } .vl-cta-area-wrap-2 { background: var(--vl-theme-sec-color); } .vl-cta-content-2-desc { color: rgba(255, 255, 255, 0.9); font-style: 500; font-size: 18px; font-weight: 500; line-height: 26px; } .vl-cta-area-wrap-2 { padding-top: 80px; padding-bottom: 160px; position: relative; z-index: 1; } .vl-cta-content-2 { margin-right: 45px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-content-2 { margin-right: 0; } } .vl-download-app2 { display: flex; margin-top: 32px; } .vl-download-app2 .app1 { margin-right: 16px; } .vl-cta-shape2 { position: absolute; right: 0; top: 0; z-index: -1; } .vl-cta-area-wrap-three { border-radius: 40px; margin-left: 30px; margin-right: 30px; position: relative; z-index: 1; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-area-wrap-three { margin-left: 0; margin-right: 0; } } .vl-cta-iconbox3 { display: flex; justify-content: space-between; margin-left: 35px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-iconbox3 { margin-left: 0; } } .vl-iconbox-wrap3 { background: rgba(255, 255, 255, 0.1); border-radius: 16px; padding: 12px; display: flex; align-items: center; padding-right: 54px; } .vl-iconbox-wrap3-icon span { background: var(--vl-text-5); height: 52px; width: 52px; line-height: 52px; border-radius: 8px; display: inline-block; text-align: center; margin-right: 8px; } .vl-iconbox-wrap3-title { font-size: 18px; line-height: 18px; font-weight: 600; color: var(--vl-white); font-family: var(--vl-fonts-figtree); } .feature-wrap { margin-left: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .feature-wrap { margin-left: 0; } } .feature-row { display: flex; gap: 24px; margin-bottom: 20px; } @media (max-width: 575px) { .feature-row { display: block; margin-bottom: 0; } } .feature-center { display: flex; justify-content: center; } .feature-item { background: rgba(255, 255, 255, 0.1); color: #ffffff; display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 16px; min-width: 320px; } @media (max-width: 575px) { .feature-item { min-width: 100%; margin-bottom: 20px; } } .feature-center .feature-item { min-width: 420px; } @media (max-width: 575px) { .feature-center .feature-item { min-width: 100%; } } .icon { width: 44px; height: 44px; background: #7dff4f; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #0f2f26; } .feature-item span { font-size: 18px; line-height: 18px; font-weight: 600; white-space: nowrap; } .vl-cta-form4 { position: relative; width: 500px; margin: 0 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) { .vl-cta-form4 { width: 100%; } } .vl-cta-form4 { margin-bottom: 100px; } .vl-cta-form4 input { height: 72px; border-radius: 16px; backdrop-filter: blur(20px); background: rgb(255, 255, 255); font-size: 18px; line-height: 18px; font-weight: 500; color: var(--vl-text-21); } .vl-cta-form4 input::placeholder { font-size: 18px; line-height: 18px; font-weight: 500; color: var(--vl-text-21); } .vl-cta-form4-btn { position: absolute; right: 4px; top: 4px; } .vl-cta-form4-footer { width: 100%; margin-bottom: 0; } .vl-cta-area-wrap6 { background-size: cover; background-position: center; background-repeat: no-repeat; padding: 80px 0; border-radius: 60px; margin-left: 70px; margin-right: 70px; margin-top: -182px; position: relative; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .vl-cta-area-wrap6 { margin-left: 0; margin-right: 0; border-radius: inherit; } } @media (max-width: 575px) { .vl-cta-area-wrap6 { padding: 30px 0; margin-left: 0; margin-right: 0; border-radius: inherit; } } .vl-cta-thumb-6 { position: absolute; top: -188px; right: 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) { .vl-cta-thumb-6 { top: 0; position: relative; } } .vl-cta-thumb-6 img { height: 477px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .vl-cta-thumb-6 img { height: 244px; float: right; } } @media (max-width: 575px) { .vl-cta-thumb-6 img { margin-top: 30px; height: 333px; float: inherit; } } .vl-top-ctabg7 { background-size: cover; background-position: center; background-repeat: no-repeat; } .vl-cta-content-8 { margin-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-content-8 { margin-right: 0; } } .vl-cta-thumb8 { margin-left: 100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-thumb8 { margin-left: 0; } } .vl-cta-thumb8 { position: absolute; bottom: -68px; right: 0; } @media (max-width: 575px) { .vl-cta-thumb8 { position: relative; bottom: 0; } } @media (max-width: 575px) { .vl-cta-thumb8 img { height: 371px; margin-top: 20px; } } .vl-cta-area-wrap9 { background-size: cover; background-position: center; background-repeat: no-repeat; } .vl-ctaflex9 { display: flex; align-items: center; justify-content: center; gap: 24px; } @media (max-width: 575px) { .vl-ctaflex9 { display: block; } } @media (max-width: 575px) { .vl-ctaflex9 a { margin-bottom: 20px; display: block; } .vl-ctaflex9 a:last-child { margin-bottom: 0; } } .vl-cta-content-9 .subtitle9 { color: var(--vl-white); font-size: 18px; line-height: 18px; font-weight: 600; border: 1px solid #7E68C5; padding: 10px 12px; border-radius: 80px; display: inline-block; } .vl-cta-area-wrap9 { padding-top: 80px; padding-bottom: 80px; border-radius: 40px; margin-left: 60px; margin-right: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-area-wrap9 { margin-left: 0; margin-right: 0; } } .vl-cta-shape9-thumb-1 { position: absolute; top: 0; } .vl-cta-shape9-thumb-2 { position: absolute; right: 0; bottom: 0; } .vl-cta-area-wrap10 { background: var(--vl-text-43); position: relative; z-index: 1; padding-top: 90px; padding-bottom: 90px; border-radius: 40px; margin-left: 60px; margin-right: 60px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-cta-area-wrap10 { margin-left: 0; margin-right: 0; border-radius: inherit; } } @media (max-width: 575px) { .vl-cta-area-wrap10 { padding-top: 45px; padding-bottom: 45px; } } .vl-cta-content-10 .vl-section-title10 .title { font-size: 44px; line-height: 52px; font-weight: 400; color: var(--vl-white); } @media (max-width: 575px) { .vl-cta-content-10 .vl-section-title10 .title { font-size: 28px; line-height: 30px; } } .vl-cta-content-10 .vl-section-title10 .para { font-size: 18px; line-height: 18px; font-weight: 500; color: rgba(255, 255, 255, 0.9); } .vl-cta-thumb10 { position: absolute; right: 0; bottom: 50px; } @media (max-width: 575px) { .vl-cta-thumb10 { position: relative; bottom: 0; margin-top: 30px; } } .th-skill-wrap { margin-right: 40px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-skill-wrap { margin-right: 0; } } .th-skill-wrap-thumb img { height: 556px; border-radius: 16px; } .th-skill-box { background: var(--black-bg); border: 1px solid var(--black-bg); border-radius: 16px; padding: 32px; transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-skill-box { padding: 28px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-skill-box { padding: 19px; } } .th-skill-box-meta { display: flex; } .th-skill-box-meta .th-date { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; margin-right: 40px; } .th-skill-box-meta .th-date:hover { color: var(--primary-color); transition: 0.3s; } .th-skill-box-meta .th-tag { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--primary-color); transition: 0.3s; position: relative; } .th-skill-box-meta .th-tag::after { position: absolute; content: ""; left: -16px; top: 50%; transform: translateY(-50%); height: 8px; width: 8px; background: var(--primary-color); border-radius: 50%; } .th-skill-box-meta .th-tag:hover { color: var(--primary-color); transition: 0.3s; } .th-skill-box .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-skill-box .th-title { font-size: 23px; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-skill-box .th-title { font-size: 22px; line-height: 30px; } } .th-skill-box .th-title:hover { color: var(--primary-color); transition: 0.3s; } .th-skill-box:hover { border: 1px solid var(--primary-color); transition: 0.3s; } .vl-skill-btn { text-align: right; } @media (max-width: 575px) { .vl-skill-btn { text-align: start; } } hr.th-skill-border { margin-top: 48px; margin-bottom: 48px; border-color: rgba(201, 201, 201, 0.4); } hr.th-skill-border-2 { margin-top: 18px; } .th-single-award-box-2 { border-top: 1px solid #242424; border-bottom: 1px solid #242424; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 24px 32px; transition: 0.3s; } .th-single-award-box-2:hover { border: 1px solid #4945F7; transition: 0.3s; border-radius: 12px; } .th-single-award-box-2-year { font-size: 18px; line-height: 26px; color: #9B9B9B; font-weight: 600; transition: 0.3s; } .th-single-award-box-2-title { font-size: 24px; line-height: 32px; color: #FBFFEE; font-weight: 700; transition: 0.3s; } .th-single-award-box-2-award { font-size: 18px; line-height: 26px; color: #B4B2B2; font-weight: 600; transition: 0.3s; } .th-single-award-box-2 { display: grid; grid-template-columns: 1fr 1fr 1fr; } .th-single-award-box-2-title { text-align: center; } .th-single-award-box-2-award { text-align: right; } .th-total-review { margin-top: 48px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--secondary-color); } .th-total-review span { color: #4C40F7; } .th-parallax-thumb-3 { height: 912px; background-size: cover; background-position: center; background-repeat: no-repeat; } .th-icon-vdeo span { background: #FF7B00; height: 110px; width: 110px; line-height: 110px; display: inline-block; text-align: center; color: #fff; border-radius: 50%; font-size: 28px; position: absolute; bottom: 0; left: 0; right: 0; margin: 0 auto; cursor: pointer; } .th-fact-content-wrap .th-para { color: #B4B2B2; font-size: 16px; line-height: 24px; } .th-fact-award-flex { display: flex; align-items: center; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid #2C2C2C; } .th-fact-award-flex .th-awrad-title { font-size: 18px; color: #FBFBFB; line-height: 26px; font-weight: 600; } .th-fact-award-flex .th-title-rasting { margin-right: 16px; } .th-single-fact { background: #121212; height: 320px; width: 320px; display: grid; place-content: center; border-radius: 50%; transition: 0.3s; } .th-single-fact .th-fact-title { font-size: 100px; line-height: 108px; color: #FBFBFB; font-weight: 700; } .th-single-fact .th-fact-title-2 { color: var(--BG-Sedentary, #121212); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--Broder-Primary, #C9C9C9); font-family: "Inter Tight"; font-size: 64px; font-style: normal; font-weight: 700; line-height: 72px; /* 37.838% */ letter-spacing: 0.5px; } .th-single-fact .th-para { color: #B4B2B2; font-size: 20px; line-height: 28px; font-weight: 600; text-align: center; } .th-single-fact:hover { border: 1px solid #2F2F2F; transition: 0.3s; } .th-single-fact-2 { height: 240px; width: 240px; } .th-single-fact-2:hover { border: none; transition: 0.3s; } .margin-left-86 { margin-left: 86px; } .mr24 { margin-right: 24px; } .th-offer-box-wrap { border: 1px solid #2F2F2F; background: #121212; padding: 40px; border-radius: 16px; flex: 1; transition: 0.3s; height: 312px; overflow: hidden; } .th-offer-box-wrap-topflex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .th-offer-box-wrap-topflex-icon span { background: #0E0E0E; height: 56px; width: 56px; line-height: 56px; text-align: center; display: inline-block; text-align: center; border-radius: 50%; transition: 0.3s; } .th-offer-box-wrap-topflex-icon span img { transition: 0.3s; } .th-offer-box-wrap-topflex-tag .tag3 { font-size: 16px; line-height: 24px; color: #B4B2B2; } .th-offer-box-wrap-centerflex-title { font-size: 24px; line-height: 32px; font-weight: 700; color: #FBFBFB; transition: 0.3s; padding-bottom: 8px; padding-top: 112px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-offer-box-wrap-centerflex-title { padding-top: 0; } } .th-offer-box-wrap-centerflex-title:hover { color: #FF7B00; transition: 0.3s; } .th-offer-box-wrap-centerflex-para { font-size: 16px; line-height: 24px; color: #B4B2B2; transition: 0.3s; padding-top: 20px; } .th-offer-box-wrap-bottomflex { margin-top: 32px; } .th-expand-mainflex { display: flex; gap: 32px; transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-expand-mainflex { flex-direction: column; } } .th-expand-mainflex .th-offer-box-wrap:hover { flex: 2; border: 1px solid #FF7B00; transition: 0.3s; } .th-expand-mainflex .th-offer-box-wrap:hover .th-offer-box-wrap-centerflex-title { padding-top: 0; transition: 0.3s; } .th-expand-mainflex .th-offer-box-wrap:hover .th-offer-box-wrap-centerflex-para { padding-top: 0; transition: 0.3s; } .th-expand-mainflex .th-offer-box-wrap:hover .th-offer-box-wrap-topflex-icon span { background: #FF7B00; transition: 0.3s; } .th-expand-mainflex .th-offer-box-wrap:hover .th-offer-box-wrap-topflex-icon span img { filter: brightness(0) invert(1); transition: 0.3s; } .th-expand-card-bottom .th-btn-box { background: #0E0E0E; padding: 8px 24px; border: 1px solid #2C2C2C; border-radius: 112px; display: inline-block; font-size: 16px; line-height: 24px; color: #B4B2B2; text-align: center; } .th-expand-card-bottom .th-btn-box span { text-transform: uppercase; color: #FF7B00; } .th-center-box { display: flex; justify-content: center; margin-top: -32px; } .th-logo { width: 150px; } /*----------------------------------------*/ /* 7.6 Profile css /*----------------------------------------*/ .th-portfolio-slide-wrapper .th-portfolio-content { opacity: 0; transition: opacity 0.3s ease; } .swiper-slide-active .th-portfolio-slide-img { border-color: #DEFF00; } .swiper-slide-active .th-portfolio-content { opacity: 1; } .th-portfolio-text .th-para { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--primary-color); } .th-portfolio-text .th-para span img { margin-right: 8px; } .th-portfolio-text .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; } .th-portfolio-text .th-title:hover { color: var(--primary-color); transition: 0.3s; } .th-portfolio-icon { background: var(--primary-color); height: 56px; width: 56px; line-height: 56px; border-radius: 50px; display: inline-block; text-align: center; } .th-portfolio-slide-img { border: 1px solid transparent; border-radius: 16px; } .swiper.th-portfolio-Swiper { margin: 0 -460px; } .th-portfolio-slide-wrapper { transition: transform 0.3s ease; border: none; } .th-portfolio-slide-wrapper:nth-child(odd) .th-portfolio-slide-img img { height: 429px; } .th-portfolio-slide-wrapper:nth-child(even) .th-portfolio-slide-img img { height: 557px; } .th-portfolio-slide-wrapper .th-portfolio-slide-img img { height: 480px; width: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 0.8s ease, height 0.8s ease; } .th-portfolio-slide-img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; transition: transform 0.6s ease; /* smooth zoom */ } .th-portfolio-slide-img:hover img { transform: scale(1.2) rotate(5.6deg); } .th-portfolio-slide-img:hover a { transform: scale(1.2) rotate(5.6deg); } .th-portfolio-slide-img img { transition: transform 0.6s ease; transform: scale(1) rotate(0deg); } .th-portfolio-slide-img.img-hover img { transform: scale(1.2) rotate(5.6deg); } .th-work-absolute-title { color: var(--secondary-color); font-size: 360px; line-height: 410px; font-weight: 700; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-work-absolute-title { font-size: 195px; line-height: 1; } } @media (max-width: 575px) { .th-work-absolute-title { font-size: 90px; line-height: 1; } } .th-work-Swiper { margin-top: -230px; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-work-Swiper { margin-top: -100px; } } @media (max-width: 575px) { .th-work-Swiper { margin-top: 0px; } } .th-portfolio-card { background-position: center; background-size: cover; border-radius: 16px; width: 644px; background: #0E0E0E; } .th-card { padding: 60px 20px; border-radius: 16px; } .th-card-content .th-title { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); } .th-card-content .th-para { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); } .th-card-right-icon span { background: var(--primary-color-2); height: 56px; width: 56px; line-height: 56px; text-align: center; border-radius: 50%; display: inline-block; } .th-card-right-icon span img { filter: brightness(0) invert(1); } .th-card-content-flex { display: flex; align-items: center; justify-content: space-between; margin-top: 32px; } .th-portfolio-dot-btn .swiper-pagination { position: relative; margin-top: 48px; } .th-portfolio-dot-btn span.swiper-pagination-bullet { background: #AFAFAF; opacity: 1; height: 8px; width: 8px; } .th-portfolio-dot-btn span.swiper-pagination-bullet-active { background: var(--primary-color-2); } .th-work-area-there { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-work-single { background: #121212; border-radius: 16px; border: 1px solid #302F2F; overflow: hidden; } .th-work-single-content { padding: 32px; } .th-work-single-content .th-wrk-subtitle { font-size: 16px; line-height: 24px; color: #FF7B00; font-weight: 400; padding-bottom: 8px; } .th-work-single-content .th-wrk-subtitle span img { margin-right: 12px; } .th-work-single-content .th-wrk-title { font-size: 24px; line-height: 32px; color: #FBFBFB; transition: 0.3s; font-weight: 700; text-transform: capitalize; } .th-work-single-content .th-wrk-title:hover { color: #FF7B00; transition: 0.3s; } .th-portfolio-wrap { background: #0E0E0E; border: 1px solid #2C2C2C; border-radius: 16px; overflow: hidden; } .th-portfolio-wrap-content { padding-top: 16px; padding-left: 24px; padding-right: 24px; padding-bottom: 32px; } .th-portfolio-wrap-content .th-title { color: #FBFBFB; font-size: 20px; line-height: 28px; font-weight: 700; transition: 0.3s; padding-bottom: 8px; } .th-portfolio-wrap-content .th-title:hover { color: #DEFF00; transition: 0.3s; } .th-portfolio-wrap-content .th-para { font-size: 16px; line-height: 24px; color: #B4B2B2; font-weight: 400; } /*----------------------------------------*/ /* 7.3 Service css /*----------------------------------------*/ .th-service-area { background-size: cover; background-position: center; background-repeat: no-repeat; } .vl-award-item { position: relative; padding: 24px 0; border-bottom: 1px solid #2B2C28; transition: 0.3s; } @media (max-width: 575px) { .vl-award-item { padding: 37px 20px; padding-bottom: 31px; } } .vl-award-item:hover { padding: 24px 30px; transition: 0.3s; border-bottom: 1px solid var(--primary-color); } .vl-award-item:hover .vl-award-text, .vl-award-item:hover .vl-award-position, .vl-award-item:hover .th-year { color: var(--primary-color); transition: 0.3s; } .vl-award-text { font-size: 20px; line-height: 28px; font-weight: 600; line-height: 1; color: var(--secondary-color); transition: 0.3s; } .vl-award-position { font-size: 20px; font-weight: 600; line-height: 28px; color: var(--secondary-color); transition: 0.3s; } h3.th-year { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--secondary-color); } .hover-reveal-item .vl-award-reveal-img { position: absolute; top: 0; left: 0; width: 210px; height: 250px; opacity: 0; z-index: 9; overflow: hidden; pointer-events: none; border-radius: 10px; margin: -70px 0 0 -70px; transform: svlle(0.4); background-repeat: no-repeat; background-size: cover; } .hover-reveal-item:hover .vl-award-reveal-img { opacity: 1; } .vl-award-heading { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); position: relative; padding-left: 16px; } .vl-award-heading::after { position: absolute; content: ""; left: 0; top: 50%; height: 8px; width: 8px; background: var(--secondary-color); border-radius: 50%; transform: translateY(-50%); } .vl-award-heading-grid { display: flex; justify-content: space-between; border-bottom: 1px solid #2F3028; padding-bottom: 24px; } .vkl-aaward-bg { background-size: cover; background-position: center; background-repeat: no-repeat; padding-top: 120px; padding-bottom: 120px; } .vl-award-box-content { text-align: center; } @media (max-width: 575px) { .vl-award-box-content { text-align: start; } } .vl-award-box-year { text-align: end; } @media (max-width: 575px) { .vl-award-box-year { text-align: start; } } .th-awrd-title { color: var(--secondary-color); font-size: 188px; line-height: 194px; font-weight: 700; margin-bottom: 48px; } .th-awrd-title span { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--Primary-500, #DEFF00); font-family: "Inter Tight"; font-style: normal; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-awrd-title { font-size: 130px; line-height: 1; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-awrd-title { font-size: 95px; line-height: 1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-awrd-title { font-size: 68px; line-height: 1; } } @media (max-width: 575px) { .th-awrd-title { font-size: 34px; line-height: 1; } } .th-award-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-award-thumbshape1 { position: absolute; left: -212px; right: 0; top: 0; } .th-award-thumbshape2 { position: absolute; left: 338px; right: 0; top: 0; } .thaward-main-thumb { position: relative; z-index: 1; } .th-award-items-flex { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2C2C2C; padding-bottom: 24px; margin-bottom: 24px; transition: 0.3s; margin-left: 30px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-award-items-flex { margin-left: 0; } } .th-awaard-content-wrap .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; padding-bottom: 8px; } .th-awaard-content-wrap .th-title:hover { color: var(--primary-color); transition: 0.3s; } .th-awaard-content-wrap .th-para { font-size: 18px; line-height: 26px; color: #B4B2B2; font-weight: 400; transition: 0.3s; } .th-award-icon span { background: #121212; height: 48px; width: 48px; line-height: 48px; display: inline-block; border-radius: 50%; text-align: center; transition: 0.3s; } .th-award-icon span img { transition: 0.3s; } .th-award-right-arrow { position: absolute; left: 20px; top: 10px; opacity: 0; transition: 0.3s; } .th-award-items-flex:hover { padding-left: 54px; transition: 0.3s; border-bottom: 1px solid var(--primary-color); } .th-award-items-flex:hover .th-award-icon span { background: var(--primary-color); transition: 0.3s; } .th-award-items-flex:hover .th-award-icon span img { transition: 0.3s; filter: brightness(0); } .th-award-items-flex:hover .th-award-right-arrow { left: 0; top: 50%; transform: translateY(-50%); opacity: 1; transition: 0.3s; } .th-service-large-thumb img { border-radius: 24px; height: 572px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-service-large-thumb img { height: 100%; } } .th-service-large-thumb-2 img { border-radius: 24px; height: 664px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-service-large-thumb-2 img { height: 100%; } } .service-lar-content-box-1 .th-title { font-size: 40px; line-height: 48px; color: #FBFBFB; font-weight: 700; transition: 0.3s; padding-bottom: 16px; } @media (max-width: 575px) { .service-lar-content-box-1 .th-title { font-size: 34px; line-height: 44px; } } .service-lar-content-box-1 .th-title-2 { font-size: 32px; line-height: 40px; } .service-lar-content-box-1 .th-para { color: #B4B2B2; font-size: 16px; line-height: 24px; font-weight: 400; } .service-lar-content-box-1 .th-para span { color: #DEFF00; } .service-lar-content-box-1 ul li { color: #B4B2B2; font-size: 18px; line-height: 26px; margin-bottom: 16px; display: flex; } .service-lar-content-box-1 ul li:last-child { margin-bottom: 16px; } .service-lar-content-box-1 ul li span img { margin-right: 8px; } .th-servic-auth-box-flex { border: 1px solid #DEFF00; transition: 0.3s; border-radius: 16px; padding: 32px; position: relative; display: flex; align-items: center; } @media (max-width: 575px) { .th-servic-auth-box-flex { flex-direction: column; } } .th-servic-auth-box-flex .th-servie-sm-thumb span img { margin-right: 16px; } @media (max-width: 575px) { .th-servic-auth-box-flex .th-servie-sm-thumb span img { margin-right: 0; margin-bottom: 20px; } } .th-servic-auth-box-flex .th-quote { position: absolute; right: 40px; bottom: 40px; } .th-servic-auth-box-flex-2 { background: #0E0E0E; border: 1px solid #2C2C2C; } .th-servic-auth-box-flex-3 { padding: inherit; background: #0E0E0E; border: 1px solid transparent; } @media (max-width: 575px) { .th-servic-auth-box-flex-3 { padding: 20px; } } .th-servie-sm-content .th-para { font-size: 16px; line-height: 24px; color: #FBFBFB; font-style: italic; padding-bottom: 16px; } .th-servie-sm-content .th-para-2 { color: #B4B2B2; font-style: normal; padding-bottom: 0; } .th-servie-sm-content .th-auth-title { color: #FFFFFF; font-size: 20px; line-height: 28px; font-weight: 600; transition: 0.3s; } .th-servie-sm-content .th-auth-title-2 { font-size: 24px; line-height: 32px; } .th-servie-sm-content .th-position { font-size: 16px; line-height: 24px; color: #B4B2B2; font-weight: 400; transition: 0.3s; } .th-service-sm-thumb img { height: 284px; border-radius: 16px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-service-sm-thumb img { height: 100%; } } .th-service-widget-1 { background: #0E0E0E; padding: 32px; border-radius: 16px; border: 1px solid #2C2C2C; } .th-service-widget-1 .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: #FBFBFB; transition: 0.3s; position: relative; padding-bottom: 12px; } .th-service-widget-1 .th-title::after { position: absolute; content: ""; left: 0; bottom: 0; width: 80px; height: 3px; background: #DEFF00; border-radius: 64px; } .th-service-widget-1 .th-para { font-size: 18px; line-height: 26px; color: #B4B2B2; font-weight: 400; } .th-mt-24 { margin-top: 24px; } .th-single-cat a { background: #121212; font-size: 16px; line-height: 24px; font-weight: 400; display: flex; justify-content: space-between; padding: 12px 16px; border-radius: 100px; color: #FBFBFB; transition: 0.3s; margin-bottom: 16px; } .th-single-cat a:last-child { margin-bottom: 0; } .th-single-cat a:hover { background: #DEFF00; transition: 0.3s; color: #0E0E0E; } .th-single-cat a:hover span img { filter: brightness(0); } .th-single-cat a:hover span img { filter: brightness(0); } .th-service-widget-2 { background: #0E0E0E; padding: 32px; border-radius: 16px; border: 1px solid #2C2C2C; } .th-service-widget-2 .th-title-2 { font-size: 20px; line-height: 28px; font-weight: 600; color: #FBFBFB; text-align: center; } .th-phone-number { margin-top: 48px; } .th-phone-number .th-para { font-size: 16px; line-height: 24px; color: #B4B2B2; font-weight: 400; padding-bottom: 8px; } .th-phone-number .th-number { font-size: 32px; line-height: 40px; color: #fff; transition: 0.3s; font-weight: 700; } .th-phone-number .th-number:hover { color: #DEFF00; transition: 0.3s; } .th-title-top { color: #DEFF00; font-size: 18px; line-height: 26px; font-weight: 600; padding-bottom: 8px; } /*----------------------------------------*/ /* 7.12 Team /*----------------------------------------*/ .vl-team-wrap-inner-thumb img { height: 440px; object-fit: cover; border-radius: 20px; background: #ddd; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-team-wrap-inner-thumb img { height: 100%; } } .vl-team-wrap-inner-content { border-radius: 15px; background: var(--vl-white); padding: 24px; position: absolute; bottom: 20px; left: 50px; right: 50px; } .vl-team-wrap-inner-content .title { font-size: 20px; line-height: 20px; font-weight: 600; font-family: var(--vl-fonts-figtree); transition: 0.3s; margin-bottom: 12px; color: var(--vl-text-47); } .vl-team-wrap-inner-content .title:hover { color: var(--vl-heading-color); transition: 0.3s; } .vl-team-wrap-inner-content .desc { font-size: 16px; font-weight: 500; line-height: 16px; transition: 0.3s; color: var(--vl-text-48); } .vl-team-social-plus { position: absolute; top: -50%; transform: translateY(50%); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-team-social-plus { left: 5px; } } .vl-team-social-plus span { height: 52px; width: 52px; line-height: 52px; background: var(--vl-theme-color); display: inline-block; color: var(--vl-white); transition: 0.3s; text-align: center; border-radius: 50px; font-size: 20px; } .vl-team-social-inner ul li { display: inline-block; } .vl-team-social-inner ul li a span { height: 48px; width: 48px; line-height: 48px; border-radius: 50px; display: inline-block; color: var(--vl-text-47); transition: 0.3s; background: var(--vl-white); text-align: center; font-size: 20px; margin-bottom: 10px; } .vl-team-social-inner ul li a span:hover { background: var(--vl-theme-color); transition: 0.3s; color: var(--vl-white); } .vl-team-social-inner ul li { display: grid; position: absolute; top: 0; } .vl-team-social-inner { position: absolute; top: -80px; opacity: 0; visibility: hidden; transition: 0.3s; } .vl-team-wrap-inner:hover .vl-team-social-inner { top: -200px; opacity: 1; visibility: visible; transition: 0.3s; } /*----------------------------------------*/ /* 7.4 Testimonial css /*----------------------------------------*/ .th-clientbox-wrap { background: var(--primary-color); border-radius: 24px; position: relative; text-align: center; padding: 48px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-clientbox-wrap { padding: 30px; } } .th-clientbox-wrap .th-shape { position: absolute; top: 0; right: 0; } .th-clientbox-wrap-top-content .th-client-tltle { font-size: 72px; line-height: 80px; color: var(--black-color); transition: 0.3s; font-weight: 700; } .th-clientbox-wrap-top-content .th-desc { font-size: 18px; line-height: 26px; font-weight: 400; color: var(--black-color); } .th-clientbox-wrap-top-content { padding-bottom: 78px; } .th-clientbox-wrap-center-content .th-desc { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--black-color); } .th-clientbox-wrap-center-content { padding-bottom: 136px; } .th-testimonial-content-wrap { padding: 56px 48px; border-radius: 16px; border: 1px solid var(--black-color); background: var(--black-color); } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-testimonial-content-wrap { padding: 30px; } } .th-testimonial-content-wrap .th-text { font-size: 24px; line-height: 36px; font-weight: 500; color: var(--secondary-color); font-style: italic; padding-top: 32px; padding-bottom: 40px; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-testimonial-content-wrap .th-text { font-size: 20px; line-height: 30px; } } .th-testimonial-content-wrap-2 .th-text { font-style: normal; font-size: 14px; line-height: 20px; padding-top: 16px; padding-bottom: 0; } .th-testimonial-authflex { display: flex; align-items: center; } .th-testimonial-authflex .th-thumb img { height: 72px; width: 72px; border-radius: 50px; margin-right: 8px; } .th-testimonial-authflex .th-content .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; } .th-testimonial-authflex .th-content .th-desc { padding-top: 8px; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; } .th-testimonial-authflex-2 { flex-direction: column; text-align: center; width: 89%; margin-right: 24px; padding-right: 24px; } .th-testimonial-authflex-2 .th-thumb img { height: 72px; width: 72px; border-radius: 50px; margin-bottom: 12px; margin-right: 0; } .th-testimonial-authflex-2 .th-content .th-title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--secondary-color); transition: 0.3s; } .th-testimonial-authflex-2 .th-content .th-title:hover { color: var(--primary-color-2); transition: 0.3s; } .th-testimonial-authflex-2 .th-content .th-desc { padding-top: 8px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-color); transition: 0.3s; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-testimonial-authflex-2 { margin-right: 0; padding-right: 0; width: 100%; } } .tp-test-slider-space { margin-right: -445px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .tp-test-slider-space { margin-right: 0; } } .th-testimonial-navigation { display: flex; justify-content: space-between; position: relative; z-index: 9; } .th-testimonial-navigation-button span:hover img { filter: brightness(0); transition: 0.3s; } .th-testimonial-navigation-button span img { filter: none; transition: 0.3s; } .th-testimonial-navigation-button span { background: var(--black-bg); height: 56px; width: 56px; display: inline-block; line-height: 56px; text-align: center; border-radius: 50%; transition: 0.3s; } .th-testimonial-navigation-button span:hover { background: var(--primary-color); transition: 0.3s; } .th-testimonial-navigation-button-2 span { background: var(--black-bg); height: 56px; width: 56px; display: inline-block; line-height: 56px; text-align: center; border-radius: 50%; transition: 0.3s; } .th-testimonial-navigation-button-2 span:hover { background: #4C40F7; transition: 0.3s; } .th-testimonial-navigation-button-2 span:hover img { filter: brightness(0) invert(1); transition: 0.3s; } .th-testimonial-navigation-button.th-testimonial-navigation-button-3 span:hover { background: #FF7B00; } .th-testimonial-navigation-button.th-testimonial-navigation-button-3 span:hover img { filter: brightness(0) invert(1); } .th-testimonial-content-wrap { border: 1px solid #191919; transition: 0.3s; } .swiper-slide.swiper-slide-active .th-testimonial-content-wrap { border: 1px solid var(--primary-color); transition: 0.3s; } .swiper-slide.swiper-slide-active .th-testimonial-content-wrap-2 { border: 1px solid var(--primary-color-2); } .th-testimonial-content-wrap-2 { display: flex; align-items: center; padding: 40px 24px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-testimonial-content-wrap-2 { display: block; } } .th-testimonial-authflex.th-testimonial-authflex-2 { position: relative; } .th-testimonial-authflex.th-testimonial-authflex-2::after { position: absolute; content: ""; right: 0; top: -41px; background: #2F2F2F; width: 1px; height: 155%; bottom: 32px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-testimonial-authflex.th-testimonial-authflex-2::after { top: 0; background: inherit; width: inherit; height: inherit; bottom: inherit; } } .th-quote-flex2 { display: flex; align-items: center; justify-content: space-between; } .th-icon-rating ul li { display: inline-block; } .th-testimonial-thumb-3 { background-size: cover; background-position: center; background-repeat: no-repeat; height: 912px; } .th-testimonial-box-thee { background: #0E0E0E; border: 1px solid #2C2C2C; border-radius: 16px; padding: 32px; display: flex; } @media (max-width: 575px) { .th-testimonial-box-thee { flex-direction: column; } } .th-testimonial-box-content { margin-right: 52px; } .th-testimonial-box-content .th-para { font-size: 20px; line-height: 30px; font-weight: 500; font-style: italic; color: var(--text-color); padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid #2C2C2C; } @media (max-width: 575px) { .th-testimonial-box-content { margin-right: 0; } } .th-testimonial-auth-thee .th-auth-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; } .th-testimonial-auth-thee .th-auth-title span { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); font-family: var(--th-fonts-Onest); } .th-testimonial-box-thumb img { height: 168px; width: 168px; line-height: 1; border: 1px solid #2F2F2F; border-radius: 50%; } .th-testimoninial-reviewbox { border-radius: 16px; border: 1px solid #2C2C2C; padding: 40px 24px; text-align: center; } .th-testimoninial-flex { display: flex; align-items: center; justify-content: center; } .th-star-content .title { font-size: 32px; line-height: 40px; font-weight: 700; color: var(--secondary-color); } .th-test-center-content .th-title { font-size: 16px; line-height: 24px; font-weight: 600; color: #B4B2B2; } .th-test-center-content .th-title span { color: var(--primary-color-3); } .th-test-center-content .th-thumb { margin-top: 26px; margin-bottom: 16px; } .th-quote-three { position: absolute; bottom: 16px; left: 0; right: 0; margin: 0 auto; text-align: center; } .th-quote-three span { height: 48px; width: 48px; line-height: 48px; text-align: center; border-radius: 50%; background: #121212; display: inline-block; } .th-quote-three span img { height: 24px; width: 24px; border: inherit; } .th-vertical-pagination { display: flex; flex-direction: column; gap: 20px; margin-right: 48px; padding: 16px 12px; border-radius: 50px; border: 1px solid #3D332C; } .th-vertical-pagination span { width: 48px; height: 48px; border-radius: 50%; background: #0E0E0E; color: var(--text-color); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; } .th-vertical-pagination span.active { background: #ff7a00; opacity: 1; transform: scale(1.1); color: var(--secondary-color); } .th-project-container { display: flex; align-items: center; position: relative; } .th-bottom-text { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0 auto; text-align: center; } .th-bottom-text small { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--primary-color-3); } .th-portfolio-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); } .th-portfolio-btn3 { position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; text-align: center; transform: translateY(-50%); } .thg-year { writing-mode: vertical-rl; transform: rotate(180deg); margin-left: 30px; opacity: 0.6; font-size: 24px; line-height: 32px; color: var(--secondary-color); position: relative; } .th-line25 { position: absolute; top: -64px; right: -10px; bottom: 0; } .th-play-video-wrap { background: #0E0E0E; padding: 41px 32px; margin-top: 688px; border-top-left-radius: 8px; border-top-right-radius: 8px; } @media (max-width: 575px) { .th-play-video-wrap { margin-top: 400px; } } .th-play-video-wrap-box { background: var(--primary-color-3); padding: 16px; border-radius: 100px; display: flex; align-items: center; } @media (max-width: 575px) { .th-play-video-wrap-box { flex-direction: column; border-radius: 16px; } } .th-play-video-wrap-box .th-icon span { height: 110px; width: 110px; line-height: 110px; text-align: center; background: var(--secondary-color); display: inline-block; color: var(--black-color); border-radius: 50%; font-size: 24px; margin-right: 16px; } .th-play-video-wrap-box .th-content .th-para { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); } .th-project-active-margin { margin: 0 -100px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-project-active-margin { margin: 0; } } .th-control-pagination .swiper-pagination { position: relative; } .th-control-pagination span.swiper-pagination-bullet { background: #C9C9C9; opacity: 1; } .th-control-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: var(--primary-color); position: relative; } .th-control-pagination.th-control-dot-2 span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #4C40F7; position: relative; } .th-control-pagination.th-control-dot-3 span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #FF7B00; position: relative; } .th-control-pagination span.swiper-pagination-bullet.swiper-pagination-bullet-active:after { position: absolute; border: 2px solid var(--primary-color); left: -6px; top: -6px; content: ""; border-radius: 50%; padding: 8px; } .th-control-pagination.th-control-dot-2 span.swiper-pagination-bullet.swiper-pagination-bullet-active:after { position: absolute; border: 2px solid #4C40F7; left: -6px; top: -6px; content: ""; border-radius: 50%; padding: 8px; } .th-control-pagination.th-control-dot-3 span.swiper-pagination-bullet.swiper-pagination-bullet-active:after { position: absolute; border: 2px solid #FF7B00; left: -6px; top: -6px; content: ""; border-radius: 50%; padding: 8px; } .th-control-pagination { margin-top: 48px; } .th-slider-arrow-control { margin-top: -48px; } .th-slider-arrow-control-2 { margin: 0; margin-top: 48px; top: -22px; position: relative; } .th-testimonial-navigation-next::after { position: absolute; content: ""; left: 72px; right: 0; background: #454545; height: 1px; width: 198px; top: 50%; } .th-testimonial-navigation-prev::after { position: absolute; content: ""; height: 1px; width: 198px; background: #454545; right: 65px; left: auto; top: 50%; } .th-testimonial-navigation-prev::after { position: absolute; content: ""; height: 1px; width: 198px; background: #454545; right: 65px; left: auto; top: 50%; } .th-testimonial-navigation-prev-2::after { position: absolute; content: ""; height: 1px; width: 38%; background: #454545; right: 65px; left: auto; top: 50%; } .th-testimonial-navigation-next-2::after { position: absolute; content: ""; left: 72px; right: 0; background: #454545; height: 1px; width: 38%; top: 50%; } .th-testimonial-navigation-3 .th-testimonial-navigation-next::after { position: absolute; content: ""; left: 72px; right: 0; background: #454545; height: 1px; width: 40%; top: 50%; } .th-testimonial-navigation-3 .th-testimonial-navigation-prev::after { position: absolute; content: ""; height: 1px; width: 40%; background: #454545; right: 72px; left: auto; top: 50%; } .th-project-year25 .th-yrtitle { font-size: 24px; line-height: 32px; font-weight: 700; color: #FBFBFB; position: absolute; writing-mode: sideways-rl; top: 50%; right: 3px; transform: translateY(-119%); } .th-project-year25 span img { position: absolute; top: 50%; right: 0; transform: translateY(-104%); } .th-marketing-content { position: absolute; bottom: 0; text-align: center; left: 0; right: 0; transition: 0.3s; opacity: 0; visibility: hidden; } .th-marketing-content .th-sutitle { color: #FF7B00; font-size: 16px; line-height: 24px; font-weight: 400; transition: 0.3s; } .th-marketing-content .th-title { color: #FBFBFB; font-size: 24px; line-height: 32px; font-weight: 700; transition: 0.3s; } .th-marketing-content .th-title:hover { color: #FF7B00; transition: 0.3s; } .th-marketing-content span img { width: 24px; } .th-slide-image:hover .th-marketing-content { bottom: 32px; opacity: 1; visibility: visible; transition: 0.3s; } .th-project-slider { display: flex; align-items: center; gap: 40px; } /* number navigation */ .th-number-nav { display: flex; flex-direction: column; gap: 16px; border: 1px solid #3C322B; padding: 16px 12px; border-radius: 90px; position: relative; z-index: 1; } .th-num1 { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #0E0E0E; color: #B4B2B2; cursor: pointer; transition: 0.3s; } .th-num1.th-active { background: #FF7B00; color: #FBFBFB; } /* slider */ .th-swiper { width: 100%; } .th-slide-image { position: relative; } .th-slide-image img { width: 100%; border-radius: 14px; } /* year */ .th-slide-year { position: absolute; right: -40px; top: 50%; transform: translateY(-50%) scale(0.7); writing-mode: vertical-rl; font-size: 22px; letter-spacing: 6px; opacity: 0; transition: 0.4s; } /* only active slide */ .swiper-slide-active .th-slide-year { opacity: 1; transform: translateY(-50%) scale(1); } /* controls */ .th-slider-controls { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 30px; } /* arrows */ .th-arrow { width: 46px; height: 46px; border-radius: 50%; background: #111; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; } /* responsive */ @media (max-width: 768px) { .th-project-slider { flex-direction: column; } .th-number-nav { flex-direction: row; } .th-slide-year { display: none; } } /*----------------------------------------*/ /* 7.1 Banner css /*----------------------------------------*/ .th-designer-bg { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-banner-area { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-banner-area .th-banner-content-wrapper { padding: 125px 80px 127px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-area .th-banner-content-wrapper { padding: 100px 0 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-banner-area .th-banner-content-wrapper { padding: 90px 0 0; } } @media (max-width: 575px) { .th-banner-area .th-banner-content-wrapper { padding: 80px 0 0; } } .th-banner-area-2 { padding: 220px 80px 127px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-area-2 { padding: 220px 60px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-banner-area-2 { padding: 180px 30px 0; } } @media (max-width: 575px) { .th-banner-area-2 { padding: 150px 15px 0; } } .th-banner-content .th-subtitle { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--primary-color); transition: 0.3s; padding: 5px 12px; border-radius: 100px; display: inline-block; background: var(--black-bg); font-family: var(--th-fonts-Inter); } .th-banner-content .th-title { font-size: 100px; line-height: 108px; color: var(--secondary-color); font-weight: 700; padding-bottom: 4px; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-banner-content .th-title { font-size: 70px; line-height: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-content .th-title { font-size: 50px; line-height: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-banner-content .th-title { font-size: 60px; line-height: 70px; } } @media (max-width: 575px) { .th-banner-content .th-title { font-size: 30px; line-height: 40px; } } .th-banner-content .th-title2 { -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--Primary-500, #DEFF00); font-family: "Inter Tight"; font-size: 100px; font-style: normal; font-weight: 700; line-height: 108px; letter-spacing: -1px; text-transform: uppercase; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-banner-content .th-title2 { font-size: 70px; line-height: 80px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-content .th-title2 { font-size: 50px; line-height: 60px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-banner-content .th-title2 { font-size: 60px; line-height: 70px; } } @media (max-width: 575px) { .th-banner-content .th-title2 { font-size: 30px; line-height: 40px; } } .th-arrow-hero { display: flex; gap: 32px; } .th-arrow-hero .th-arrow-right { background: var(--black-bg); padding: 32px 88px; border-radius: 88px; display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-arrow-hero .th-arrow-right { padding: 32px 45px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-arrow-hero .th-arrow-right { padding: 17px 88px; } } @media (max-width: 575px) { .th-arrow-hero .th-arrow-right { padding: 8px 13px; } } @media (max-width: 575px) { .th-arrow-hero { gap: 20px; } } .th-rotate-text.p-relative { position: absolute; } .th-auth-ratingbox { margin-right: 48px; padding-right: 48px; border-right: 1px solid #37392B; } @media (max-width: 575px) { .th-auth-ratingbox { margin-right: 0; padding-right: 0; border-right: inherit; margin-bottom: 30px; } } .th-auth-ratingbox .title { font-size: 100px; line-height: 108px; color: var(--secondary-color); display: inline-block; font-weight: 700; } @media (max-width: 575px) { .th-auth-ratingbox .title { font-size: 50px; line-height: 1; } } .th-auth-ratingbox-2 { position: relative; } @media (max-width: 575px) { .th-auth-ratingbox-2 { border-right: inherit; } } @media (max-width: 575px) { .th-hero-thumb-2 img { height: 423px; margin-top: 50px; } } .th-auth-ratingbox-2::after { position: absolute; content: ""; right: 0; height: 134%; width: 1px; background: #383648; top: -22px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-auth-ratingbox-2::after { background: inherit; } } @media (max-width: 575px) { .th-auth-ratingbox-2::after { background: transparent; height: inherit; top: inherit; } } .th-star ul li { display: inline-block; } .th-authbox-flex { display: flex; align-items: center; } .th-authbox-flex .th-thumb img { height: 56px; width: 56px; line-height: 56px; border-radius: 50px; margin-right: 12px; } .th-authbox-flex .th-content .th-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; } .th-authbox-flex .th-content .th-title:hover { color: var(--primary-color); transition: 0.3s; } .th-authbox-flex .th-content .th-para { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); } .th-authbox .th-desc { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); } .th-auth-boxflex { display: flex; align-items: center; } @media (max-width: 575px) { .th-auth-boxflex { flex-direction: column; align-items: start; margin-bottom: 30px; } } .th-auth-boxflex-2 { margin-top: 133px; justify-content: end; border-top: 1px solid #383648; border-bottom: 1px solid #383648; width: 46%; float: right; padding: 22px 0; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-auth-boxflex-2 { margin-top: 50px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-auth-boxflex-2 { margin-top: 30px; width: 80%; padding: 22px 0; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-auth-boxflex-2 { margin-top: 0; width: 50%; float: inherit; } } @media (max-width: 575px) { .th-auth-boxflex-2 { margin-top: 0; width: 100%; float: inherit; } } .th-average { color: #fff; font-size: 18px; line-height: 26px; font-weight: 600; padding-bottom: 8px; } .th-reviews { font-size: 18px; line-height: 26px; font-weight: 600; color: var(--secondary-color); } @media (max-width: 1200px) { .th-reviews { font-size: 16px; } } .th-hero-thumb { position: relative; } .th-hero-thumb img { position: absolute; bottom: 0; width: 486px !important; right: 0; height: 394px !important; } .th-circle-txt-wrap { height: 188px; width: 188px; display: inline-block; border-radius: 50%; background: var(--black-bg); padding: 23px; border: 1px solid #2C2C2C; position: relative; } .th-circle-txt-wrap .th-icontext { position: absolute; top: 50%; transform: translateY(-50%); left: 0; right: 0; margin: 0 auto; text-align: center; } .th-hero-right-thumb img { margin-top: 24px; height: 394px; width: 494px !important; margin-left: -150px; border-radius: 16px; border: 1px solid var(--primary-color); } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-hero-right-thumb img { margin-left: 0; width: 100% !important; height: 100%; } } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-hero-right-thumb img { margin-left: 0; width: 100% !important; height: 100%; } } .th-scroll-dwn-text span img { height: 14px; width: 16px !important; } .th-scroll-dwn-text { transform: translateX(10px); font-size: 16px; line-height: 24px; font-weight: 600; color: var(--secondary-color); } .th-scroll-dwn-text img { border: inherit; } @media (max-width: 575px) { .th-banner-btn-wrap.mb-72.mt-48 { margin-bottom: 30px; } } .th-scroll-dwn-text { writing-mode: sideways-rl; margin-left: -198px; transform: translateY(-118px); } .th-scroll-dwn-text span img { position: absolute; bottom: -23px; left: 0; right: 0; margin: 0 auto; } .th-banner-shape1 { position: absolute; top: 0; right: 0; } .th-banner-shape2 { position: absolute; top: 0; left: 0; } .th-hero-content-wrap-2 { position: relative; z-index: 1; } .th-banner-title-2 { font-size: 200px; line-height: 1; color: var(--secondary-color); text-transform: uppercase; font-weight: 700; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-banner-title-2 { font-size: 149px; line-height: 220px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-title-2 { font-size: 104px; line-height: 1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-banner-title-2 { font-size: 108px; line-height: 1; } } @media (max-width: 575px) { .th-banner-title-2 { font-size: 48px; line-height: 58px; } } .th-banner-title-2 span { margin-left: 280px; } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-banner-title-2 span { margin-left: 0; } } .th-hero-content-wrap-2 .title { font-size: 100px; line-height: 108px; color: var(--secondary-color); font-weight: 500; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-hero-content-wrap-2 .title { font-size: 55px; line-height: 65px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-hero-content-wrap-2 .title { font-size: 35px; line-height: 1; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-hero-content-wrap-2 .title { font-size: 60px; line-height: 1; } } @media (max-width: 575px) { .th-hero-content-wrap-2 .title { font-size: 25px; line-height: 35px; } } .th-hero-content-wrap-2 .th-para { font-size: 18px; line-height: 26px; color: var(--text-color); font-weight: 400; padding-top: 24px; } @media (max-width: 575px) { .th-hero-content-wrap-2 .title span { display: inline-block; } } .th-hero-thumb-2 { position: absolute; left: 100px; right: 0; margin: 0 auto; text-align: center; } @media only screen and (min-width: 1400px) and (max-width: 1599px) { .th-hero-thumb-2 { left: 90px; } } @media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px) { .th-hero-thumb-2 { position: relative; left: 0; } } @media (max-width: 575px) { .th-hero-thumb-2 { position: relative; left: -30px; } } .th-play-video-flex { display: flex; align-items: center; } .th-play-video-flex .th-play-icon span { height: 56px; width: 56px; line-height: 56px; background: #0E0E0E; border-radius: 50px; display: inline-block; color: #fff; text-align: center; border: 1px solid #3B3B3B; margin-right: 16px; cursor: pointer; } .th-play-video-flex .th-play-title { cursor: pointer; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--secondary-color); } .th-banner-content-thee .th-subtitle { font-size: 18px; line-height: 26px; color: #B4B2B2; font-weight: 600; } .th-banner-content-thee .th-title { font-size: 80px; line-height: 88px; color: var(--secondary-color); font-weight: 700; padding-top: 16px; padding-bottom: 46px; } .th-banner-content-thee .th-title span { color: var(--primary-color-3); transform: rotate(-2deg); display: inline-block; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-content-thee .th-title { font-size: 50px; line-height: 60px; padding-bottom: 30px; } } @media (max-width: 575px) { .th-banner-content-thee .th-title { font-size: 45px; line-height: 55px; padding-bottom: 30px; } } @media (max-width: 450px) { .th-banner-content-thee .th-title { font-size: 40px; line-height: 50px; } } .th-banner-content-thee .th-para { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); padding-bottom: 48px; } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-content-thee .th-para { padding-bottom: 30px; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .th-banner-btn-wrap.mb-72 { margin-bottom: 30px; } } .th-banner-area-thee-3 { background-size: cover; background-position: center; background-repeat: no-repeat; } @media (max-width: 1200px) { .th-banner-area-thee-3 { padding-top: 0; } } .th-banner-sm-content { background: #0E0E0E; padding-top: 19px; padding-bottom: 26px; padding-left: 37px; padding-right: 105px; width: 436px; border-radius: 8px; } .th-banner-sm-content .th-title { font-size: 24px; line-height: 32px; font-weight: 700; color: var(--secondary-color); } @media (max-width: 575px) { .th-banner-sm-content { width: 100%; padding: 30px; } } .th-black-bg-common-three { background: #0E0E0E; height: 196px; } .th-banner-hero-thumb-three { position: relative; } .th-mt-265 { margin-top: -265px; } .th-bg-right-shape2-1 { position: absolute; top: 0; left: 0; right: 0; height: 100%; width: 100%; } .th-bg-right-shape2-2 { position: absolute; left: 0; bottom: 0; } .th-banner-social-thee { position: absolute; top: 244px; left: 100px; } .th-banner-social-thee { writing-mode: sideways-lr; } .th-banner-social-thee ul li { display: inline-block; margin-top: 14px; } .th-banner-social-thee ul li a { background: #0E0E0E; border-radius: 90px; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--secondary-color); transition: 0.3s; padding: 16px 4px; display: inline-block; } .th-banner-social-thee ul li a span { height: 8px; width: 8px; background: var(--secondary-color); display: inline-block; border-radius: 50%; transition: 0.3s; margin-top: 10px; margin-right: 4px; } .th-banner-social-thee ul li a:hover { background: var(--primary-color-3); transition: 0.3s; } .th-absolute-text { color: var(--BG-Primary, #111111); -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: var(--Text-Sedentary, #2C2C2C); font-family: "Inter Tight"; font-size: 143px; font-style: normal; font-weight: 700; line-height: 108px; letter-spacing: -1.48px; text-transform: uppercase; position: absolute; } .th-banner-wrapper-3 { padding-top: 170px; } @media (max-width: 1200px) { .th-banner-wrapper-3 { padding-top: 100px; } } /*----------------------------------------*/ /* 7.8 Pricing css /*----------------------------------------*/ .th-pricing-area { background-size: cover; background-position: center; background-repeat: no-repeat; } .th-pricing-box-wrap { border: 1px solid #2F2F2F; border-radius: 16px; padding: 40px; transition: 0.3s; } .th-pricing-box-wrap:hover { border: 1px solid var(--primary-color-2); transition: 0.3s; } @media only screen and (min-width: 768px) and (max-width: 991px) { .th-pricing-box-wrap { padding: 20px; } } @media (max-width: 575px) { .th-pricing-box-wrap { padding: 30px; } } .th-pricing-box-heading-wrap .title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--secondary-color); } .th-pricing-box-heading-wrap .th-para { padding-top: 8px; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--text-color); padding-bottom: 24px; border-bottom: 1px solid #2F2F2F; } .th-pricing-box-heading-wrap .th-price { padding-top: 44px; font-size: 56px; line-height: 1; font-weight: 600; color: var(--primary-color-2); } .th-pricing-box-heading-wrap .th-price span { color: var(--text-color); font-size: 16px; line-height: 1; font-weight: 400; text-transform: uppercase; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-pricing-box-heading-wrap .th-price { margin-bottom: 20px; } } .th-pricing-list ul li { font-size: 16px; line-height: 24px; font-weight: 400; color: var(--text-color); transition: 0.3s; margin-bottom: 20px; } .th-pricing-list ul li span img { margin-right: 8px; } .th-pricing-list ul li:last-child { margin-bottom: 0; } .th-pricing-btn { display: inline-block; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--primary-color-2); border: 1px solid #4C40F7; border-radius: 100px; padding: 12px; margin-top: 48px; transition: 0.3s; text-align: center; text-transform: uppercase; } .th-pricing-btn span img { transition: 0.3s; } .th-pricing-btn:hover { background: var(--primary-color-2); transition: 0.3s; color: var(--secondary-color); } .th-pricing-btn:hover span img { filter: brightness(0) invert(1); transition: 0.3s; } .toggle-wrapper { display: flex; align-items: center; justify-content: center; gap: 15px; margin-top: 20px; background: #121212; padding: 16px 24px; border-radius: 100px; } .toggle-label { font-size: 16px; line-height: 24px; color: var(--secondary-color); } .save { font-size: 14px; color: #6366f1; padding: 3px 8px; border-radius: 20px; margin-left: 5px; line-height: 20px; } .switch { position: relative; width: 60px; height: 30px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; background: var(--secondary-color); border-radius: 50px; top: 0; left: 0; right: 0; bottom: 0; transition: 0.4s; } .slider:before { content: ""; position: absolute; height: 22px; width: 22px; left: 4px; bottom: 4px; background: #6366f1; border-radius: 50%; transition: 0.4s; } input:checked + .slider:before { transform: translateX(30px); } /*----------------------------------------*/ /* 7.11 Error css /*----------------------------------------*/ .th-error-content .th-tuitle { font-size: 56px; line-height: 64px; font-weight: 700; color: #FFFFFF; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .th-error-content .th-tuitle { font-size: 30px; line-height: 35px; } } .th-error-content .th-para { font-size: 16px; line-height: 24px; font-weight: 400; color: #B4B2B2; } /*----------------------------------------*/ /* 7.13 Documentation /*----------------------------------------*/ .vl-into { border-bottom: 1px solid #DFE0E4; padding-bottom: 48px; margin-bottom: 48px; } .vl-into .title { color: var(--vl-black); font-size: 44px; line-height: 52px; font-weight: 400; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-into .title { font-size: 30px; line-height: 40px; } } .vl-into .para { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--vl-text-2); } .vl-into ul li img { margin-right: 8px; } .vl-into ul li { width: 50%; float: left; margin-bottom: 16px; color: var(--vl-text-2); font-size: 18px; line-height: 18px; font-weight: 500; } @media only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) { .vl-into ul li { width: 100%; float: inherit; } } .vl-into-2 ul li { float: inherit; width: 100%; } .vl-doc-ck { font-size: 20px; line-height: 20px; font-weight: 600; color: var(--vl-black); transition: 0.3s; } .vl-intobg img { border-radius: 20px; height: 396px; object-fit: cover; } /*----------------------------------------*/ /* 4.1 Main menu css /*----------------------------------------*/ .th-offcanvas-menu ul { list-style: none; } .th-offcanvas-menu ul li { position: relative; } .th-offcanvas-menu ul li a { padding: 8px 0; display: block; font-size: 16px; font-weight: 500; } .th-offcanvas-menu ul li a span.menu-dwn-arrow { display: none; } .th-offcanvas-menu ul li > a { border-bottom: 1px solid rgba(1, 15, 28, 0.1); } .th-offcanvas-menu ul li.active > a { color: var(--primary-color); } .th-offcanvas-menu ul li.active > .th-menu-close { border-bottom: var(--th-theme-color); color: var(--white-color); background: var(--black-bg); } .th-offcanvas-menu ul li.active > .th-menu-close i { transform: rotate(90deg); } .th-offcanvas-menu ul li .sub-menu { display: none; padding-left: 20px; } .th-offcanvas-menu ul li .sub-menu ul li a:hover { color: var(--th-border-1); } .th-offcanvas-menu-2 ul li a span.menu-dwn-arrow { display: none; } .th-offcanvas-menu-2 ul li.active > a { color: #D72CF1; } .th-offcanvas-menu-2 ul li.active > .th-menu-close { background: #D72CF1; } .th-offcanvas-menu-2 ul li.active > .th-menu-close i { transform: rotate(90deg); } .th-offcanvas-menu-2 ul li .sub-menu ul li a:hover { color: #D72CF1; } .th-menu-close { position: absolute; right: 0; top: 7px; border: 1px solid rgba(1, 15, 28, 0.12); height: 30px; width: 30px; text-align: center; font-size: 12px; line-height: 30px; border-radius: 4px; } .th-menu-close i { transition: 0.3s; } /*# sourceMappingURL=style.css.map */ .logogj{ font-size:25px; font-weight: bold; color:#fff; font-family: "arial black"; letter-spacing: -1.5px; } .logogjb{ font-size:25px; font-weight: bold; color:#000; font-family: "arial black"; letter-spacing: -1.5px; } @media (max-width: 575px) { .idea { font-size: 40px !important; } .ia { font-size: 50px !important; } .img-card{ display: none !important; } } @media (max-width: 575px) { .ia { font-size: 35px !important; } } h5.preloader-text::after { content: "gusjarrin"; }