/* * Project Name : Firexa - Car Modification WordPress Theme * Author : technoqube.com * Version : 1.0 * Design and Developed by : TechnoQube */ /* ================================================== Table Of Content - start ================================================== */ /* 1 - Template Global Settings * 1.01 - Template Reset & Global Variables * 1.02 - Body * 1.03 - Headings * 1.04 - General * 1.05 - Container * 1.06 - Main Content Area * 1.07 - Custom Scrollbar 2 - Template Layout * 2.01 - Header * 2.02 - Section Title * 2.03 - Breadcrumb * 2.04 - Footer * 2.05 - Sidebar 3 - Template UI Components * 3.01 - Button Core * 3.02 - Pagination * 3.03 - Custom CSS 4 - Template Effects & Interactions * 4.01 - Loading * 4.02 - Back To Top 5 - Template Content Modules * 5.01 - Blog * 5.02 - Portfolio Box * 5.03 - Isotope Portfolio * 5.04 - Portfolio Slider * 5.05 - Portfolio Single * 5.06 - Service Box * 5.07 - Service Single * 5.08 - Process Step * 5.09 - Team * 5.10 - Testimonial * 5.11 - Pricing Plan * 5.12 - Counter * 5.13 - Accordion * 5.14 - After-Before * 5.15 - Youtube Video * 5.16 - Section Shape * 5.17 - Insta Gallery * 5.18 - Icon List * 5.19 - Branch Location Map * 5.20 - Search Page 6 - Template Sliders & Carousels * 6.01 - OWL Carousel 7 - Template Forms & Media * 7.01 - Form 8 - Elementor Widgets * 8.01 - Elementor Editor /* Table Of Content - End ================================================== */ /* ================================================== 1.01 - Template Reset & Global Variables - Start ================================================== */ :root { --primary-color: #EB5232; --dark-color: #2B2626; --secondary-color: #8E8E8E; --grey-color: #FFF5F3; --white-color: #ffffff; --light-white: #ffffff2b; --light-black: #2B26261F; --body-fonts: "Stack Sans Headline", sans-serif; --title-fonts: "Stack Sans Headlinet", sans-serif; --tec--small--border-radius: 5px; --tec--border-radius: 20px; --big-border-radius: 900px; --transition: all 0.5s ease-in-out; } /* Template Reset & Global Variables - End ================================================== */ /* ================================================== 1.02 - Body - Start ================================================== */ body { background: var(--white-color); font-family: var(--body-fonts); font-size: 16px; font-style: normal; font-weight: normal; line-height: 1.5; color: var(--secondary-color); overflow-x: hidden; } /* Body - End ================================================== */ /* ================================================== 1.03 - Headings - Start ================================================== */ h1, h2, h3, h4, h5, h6 { font-family: var(--title-fonts); color: var(--dark-color); font-style: normal; text-transform: capitalize; font-weight: 600; margin: 0; word-wrap: break-word; -ms-word-wrap: break-word; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } h1 { font-size: 40px; line-height: 48px; } h2 { font-size: 36px; line-height: 44px; } h3 { font-size: 32px; line-height: 40px; } h4 { font-size: 28px; line-height: 36px; } h5 { font-size: 24px; line-height: 32px; } h6 { font-size: 20px; line-height: 28px; } /* Headings - End ================================================== */ /* ================================================== 1.04 - General - Start ================================================== */ /* HTML Tags */ a, .button { color: var(--primary-color); outline: none !important; text-decoration: none; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } a:focus, a:hover { color: var(--primary-color); outline: none; text-decoration: none !important; } p { margin-bottom: 30px; } img { max-width: 100%; height: auto; } pre { background: var(--white-color); padding: 15px; border: 1px solid var(--grey-color); } hr { margin: 0; padding: 0px; border-bottom: 1px solid #e0e0e0; border-top: 0px; } b, strong { font-weight: 600; } /* Lists (Nested) */ ol, ul { padding-left: 25px; margin-bottom: 1em; list-style: none; } ol li { list-style: decimal; } ol ol { padding-left: 25px; } ul li { list-style: inherit; } /* Definition Lists */ dl dd { margin-bottom: 15px; } dl dd:last-child { margin-bottom: 0px; } /* Table */ table { border: 2px solid var(--light-black); width: 100%; margin-bottom: 20px; } table td, table th { border: 2px solid var(--light-black); padding: 8px; } /* Input Textarea */ input, input.form-control { background: var(--grey-color); border: 1px solid var(--grey-color); color: var(--dark-color); width: 100%; font-size: 16px; padding: 0 15px; height: 54px; line-height: 54px; outline: none; -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); border-radius: var(--tec--border-radius); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } input:focus, input:hover, textarea:focus, textarea:hover, .form-control:focus { border-color: var(--primary-color); outline: none; } input[type="radio"], input[type="checkbox"] { width: auto; height: auto; margin-right: 5px; } textarea { background: var(--grey-color); border: 1px solid var(--grey-color); color: var(--dark-color); width: 100%; float: left; padding: 10px 15px; outline: none; -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); border-radius: var(--tec--border-radius); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } /* Select */ select, select.form-control { background: var(--grey-color); border: 1px solid var(--grey-color); color: var(--dark-color); width: 100%; font-size: 16px; padding: 0 15px; height: 54px; line-height: 54px; outline: none; -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); border-radius: var(--tec--border-radius); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: right 16px bottom 50%; background-size: 20px 20px; } /* General - End ================================================== */ /* ================================================== 1.05 - Container - Start ================================================== */ .container { max-width: 1400px; } /* Container - End ================================================== */ /* ================================================== 1.06 - Main Content Area - Start ================================================== */ .content-area .site-main { padding: 120px 0; display: block; width: 100%; overflow: hidden; } /* Main Content Area - End ================================================== */ /* ================================================== 1.07 - Custom Scrollbar - Start ================================================== */ html::-webkit-scrollbar { width: 8px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } html::-webkit-scrollbar-track { background-color: var(--grey-color); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } html::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } /* Custom Scrollbar - End ================================================== */ /* ================================================== 2.01 - Header - Start ================================================== */ /* Main Header Logo*/ .techq-header-logo a img { height: 60px; } /* Main Header */ .header-navbar-wrap { display: flex; align-items: center; gap: 30px; padding: 15px 20px; background-color: var(--grey-color); border-radius: var(--tec--small--border-radius); } .header-navbar-wrap .header-navbar-nav { display: flex; align-items: center; gap: 45px; margin: 0; padding: 0; } .header-navbar-wrap .header-navbar-nav .menu-item { position: relative; } .header-navbar-wrap .header-navbar-nav>.menu-item>a { color: var(--dark-color); text-transform: capitalize; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); position: relative; z-index: 1; } .header-navbar-wrap .header-navbar-nav>.menu-item.current-menu-parent>a, .header-navbar-wrap .header-navbar-nav>.menu-item>a:hover, .header-navbar-wrap .header-navbar-nav>.menu-item>a:focus { color: var(--primary-color); } .header-navbar-wrap .header-navbar-nav > .menu-item.current-menu-item > a { color: var(--primary-color); } .header-navbar-wrap .header-navbar-nav .menu-item i { margin-left: 5px; display: none; } .header-navbar-wrap .header-navbar-nav .menu-item>.sub-menu { position: absolute; left: 0; top: 62px; min-width: 250px; margin: 0; background-color: var(--grey-color); box-shadow: 0px 30px 70px rgba(137, 139, 142, 0.15); transform: scaleY(0); transform-origin: top; transition: all 0.25s ease-in-out; visibility: hidden; opacity: 0; z-index: 9; border-radius: var(--tec--small--border-radius); -webkit-border-radius: var(--tec--small--border-radius); -moz-border-radius: var(--tec--small--border-radius); padding: 5px 0; } .header-navbar-wrap .header-navbar-nav .menu-item>.sub-menu>li>.sub-menu { left: 100%; top: 0; } .techq-sticky-header-custom:not(.techq-sticky) .header-navbar-wrap .header-navbar-nav .menu-item:hover>.sub-menu { visibility: hidden; opacity: 0; transform: scaleY(0); } .header-navbar-wrap .header-navbar-nav .menu-item:hover>.sub-menu { visibility: visible; opacity: 1; transform: scaleY(1); } .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item a { display: block; color: var(--dark-color); padding: 5px 20px; line-height: 34px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item.current-menu-item a { color: var(--primary-color); } .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item:hover>a, .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item:focus>a { color: var(--primary-color); transform: translateX(8px); } .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item i { display: block; position: absolute; right: 30px; top: 50%; transform: translateX(50%); color: var(--dark-color); rotate: -90deg; margin: 0; } .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item:hover i, .header-navbar-wrap .header-navbar-nav .menu-item .sub-menu .menu-item:focus i { color: var(--primary-color); } @media (max-width : 1200px) { .header-navbar-wrap { display: none; } } /* Header Sticky */ .techq-sticky-header-custom { position: fixed; top: 0; left: 0; right: 0; background-color: #fff; z-index: 999; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transform: translateY(-100%); transition: all 0.3s ease-in-out; } .mobile-menu-visible .techq-header-main .header-sticky { top: 0; left: 0; right: 0; background-color: #fff; z-index: 999; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .admin-bar .techq-sticky-header-custom.techq-sticky { top: 32px; } .techq-sticky-header-custom.techq-sticky.animated { animation: fadeSlideDown 0.5s ease forwards; } @keyframes fadeSlideDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } .techq-sticky-header-custom.techq-sticky.header-animated { animation: fadeSlideUp 0.5s ease forwards; } @keyframes fadeSlideUp { from { transform: translateY(0); } to { transform: translateY(-100%); } } @media (max-width : 782px) { .admin-bar .techq-sticky-header-custom.techq-sticky { top: 46px; } } @media (max-width : 600px) { .admin-bar .techq-sticky-header-custom.techq-sticky { top: 0; } @media (max-width: 600px) { .admin-bar .techq-sticky-header-custom.techq-sticky .techq-mobile-menu { top: 30px; height: calc(100vh - 60px); } } } /* Header Button */ .techq-mini-cart-wrapper { position: relative; display: flex; align-items: center; justify-content: center; } .techq-mini-cart-wrapper .techq-tools-button { color: var(--dark-color); font-size: 18px; display: inline-block; position: relative; } .techq-mini-cart-wrapper .techq-tools-button i { height: 18px; } .techq-mini-cart-wrapper .techq-tools-button:hover { color: var(--primary-color); } .techq-mini-cart-wrapper .techq-tools-button .basket-item-count { font-size: 10px; font-weight: 600; background: var(--primary-color); color: var(--white-color); position: absolute; bottom: 0; right: -6px; height: 16px; width: 16px; line-height: 16px; text-align: center; border-radius: 90px; } /* Header action */ .techq-header-main .header-desktop .header-action .action-list-wrap { display: flex; align-items: center; gap: 20px; margin-bottom: 0; padding: 0; } .techq-header-main .header-desktop .header-action .action-list-wrap li .techq-icon { width: 48px; height: 48px; font-size: 18px; line-height: 1; text-align: center; background-color: #F7931E1F; color: var(--dark-color); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); display: flex; justify-content: center; align-items: center; } .techq-header-main .header-desktop .header-action .action-list-wrap li .techq-icon .toggle-menu { display: inline-flex; align-items: flex-end; flex-direction: column; gap: 4px; width: 26px; } /* +++++ Mobile Header +++++ */ .mobile-menu-visible { overflow: hidden; } .techq-mobile-menu { position: fixed; right: 0; top: 0; width: 300px; max-width: 100%; height: 100vh; z-index: 99; border-radius: 0px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); transform: translateX(100%); background-color: var(--white-color); } .admin-bar .techq-mobile-menu { top: 32px; } .mobile-menu-visible .techq-mobile-menu { transform: translateX(0%); } .techq-mobile-menu .mobile-menu-box { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; max-height: 100%; background: var(--tg-color-white-default); padding: 0px 0px; z-index: 5; box-shadow: -9px 0 14px 0px rgba(0, 0, 0, 0.06); } .techq-mobile-menu .mobile-menu-box .menu-close-btn { position: absolute; left: -35px; top: 0; line-height: 35px; width: 35px; height : 35px; display :flex ; text-align: center; align-items: center; justify-content: center; font-size: 20px; color: var(--white-color); cursor: pointer; z-index: 10; opacity: 0; visibility: hidden; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .mobile-menu-visible .techq-mobile-menu .mobile-menu-box .menu-close-btn { opacity: 1; visibility: visible; } .techq-mobile-menu .mobile-menu-box .menu-close-btn:hover, .techq-mobile-menu .mobile-menu-box .menu-close-btn:focus { color: var(--primary-color); } .techq-mobile-menu .mobile-menu-box .mobile-nav-logo { position: relative; padding: 30px 25px; text-align: left; } .techq-mobile-menu .mobile-menu-box .mobile-nav-logo img { height: 35px; } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav { position: relative; display: block; width: 100%; float: none; margin: 0; padding: 0; } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav .sub-menu { padding-left: 0; } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li { position: relative; display: block; } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li a { position: relative; display: block; line-height: 24px; padding: 15px 10px; font-size: 16px; font-weight: 400; color: var(--dark-color); background-color: transparent; text-transform: capitalize; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); border: none; } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li.current-menu-item a, .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li.current-menu-parent a{ background-color: var(--grey-color); color : var(--primary-color); } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li.open>a { color: var(--primary-color); background-color: var(--grey-color); } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li i { position: absolute; right: 25px; top: 26px; color: var(--dark-color); transform: translateY(-50%); } .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li>a::before { content: ""; position: absolute; left: 0; top: 0; height: 0; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); width: 2px; background: var(--primary-color); pointer-events: none; } .techq-mobile-menu .mobile-menu-box .mobile-social-links { display: flex; position: relative; text-align: center; padding: 30px 20px; align-items: center; flex-wrap: wrap; } .techq-mobile-menu .mobile-menu-box .mobile-social-links .social-links { margin: 0; padding: 0; display: flex; gap: 10px; align-items: center; } .techq-mobile-menu .mobile-menu-box .mobile-social-links .social-links li { position: relative; display: inline-block; margin: 0; } .techq-mobile-menu .mobile-menu-box .mobile-social-links .social-links li a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; position: relative; line-height: 32px; font-size: 16px; color: var(--white-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); background-color: var(--primary-color); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); } .techq-mobile-menu .mobile-menu-box .mobile-social-links .social-links li a:hover { background-color: var(--dark-color); } .techq-mobile-menu-overlay { position: fixed; right: 0; top: 0; width: 100vw; height: 100vh; z-index: 3; transition: all 700ms ease; opacity: 0; visibility: hidden; background: rgba(0, 0, 0, 0.5); } .mobile-menu-visible .techq-mobile-menu-overlay { opacity: 1; visibility: visible; } @media (max-width :1279px) { .header-navbar-wrap .header-navbar-nav { gap: 5px; } } @media (max-width : 1200px) { .techq-mobile-menu .mobile-menu-box .mobile-menu-outer .header-navbar-nav li .sub-menu li a { margin-left: 0; } } /* Search Popup */ .techq-search-popup { position: fixed; top: 0; left: 0; right: 0; width: 100%; background: var(--white-color); backdrop-filter: blur(10px); z-index: 99; transform: translateY(calc(-100% - 80px)); transition: var(--transition), opacity 0.3s ease-in-out; } .techq-search-popup.open { transform: translateY(0%); transition-delay: 0s; z-index: 999; } .techq-search-popup .search-modal { position: relative; } .techq-search-popup .search-modal .search-close { position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 2; } .techq-search-popup .search-modal .search-close .search-close-btn { opacity: 1; background: none; padding: 0; box-shadow: none; width: 54px; height: 54px; font-size: 24px; line-height: 54px; color: var(--dark-color); overflow: hidden; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-search-popup .search-modal .search-close .search-close-btn:hover, .techq-search-popup .search-modal .search-close .search-close-btn:focus { color: var(--primary-color); } .techq-search-popup .search-modal .search-form { padding: 70px 0; } .techq-search-popup .search-modal .search-form .search-input-wrap { height: 54px; position: relative; } .techq-search-popup .search-modal .search-form .search-input { padding-right: 45px; width: calc(100% - 70px); } .techq-search-popup .search-modal .search-form .search-submit { background: transparent; border: none; padding: 0; font-size: 20px; position: absolute; text-align: center; color: var(--secondary-color); line-height: 54px; height: 54px; width: 54px; top: 0; right: 70px; transition: all 0.5s ease-in-out; } .techq-search-popup .search-modal .search-form .search-submit::before { display: none; } .techq-search-popup-overlay { position: fixed; right: 0; top: 0; width: 100%; height: 100%; z-index: 4; transition: all 0.3s; transition-delay: 0.5s; opacity: 0; visibility: hidden; background: #000d25; } .techq-search-popup-overlay.overlay-open { opacity: 0.55; visibility: visible; transition-delay: 0s; } /* Header - End ================================================== */ /* ================================================== 2.02 - Section Title - Start ================================================== */ .techq-section-title.techq-center { padding: 0 15em; margin-bottom: 60px; text-align: center; } .techq-section-title .section-sub-title { display: inline-flex; align-items: center; color: var(--primary-color); border: 1px solid var(--light-black); padding: 4px 15px 4px 32px; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); text-transform: uppercase; position: relative; } .techq-section-title .section-sub-title .sub-title { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; color: var(--primary-color); text-transform: capitalize; } .techq-section-title .section-sub-title i.techq-icon-dot::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; background-color: var(--primary-color); border-radius: 50%; display: inline-block; margin-left: 15px; } .techq-section-title .section-sub-title i { line-height: 1; } .techq-section-title .section-title { font-size: 52px; line-height: 60px; color: var(--dark-color); margin-top: 5px; } .techq-section-title.dark .section-title { color: var(--white-color); } .techq-section-title .section-description { margin-top: 15px; } .techq-section-title.dark .section-description { color: var(--white-color); } @media (max-width: 1199px) { .techq-section-title.techq-center { padding: 0; } } @media (max-width: 1023px) { .techq-section-title .section-title { font-size: 44px; line-height: 52px; } .techq-section-title.techq-center { margin-bottom: 45px; } } @media (max-width: 767px) { .techq-section-title .section-title { font-size: 40px; line-height: 48px; } .techq-section-title.techq-center { margin-bottom: 30px; } } @media (max-width: 479px) { .techq-section-title .section-title { font-size: 36px; line-height: 44px; } } /* Section Title - End ================================================== */ /* ================================================== 2.03 - Breadcrumb - Start ================================================== */ .techq-breadcrumb-style-1 .techq-breadcrumb-title h1 { font-size: 60px; line-height: 68px; color: var(--white-color); } .techq-breadcrumb-style-1 .techq-breadcrumb-nav { margin-top: 15px; } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list { text-align: left; margin: 0; display: inline-flex; align-items: center; padding: 0; gap: 10px; flex-wrap: wrap; } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list li { padding-left: 0; list-style: none; } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list li.active { color: var(--primary-color); } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list .breadcrumb-item+.breadcrumb-item::before { color: var(--white-color); content: "-"; } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list li a { color: var(--white-color); } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list li a:hover { color: var(--primary-color); } .techq-breadcrumb-style-1 .techq-breadcrumb-nav .techq-breadcrumb-list li a i { margin-right: 8px; } .techq-breadcrumb-style-1 .techq-breadcrumb-container .breadcrumb .breadcrumb-item+.breadcrumb-item::before { content: "\e649"; font-size: 12px; font-family: "themify"; padding-right: 5px; color: var(--white-color); float: none; } @media(max-width:1023px) { .techq-breadcrumb-style-1 .techq-breadcrumb-title h1 { font-size: 42px; line-height: 50px; } } @media(max-width:767px) { .techq-breadcrumb-style-1 .techq-breadcrumb-title h1 { font-size: 34px; line-height: 42px; } .techq-breadcrumb-style-1 .techq-breadcrumb-container .breadcrumb .breadcrumb-item+.breadcrumb-item::before { padding-right: 5px; font-size: 12px; } } @media(max-width:479px) { .techq-breadcrumb-style-1 .techq-breadcrumb-title h1 { font-size: 30px; line-height: 38px; } } /* Breadcrumb - End ================================================== */ /* ================================================== 2.04 - Footer - Start ================================================== */ footer#techq-footer { margin: 0 20px 20px; background-color: var(--dark-color); border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); padding-top: 90px; width: auto; overflow: hidden; } footer#techq-footer .footer-wrapper .footer-top-inner { display: grid; grid-template-columns: auto 3fr; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); overflow: hidden; background-color: var(--light-white); } footer#techq-footer .footer-wrapper .footer-top-inner .footer-logo { padding: 30px; background-color: var(--primary-color); } footer#techq-footer .footer-wrapper .footer-top-inner .footer-logo img { height: 60px; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; padding: 30px; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info .footer-contact-item { display: grid; grid-template-columns: 64px 1fr; gap: 15px; align-items: center; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info .footer-contact-item .footer-icon-box { width: 64px; height: 64px; color: var(--white-color); background-color: var(--light-white); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); overflow: hidden; display: inline-flex; justify-content: center; align-items: center; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info .footer-contact-item .footer-icon-box i { font-size: 24px; line-height: 24px; height: 24px; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info .footer-contact-item .footer-label { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; color: var(--primary-color); text-transform: uppercase; display: block; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info .footer-contact-item .footer-text { color: var(--white-color); display: block; } footer#techq-footer .footer-wrapper .footer-main-content { margin-top: 60px; margin-bottom: 45px; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget { display: grid; grid-template-columns: 3fr 2fr 2fr 3fr; gap: 60px; } /* Footer Widget */ footer#techq-footer .widget { background: transparent; padding: 0; box-shadow: none; border: none; margin-bottom: 45px; } footer#techq-footer .widget .footer-title { margin-bottom: 15px; padding: 0; font-size: 26px; position: relative; line-height: 34px; } footer#techq-footer .widget ul li a:hover { color: var(--primary-color); } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget .widget { margin-bottom: 0; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .footer-title { font-size: 24px; line-height: 32px; color: var(--white-color); margin-bottom: 15px; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] p { color: var(--white-color); margin-bottom: 0; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] ul li a { padding-left: 0; color: var(--white-color); } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] ul li a:hover { color: var(--primary-color); transform: translateX(5px); } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] ul li a::before { display: none; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .business-hours p { padding: 5px 0; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .footer-social .social-links { display: flex; gap: 15px; margin-top: 15px; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .footer-social .social-links li { margin-bottom: 0; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .footer-social .social-links li a { width: 48px; height: 48px; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); background-color: var(--light-white); color: var(--primary-color); display: flex; align-items: center; justify-content: center; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .footer-social .social-links li a i { font-size: 18px; line-height: 1; height: 18px; display: inline-block; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form { padding: 15px 0 0; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form .mc4wp-input-box { position: relative; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form .mc4wp-input-box input.submit { background: transparent; border: transparent; font-size: 0; padding: 0; width: 54px; height: 54px; position: absolute; right: 0; top: 0; z-index: 9; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form .mc4wp-input-box .icon-box { width: 54px; height: 54px; z-index: 8; position: absolute; right: 0; top: 0; display: inline-flex; justify-content: center; align-items: center; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form .mc4wp-input-box .icon-box i { font-size: 24px; line-height: 24px; height: 24px; color: var(--primary-color); } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form .techq-term-condition { color: var(--white-color); } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .mc4wp-form .techq-term-condition .tnp-privacy { margin-top: 20px; } /* Footer opyright */ footer#techq-footer .techq-copyright-footer { border-top: 1px solid var(--light-white); } footer#techq-footer .techq-copyright-footer { padding: 15px 0; background: var(--dark-color); text-align: center; color: var(--white-color); } footer#techq-footer .techq-copyright-footer .techq-copyright { display: inline-block; width: 100%; } footer#techq-footer .techq-copyright-footer .techq-copyright a { color: var(--white-color); } footer#techq-footer .techq-copyright-footer .techq-copyright a:hover { color: var(--white-color); text-decoration: underline; } @media (max-width: 1490px) { footer#techq-footer { margin: 0; border-radius: 0; } } @media (max-width: 1199px) { footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info { gap: 15px; padding: 30px 15px; } } @media (max-width: 1099px) { footer#techq-footer .footer-wrapper .footer-top-inner { grid-template-columns: 1fr; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info { gap: 30px; padding: 30px; display: flex; flex-wrap: wrap; } } @media (max-width: 1023px) { footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget { grid-template-columns: 1fr 1fr; gap: 45px; } } @media (max-width: 767px) { footer#techq-footer { padding-top: 60px; } footer#techq-footer .footer-wrapper .footer-main-content { margin-top: 45px; margin-bottom: 45px; } } @media (max-width: 575px) { footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget { grid-template-columns: 1fr; gap: 30px; } footer#techq-footer .footer-wrapper .footer-main-content .footer-content-widget [class^="footer-col-"] .footer-title { margin-bottom: 10px; } } @media (max-width: 497px) { footer#techq-footer .footer-wrapper .footer-top-inner .footer-logo { padding: 30px 15px; } footer#techq-footer .footer-wrapper .footer-top-inner .footer-contact-info { padding: 30px 15px; } } /* Footer - End ================================================== */ /* ================================================== 2.05 - SideBar - Start ================================================== */ .mobile-nav-toggler { display: none; } .toggle-menu-icon { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: var(--dark-color); } .toggle-menu-icon a { color: var(--white-color); } .mobile-nav-toggler .techq-icon { position: relative; width: 50px; height: 50px; line-height : 50px; font-size : 24px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); background-color: var(--dark-color); } .toggle-menu { display: flex; align-items: center; flex-direction: column; gap: 4px; font-size : 24px; color : var(--white-color); } .toggle-menu .top-line, .toggle-menu .top-center, .toggle-menu .top-bottom { width: 20px; height: 3px; background-color: var(--dark-color); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); position: relative; display: inline-block; margin-right: 6px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .toggle-menu .top-line::before, .toggle-menu .top-center::before, .toggle-menu .top-bottom::before { content: ""; position: absolute; right: -6px; top: 0; width: 3px; height: 3px; background-color: var(--dark-color); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); overflow: hidden; } .toggle-menu .top-line { width: 15px; } .toggle-menu:hover .top-line { width: 20px; } .toggle-menu:hover .top-center { width: 15px; } .toggle-menu .top-bottom { width: 12px; } .toggle-menu:hover .top-bottom { width: 18px; } /* SideBar Info */ .techq-sidebar-info { background: var(--white-color); height: calc(100vh - 60px); padding: 30px; position: fixed; right: 0; top: 30px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); width: 420px; z-index: 10000; overflow-y: scroll; inset-inline-end: -440px; display: flex; flex-direction: column; gap: 30px; } .admin-bar .techq-sidebar-info { height: calc(100vh - 92px); top: 62px; } .admin-bar .techq-sticky-header-custom .techq-sidebar-info { top: 32px; } .techq-sidebar-info::-webkit-scrollbar { width: 8px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } .techq-sidebar-info::-webkit-scrollbar-track { background-color: var(--grey-color); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; margin: 2px; } .techq-sidebar-info::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; } .techq-sidebar-info.active { inset-inline-end: 30px; } .techq-sidebar-info .sidebar-close-btn { position: absolute; right: 30px; } .techq-sidebar-info .sidebar-close-btn button { border: none; background-color: var(--primary-color); font-size: 16px; line-height: 40px; height: 40px; width: 40px; padding: 0; color: var(--white-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-sidebar-info .sidebar-close-btn button:hover { background-color: var(--dark-color); } .techq-sidebar-info .sidebar-logo img { max-height: 60px; } .techq-sidebar-info .sidebar-side-info .contact-title { font-size: 22px; line-height: 30px; } .techq-sidebar-info .sidebar-social-icon .social-title { font-size: 22px; line-height: 30px; } .techq-sidebar-info .sidebar-description p { margin-bottom: 0; } .techq-sidebar-info .widget { padding: 0; background-color: var(--white-color); } .techq-sidebar-info .widget .wp-block-heading { font-size: 22px; line-height: 30px; margin-bottom: 15px; } .techq-sidebar-info .widget .wp-block-search__input { padding: 0 15px; background: var(--grey-color); border-color: var(--grey-color); } .techq-sidebar-info .sidebar-side-info .contact-list { color: var(--dark-color); display: flex; gap: 15px; margin-top: 10px; align-items: flex-start; } .techq-sidebar-info .sidebar-side-info .contact-list a { color: var(--dark-color); display: flex; gap: 15px; align-items: flex-start; } .techq-sidebar-info .sidebar-side-info .contact-list i { height: 18px; display: inline-block; color: var(--primary-color); } .techq-sidebar-overlay { position: fixed; background: var(--dark-color); top: 0; left: 0; height: 100vh; width: 100%; z-index: 9999; opacity: 0; visibility: hidden; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-sidebar-overlay.active { opacity: 0.7; visibility: visible; } /* SideBar Social Icon */ .sidebar-social-icon { margin-top: auto; } .sidebar-social-icon ul { display: inline-block; width: 100%; padding: 0; margin: 15px 0 0 0; } .sidebar-social-icon ul li { display: inline-block; padding: 0; margin: 0; margin-right: 5px; } .sidebar-social-icon ul li:last-child { margin-right: 0; } .sidebar-social-icon ul li a { background: var(--grey-color); color: var(--dark-color); width: 50px; height: 50px; line-height: 50px; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); display: inline-block; text-align: center; position: relative; } .sidebar-social-icon ul li a:hover { background: var(--primary-color); color: var(--white-color); } @media (max-width : 1200px) { .mobile-nav-toggler { display: block; } } @media (max-width: 782px) { .admin-bar .techq-sidebar-info { height: calc(100vh - 106px); top: 30px; } } /* SideBar - End ================================================== */ /* ================================================== 3.01 - Button Core - Start ================================================== */ [type="button"], [type="reset"], [type="submit"] { padding: 10px 30px; font-size: 16px; line-height: 2; font-family: var(--body-fonts); text-transform: uppercase; background: var(--primary-color); color: var(--white-color); display: inline-block; border: none; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); width: auto; height: auto; } [type="button"]:hover, [type="reset"]:hover, [type="submit"]:hover { color: var(--white-color); background-color: var(--dark-color); } .techq-button .button-content { position: relative; padding: 6px 6px 6px 20px; font-family: var(--body-fonts); text-transform: capitalize; background: var(--primary-color); color: var(--white-color); display: inline-flex; align-items: center; gap: 10px; overflow: hidden; width: auto; height: auto; font-size: 16px; line-height: 24px; vertical-align: middle; border: none; border-radius: var(--big-border-radius); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-button .button-content:hover, .techq-button .button-content:focus { color: var(--white-color); background-color: var(--dark-color); } .techq-button .button-content .button-label { position: relative; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-button .button-content .button-icon { width: 40px; height: 40px; background-color: var(--dark-color); color: var(--white-color); font-size: 18px; line-height: 40px; overflow: hidden; transition: var(--transition); display: flex; justify-content: center; border-radius : var(--big-border-radius); } .techq-button .button-content:hover .button-icon, .techq-button .button-content:focus .button-icon { background-color: var(--primary-color); } .techq-button .button-content .button-icon i { display: inline-block; transform: rotate(-45deg); transition: var(--transition); } .techq-button .button-content:hover .button-icon i, .techq-button .button-content:focus .button-icon i { transform: rotate(0deg); } .techq-button .button-content .button-icon i:before { line-height : inherit; } /*===== Button link =====*/ .techq-button .button-content.btn-link { padding: 0; background: transparent; color: var(--primary-color); border-radius: 0; } .techq-button .button-content.btn-link:hover { color: var(--primary-color); } .techq-button .button-content.btn-link::before { content: ''; position: absolute; top: initial; bottom: 1px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: all 0.4s ease-in-out; transform: none; transition-delay: 0.1s; } .techq-button .button-content.btn-link:hover::before { width: 100%; } .techq-button .button-content.btn-link::after { content: ''; position: absolute; bottom: 1px; right: 0; width: 100%; height: 2px; background-color: var(--primary-color); transition: all 0.4s ease-in-out; } .techq-button .button-content.btn-link:hover::after { width: 0; } /*===== Button outline =====*/ .techq-button .button-content.btn-border { background: transparent; border: 1px solid var(--primary-color); color: var(--primary-color); } .techq-button .button-content.btn-border:hover, .techq-button .button-content.btn-border:focus { border: 1px solid var(--dark-color); color: var(--dark-color); } .techq-button .button-content.btn-border::before { display: none; } /*===== Button Round =====*/ .techq-button-round { overflow: hidden; letter-spacing: 1px; font-family: var(--title-fonts); font-weight: 400; text-transform: uppercase; line-height: 2; font-size: 16px; background: transparent; border: 2px solid var(--primary-color); color: var(--primary-color); display: inline-flex; width: 150px; height: 150px; text-align: center; justify-content: center; align-items: center; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); } .techq-button-round .techq-button-block .techq-button-text { z-index: 9; position: relative; display: block; transform: translateY(0%); transition: all 0.3s ease-in-out; } .techq-button-round:hover .techq-button-block .techq-button-text { transform: translateY(-100%); } /*===== Icon Button =====*/ .techq-icon-button { overflow: hidden; } .techq-icon-button a { width: 60px; height: 60px; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); font-size: 24px; line-height: 58px; display: inline-block; color: var(--dark-color); background-color: var(--grey-color); text-align: center; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); border: 1px solid var(--dark-color); } .techq-icon-button a:hover { color: var(--white-color); background-color: var(--dark-color); } .techq-icon-button a i { display: inline-block; transform: translate(0, 0); } .techq-icon-button a:hover i { animation: button-animation 0.4s linear; } /* Button Core - End ================================================== */ /* ================================================== 3.02 - Icon Button - Start ================================================== */ .techq-round-btn a { width: 56px; height: 56px; font-size: 18px; line-height: 56px; display: inline-block; color: var(--dark-color); background-color: var(--grey-color); text-align: center; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); border: 1px solid var(--dark-color); vertical-align: middle; overflow: hidden; } .techq-round-btn a:hover { color: var(--white-color); background-color: var(--dark-color); } .techq-round-btn a i { display: inline-block; transform: translate(0, 0); height: 56px; } .techq-round-btn a:hover i { animation: button-animation 0.4s linear; } @keyframes button-animation { 0% { transform: translate(0, 0); opacity: 1; } 50% { transform: translate(40px, -40px); opacity: 0; } 51% { transform: translate(-40px, 40px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } } /* Icon Button - End ================================================== */ /* ================================================== 3.03 - Pagination - Start ================================================== */ .techq-pagination .page-numbers { display: flex; gap: 5px; align-items: center; text-align: center; padding: 0; margin: 0; width: 100%; } .techq-pagination .page-numbers li:first-child .page-numbers { margin-left: 0; } .techq-pagination .page-numbers li .page-numbers { position: relative; display: block; height: 50px; width: 50px; padding: 0 15px; text-align: center; line-height: 50px; color: var(--white-color); background-color: var(--dark-color); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); text-transform: capitalize; } .techq-pagination .page-numbers li .next.page-numbers { padding: 0 20px; } .techq-pagination .page-numbers li .page-numbers:hover { background-color: var(--primary-color); z-index: 2; } .techq-pagination .page-numbers li .page-numbers:not(:disabled) { cursor: pointer } .techq-pagination .page-numbers li .page-numbers.current { color: var(--white-color); background: var(--primary-color); z-index: 1; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-pagination .page-numbers li .next.page-numbers, .techq-pagination .page-numbers li .prev.page-numbers { width: auto; } @media(max-width:767px) { .techq-pagination .page-numbers li .next.page-numbers, .techq-pagination .page-numbers li .prev.page-numbers { width: auto; display: none; } } /* Pagination - End ================================================== */ /* ================================================== 3.04 - Custom CSS - Start ================================================== */ [class^="ti-"]::before, [class*=" ti-"]::before, i::before { line-height: inherit !important; } .backdrop-filter { backdrop-filter: blur(10px); } .elementor-height-100, .elementor-height-100>* { height: -webkit-fill-available !important; } .elementor-widget-technoq_section_shape { position: static; } .width--1060 { width: calc(100vw - 1060px); } /* Custom CSS - End ================================================== */ /* ================================================== 4.01 - Loading - Start ================================================== */ #techq-loading { display: flex; flex-direction: column; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--white-color); z-index: 9999; transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible; } #techq-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; } #techq-loading img { height: 90px; max-width: 100%; object-fit: contain; } @media (max-width: 767px) { #techq-loading img { height: 70px; } } /* Loading - End ================================================== */ /* ================================================== 4.02 - Back to Top - Start ================================================== */ .backtotop-wrap { position: fixed; right: 30px; bottom: 30px; height: 60px; width: 60px; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 9999; padding: 0; background-color: var(--white-color); -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); } .backtotop-wrap.active { opacity: 1; visibility: visible; } .backtotop-wrap svg path { fill: none; stroke: var(--primary-color); stroke-width: 5; transition: stroke-dashoffset 10ms linear; } /* Percentage Text */ .backtotop-percentage { position: absolute; font-size: 12px; font-weight: 600; color: var(--primary-color); pointer-events: none; user-select: none; margin-bottom: 0; } /* Back to Top - End ================================================== */ /* ================================================== 5.01 - Blog - Start ================================================== */ /* Blog Box */ .techq-blog-post .blog-img { position: relative; } .techq-blog-post .blog-img img { width: 100%; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); } .techq-blog-post .techq-icon { font-size: 16px; line-height: 16px; height: 16px; } .techq-blog-post .blog-img .blog-date { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; color: var(--white-color); text-transform: uppercase; background-color: var(--primary-color); padding: 10px 15px; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); position: absolute; left: 30px; bottom: 30px; display: flex; align-items: center; gap: 10px; } .techq-blog-post .blog-img .blog-date a { color: var(--white-color); } .techq-blog-post .blog-img+.techq-post-meta { margin-top: 10px; } .techq-blog-post .techq-post-meta ul { padding: 0; margin: 0; display: flex; gap: 15px; } .techq-blog-post .techq-post-meta ul li { display: flex; gap: 8px; align-items: center; } .techq-blog-post .techq-post-meta ul li .techq-icon { color: var(--primary-color); } .techq-blog-post .techq-post-meta ul li a { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; color: var(--primary-color); text-transform: uppercase; } .techq-blog-post .blog-contain .blog-title { font-size: 28px; line-height: 36px; color: var(--dark-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); margin-top: 15px; } .techq-blog-post .blog-contain .blog-title:hover { color: var(--primary-color); } .techq-blog-post .blog-contain .blog-excerpt { margin-top: 15px; margin-bottom: 0; } .techq-blog-post .blog-contain .techq-button { margin-top: 30px; } .techq-blog-post .blog-contain .techq-round-btn { margin-top: 15px; } .techq-blog-post .blog-contain .techq-round-btn a { border: none; background-color: var(--dark-color); color: var(--white-color); } .techq-blog-post:hover .blog-contain .techq-round-btn a { background-color: var(--primary-color); } @media (max-width: 767px) { .techq-blog-post .blog-img .blog-date { left: 15px; bottom: 15px; } } /* Blog List */ .techq-blog-post.blog-list { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 30px; } .techq-blog-post.blog-list .blog-img img { aspect-ratio: 5/3.36; object-fit: cover; } .techq-blog-post.blog-list .blog-contain .blog-title { font-size: 24px; line-height: 32px; } .techq-blog-post.blog-list .techq-post-meta { margin-top: 0; } @media (max-width:767px) { .techq-blog-post.blog-list { grid-template-columns: 1fr; } .techq-blog-post.blog-list .blog-img img { aspect-ratio: initial; } } /* Blog 1 Column */ .techq-blog-layout { display: flex; flex-direction: column; gap: 45px 30px; } .techq-blog-layout.techq-blog-col-1 .techq-posts-area { display: grid; grid-template-columns: 1fr; gap: 45px; } .techq-blog-layout.techq-blog-col-1 .techq-blog-post { margin-bottom: 0; } /* Blog 2 Column */ .techq-blog-layout.techq-blog-col-2 .techq-posts-area { display: grid; grid-template-columns: 1fr 1fr; gap: 45px 30px; } .techq-blog-layout.techq-blog-col-2 .techq-blog-post { margin-bottom: 0; } @media(max-width:767px) { .techq-blog-layout.techq-blog-col-2 .techq-posts-area { grid-template-columns: 1fr; } } /* Blog 3 Column */ .techq-blog-layout.techq-blog-col-3 .techq-posts-area { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 45px 30px; } .techq-blog-layout.techq-blog-col-3 .techq-blog-post { margin-bottom: 0; } @media(max-width:1023px) { .techq-blog-layout.techq-blog-col-3 .techq-posts-area { grid-template-columns: 1fr 1fr; } } @media(max-width:767px) { .techq-blog-layout.techq-blog-col-3 .techq-posts-area { grid-template-columns: 1fr; } .techq-blog-post .blog-contain .blog-title { font-size: 24px; line-height: 32px; } } /* Blog Slider */ .techq-blog-layout.techq-slider .techq-blog-post { margin-bottom: 0; } .single-post .techq-blog-post { margin-bottom: 0; } /* Blog Page */ .techq-blog-layout { display: grid; grid-template-columns: 1fr; gap: 45px 30px; } .techq-blog-layout.right-sidebar { grid-template-columns: 2fr 1fr; } .techq-blog-layout.left-sidebar { grid-template-columns: 1fr 2fr; } .techq-blog-layout.left-sidebar .sidebar-wrapper { order: -1; } .techq-blog-layout .techq-posts-main { display: flex; flex-direction: column; gap: 45px; } .techq-blog-layout .techq-posts-area { display: grid; grid-template-columns: 1fr; gap: 45px 30px; } .techq-blog-layout.techq-one-column .techq-posts-area { grid-template-columns: 1fr; } .techq-blog-layout.techq-two-column .techq-posts-area { grid-template-columns: 1fr 1fr; } .techq-blog-layout.techq-three-column .techq-posts-area { grid-template-columns: 1fr 1fr 1fr; } .techq-blog-layout.techq-four-column .techq-posts-area { grid-template-columns: 1fr 1fr 1fr 1fr; } @media(max-width: 1600px) { .techq-blog-layout.techq-four-column.right-sidebar .techq-posts-area, .techq-blog-layout.techq-four-column.left-sidebar .techq-posts-area { grid-template-columns: 1fr 1fr 1fr; } } @media(max-width: 1399px) { .techq-blog-layout.techq-three-column.right-sidebar .techq-posts-area, .techq-blog-layout.techq-three-column.left-sidebar .techq-posts-area { grid-template-columns: 1fr 1fr; } .techq-blog-layout.techq-four-column.right-sidebar .techq-posts-area, .techq-blog-layout.techq-four-column.left-sidebar .techq-posts-area { grid-template-columns: 1fr 1fr; } } @media(max-width: 1199px) { .techq-blog-layout.techq-two-column.right-sidebar .techq-posts-area, .techq-blog-layout.techq-two-column.left-sidebar .techq-posts-area { grid-template-columns: 1fr; } .techq-blog-layout.techq-three-column.right-sidebar .techq-posts-area, .techq-blog-layout.techq-three-column.left-sidebar .techq-posts-area { grid-template-columns: 1fr; } .techq-blog-layout.techq-four-column.right-sidebar .techq-posts-area, .techq-blog-layout.techq-four-column.left-sidebar .techq-posts-area { grid-template-columns: 1fr; } } @media(max-width: 991px) { .techq-blog-layout.right-sidebar, .techq-blog-layout.left-sidebar { grid-template-columns: 1fr; } .techq-blog-layout.left-sidebar .sidebar-wrapper { order: initial; } } /* Blog Single Page */ .techq-blog-post-wrapper .techq-blog-layout.single-layout { display: grid; grid-template-columns: 1fr; gap: 30px; } .techq-blog-post-wrapper .techq-blog-layout.single-layout.right-sidebar { grid-template-columns: 2fr 1fr; } .techq-blog-post-wrapper .techq-blog-layout.single-layout.left-sidebar { grid-template-columns: 1fr 2fr; } .techq-blog-post-wrapper .techq-blog-layout.single-layout.left-sidebar .sidebar-wrapper { order: -1; } @media(max-width:991px) { .techq-blog-post-wrapper .techq-blog-layout.single-layout.right-sidebar { grid-template-columns: 1fr; } .techq-blog-post-wrapper .techq-blog-layout.single-layout.left-sidebar { grid-template-columns: 1fr; } .techq-blog-post-wrapper .techq-blog-layout.single-layout.left-sidebar .sidebar-wrapper { order: initial; } } /* Blog Recent Posts */ .techq-recent-post { display: grid; grid-template-columns: 110px 1fr; margin-top: 30px; gap: 15px; } .techq-recent-post .techq-recent-post-media img { height: 110px; object-fit: cover; } .techq-recent-post .techq-recent-post-info h2 { font-size: 18px; line-height: 26px; margin-bottom: 5px; } .techq-recent-post .techq-recent-post-info .pq-post-date { font-family: var(--title-fonts); font-weight: 600; font-size: 18px; line-height: 26px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-color); } .techq-recent-post .techq-recent-post-info .pq-post-date i { margin-right: 10px; } @media (max-width: 397px) { .techq-recent-post { grid-template-columns: 1fr; } } /* Blog - End ================================================== */ /* ================================================== 5.02 - Portfolio Box - Start ================================================== */ /* Portfolio Box Grid */ .techq-portfolio-layout.techq-portfolio-col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } @media (max-width: 767px) { .techq-portfolio-layout.techq-portfolio-col-2 { grid-template-columns: 1fr; } } /* Portfolio Box Common */ .techq-portfolio-box-1 { position: relative; } .techq-portfolio-box-1 .portfolio-image { position: relative; overflow: hidden; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); } .techq-portfolio-box-1 .portfolio-image img { width: 100%; height: auto; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-portfolio-box-1:hover .portfolio-image img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } .techq-portfolio-box-1 .portfolio-info .portfolio-category { font-family: var(--title-fonts); font-size: 18px; line-height: 26px; color: var(--primary-color); text-transform: uppercase; } .techq-portfolio-box-1 .portfolio-info { margin-top: 15px; width: calc(100% - 55px); display: inline-block; } .techq-portfolio-box-1 .portfolio-info .portfolio-title { font-size: 24px; line-height: 32px; color: var(--dark-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-portfolio-box-1 .portfolio-info .portfolio-title:hover { color: var(--primary-color); } .techq-portfolio-box-1 .icon-button { width: 40px; height: 40px; float: right; margin-top: 20px; background-color: var(--primary-color); text-align: center; line-height: 40px; color: var(--white-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-portfolio-box-1 .icon-button:hover { background-color: var(--dark-color); } .techq-portfolio-box-1 .icon-button i { color: var(--white-color); transform: translate(0, 0); display: inline-block; transition: var(--transition); } .techq-portfolio-box-1 .icon-button:hover i { animation: button-animation 0.4s linear; } /* Portfoliobox Animation fade */ .techq-portfolio-box-1.anim-fade { text-align: center; } .techq-portfolio-box-1.anim-fade:before { opacity: 0; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: inline-block; background: var(--dark-color); z-index: 1; transition: all 0.3s ease-in-out; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); } .techq-portfolio-box-1.anim-fade:hover:before { opacity: 0.9; } .techq-portfolio-box-1.anim-fade .portfolio-info { padding: 0; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; display: grid; align-items: center; justify-content: center; align-content: center; justify-items: center; opacity: 0; transform: translate(0px, 30px); transition: all 0.4s cubic-bezier(0.47, 0, 0.745, 0.715); } .techq-portfolio-box-1.anim-fade .portfolio-info .portfolio-title { margin-bottom: 5px; } .techq-portfolio-box-1.anim-fade .portfolio-info .portfolio-title a { color: var(--white-color); } .techq-portfolio-box-1.anim-fade:hover .portfolio-info { opacity: 1; transform: translate(0px, 0); } .techq-portfolio-box-1.anim-fade .icon-button { display: none; } /* Portfoliobox Animation Slide */ .techq-portfolio-box-1.anim-slide { overflow: hidden; } .techq-portfolio-box-1.anim-slide .portfolio-info { position: absolute; bottom: 30px; left: 0; z-index: 1; transform: translate(-100%, 0px); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); padding: 15px; background-color: var(--white-color); border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); text-align: left; margin-top: 0; max-width: calc(100% - 60px); } .techq-portfolio-box-1.anim-slide:hover .portfolio-info { transform: translate(0px, 0px); left: 30px; } .techq-portfolio-box-1.anim-slide .portfolio-info .portfolio-title a { color: var(--dark-color); font-size: 24px; line-height: 32px; } .techq-portfolio-box-1.anim-slide .portfolio-info .portfolio-title a:hover { color: var(--primary-color); } .techq-portfolio-box-1.anim-slide .portfolio-info .portfolio-category { margin-bottom: 0; } .techq-portfolio-box-1.anim-slide .portfolio-info .portfolio-category a { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: var(--primary-color); display: inline-block; } @media (max-width:479px) { .techq-portfolio-box-1.anim-slide .portfolio-info { padding: 15px; margin-right: 15px; } .techq-portfolio-box-1.anim-slide .portfolio-info .portfolio-title a { font-size: 20px; line-height: 28px; } .techq-portfolio-box-1.anim-slide:hover .portfolio-info { left: 15px; } } /* Portfolio Load More Button */ .techq-loadmore-button { margin: 30px 0 0 0; display: inline-block; width: 100%; text-align: center; } /* Portfolio End Message */ .techq-end-meassge { color: var(--primary-color); text-align: center; background: var(--grey-color); padding: 10px; text-transform: uppercase; font-family: var(--body-fonts); font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: 1px; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); display: none; } .visible { display: block; } /* Portfolio Loader Icon */ #techq-loaderIcon { display: none; text-align: center; margin: 20px auto; } .techq-dots { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 30px; } .techq-dot { width: 12px; height: 12px; background-color: #333; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; } .techq-dot:nth-child(1) { animation-delay: -0.32s; } .techq-dot:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Portfolio Box - End ================================================== */ /* ================================================== 5.03 - Isotope Portfolio - Start ================================================== */ .techq-filters .techq-filter-button-group ul { margin: 0 0 45px; padding: 0; display: inline-block; width: 100%; text-align: center; } .techq-filters .techq-filter-button-group ul li { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; letter-spacing: 1px; text-transform: uppercase; list-style: none; color: var(--dark-color); display: inline-block; cursor: pointer; padding: 12px 20px; transition: all 0.5s ease-in-out; } .techq-filters .techq-filter-button-group ul li:last-child { margin-right: 0; } .techq-filters .techq-filter-button-group ul li.active, .techq-filters .techq-filter-button-group ul li.active:hover { background: var(--primary-color); color: var(--white-color); border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); } .techq-filters .techq-filter-button-group ul li:hover { color: var(--dark-color); } /* Portfolio Grid */ .techq-grid { display: inline-block; width: 100%; } .techq-grid:after { content: ''; display: block; clear: both; } .techq-grid .techq-col-3 { width: 25%; padding: 0 15px 30px; } .techq-grid .techq-col-6 { width: 50%; padding: 0 15px 30px; } .techq-grid .techq-col-4 { width: 33.33%; padding: 0 15px 30px; } @media(max-width: 1199px) { .techq-grid .techq-col-3 { width: 33.333%; } } @media(max-width: 1023px) { .techq-grid .techq-col-4, .techq-grid .techq-col-3 { width: 50%; } } @media(max-width: 767px) { .techq-grid .techq-col-6, .techq-grid .techq-col-4, .techq-grid .techq-col-3 { width: 100%; padding: 0 0 30px; } } /* Portfolio Masonry */ .techq-masonry { display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .techq-masonry .pot-h { width: 50%; padding: 0 15px 30px; } .techq-masonry .pot-t { width: 33.333%; padding: 0 15px 30px; } .techq-masonry .pot-q { width: 25%; padding: 0 15px 30px; } .layout-grid.visible_item, .layout-masonry.visible_item { display: none; } @media(max-width: 1199px) { .techq-masonry .pot-q { width: 33.333%; } } @media(max-width: 1023px) { .techq-masonry .pot-t, .techq-masonry .pot-q { width: 50%; } } @media(max-width: 767px) { .techq-masonry .pot-h, .techq-masonry .pot-t, .techq-masonry .pot-q { width: 100%; padding: 0 0 30px; } } /* Isotope Portfolio - End ================================================== */ /* ================================================== 5.04 - Portfolio Slider - Start ================================================== */ .techq-right-0 .techq-portfoliobox-slider .owl-stage-outer { margin-right: calc(((-100vw + 1400px) / 2) + 15px); } .techq-portfoliobox-slider .techq-portfolio-box-1 .portfolio-info { display: flex; flex-direction: column-reverse; gap: 5px; } .dark-bg .techq-portfoliobox-slider .owl-carousel .owl-nav .techq-owl-button::before { background-color: var(--light-white); } .dark-bg .techq-portfoliobox-slider .owl-carousel .owl-nav .techq-owl-button { background-color: var(--light-white); } .dark-bg .techq-portfoliobox-slider .owl-carousel .owl-nav::after, .dark-bg .techq-portfoliobox-slider .owl-carousel .owl-nav::before { background-color: var(--light-white); } @media (max-width: 1490px) { .techq-right-0 .techq-portfoliobox-slider .owl-stage-outer { margin-right: initial; } } /* Portfolio Slider - End ================================================== */ /* ================================================== 5.05 - Portfolio Single - Start ================================================== */ .techq-single-post-navigation { display: flex; align-items: center; justify-content: space-between; align-content: center; padding: 45px 30px; margin-bottom: 0; background: var(--grey-color); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); border-radius: var(--tec--border-radius); } .single-portfolio .techq-single-post-navigation { margin-top: 45px; } .single-post .techq-single-post-navigation { margin-bottom: 40px; } .techq-single-post-navigation .techq-single-post-nav { position: relative; padding-left: 75px; display: inline-block; cursor: pointer; } .techq-single-post-navigation .techq-single-post-nav:before { position: absolute; width: 60px; height: 60px; line-height: 60px; font-family: "Font Awesome 5 Free"; font-weight: 600; content: "\f053"; top: 50%; transform: translate(0, -50%); left: 0; font-size: 20px; color: var(--white-color); background: var(--dark-color); text-align: center; transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out; -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); border-radius: var(--tec--border-radius); } .techq-single-post-navigation .techq-single-post-nav.techq--next { padding-left: 0; padding-right: 75px; text-align: right; } .techq-single-post-navigation .techq-single-post-nav.techq--next:before { content: "\f054"; right: 0; left: inherit; } .techq-single-post-navigation .techq-single-post-nav-title h4 { font-size: 24px; line-height: 32px; } .techq-single-post-nav-label { color: var(--secondary-color); font-family: var(--title-fonts); font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .techq-single-post-navigation+h2+.techq-masonry { margin-left: -15px; margin-top: 30px; } .techq-single-post-navigation .techq-single-post-nav:hover .techq-single-post-nav-label { color: var(--primary-color); } .techq-single-post-navigation .techq-single-post-nav:hover:before { background: var(--primary-color); } @media(max-width:767px) { .techq-single-post-navigation { padding: 45px 15px; } .single-portfolio .techq-single-post-navigation { margin-top: 30px; } .techq-single-post-navigation .techq-single-post-nav-title h4 { font-size: 20px; line-height: 28px; } .techq-single-post-navigation+h2+.techq-masonry { margin-left: 0; } } @media(max-width:576px) { .techq-single-post-navigation { display: block; } .techq-single-post-navigation .techq-single-post-nav.techq--next { margin-top: 15px; display: block; } } /* PPortfolio Single - End ================================================== */ /* ================================================== 5.06 - Service Box - Start ================================================== */ /* Service Box Style 1 */ .techq-service-slider-1 .owl-stage-outer { margin-right: calc((1400px - 100vw)/2); } .techq-service-box-1 { transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-1 .service-content { display: grid; grid-template-columns: 1fr 48px; align-items: center; margin-top: 30px; position: relative; } .techq-service-box-1 .service-content .service-title { font-size: 28px; line-height: 36px; } .techq-service-box-1 .service-content .service-title::before { content: ""; position: absolute; left: 0; bottom: 0; width: 150px; height: 2px; background-color: var(--primary-color); } .techq-service-box-1 .service-content .icon-button { width: 48px; height: 48px; font-size: 16px; line-height: 1; background-color: var(--primary-color); color: var(--white-color); text-align: center; align-content: center; transition: var(--transition); } .techq-service-box-1 .service-content .icon-button:hover { background-color: var(--dark-color); } .techq-service-box-1 .service-content .icon-button i { display: inline-block; transform: translate(0, 0); margin-top: 3px; color: var(--white-color); } .techq-service-box-1 .service-content .icon-button:hover i, .techq-service-box-1 .service-content .icon-button:focus i { animation: button-animation 0.4s linear; } @media (max-width : 1499px) { .techq-service-slider-1 .owl-stage-outer { margin-right: 0; } } @media (max-width : 767px) { .techq-service-box-1 .service-content .service-title { font-size: 24px; line-height: 32px; } } /* Service Box Style 2 */ .techq-service-group { position: relative; width: 100vw; padding: 130px 0; background-position: center; background-size: cover; background-repeat: no-repeat; } .techq-service-group .techq-service-main { padding: 0 15px; } .techq-service-group .techq-service-box-2-wrapper { padding: 30px; background-color: var(--white-color); max-width: 1000px; margin: 0 auto; position: relative; display: flex; flex-direction: column; gap: 30px; } .techq-service-box-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; } .techq-service-box-2 .service-contain { display: flex; align-items: center; justify-content: space-between; padding: 15px; background-color: var(--grey-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-2.active .service-contain { background-color: var(--primary-color); } .techq-service-box-2 .service-contain .service-title { font-size: 28px; line-height: 36px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-2.active .service-contain .service-title { color: var(--white-color); } .techq-service-box-2 .service-contain .icon-button { width: 40px; height: 40px; background-color: var(--primary-color); text-align: center; line-height: 40px; color: var(--white-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); overflow: hidden; } .techq-service-box-2.active .service-contain .icon-button { background-color: var(--white-color); color: var(--dark-color); } .techq-service-box-2 .service-contain .icon-button i { color: var(--white-color); transform: translate(0, 0); display: inline-block; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-2.active .service-contain .icon-button i { color: var(--dark-color); } .techq-service-box-2 .service-contain:hover .icon-button i { animation: button-animation 0.4s linear; } .techq-service-box-2 .service-image { position: absolute; right: 30px; top: 30px; width: calc(50% - 45px); height: calc(100% - 60px); } .techq-service-box-2 .service-image img { height: 100%; width: 100%; object-fit: cover; object-position: center; opacity: 0; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-2.active .service-image img { opacity: 1; } @media (max-width: 1023px) { .techq-service-box-3-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .techq-service-group { background-image: none !important; padding: 0; } .techq-service-group .techq-service-box-2-wrapper { padding: 0; background: none; } .techq-service-box-2 { display: flex; flex-direction: column-reverse; gap: 0px; } .techq-service-box-2 .service-contain { background-color: var(--white-color); width: 100%; } .techq-service-box-2.active .service-contain { background-color: var(--white-color); } .techq-service-box-2:hover .service-contain { background-color: var(--primary-color); } .techq-service-box-2 .service-image { position: relative; right: initial; top: initial; width: 100%; height: 100%; } .techq-service-box-2 .service-image img { opacity: 1; aspect-ratio: 3/2; object-fit: cover; object-position: center; } .techq-service-box-2.active .service-contain .service-title { color: var(--dark-color); } .techq-service-box-2:hover .service-contain .service-title { color: var(--white-color); } .techq-service-box-2.active .service-contain .icon-button { background-color: var(--primary-color); } .techq-service-box-2:hover .service-contain .icon-button { background-color: var(--grey-color); } .techq-service-box-2.active .service-contain .icon-button i { color: var(--white-color); } .techq-service-box-2:hover .service-contain .icon-button i { color: var(--dark-color); } .techq-service-box-2:hover .service-contain .icon-button i { animation: button-animation 0.4s linear; } } @media (max-width: 479px) { .techq-service-box-2 .service-contain .service-title { font-size: 24px; line-height: 32px; } } /* Service Box Style 3 */ .techq-service-box-3-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .techq-service-box-3 { padding: 45px 30px; background: var(--grey-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); text-align: center; } .techq-service-box-3.techq-active { background: var(--primary-color); } .techq-service-box-3 .service-icon-box { font-size: 56px; line-height: 1; height: 56px; color: var(--primary-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); display: inline-flex; } .techq-service-box-3.techq-active .service-icon-box { color: var(--white-color); } .techq-service-box-3 .service-title { font-size: 28px; line-height: 36px; margin-top: 15px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-3.techq-active .service-title { color: var(--white-color); } .techq-service-box-3 .service-img { position: relative; margin-top: 30px; } .techq-service-box-3 .service-img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .techq-service-box-3 .techq-round-btn { margin-top: 30px; } .techq-service-box-3 .techq-round-btn a, .techq-service-box-3.techq-active .techq-round-btn a { background-color: var(--white-color); color: var(--dark-color); border: none; } .techq-service-box-3 .techq-round-btn a, .techq-service-box-3.techq-active .techq-round-btn a:hover { background-color: var(--dark-color); color: var(--white-color); } @media (max-width: 1023px) { .techq-service-box-3-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .techq-service-box-3-list { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 479px) { .techq-service-box-3 { padding: 30px 15px; } .techq-service-box-3 .service-icon-box { font-size: 44px; line-height: 44px; height: 44px; } .techq-service-box-3 .service-title { font-size: 24px; line-height: 32px; } .techq-service-box-3 .service-img { margin-top: 15px; } } /* Service Box Style 4 */ .techq-service-box-4-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .techq-service-box-4 { padding: 45px 30px; background: var(--white-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-4.techq-active { background: var(--primary-color); } .techq-service-box-4 .service-icon-box { font-size: 36px; line-height: 1; color: var(--white-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; background-color: var(--primary-color); } .techq-service-box-4.techq-active .service-icon-box { color: var(--primar-color); background-color: var(--white-color); } .techq-service-box-4 .service-title { font-size: 28px; line-height: 36px; margin-top: 15px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-4.techq-active .service-title { color: var(--white-color); } .techq-service-box-4 .service-description { margin-top: 15px; margin-bottom: 0; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-4.techq-active .service-description { color: var(--white-color); } .techq-service-box-4 .service-list { padding: 0; margin: 15px 0 0 0; display: flex; flex-direction: column; gap: 5px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-4.techq-active .sservice-list { color: var(--white-color); } .techq-service-box-4 .service-list .service-list-item { transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-4.techq-active .service-list .service-list-item { color: var(--white-color); } .techq-service-box-4 .service-list .service-list-item i { margin-right: 8px; color: var(--primary-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-4.techq-active .service-list .service-list-item i { color: var(--white-color); } @media (max-width: 1023px) { .techq-service-box-4-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .techq-service-box-4-list { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 479px) { .techq-service-box-4 { padding: 30px 15px; } .techq-service-box-4 .service-title { font-size: 24px; line-height: 32px; } } /* Service Box Style 5 */ .techq-service-slider-5 .owl-stage-outer { margin-right: calc((1400px - 100vw)/2); } .techq-service-slider-5 .owl-stage-outer .owl-stage .owl-item:nth-child(odd) .techq-service-box-5 .service-image img { aspect-ratio: 1/1; object-fit: cover; object-position: center; } .techq-service-box-5 .service-content { display: grid; grid-template-columns: 1fr 48px; align-items: center; margin-top: 30px; position: relative; margin-top: 30px; padding: 15px 30px; background-color: var(--white-color); } .techq-service-box-5 .service-content .service-title { font-size: 24px; line-height: 32px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-5:hover .service-content .service-title { color: var(--primary-color); } .techq-service-box-5 .service-content .icon-button a { font-size: 20px; color: var(--dark-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-service-box-5:hover .service-content .icon-button a { color: var(--primary-color); } @media (max-width : 1499px) { .techq-service-slider-5 .owl-stage-outer { margin-right: 0; } } @media (max-width : 1023px) { .techq-service-slider-5 .owl-stage-outer .owl-stage .owl-item:nth-child(odd) .techq-service-box-5 .service-image img { aspect-ratio: initial; } } /* Service Box - End ================================================== */ /* ================================================== 5.07 - Service Single - Start ================================================== */ [data-widget_type="sidebar.default"] .widget .menu-service-menu-container { border: none; box-shadow: none; } [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu { margin: 0; padding: 0; } [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu li { margin: 0 0 20px; } [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu li:last-child { margin: 0; } [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu li a { padding: 20px; border: none; background: var(--white-color); display: inline-block; width: 100%; position: relative; font-family: var(--title-fonts); font-weight: 400; font-size: 16px; line-height: 24px; text-transform: uppercase; color: var(--dark-color); border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); } [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu li a:before { content: '\f054'; font-family: "Font Awesome 5 Free"; font-weight: 600; font-size: 12px; right: 20px; left: auto; top: 24px; position: absolute; color: inherit; line-height: normal; } [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu li a:hover, [data-widget_type="sidebar.default"] .widget .menu-service-menu-container .menu li.current_page_item a { background: var(--primary-color); color: var(--white-color); } /* Service Single - End ================================================== */ /* ================================================== 5.08 - Process Step - Start ================================================== */ /* Process Step Style - 1 */ .techq-process-step-slider-1 { position: relative; } .techq-process-step-slider-1::before { content: ""; width: 100%; height: 2px; position: absolute; top: 145px; background-color: var(--light-black); } .techq-process-step-1 { text-align: center; position: relative; } .techq-process-step-1::before { content: ""; position: absolute; left: 50%; top: 138px; width: 16px; height: 16px; transform: translateX(-50%); background-color: var(--primary-color); } .techq-process-step-1 .process-step-icon { display: inline-flex; justify-content: center; align-items: center; font-size: 48px; line-height: 1; color: var(--primary-color); width: 100px; height: 100px; background-color: var(--grey-color); transition: var(--transition); border-radius: 100%; margin: 0 auto; } .techq-process-step-1:hover .process-step-icon { color: var(--white-color); background-color: var(--primary-color); } .techq-process-step-1 .process-step-content { margin-top: 90px; padding: 30px; transition: var(--transition); } .techq-process-step-1:hover .process-step-content { background-color: var(--grey-color); } .techq-process-step-1 .process-step-content .process-step-title { font-size: 28px; line-height: 36px; } .techq-process-step-1 .process-step-content .process-step-description { margin-top: 15px; } .techq-process-step-1 .process-step-content .process-step-number { margin-top: 15px; font-size: 48px; line-height: 56px; color: var(--light-black); } /* Process Step Style - 2 */ .techq-process-step-2-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; justify-content: space-between; } .techq-process-step-2 { position: relative; display: grid; gap: 30px; } .techq-process-step-2 .process-number-box { width: 120px; height: 120px; background-color: var(--primary-color); text-align: center; align-content: center; } .techq-process-step-2:nth-child(even) .process-number-box { background-color: var(--dark-color); order: 1; } .techq-process-step-2 .process-number-box .process-number { font-size: 48px; line-height: 56px; color: var(--white-color); } .techq-process-step-2 .process-info .process-title { font-size: 28px; line-height: 36px; } .techq-process-step-2 .process-info .process-description { margin-top: 15px; margin-bottom: 0; max-width: 260px; } .techq-process-step-2 .process-line-img { position: absolute; right: -30%; top: 50%; transform: translateY(-50%); width: calc(100% - 50px); } @media (max-width: 1099px) { .techq-process-step-2 .process-line-img { right: -20%; width: calc(100% - 70px); } } @media (max-width: 1023px) { .techq-process-step-2-list { grid-template-columns: repeat(2, 1fr); } .techq-process-step-2, .techq-process-step-2:nth-child(even) { grid-template-columns: 120px auto; } .techq-process-step-2:nth-child(even) .process-number-box { order: 0; } .techq-process-step-2 .process-info .process-description { margin-top: 10px; max-width: 100%; } .techq-process-step-2 .process-line-img { display: none; } } @media (max-width: 799px) { .techq-process-step-2, .techq-process-step-2:nth-child(even) { grid-template-columns: 1fr; } } @media (max-width: 767px) { .techq-process-step-2 .process-info .process-title { font-size: 24px; line-height: 32px; } } @media (max-width: 575px) { .techq-process-step-2-list { grid-template-columns: repeat(1, 1fr); } .techq-process-step-2, .techq-process-step-2:nth-child(even) { grid-template-columns: 120px auto; } } @media (max-width: 399px) { .techq-process-step-2, .techq-process-step-2:nth-child(even) { grid-template-columns: 1fr; } } /* Process Step - End ================================================== */ /* ================================================== 5.09 - Team - Start ================================================== */ /* Team Style 1 */ .techq-team-1 { text-align: center; justify-items: center; display: inline-block; } .techq-team-1 .team-img { aspect-ratio: 1/1; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); overflow: hidden; width: 150px; } .techq-team-1 .team-img img { width: 100%; position: relative; z-index: 1; } .techq-team-1 .team-info { position: relative; z-index: 1; display: inline-flex; gap: 10px; padding: 8px 15px; background-color: var(--white-color); align-items: center; margin-top: -15px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-team-1:hover .team-info { background-color: var(--primary-color); } .techq-team-1 .team-info .team-name { font-size: 24px; line-height: 32px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-team-1:hover .team-info .team-name { color: var(--white-color); } .techq-team-1 .team-info .team-designation { font-family: var(--title-fonts); font-size: 18px; line-height: 26px; color: var(--primary-color); text-transform: uppercase; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-team-1:hover .team-info .team-designation { color: var(--white-color); } .techq-team-1 .team-social { display: flex; justify-content: center; gap: 10px; margin-top: 30px; position: relative; z-index: 1; } .techq-team-1 .team-social a { width: 48px; height: 48px; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); background-color: var(--grey-color); display: flex; align-items: center; justify-content: center; } .techq-team-1 .team-social a i { font-size: 18px; line-height: 1; height: 18px; display: inline-block; } .techq-team-1 .logo-icon-box { font-size: 50vh; line-height: 1; height: 100%; width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } /* Team Style 2 */ .techq-team-2-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .techq-team-2 { padding: 45px 30px; background-color: var(--grey-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); position: relative; } .techq-team-2:hover { background-color: var(--primary-color); } .techq-team-2 .team-info .team-name { font-size: 28px; line-height: 36px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-team-2:hover .team-info .team-name { color: var(--white-color); } .techq-team-2 .team-info .team-designation { font-family: var(--title-fonts); font-size: 18px; line-height: 26px; color: var(--primary-color); text-transform: uppercase; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-team-2:hover .team-info .team-designation { color: var(--white-color); } .techq-team-2 .team-img { margin-top: 15px; } .techq-team-2 .team-img img { width: 100%; } .techq-team-2 .team-social { display: flex; justify-content: center; gap: 15px; margin-top: 30px; } .techq-team-2 .team-social a { width: 48px; height: 48px; background-color: var(--white-color); display: flex; align-items: center; justify-content: center; } .techq-team-2 .team-social a i { font-size: 18px; line-height: 1; height: 18px; display: inline-block; } @media (max-width: 1023px) { .techq-team-2-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .techq-team-2-list { grid-template-columns: repeat(1, 1fr); } } @media (max-width: 479px) { .techq-team-2 { padding: 30px 15px; } } /* Team - End ================================================== */ /* ================================================== 5.10 - Testimonial - Start ================================================== */ /* Testimonial Style - 1 */ .techq-testimonial-1 { padding: 45px 30px; background-color: var(--grey-color); position: relative; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-testimonial-1 .testimonial-top { display: grid; grid-template-columns: 64px 1fr 40px; gap: 15px; align-items: center; } .techq-testimonial-1 .testimonial-top .testimonial-author-info .name { font-size: 24px; line-height: 32px; } .techq-testimonial-1 .testimonial-top .testimonial-author-info .position { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; color: var(--primary-color); text-transform: uppercase; } .techq-testimonial-1 .testimonial-top .testimonial-author-img { width: 64px; height: 64px; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); overflow: hidden; } .techq-testimonial-1 .testimonial-quote { display: none; } .techq-testimonial-1 .testimonial-description { margin: 30px 0 0 0; border-top: 1px solid var(--light-black); padding-top: 30px; } @media (max-width : 575px) { .techq-testimonial-1 { padding: 30px 15px; } .techq-testimonial-1 .testimonial-top .testimonial-author-info .name { font-size: 22px; line-height: 30px; } } /* Testimonial Style - 2 */ .techq-testimonial-2 { padding: 30px; background-color: var(--grey-color); position: relative; } .techq-testimonial-2 .testimonial-quote { font-size: 30px; line-height: 48px; width: 48px; height: 48px; text-align: center; background-color: var(--primary-color); color: var(--white-color); } .techq-testimonial-2 .testimonial-bottom { display: grid; grid-template-columns: 70px 1fr; gap: 15px; align-items: center; } .techq-testimonial-2 .testimonial-bottom .testimonial-author-img { width: 70px; height: 70px; overflow: hidden; } .techq-testimonial-2 .testimonial-bottom .testimonial-author-info .name { font-size: 24px; line-height: 32px; } .techq-testimonial-2 .testimonial-bottom .testimonial-author-info .position { font-family: var(--title-fonts); font-size: 18px; line-height: 26px; color: var(--primary-color); text-transform: uppercase; } .techq-testimonial-2 .testimonial-description { margin-top: 20px; margin-bottom: 20px; } .techq-testimonial-2 .testimonial-rating i { color: #FFC107; font-size: 18px; line-height: 1px; height: 18px; } @media (max-width : 575px) { .techq-testimonial-2 { padding: 30px 15px; position: relative; } } @media (max-width : 397px) { .techq-testimonial-2 .testimonial-bottom .testimonial-author-info .name { font-size: 22px; line-height: 30px; max-width: 205px; } } /* Testimonial Style - 3 */ .techq-testimonial-3 { padding: 45px 60px 45px 30px; position: relative; } .techq-testimonial-3.gray-bg { background-color: var(--grey-color); } .techq-testimonial-3.white-bg { background-color: var(--white-color); } .techq-testimonial-3.primary-bg { background-color: var(--primary-color); } .techq-testimonial-3.dark-bg { background-color: var(--dark-color); } .techq-testimonial-3 .testimonial-top { display: grid; grid-template-columns: 70px 1fr; gap: 15px; align-items: center; } .techq-testimonial-3 .testimonial-top .testimonial-author-img { width: 70px; height: 70px; -webkit-border-radius: var(--big-border-radius); -moz-border-radius: var(--big-border-radius); border-radius: var(--big-border-radius); overflow: hidden; } .techq-testimonial-3 .testimonial-top .testimonial-author-info .name { font-size: 24px; line-height: 32px; } .techq-testimonial-3.dark-bg .testimonial-top .testimonial-author-info .name, .techq-testimonial-3.primary-bg .testimonial-top .testimonial-author-info .name { color: var(--white-color); } .techq-testimonial-3 .testimonial-top .testimonial-author-info .position { font-family: var(--title-fonts); font-size: 18px; line-height: 26px; color: var(--primary-color); text-transform: uppercase; } .techq-testimonial-3.primary-bg .testimonial-top .testimonial-author-info .position, .techq-testimonial-3.dark-bg .testimonial-top .testimonial-author-info .position { color: var(--white-color); } .techq-testimonial-3 .testimonial-description { margin-top: 20px; margin-bottom: 20px; } .techq-testimonial-3.dark-bg .testimonial-description, .techq-testimonial-3.primary-bg .testimonial-description { color: var(--white-color); } .techq-testimonial-3 .testimonial-rating i { color: #FFC107; font-size: 18px; line-height: 1px; height: 18px; } .techq-testimonial-3.primary-bg .testimonial-rating i { color: var(--white-color); } .techq-testimonial-3 .logo-icon-box { font-size: 95px; line-height: 1; height: 95px; color: var(--primary-color); opacity: 0.08; position: absolute; left: 400px; top: 30px; } .techq-testimonial-3.primary-bg .logo-icon-box { color: var(--white-color); } @media (max-width : 1199px) { .techq-testimonial-3 .logo-icon-box { font-size: 80px; height: 80px; left: inherit; right: 90px; top: 30px; } } @media (max-width : 767px) { .techq-testimonial-3 { padding: 30px 60px 30px 30px; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); position: relative; } } @media (max-width : 575px) { .techq-testimonial-3 { padding: 30px 30px 30px 15px; border-radius: var(--tec--border-radius); -webkit-border-radius: var(--tec--border-radius); -moz-border-radius: var(--tec--border-radius); position: relative; } } @media (max-width : 397px) { .techq-testimonial-3 .testimonial-top .testimonial-author-info .name { font-size: 22px; line-height: 30px; max-width: 205px; } } /* Testimonial - End ================================================== */ /* ================================================== 5.11 - Pricing Plan - Start ================================================== */ /* Pricing Style 1 */ .techq-package-main { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .techq-package-main .techq-package-left { position: relative; background-position: center; background-size: cover; background-repeat: no-repeat; } .techq-package-main .techq-package-left .techq-package-wrapper { padding: 45px; } .techq-pricing-card-1 { display: none; justify-items: right; } .techq-pricing-card-1.techq-card-active { display: block; animation: techq-faded 1s ease forwards; } @keyframes techq-faded { 0% { opacity: 0 } 100% { opacity: 1 } } .techq-pricing-card-1 .techq-pricing-card-wrapper { display: flex; flex-direction: column; gap: 15px; width: 320px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); background-color: var(--white-color); padding: 30px; } .techq-pricing-card-1 .techq-pricing-card-wrapper .pricing-card-top { display: flex; align-items: center; gap: 15px; } .techq-pricing-card-1 .pricing-card-top .package-icon { width: 60px; height: 60px; background-color: var(--primary-color); color: var(--white-color); display: flex; align-items: center; justify-content: center; font-size: 36px; } .techq-pricing-card-1 .pricing-card-top .package-title { font-size: 28px; line-height: 36px; } .techq-pricing-card-1 .pricing-card-top .package-subtitle { font-size: 16px; line-height: 24px; font-family: var(--title-fonts); text-transform: uppercase; font-weight: 400; color: var(--primary-color); } .techq-pricing-card-1 .package-amount .price { font-size: 48px; line-height: 56px; } .techq-pricing-card-1 .package-amount .price .currency { font-size: 24px; line-height: 32px; } .techq-pricing-card-1 .package-amount .price .duration { font-size: 16px; line-height: 24px; font-family: var(--title-fonts); text-transform: uppercase; font-weight: 400; color: var(--primary-color); } .techq-pricing-card-1 .package-description { margin-bottom: 0; padding-bottom: 15px; border-bottom: 1px solid var(--light-black); } .techq-pricing-card-1 .package-features { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .techq-pricing-card-1 .package-features li { display: flex; gap: 10px; align-items: center; } .techq-pricing-card-1 .package-features li i { color: var(--primary-color); font-size: 10px; line-height: 1; } .techq-pricing-card-1 .techq-button { margin-top: 15px; } .techq-package-main .techq-package-right { display: flex; flex-direction: column; gap: 30px; justify-content: space-between; } .techq-package-main .techq-package-right .package-tab { display: flex; flex-direction: column; gap: 30px; } .techq-package-main .techq-package-right .package-tab { display: flex; flex-direction: column; gap: 15px; } .techq-package-main .techq-package-right .package-tab .package-tab-title { font-size: 28px; line-height: 36px; padding-bottom: 15px; border-bottom: 1px solid var(--light-black); position: relative; } .techq-package-main .techq-package-right .package-tab .package-tab-title.techq-tab-active { color: var(--primary-color); } .techq-package-main .techq-package-right .package-tab .package-tab-title::before { content: ""; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background-color: var(--primary-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-package-main .techq-package-right .package-tab .package-tab-title.techq-tab-active::before { width: 100%; } @media (max-width: 1023px) { .techq-package-main { display: flex; flex-direction: column-reverse; } .techq-package-main .techq-package-right .package-tab { display: none; } .techq-package-main .techq-package-left { background-image: none !important; } .techq-package-main .techq-package-left .techq-package-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding: 0; } .techq-package-wrapper .techq-pricing-card-1:nth-child(3) { grid-column: 1 / span 2; } .techq-pricing-card-1 { display: block; } .techq-pricing-card-1 .techq-pricing-card-wrapper { width: 100%; background-color: var(--grey-color); } } @media (max-width: 767px) { .techq-package-main .techq-package-left .techq-package-wrapper { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; padding: 0; } .techq-package-wrapper .techq-pricing-card-1:nth-child(3) { grid-column: initial; } .techq-pricing-card-1 .techq-pricing-card-wrapper { padding: 30px 15px; } } @media (max-width: 479px) { .techq-pricing-card-1 .package-amount .price { font-size: 44px; line-height: 52px; } .techq-pricing-card-1 .pricing-card-top .package-title { font-size: 24px; line-height: 32px; } } /* Pricing Style 2 */ .techq-pricing-card-2 { display: flex; flex-direction: column; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); background-color: var(--grey-color); padding: 45px 30px; } .techq-pricing-card-2 .package-icon { width: 60px; height: 60px; background-color: var(--primary-color); color: var(--white-color); display: flex; align-items: center; justify-content: center; font-size: 36px; } .techq-pricing-card-2 .package-title { font-size: 28px; line-height: 36px; margin-top: 15px; } .techq-pricing-card-2 .package-subtitle { font-size: 16px; line-height: 24px; font-family: var(--title-fonts); text-transform: uppercase; font-weight: 400; color: var(--primary-color); margin-top: 5px; } .techq-pricing-card-2 .package-amount .price { font-size: 48px; line-height: 56px; margin-top: 15px; } .techq-pricing-card-2 .package-amount .price .currency { font-size: 24px; line-height: 32px; } .techq-pricing-card-2 .package-amount .price .duration { font-size: 16px; line-height: 24px; font-family: var(--title-fonts); text-transform: uppercase; font-weight: 400; color: var(--primary-color); } .techq-pricing-card-2 .package-features { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-top: 15px; } .techq-pricing-card-2 .package-features li { display: flex; gap: 10px; align-items: center; } .techq-pricing-card-2 .package-features li i { color: var(--primary-color); font-size: 18px; line-height: 1; } .techq-pricing-card-2 .techq-button { margin-top: 30px; } @media (max-width: 575px) { .techq-pricing-card-2 { padding: 30px 15px; } .techq-pricing-card-2 .package-amount .price { font-size: 44px; line-height: 52px; } .techq-pricing-card-2 .package-title { font-size: 24px; line-height: 32px; } } /* Pricing Plan - End ================================================== */ /* ================================================== 5.12 - Counter - Start ================================================== */ /* Counter Style 1 */ .techq-counter-wrapper { display: flex; justify-content: space-between; align-items: center; gap: 30px; position: relative; } .techq-counter-box-1 { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 30px; position: relative; } .techq-counter-box-1:not(:last-child)::after { content: ""; position: absolute; right: calc(-100vw + 95vw); top: 10%; width: 2px; height: 80%; background: var(--light-black); } .techq-counter-box-1 .counter-icon-box { font-size: 60px; line-height: 60px; color: var(--primary-color); } .techq-counter-box-1 .conter-contain .counter-info .counter-num, .techq-counter-box-1 .conter-contain .counter-info .counter-prefix { font-size: 40px; line-height: 48px; color: var(--dark-color); display: inline-block; font-weight: 700; } .techq-counter-box-1 .conter-contain .counter-title { font-family: var(--title-fonts); font-size: 16px; line-height: 24px; color: var(--primary-color); text-transform: uppercase; } @media (max-width: 1199px) { .techq-counter-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; gap: 60px; } .techq-counter-wrapper::after, .techq-counter-wrapper::before { content: ""; position: absolute; background: var(--light-black); } .techq-counter-wrapper::after { width: 2px; height: 100%; } .techq-counter-wrapper::before { width: 100%; height: 2px; } .techq-counter-box-1:not(:last-child)::after { display: none; } } @media (max-width: 767px) { .techq-counter-wrapper { gap: 45px; } } @media (max-width: 575px) { .techq-counter-wrapper { grid-template-columns: repeat(1, 1fr); gap: 60px; } .techq-counter-wrapper::after, .techq-counter-wrapper::before { display: none; } .techq-counter-box-1 { min-width: 290px; } .techq-counter-box-1:not(:last-child)::after { display: block; right: 0; top: initial; bottom: -30px; width: 100%; height: 2px; } .techq-counter-box-1 .counter-icon-box { font-size: 56px; line-height: 56px; } .techq-counter-box-1 .conter-contain .counter-info .counter-num, .techq-counter-box-1 .conter-contain .counter-info .counter-prefix { font-size: 36px; line-height: 44px; } } /* Counter - End ================================================== */ /* ================================================== 5.13 - Accordion - Start ================================================== */ .techq-accordion-block { display: flex; flex-direction: column; gap: 30px; } .techq-accordion-box { transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); border-bottom: 1px solid var(--light-black); padding-bottom: 30px; } .techq-accordion-box .accordion-top { position: relative; } .techq-accordion-box .accordion-top .accordion-title { font-size: 24px; line-height: 32px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); margin-right: 45px; } .techq-accordion-box .accordion-top .accordion-title i { position: absolute; right: 15px; top: 8px; font-size: 18px; } .techq-accordion-box.techq-active .accordion-top .accordion-title i.active { opacity: 0; } .techq-accordion-box.techq-active .accordion-top .accordion-title { color: var(--primary-color); } .techq-accordion-box .accordion-details { border-top: 2px solid var(--light-white); } .techq-accordion-box .accordion-details .accordion-discription { margin-bottom: 0; margin-top: 15px; width: calc(100% - 60px); } @media (max-width : 767px) { .techq-accordion-box .accordion-top .accordion-title { font-size: 20px; line-height: 28px; } } /* Accordion - End ================================================== */ /* ================================================== 5.14 - After-Before - Start ================================================== */ /* After-Before Style 1 */ .techq-ba-slider { margin: 0 auto; position: relative; width: 100%; overflow: hidden; } .techq-before, .techq-after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; } .techq-before-label, .techq-after-label { position: absolute; font-size: 14px; font-weight: 600; color: var(--white-color); z-index: 4; padding: 6px 12px; background-color: var(--primary-color); letter-spacing: 2px; transition: var(--transition); } .techq-before-label { left: 20px; top: 20px; z-index: 5; } .techq-after-label { right: 20px; top: 20px; z-index: 3; } .techq-after .techq-after-label { visibility: visible; z-index: 3; } .techq-after { clip-path: inset(0 50% 0 0); } .techq-ba-handle { position: absolute; top: 0; left: 50%; width: 0px; height: 100%; background-color: #fff; cursor: pointer; z-index: 2; } .techq-ba-line { position: absolute; top: 0; left: 50%; width: 0px; height: 100%; display: flex; justify-content: center; align-items: center; background-color: transparent; z-index: 1; } .pulse { position: relative; display: inline-block; } .pulse svg path { fill: var(--white-color); stroke: var(--white-color); } .pulse svg rect { fill: var(--primary-color); } .pulse::before { content: ""; position: absolute; top: 50%; left: 50%; width: 70px; height: 70px; background-color: var(--primary-color); transform: translate(-50%, -50%) scale(1); opacity: 0; animation: techq-pulse 1.5s infinite; } @keyframes techq-pulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.8); opacity: 0; } } .techq-ba-line svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; cursor: pointer; } .techq-before img, .techq-after img { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; height: 100% !important; object-fit: cover; width: 100%; } .techq-ba-handle, .techq-ba-line { user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } .techq-ba-line { width: 2px; background-color: var(--white-color); } /* After-Before - End ================================================== */ /* ================================================== 5.15 - Youtube Video - Start ================================================== */ /* Youtube Slider */ .techq-yt-video-box-1 .yt-Thumbnail { position: relative; overflow:hidden; } .techq-yt-video-box-1 .yt-Thumbnail img { aspect-ratio: 16 / 9; object-fit:cover; object-position:center; } .techq-yt-video-box-1 .yt-Thumbnail .yt-title { position: absolute; top: 15px; left: 15px; color: var(--white-color); font-size: 28px; list-style: 36px; } .techq-yt-video-box-1 .yt-Thumbnail .yt-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 60px; line-height: 1; cursor:pointer; z-index:2; color: var(--white-color); } .techq-yt-video-box-1 .yt-Thumbnail .yt-video-area.yt-video-area { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .techq-yt-video-box-1 .yt-Thumbnail.video-loaded img, .techq-yt-video-box-1 .yt-Thumbnail.video-loaded .yt-title, .techq-yt-video-box-1 .yt-Thumbnail.video-loaded .yt-video-area { opacity:0; visibility:hidden; } .techq-yt-video-box-1 .yt-Thumbnail .techq-yt-iframe { position:absolute; inset:0; width:100%; height:100%; border:none; z-index:5; } .techq-yt-video-slider-1 .owl-carousel .owl-nav::after, .techq-yt-video-slider-1 .owl-carousel .owl-nav::before { background-color: var(--light-white); } .techq-yt-video-slider-1 .owl-carousel .owl-nav .techq-owl-button { background-color: var(--light-white); } .techq-yt-video-slider-1 .owl-carousel .owl-nav .techq-owl-button::before { background-color: var(--light-white); } .techq-yt-video-slider-1 .owl-carousel .owl-nav button.owl-prev, .techq-yt-video-slider-1 .owl-carousel .owl-nav button.owl-next { background: var(--primary-color); color: var(--white-color); } .techq-yt-video-slider-1 .owl-carousel .owl-nav button:hover { color: var(--primary-color); background: var(--white-color); } /* Youtube Popup */ .techq-video-pop { position: relative; } .techq-video-pop .techq-video-pop-img img { height: 650px; width: 100%; object-fit: cover; } .techq-video-pop .video-pop-animation { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .popup-youtube { height: 130px; width: 130px; line-height: 130px; text-align: center; border-radius: var(--big-border-radius); backdrop-filter: blur(20px); display: inline-block; background: var(--primary-color); color: var(--white-color); font-size: 24px; } .popup-youtube:hover, .popup-youtube:focus { background: var(--dark-color); color: var(--white-color); } @media(max-width:1399px) { .techq-video-pop .techq-video-pop-img img { height: 450px; } } @media(max-width:767px) { .popup-youtube { height: 110px; width: 110px; line-height: 110px; } .techq-video-pop .techq-video-pop-img img { height: 350px; } } @media(max-width:575px) { .popup-youtube { height: 100px; width: 100px; line-height: 100px; } } .mfp-wrap .mfp-close { padding: 0; top: -50px; right: 0; font-size: 32px; opacity: 1; height: 50px; width: 50px; line-height: 50px; text-align: center; font-family: var(--body-fonts); color: var(--white-color); background-color: var(--primary-color); position: absolute; letter-spacing: 0; font-weight: 400; } .mfp-wrap .mfp-close:hover { background: var(--primary-color); color: var(--white-color); } .mfp-wrap .mfp-close:focus { outline: none; } /* Youtube Video - End ================================================== */ /* ================================================== 5.16 - Section Shape - Start ================================================== */ /* Section Shape Style 1 */ .section-shape-style-1 .left-bottom-shape, .section-shape-style-1 .right-bottom-shape { --shape-size: 32px; width: 250px; height: var(--shape-size); background: var(--white-color); position: absolute; bottom: 0; } .section-shape-style-1 .left-bottom-shape::before, .section-shape-style-1 .right-bottom-shape::before { content: ""; position: absolute; width: 0; height: 0; top: 0; border-top: var(--shape-size) solid transparent; } .section-shape-style-1 .left-bottom-shape::before { right: calc(-1 * var(--shape-size)); border-left: var(--shape-size) solid var(--white-color); } .section-shape-style-1 .right-bottom-shape::before { left: calc(-1 * var(--shape-size)); border-right: var(--shape-size) solid var(--white-color); } .section-shape-style-1 .right-bottom-shape { right: 0; } @media (max-width: 767px) { .section-shape-style-1 { display: none; } } /* Section Shape Style 2 */ .section-shape-style-2 .top-shape, .section-shape-style-2 .bottom-shape { --shape-size: 32px; width: 52%; height: var(--shape-size); background: var(--white-color); position: absolute; } .section-shape-style-2 .top-shape { left: 0; top: 0; } .section-shape-style-2 .bottom-shape { right: 0; bottom: 0; } .section-shape-style-2 .top-shape::before, .section-shape-style-2 .bottom-shape::before { content: ""; position: absolute; width: 0; height: 0; top: 0; } .section-shape-style-2 .top-shape::before { right: calc(-1 * var(--shape-size)); border-left: var(--shape-size) solid var(--white-color); border-bottom: var(--shape-size) solid transparent; } .section-shape-style-2 .bottom-shape::before { left: calc(-1 * var(--shape-size)); border-right: var(--shape-size) solid var(--white-color); border-top: var(--shape-size) solid transparent; } .position-initial { position: initial; } .elementor-widget-technoq_section_shape { position: static; } @media (max-width: 767px) { .section-shape-style-2 { display: none; } } /* Section Shape - End ================================================== */ /* ================================================== 5.17 - Insta Gallery - Start ================================================== */ .techq-insta-gallery-1 { position: relative; overflow: hidden; } .techq-insta-gallery-1 .insta-gallery-overlay { position: absolute; width: 100%; height: 100%; background-color: #e81c2e50; top: 50%; left: 50%; transform: translate(-50%, -50%) scaleY(0); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-insta-gallery-1:hover .insta-gallery-overlay { transform: translate(-50%, -50%) scaleY(1); } .techq-insta-gallery-1 .insta-gallery-overlay .insta-gallery-icon { position: absolute; width: 40px; height: 40px; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-insta-gallery-1 .insta-gallery-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-insta-gallery-1:hover .insta-gallery-icon { opacity: 1; } .techq-insta-gallery-1 .insta-gallery-icon a { font-size: 36px; height: 36px; line-height: 36px; color: var(--white-color); } /* Insta Gallery - End ================================================== */ /* ================================================== 5.18 - Icon List - Start ================================================== */ .techq-icon-list { padding: 0; margin-bottom: 0; } /* Icon List - End ================================================== */ /* ================================================== 5.19 - Branch Location Map - Start ================================================== */ .techq-branch-map { display: grid; grid-template-columns: minmax(auto, 300px) 2fr; gap: 30px; align-items: center; } .techq-branch-map .techq-branch-left { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; } .techq-branch-map .techq-branch-left .branch-list { display: flex; flex-direction: column; gap: 12px; list-style: none; padding: 0; } .techq-branch-map .techq-branch-left .branch-list li { position: relative; padding-left: 15px; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-branch-map .techq-branch-left .branch-list li.active { padding-left: 30px; color: var(--primary-color); } .techq-branch-map .techq-branch-left .branch-list li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; background: var(--primary-color); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); } .techq-branch-map .techq-branch-left .branch-list li.active::before { width: 21px; } .techq-branch-map .techq-branch-right .map-wrapper { position: relative; } .techq-branch-map .techq-branch-right .map-wrapper img { width: 100%; opacity: 0.3; } .techq-branch-map .techq-branch-right .map-wrapper .map-dot { position: absolute; width: 8px; height: 8px; background: var(--primary-color); border-radius: 50%; transform: translate(-50%, -50%); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); animation: pulse 1s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0px rgba(255, 165, 0, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(255, 165, 0, 0.2); } 100% { box-shadow: 0 0 0 0px rgba(255, 165, 0, 0.2); } } .techq-branch-map .techq-branch-right .branch-content { margin-top: 30px; } .techq-branch-map .techq-branch-right .branch-title { font-size: 28px; line-height: 36px; } .techq-branch-map .techq-branch-right .branch-info { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 15px; } .techq-branch-map .techq-branch-right .branch-info>span { display: inline-flex; align-items: center; gap: 10px; position: relative; } .techq-branch-map .techq-branch-right .branch-info>span::before { content: "/"; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); } .techq-branch-map .techq-branch-right .branch-info>span:last-child::before { display: none; } .techq-branch-map .techq-branch-right .branch-info>span i { font-size: 18px; color: var(--primary-color); } @media (max-width : 991px) { .techq-branch-map { grid-template-columns: 1fr; } .techq-branch-map .techq-branch-left .branch-list { flex-wrap: wrap; flex-direction: row; gap: 10px 30px; justify-content: center; } .techq-branch-map .techq-branch-left .techq-button { display: none; } .techq-branch-map .techq-branch-left .branch-list li { padding-left: 0; } .techq-branch-map .techq-branch-left .branch-list li.active { padding-left: 0; } .techq-branch-map .techq-branch-left .branch-list li::before { left: 0; top: initial; bottom: 0; transform: translateY(0); width: 0; height: 2px; } .techq-branch-map .techq-branch-left .branch-list li.active::before { width: 100%; } .techq-branch-map .techq-branch-right .branch-title { font-size: 24px; line-height: 32px; } } @media (max-width : 575px) { .techq-branch-map .techq-branch-right .branch-title { font-size: 22px; line-height: 30px; } } /* Branch Location Map - End ================================================== */ /* ================================================== 5.20 - Search Page - Start ================================================== */ .techq-search-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } .techq-search-layout .techq-search-main { display: flex; flex-direction: column; gap: 45px; } .techq-search-layout .techq-posts-area { display: grid; grid-template-columns: 1fr; gap: 45px 30px; } @media (max-width: 991px) { .techq-search-layout { grid-template-columns: 1fr; } } /* Search Page - End ================================================== */ /* ================================================== 6.01 - OWL Carousel - Start ================================================== */ /* Nav */ .owl-carousel .owl-nav.disabled { display: none; } .owl-carousel .owl-nav { display: flex; justify-content: center; gap: 60px; margin-top: 45px; position: relative; } .owl-carousel .owl-nav::after, .owl-carousel .owl-nav::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: calc(50% - 95px); height: 1px; background-color: var(--light-black); } .owl-carousel .owl-nav::before { right: 0; left: inherit; } .owl-carousel .owl-nav .techq-owl-button { display: inline-flex; justify-content: center; gap: 100px; padding: 8px; background-color: var(--light-black); position: relative; } .owl-carousel .owl-nav .techq-owl-button::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 1px; background-color: var(--light-black); } .owl-carousel .owl-nav button.owl-prev, .owl-carousel .owl-nav button.owl-next { font-size: 24px; width: 40px; height: 40px; line-height: 40px; background: var(--primary-color); color: var(--white-color); } .owl-carousel .owl-nav button:hover { color: var(--white-color); background: var(--dark-color); } .techq-dark-bg .owl-carousel .owl-nav button:hover { color: var(--primary-color); background: var(--white-color); } @media (max-width: 767px) { .owl-carousel .owl-nav { margin-top: 30px; } } /* Dots */ .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-dots { margin-top: 30px; line-height: normal; position: relative; width: 100%; text-indent: inherit; text-align: center; cursor: pointer; } .owl-carousel .owl-dots .owl-dot { box-shadow: none; outline: none; background: transparent; border: 2px solid var(--primary-color); display: inline-block; padding: 0; margin: 0px 5px; height: 18px; width: 18px; transition: all 0.5s ease-in-out; cursor: pointer; } .owl-carousel .owl-dots .owl-dot span { display: none; } .owl-carousel .owl-dots .owl-dot:hover { background: var(--primary-color); border-color: var(--primary-color); opacity: 1; } .owl-carousel .owl-dots .owl-dot.active { background: var(--primary-color); border-color: var(--primary-color); opacity: 1; } /* OWL Carousel - End ================================================== */ /* ================================================== 7.01 - Form - Start ================================================== */ .techq-contact-form .wpcf7-not-valid-tip { color: #dc3232; font-size: 16px; font-weight: normal; display: block; } .techq-contact-form .wpcf7 form .wpcf7-response-output { margin-top: 20px; border: none; color: #dc3232; font-size: 16px; padding: 0; } /* Contact Form style 1 */ .techq-contact-form.style-1 { display: flex; flex-direction: column; gap: 20px; } .techq-contact-form.style-1 p { margin-bottom: 0; } .techq-contact-form.style-1 .form-group { display: flex; gap: 20px; } .techq-contact-form.style-1 .form-group div { width: 50%; } .techq-contact-form.style-1 .wpcf7-spinner { display: none; } .techq-contact-form.style-1 select option { color: var(--dark-color); background: var(--white-color); } @media (max-width : 767px) { .techq-contact-form.style-1 .form-group { display: flex; flex-direction: column; } .techq-contact-form.style-1 .form-group div { width: 100%; } } /* Form - End ================================================== */ /* ================================================== 8.01 - Elementor Editor - Start ================================================== */ .elementor-editor-active .techq-section-wrapper { position: relative; } .elementor-editor-active .techq-section-wrapper.techq-sticky-header-custom { position: fixed; } .elementor-editor-active .techq-edit-section-box-wrapper { position: absolute; z-index: 999999; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); opacity: 0; } .elementor-editor-active .techq-edit-section-box-wrapper:before { content: ' '; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.4); } .elementor-editor-active .techq-edit-section-box-wrapper:hover { opacity: 1; } .elementor-editor-active .techq-edit-section-box-wrapper:hover .techq-edit-section-bar { opacity: 1; } .elementor-editor-active .techq-edit-section-box-wrapper .techq-edit-section-bar { position: relative; z-index: 2; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3); transition: var(--transition); -webkit-transition: var(--transition); -moz-transition: var(--transition); -ms-transition: var(--transition); -o-transition: var(--transition); opacity: 0; } /* Elementor Editor - End ================================================== */