/* Theme Name: Avantex Theme URI: https://wpfrank.com/wordpress-themes/avantex/ Author: WP Frank Author URI: https://wpfrank.com/ Description: Avantex is made to be the fastest. with the latest mechanisms running in advanced website designs, with high-quality code optimized for performance. the theme perfectly suited for Business, Blog, Business Promotion, Market, Sports, Electrician, Industries, Newspaper, Freelancer, Lawyer, Architect, Appointment, Cooming Soon, Posts Website, Education, Gaming Hub, School, SEO, Medical, Construction, Wedding, Music, Food, Cafe, Hotel, Fashion, Online Shop, Interior Design, Building Design, Decoration, Construction, Corporate, Agency, Pet Care, Beauty & Spa Salons, Photography, Gym Fitness, Travel Agency, and approx all category frontend can be easily developed with the supported environment, You will have lots of options to consider. This theme supports the best Elementor page builder to create, edit and updates page designs as per the requirement. As well as it has some exotic features like customization and clean code, advanced typography, sticky menu, logo upload, header image, Latest Bootstrap framework, built with SEO in mind, and theme info area besides being Mobile-ready, also translation ready (WPML, Polylang) and it's built to be beautiful on all screen sizes with multiple homepage sections like slider, service, info, callout, testimonial.Theme Avantex is fully responsive and compatible with popular WordPress plugins like Page Builder, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, Gutenberg, Block-Enabled, WooCommerce, WPML, Yoast SEO, Jetpack, Contact Form 7, Mailchimp for WordPress, bbPress, Demo Importer, WPForms and more. Whether you’re running an online shopping store or setting up your website, Basically Avantex fulfills approx all your website needs, guiding you through the digital landscape and ensuring you never go astray. Tags: one-column, two-columns, four-columns, right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, rtl-language-support, translation-ready, full-width-template, custom-logo, blog, e-commerce, portfolio, Version: 0.2.4 Tested up to: 6.3.1 Requires PHP: 5.4 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl.html Text Domain: avantex */ /*-------------------------------------------------------------- # Common --------------------------------------------------------------*/ :root, ::after, ::before { --thm-font: 'Jost', sans-serif; --thm-reey-font: 'reeyregular'; --thm-gray: #726f84; /** #726f84; Links Color */ --thm-gray-rgb: 53, 114, 87; --thm-primary: #3c72fc; /** #3c72fc; Theme Primary Color */ --thm-primary-rgb: 255, 151, 24; --thm-black: #0f0d1d; /** #0f0d1d; Theme Dark Color */ --thm-black-rgb: 61, 14, 0; --thm-base: #ffffff; /** Theme Base Color */ --thm-base-rgb: 255, 255, 255; --thm-light: #f2f4f8; /** #f2f4f8; Theme Light Color */ --thm-light-rgb: 211, 203, 194; --thm-text: #726f84; --thm-letter-space-big: 0.05em; --thm-letter-space-zero: 0em; --thm-letter-space-small: -0.02em; --thm-text-transform: uppercase; --thm-button-background: rgb(15, 13, 29 / 50%); --color-opacity: 0.03; --color-primary: var(--thm-primary); --color-secondary: var(--thm-primary); --color-darkAccent: var(--thm-primary); --color-lightAccent: var(--thm-primary); --background: var(--thm-black); --duration: 1.5s; } /* Links Underline fix */ .textwidget a, .widget_text .textwidget a { text-decoration: underline; } .comment .comment-detail a{ text-decoration: underline; } /* Responsive slider image Caption fix */ @media (min-width:768px) and (max-width:992px) { .caption-content { padding-top: 12rem !important; } #slider-demo .item { height: 800px !important; } } @media (max-width:768px) { .caption-content { padding-top: 8rem !important; } #slider-demo .item { height: 680px !important; } } /* Mobile Fix for funfact Title */ @media (max-width:540px) { .callout-to-action .title { font-size: 32px !important; } } /* Fixes For theme Text color setting added */ #service-section p, #portfolio-demo .branding, #team-section .designation { color: var(--thm-gray); } #portfolio-demo .post:hover .branding { color: var(--thm-base) !important; } .team-module:hover .designation { color: var(--thm-base) !important; } /* Search Toggle outline fix button.toggle.search-toggle.desktop-search-toggle:focus { outline: none } */ /* Widget social Media fix */ a.wp-block-social-link-anchor { right: 7px; } /* Text Color Separation */ body p { color: var(--thm-text); } /*-------------------------------------------------------------- # For Loading animation. --------------------------------------------------------------*/ #avantex-loading { position: fixed; display: block; width: 100%; height: 100%; top: 0; left: 0; text-align: center; opacity: 0.9; background-color: var(--thm-black); z-index: 999999; } .avantex-loader { display: block; position: relative; height: 20px; width: 86px; top: 50%; right: 20px; margin: auto; } .avantex-loading-square { position: absolute; height: 20px; width: 20px; top: 0; } .avantex-loading-square:nth-child(1) { left: 0; animation: square1 var(--duration) linear forwards infinite; } .avantex-loading-square:nth-child(2) { left: 22px; animation: square2 var(--duration) linear forwards infinite; } .avantex-loading-square:nth-child(3) { left: 44px; animation: square3 var(--duration) linear forwards infinite; } .avantex-loading-square:nth-child(4) { left: 66px; animation: square4 var(--duration) linear forwards infinite; } @keyframes square1 { 0% { background-color: var(--color-primary); transform: translate(0, 0); } 9.09091% { transform: translate(0, calc(-100% - 2px)); background-color: var(--color-primary); } 18.18182% { transform: translate(calc(100% + 2px), calc(-100% - 2px)); background-color: var(--color-secondary); } 27.27273% { transform: translate(calc(100% + 2px), 0); } 100% { background-color: var(--color-secondary); transform: translate(calc(100% + 2px), 0); } } @keyframes square2 { 0% { background-color: var(--color-secondary); transform: translate(0, 0); } 18.18182% { transform: translate(0, 0); } 27.27273% { transform: translate(0, calc(100% + 2px)); background-color: var(--color-secondary); } 36.36364% { transform: translate(calc(100% + 2px), calc(100% + 2px)); background-color: var(--color-darkAccent); } 45.45455% { transform: translate(calc(100% + 2px), 0); } 100% { background-color: var(--color-darkAccent); transform: translate(calc(100% + 2px), 0); } } @keyframes square3 { 0% { background-color: var(--color-darkAccent); transform: translate(0, 0); } 36.36364% { transform: translate(0, 0); } 45.45455% { transform: translate(0, calc(-100% - 2px)); background-color: var(--color-darkAccent); } 54.54545% { transform: translate(calc(100% + 2px), calc(-100% - 2px)); background-color: var(--color-lightAccent); } 63.63636% { transform: translate(calc(100% + 2px), 0); } 100% { background-color: var(--color-lightAccent); transform: translate(calc(100% + 2px), 0); } } @keyframes square4 { 0% { transform: translate(0, 0); background-color: var(--color-lightAccent); } 54.54545% { transform: translate(0, 0); } 63.63636% { transform: translate(0, calc(100% + 2px)); background-color: var(--color-lightAccent); } 72.72727% { background-color: var(--color-darkAccent); } 81.81818% { background-color: var(--color-secondary); } 90.90909% { transform: translate(calc(-300% - 6px), calc(100% + 2px)); background-color: var(--color-primary); } 100% { transform: translate(calc(-300% - 6px), 0); background-color: var(--color-primary); } } .baseline { align-items: baseline; } .gutter-y-30 { --bs-gutter-y: 30px; } body { font-family: var(--thm-font); color: var(--thm-gray); font-size: 18px; line-height: 34px; font-weight: 500; } body.locked { overflow: hidden; } a { color: var(--thm-primary); } a, a:hover, a:visited { text-decoration: none; } a:focus-visible { text-decoration: underline; } ::-webkit-input-placeholder { color: inherit; opacity: 1; } ::-moz-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } h1, h2, h3, h4, h5, h6 { color: var(--thm-black); margin: 0; } dl, ol, ul { margin-top: 0; margin-bottom: 0; } ::-webkit-input-placeholder { color: inherit; opacity: 1; } ::-moz-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } .page-wrapper { position: relative; margin: 0 auto; width: 100%; min-width: 300px; overflow: hidden; } .container { padding-left: 15px; padding-right: 15px; } @media (min-width: 1200px) { .container { max-width: 1200px; } } /* Woocommerce related */ .shop .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { padding: 10px; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important; text-align: center; } .woocommerce .button { visibility: visible; opacity: 1; transform: translateY(0) translateX(0); } .woocommerce .button { position: relative; display: inline-block; vertical-align: middle !important; -webkit-appearance: none; border: none; background-color: var(--thm-primary) !important; color: var(--thm-base) !important; font-size: 15px !important; font-weight: 700; text-transform: var(--thm-text-transform) !important; padding: 18px 50px; transition: 500ms; letter-spacing: 0.1em; /* margin: 0px 25px !important; */ } .woocommerce .button:hover { background: var(--thm-black) !important; color: var(--thm-primary) !important; } .woocommerce .added_to_cart { position: relative; display: inline-block; vertical-align: middle !important; -webkit-appearance: none; border: none; background-color: var(--thm-primary) !important; color: var(--thm-base) !important; font-size: 15px !important; font-weight: 700; text-transform: var(--thm-text-transform) !important; padding: 0px 37px; padding-top: 0px !important; margin-top: 15px; transition: 500ms; letter-spacing: 0.1em; } .added_to_cart:hover { background: var(--thm-black) !important; color: var(--thm-primary) !important; } .woocommerce #coupon_code { width: 115px; } /* WooCommerce pagination */ nav.woocommerce-pagination { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; overflow: visible !important } nav.woocommerce-pagination ul { list-style: none; text-align: center; text-decoration: none; margin: 2rem auto; } nav.woocommerce-pagination li span.current, nav.woocommerce-pagination li a { width: 50px; height: 50px; line-height: 50px; display: inline-block; } .woocommerce nav.woocommerce-pagination ul li a { padding: 0 0.8rem 0 1rem !important; line-height: 3; margin: 0; } .woocommerce nav.woocommerce-pagination ul li span { line-height: 2 !important; padding: 0.5em !important; font-weight: 700; } .woocommerce nav.woocommerce-pagination ul li a:hover { background: var(--thm-primary) !important; color: var(--thm-base) !important; font-weight: 600; } nav.woocommerce-pagination li { box-shadow: 0 3px 20px -0.2px rgba(0, 0, 0, 0.1); transition: all 300ms cubic-bezier(0.250, 0.100, 0.250, 1.000); transition-timing-function: cubic-bezier(0.250, 0.100, 0.250, 1.000); color: var(--thm-black) !important; background: var(--thm-base) !important; float: left; } nav.woocommerce-pagination li a { color: var(--thm-black) !important; text-decoration: none; } nav.woocommerce-pagination li span.current, nav.woocommerce-pagination li:hover { background: var(--thm-primary) !important; } nav.woocommerce-pagination li span.current { color: var(--thm-black) !important; } nav.woocommerce-pagination li a.next { width: auto !important; padding: 0 2rem 0 0.8rem !important; position: relative; } nav.woocommerce-pagination li a.prev { width: auto !important; padding: 0 0.8rem 0 2rem !important; position: relative; } .next:after, .prev:before { content: ''; position: absolute; font-family: var(--thm-font); font-weight: 700; } .prev:before { left: .5rem; } .next:after { right: .5rem; } .prev:before { vertical-align: middle; //content: "\f060"; } .next:after { vertical-align: middle; //content: "\f061"; } /* Selective Refresh related */ .customize-partial-edit-shortcut-avantex-slider-show { left: 10%; top: 25%; } .customize-partial-edit-shortcut-avantex-services-show { left: 10%; } .customize-partial-edit-shortcut-avantex-portfolio-show { left: 10%; } .customize-partial-edit-shortcut-avantex-callout-show { left: 10%; } .customize-partial-edit-shortcut-avantex-team-show { left: 10%; } .customize-partial-edit-shortcut-avantex-testimonial-show { left: 10%; } .customize-partial-edit-shortcut-avantex-news-show { left: 10%; } .customize-partial-edit-shortcut-avantex-sponsor-show { left: 10%; } .customize-partial-edit-shortcut-avantex_copyright { left: 25%; } .customize-partial-edit-shortcut-avantex-topbar-show { top: 5%; /* left:35%; */ } .customize-partial-edit-shortcut-avantex-topbar-social-show { top: 5%; } .customize-partial-edit-shortcut-avantex-menu-size { left: 43%; top: 43%; } /* boxed style */ body.boxed-wrapper { background-color: var(--thm-light); } .boxed-wrapper .page-wrapper { max-width: 1410px; margin-left: auto; margin-right: auto; background-color: var(--thm-base); box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.08); } .boxed-wrapper .page-wrapper__dark { background-color: var(--thm-black); } ::-webkit-input-placeholder { color: inherit; opacity: 1; } ::-moz-placeholder { color: inherit; opacity: 1; } :-ms-input-placeholder { color: inherit; opacity: 1; } ::-ms-input-placeholder { color: inherit; opacity: 1; } ::placeholder { color: inherit; opacity: 1; } #section { margin: 0; padding: 100px 0 50px; } img { display: block; height: auto; max-width: 100%; } .section-separator { border-color: var(--thm-border); border-width: 1px; margin-top: 0; margin-bottom: 0; } .theme-dark { background-color: var(--thm-black); } .theme-light { background-color: var(--thm-light); } .text-dark { color: var(--thm-black); } .text-light { color: var(--thm-light); } .thm-btn { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; background-color: var(--thm-primary); color: var(--thm-base); font-size: 14px; font-weight: 700; text-transform: var(--thm-text-transform); padding: 18px 50px; transition: 500ms; letter-spacing: 0.1em; } .thm-btn:hover { background: var(--thm-base); color: var(--thm-primary); } .theme-wrapper { background: var(--thm-base); } /* @media only screen and (max-width: 699px) { .theme-wrapper { padding-top: 5.5rem !important; } }*/ /* @media only screen and (min-width: 350px) and (max-width: 768px) { .theme-wrapper { padding-top: 8.5rem !important; } } */ body.locked .theme-wrapper { visibility: hidden !important; } .bootstrap-select .dropdown-menu { padding-top: 0; padding-bottom: 0; border-radius: 0; } .bootstrap-select .dropdown-item.active, .bootstrap-select .dropdown-item:active { background-color: var(--thm-base); } .preloader { position: fixed; background-color: var(--thm-black); background-position: center center; background-repeat: no-repeat; top: 0; left: 0; right: 0; bottom: 0; z-index: 9991; display: flex; justify-content: center; align-items: center; text-align: center; } .preloader__image { background-image: url(assets/images/loader.png); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flipInY; animation-name: flipInY; -webkit-animation-duration: 2s; animation-duration: 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-repeat: no-repeat; background-position: center center; background-size: 60px auto; width: 100%; height: 100%; } /* card effect */ .card-holder { position: relative; } .card-holder::before, .card-holder::after { position: absolute; content: ''; left: -10px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .card-holder::before { width: 10px; height: 100%; top: 10px; } .card-holder::after { width: 100%; height: 10px; bottom: -10px; } .card-holder.double .card__image::before, .card-holder.double .card__image::after { position: absolute; content: ''; left: -20px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; background: var(--thm-black); } .card-holder.holder-small .card__image::before, .card-holder.holder-small .card__image::after { right: -20px; left: unset !important; } .card-holder.holder-small::before, .card-holder.holder-small::after { right: -10px; left: unset !important; } .card-holder.double .card__image::before { width: 10px; height: 100%; top: 20px; } .card-holder.double .card__image::after { width: 100%; height: 10px; bottom: -20px; } .card-holder.base::before, .card-holder.base::after { background: var(--thm-primary); } /* scroll to top */ .scroll-to-top { display: inline-block; width: 45px; height: 45px; background: var(--thm-primary); position: fixed; bottom: 40px; right: 40px; z-index: 99; text-align: center; transition: all 0.4s ease; display: none; border-radius: 50%; transition: all 0.4s ease; } .scroll-to-top i { color: var(--thm-base); font-size: 18px; line-height: 45px; } .scroll-to-top:hover { background-color: var(--thm-black); } .scroll-to-top:hover i { color: var(--thm-base); } /* page loader */ .page-loader { position: fixed; background-color: var(--thm-black); background-position: center center; background-repeat: no-repeat; top: 0; left: 0; right: 0; bottom: 0; z-index: 9991; display: flex; justify-content: center; align-items: center; text-align: center; } .preloader-image { background-image: url(assets/images/logo.png); -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: flipInY; animation-name: flipInX; -webkit-animation-duration: 2s; animation-duration: 3s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; background-repeat: no-repeat; background-position: center center; background-size: 200px auto; width: 100%; height: 100%; } /*--------------------------------------------------------------*/ /* Sticky Menu */ /* ------------------------------------------------------------ */ /* Sticky Header */ .avantex-sticky-top { position: fixed; z-index: 999; top: -160px; left: 0; background-color: var(--thm-black); width: 100%; transform: translateY(160px); transition: transform 500ms ease, visibility 500ms ease; box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 5%); } /* -------------------------------------------------------------- */ /* Section Header & Title /*--------------------------------------------------------------*/ .section-header { margin: -7px 0 60px; padding: 0 15px; display: block; text-align: center; } .section-header .section-title { position: relative; margin: 0; font-weight: 900; color: var(--thm-black); font-size: 50px; line-height: 60px; text-transform: var(--thm-text-transform); margin-bottom: 8px; letter-spacing: var(--thm-letter-space-small); } .section-header .section-subtitle { position: relative; display: inline-block; color: var(--thm-gray); font-size: 18px; align-items: center; line-height: 30px; margin-bottom: 8px; } .section-header .section-title.light, .section-header .section-subtitle.light { color: var(--thm-base); } .divider-line { display: block; width: 100%; font-size: 0; line-height: 0; margin: 12px 0 17px; color: var(--thm-gray); } .divider-line:before, .divider-line:after { content: ''; display: block; border-top: 2px solid; } .divider-line:before { width: 60px; margin: 0 auto; } .divider-line:after { width: 30px; margin: 5px auto 0; } .divider-line.light { color: var(--thm-base) !important; } /*-------------------------------------------------------------- # Navigations --------------------------------------------------------------*/ /* Sticky Header */ .sticky-menu.sticky-fixed { position: fixed; z-index: 999; top: -160px; left: 0; background-color: var(--thm-black); width: 100%; transform: translateY(160px); transition: transform 500ms ease, visibility 500ms ease; box-shadow: 0px 10px 60px 0px rgb(0 0 0 / 5%); } .topheader_bg { display: flex; background: var(--thm-primary); float: left; width: 100%; height: 50px; z-index: 10000; padding: 0; } .top_header_add { float: left; line-height: 50px; padding-left: 22px; } .top_header_add ul { margin: 0px; padding: 0px; width: 100%; } .top_header_add li { float: left; width: auto; list-style: none; color: var(--thm-base); position: relative; font-size: 14px; margin-right: 30px; } .top_header_add ul li a { color: var(--thm-base); font-size: 14px; text-transform: lowercase; } .top_header_add ul li:first-child:after { content: ""; position: absolute; top: 10%; right: -15px; background-color: var(--thm-base); /* #e4e4e42b; */ width: 1px; height: 80%; } .header_btn { float: right; width: auto; } .header_btn a { width: 150px; height: 50px; background: #fff; float: left; text-align: center; cursor: pointer; position: relative; overflow: hidden; font-size: 16px; color: var(--thm-black); /* #3a424a; */ border: 2px solid transparent; line-height: 46px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-weight: 600; text-transform: var(--thm-text-transform); z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; transition: background-color 0.6s, color 0.6s; -webkit-transition: all 0.6s; -o-transition: all 0.6s; -ms-transition: all 0.6s; -moz-transition: all 0.6s; transition: all 0.6s; } .header2_btn a { width: 190px; height: 50px; line-height: 52px; background: var(--thm-black); color: var(--thm-base); /* #89879a; */ font-size: 14px; border-radius: 0; border: 0; background-color: rgba(0, 0, 0, 0.6); } .social_links_wrapper { margin-left: auto; } .social_links { float: right; } .social_links ul li { float: left; } .social_links ul li a { float: left; width: 33px; height: 50px; text-align: center; line-height: 50px; position: relative; color: var(--thm-gray); /* #797979; */ } /*---------------- */ .header-top .widget { margin: 10px 0; padding: 0 !important; } .header-top .widget .header-contact-info li a { color: var(--thm-base); } .header-contact-info { margin: 0; list-style: none; } .header-contact-info li { border-bottom: 0 none; word-wrap: break-word; font-size: 1.000rem; line-height: 1.75; color: var(--thm-base); margin: 1px 0; } .header-contact-info li i.top-icon { font-size: 1.125rem; line-height: 2; text-align: center; transition: all 0.3s ease-in-out 0s; margin: 0px 15px 0px 0px; padding: 0; height: 35px; width: 35px; background-color: var(--thm-base); border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; } .header-contact-info li>a { color: var(--thm-base); transition: all 0.3s ease-in-out 0s; } .header-contact-info li>a:hover, .header-contact-info li>a:focus { color: var(--thm-base) !important; } .text-large { font-size: 20px; font-weight: 700; padding-right: 5px; font-style: italic; } @media (max-width: 999px) { .header-contact-info, .social-icons { text-align: center; display: none; } } /*--------------------------------------------------------------*/ /* Social Icons /*--------------------------------------------------------------*/ .header-top .widget .social-icons { padding-top: 2px; } .social-icons { margin: 0px; padding: 0; font-size: 0; } .social-icons li { transition: all 500ms ease; display: inline-block; } .header-top .social-icons li:hover { background-color: var(--thm-black); } .header-top .social-icons li:hover a { color: var(--thm-light); } .header-top .header_btn a:hover { background-color: var(--thm-primary); color: var(--thm-light); } .social-icons a { transition: all 500ms ease; display: inline-block; position: relative; margin-right: 0; width: 40px; height: 50px; font-size: 16px; line-height: 52px; text-align: center; text-decoration: none; color: var(--thm-base); } .social-icons a:hover, .social-icons a:focus { text-decoration: none; } .navbar-brand { font-family: inherit; font-size: 1.75rem; font-weight: 700; line-height: inherit; border: none; color: inherit; text-transform: var(--thm-text-transform); text-rendering: optimizeLegibility; } .header { position: absolute; left: 0; top: 0; width: 100%; height: auto; z-index: 999; border: none; } .header .nav-wrap { background: var(--thm-black); -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .header .wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; max-width: 100%; height: auto; } .header .navbar { max-width: 100%; height: auto; padding: 0 } .header .menu>li { position: relative; display: inline-block; margin: 0 0.75rem; /* padding-top: 40.5px; */ /* padding-bottom: 40.5px; */ /* position: relative; */ padding: 40.5px 0px; } .header .menu>li>a { border: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; /* color: #8f8da0; */ text-transform: var(--thm-text-transform); position: relative; transition: all 500ms ease; letter-spacing: var(--thm-letter-space-big); } .header .menu>li>span.icon { transition: all 500ms ease; } .header .menu>li>a .expand { position: relative; display: inline-block; height: 0.75rem; width: 0.75rem; margin-left: 0.35rem; border: none; pointer-events: none; } .header .menu>li>a .expand:before, .header .menu>li>a .expand:after { position: relative; -webkit-box-sizing: inherit; box-sizing: inherit; content: ''; left: 50%; top: 50%; width: 100%; height: 2px; background: #121212; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .header .menu>li:hover>a .expand::before, .header .menu>li:hover>a .expand::after { background: #e91e63; } .header .menu>li>a .expand::after { -webkit-transform: translate(-50%, -50%) rotate(-90deg); -ms-transform: translate(-50%, -50%) rotate(-90deg); transform: translate(-50%, -50%) rotate(-90deg); } .header .menu li .sub-menu .menu-item:hover>a { background-color: var(--thm-primary); color: var(--thm-base) !important; } .header .menu li .sub-menu li.menu-item-has-children:hover .icon { color: var(--thm-base); } .header .menu>li>.sub-menu, .header .menu>li>.sub-menu .sub-menu { padding: 0 10px; border: none; position: relative; top: 99%; left: 0; min-width: 220px; background-color: var(--thm-base); flex-direction: column; justify-content: flex-start; align-items: flex-start; opacity: 1; visibility: hidden; transition: 500ms ease; z-index: 99; /* box-shadow: 0px 0px 65px 0px rgb(0 0 0 / 10%); */ } .header .menu>li>.sub-menu .sub-menu.active { visibility: visible; opacity: 1; } .header .menu>li>.sub-menu>li>.sub-menu { /* left: 221px; top: 0; */ } .header .menu>li>.sub-menu>li { display: block; } /* .header .menu>li>ul.sub-menu>li>a, .menu-modal .menu>li>.sub-menu>li>.ancestor-wrapper>a, .header .menu>li>ul.sub-menu>li>.sub-menu>li>a, .menu-modal .menu>li>ul.sub-menu>li>.sub-menu>li>.ancestor-wrapper>a { display: block; font-family: inherit; font-size: 14px; font-weight: 500; line-height: inherit; padding: 0.5rem 1.25rem; color: #121212; text-transform: var(--thm-text-transform); text-rendering: optimizeLegibility; -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } */ ul.sub-menu>li>.ancestor-wrapper>a { border: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; color: var(--thm-black); text-transform: var(--thm-text-transform); position: relative; transition: all 500ms ease; letter-spacing: var(--thm-letter-space-big); } .header .opened-menu { position: relative; display: none; cursor: pointer; width: 2rem; height: 1rem; border: none; opacity: 0; visibility: hidden; background: none; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .header button.opened-menu:focus { outline: none !important; } .header .opened-menu span { display: block; position: absolute; width: 100%; height: 2px; left: 0; border: none; opacity: 1; border-radius: 0.25rem; background: var(--thm-base); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: all 0.25s ease; -o-transition: all 0.25s ease; transition: all 0.25s ease; } .header .opened-menu span:nth-child(1) { top: 0; } .header .opened-menu span:nth-child(2), .header .opened-menu span:nth-child(3) { top: 0.5rem; } .header .opened-menu span:nth-child(4) { top: 1rem; } .header .closed-menu { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; width: 2.5rem; height: 2.5rem; border: none; background: none; } .header .closed-menu img.closed-icon { display: block; width: 1rem; height: auto; } .header .overlay { position: fixed; left: 0; top: 0; height: 100%; width: 100%; z-index: 999; opacity: 0; visibility: hidden; background: rgb(0 0 0); -webkit-transition: all 0.35s ease; -o-transition: all 0.35s ease; transition: all 0.35s ease; } .header .logo-dark { display: none; } .menu-item-has-children button { display: none; } @media only screen and (min-width: 993px) { .header .menu>.menu-item-has-children:hover>.sub-menu, .header .menu>.menu-item-has-children:focus-within>.sub-menu, .header .menu>.menu-item-has-children>.sub-menu>.menu-item-has-children:hover>.sub-menu { display: block; opacity: 1; visibility: visible; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .header .menu>.menu-item-has-children:hover>a .expand::after { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .header .menu>.menu-item:hover>a, .header .menu>.menu-item:hover>span.icon { color: var(--thm-base); font-weight: 500; } } @media only screen and (max-width: 999px) { .header .overlay.active { display: block; opacity: 1; visibility: visible; } .menu-modal.navbar { align-content: flex-start; position: fixed; top: 0; left: -18rem; width: 18rem; height: 100%; z-index: 99999; opacity: 0; overflow-y: auto; visibility: hidden; background: var(--thm-base); -webkit-box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); -webkit-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .menu-modal.navbar.active { left: 0rem; opacity: 1; visibility: visible; } .menu-modal.navbar::-webkit-scrollbar { width: 5px; } .menu-modal.navbar::-webkit-scrollbar-thumb { border-radius: 1rem; background: #e6e6e6; -webkit-box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12); } .menu-modal.navbar .menu { width: 100%; height: auto; /*margin-top: 1.5rem;*/ padding: 0; } .menu-modal .menu>li>.ancestor-wrapper>a { border: none; font-size: 14px; font-weight: 500; display: flex; align-items: center; color: #8f8da0; text-transform: var(--thm-text-transform); position: relative; transition: all 500ms ease; letter-spacing: var(--thm-letter-space-big); } .menu-modal.navbar .menu>li { display: block; margin: 0; padding-top: 0; padding-bottom: 0; display: flex; width: 100%; line-height: inherit; flex-wrap: wrap; align-items: center; border: 1px solid #f2f2f2; align-content: stretch; justify-content: space-between; } .menu-modal.navbar .menu>.menu-item-has-children>.ancestor-wrapper>a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .menu-modal.navbar .menu>li a { padding: 0.5rem 1rem; color: var(--thm-black); margin-right: 30px; } .modal-menu a:focus, .modal-menu a:hover, .modal-menu li.current-menu-item>.ancestor-wrapper>a, .modal-menu li.current_page_ancestor>.ancestor-wrapper>a { color: var(--thm-primary); } a.wcmenucart-contents.cart-icon:focus { color: var(--thm-base); } a.wcmenucart-contents.cart-icon:hover { color: var(--thm-primary); } .menu-modal.navbar .menu>.menu-item:first-child>.ancestor-wrapper>a { border-top: 1px solid #f2f2f2; } .menu-modal.navbar .menu>li>a .expand::before, .menu-modal.navbar .menu>li>a .expand::after { background: #121212; } .menu-modal.navbar .menu>.menu-item-has-children.active>.ancestor-wrapper>a .expand:after { -webkit-transform: translate(-50%, -50%) rotate(0deg); -ms-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); } .menu-modal.navbar .menu>li>.sub-menu { position: relative; top: auto; left: auto; width: 100%; max-height: 100%; padding: 0px 10px; border: none; opacity: 1; overflow: hidden; visibility: hidden; background: transparent; -webkit-box-shadow: none; box-shadow: none; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .menu-modal.navbar .menu>li.active>.sub-menu { visibility: visible; } .menu-modal.navbar .menu>li>.sub-menu>li>.ancestor-wrapper>a { padding: 0.5rem 1rem; color: var(--thm-black); border-bottom: 1px solid #f2f2f2; } .menu-modal.navbar .menu>li>.sub-menu>li>.sub-menu>li>.ancestor-wrapper>a { padding: 0.5rem 1rem; color: var(--thm-black); border-bottom: 1px solid #f2f2f2; } .menu-modal .menu>li>.sub-menu.active, .menu-modal .menu>li>.sub-menu>.sub-menu.active { visibility: visible; } .menu-modal .menu>li>.sub-menu>li>.ancestor-wrapper>a { padding: 0.5rem 1rem; color: var(--thm-black); border-bottom: 1px solid #f2f2f2; } .header .opened-menu { display: block; opacity: 1; visibility: visible; } .menu-modal .closed-menu { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; top: 1rem; right: 1rem; background-color: var(--thm-primary); color: var(--thm-light); fill: var(--thm-light); padding: 8px; z-index: 1; } .menu-modal .navbar-brand img { display: block; width: 160px; padding-top: 20px; padding-left: 12px; margin: 0; } .menu-modal .site-logo { display: flex; background-color: var(--thm-black); } .navbar-brand img { width: 170px; position: relative; float: left; padding: 10px 0; } .navbar-brand { float: none; } .has-dropdown:after { right: 10px !important; } .navbar .shopping-cart { margin-top: 20px; } .menu-item-has-children button { display: block; top: 10px; right: 5%; width: 35px; height: 35px; background-color: var(--thm-primary); border: none; color: var(--thm-base); fill: var(--thm-base); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-90deg); transition: transform 500ms ease; } .menu-item-has-children.active button { transform: rotate(0deg); } .menu-item-has-children.active .has-dropdown { color: var(--thm-primary) !important; } .has-dropdown:after { display: none; } .menu-item-has-children { padding-right: 10px; /* padding-left: 10px; */ } } .has-dropdown:after { content: "\f107"; position: absolute; right: -14px; font-family: 'Font Awesome 5 Free'; font-style: normal; font-weight: 600; font-size: 12px; } .main { display: block; max-width: 100%; height: auto; margin: 6rem 0; } /*Shopping cart*/ /* .shopping-cart { width: 60px; height: 50px; background: var(--thm-primary); text-align: center; line-height: 46px; color: aliceblue; z-index: 9; border-radius: 50%; border: 2px solid #383838; margin-left: 20px; margin-right: 30px; cursor: pointer; } */ /*--------------------------------------------------------------*/ /* Slider One - Owl Carousel /*--------------------------------------------------------------*/ .hero-slider { position: relative; } #slider-demo { margin: 0px; } #slider-demo .item { position: relative; background-color: #fff; background-repeat: no-repeat; background-position: top center; width: 100%; z-index: 0; background-size: cover; height: 980px; } .slider-caption { position: relative; display: table; height: 100%; padding-top: 100px; } .caption-content { /* display: flex; */ vertical-align: middle; /* flex-direction: column; */ padding-top: 15rem; /* align-items: center; */ } .owl-carousel .owl-item.active .slider-caption .thm-btn, .owl-carousel .owl-item.active .slider-caption p, .owl-carousel .owl-item.active .slider-caption span, .owl-carousel .owl-item.active .slider-caption h2, .owl-carousel .owl-item.active p { visibility: visible; opacity: 1; transform: translateY(0) translateX(0); } .slider-caption .title { margin: 0; margin-bottom: 30px; color: var(--thm-base); font-weight: 900; letter-spacing: var(--thm-letter-space-small); opacity: 0; visibility: hidden; transform: translateY(120px); transition-delay: 1000ms; transition: transform 2000ms ease, opacity 2000ms ease; font-size: 80px; line-height: 105px; text-transform: var(--thm-text-transform); padding-top: 32px; } .slider-caption .thm-btn:hover { background-color: var(--thm-black); color: var(--thm-base); } .slider-caption .subtitle { font-size: 14px; position: relative; font-weight: 600; color: var(--thm-base); text-transform: var(--thm-text-transform); letter-spacing: 0.1em; background-color: rgba(var(--thm-black-rgb), .10); display: inline-block; padding: 8px 20px; margin: 0; opacity: 0; transform: translateY(-120px); transition-delay: 0; transition: transform 2000ms ease, opacity 2000ms ease; background-color: rgba(var(--thm-base-rgb), .1); border-bottom: 2px solid var(--thm-primary); } .slider-caption p { font-size: 20px; color: var(--thm-base); font-weight: 400; margin-bottom: 50px; margin-top: 15px; opacity: 0; transform: translateY(120px); transition-delay: 0; transition: transform 2000ms ease, opacity 2000ms ease; } .hero-slider .slider-caption .thm-btn { opacity: 0; transform: translateY(100px); transition-delay: 2500ms; transition: transform 2000ms ease, opacity 2000ms ease, color 500ms ease, background 500ms ease; } @media (max-width: 768px) { .slider-caption { width: 88%; } .header_btn { display: none; } .site-description { display: none; } .header-top { /* display: none; */ } } /*--------------------------------------------------------------*/ /* Owl Carousel Next Prev /*--------------------------------------------------------------*/ .owl-carousel .owl-prev, .owl-carousel .owl-next { background-color: var(--thm-black); color: var(--thm-base); font-size: 1.000rem; line-height: 2.5; width: 40px; height: 40px; text-decoration: none; transition: all 0.3s ease-in-out; display: block; margin: -25px 0 0; position: absolute; text-align: center; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; } .owl-carousel .owl-prev { left: 0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .owl-carousel .owl-next { right: 0px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .owl-carousel:hover .owl-prev { left: 20px; opacity: 1; } .owl-carousel:hover .owl-next { right: 20px; opacity: 1; } .owl-carousel .owl-prev:hover, .owl-carousel .owl-next:hover { color: var(--thm-base); background-color: var(--thm-primary); /* opacity: 1; */ } @media (max-width: 768px) { .owl-carousel .owl-prev, .owl-carousel .owl-next { font-size: 0.813rem; line-height: 2.5; width: 30px; height: 30px; } .owl-carousel:hover .owl-prev { left: 10px; opacity: 1; } .owl-carousel:hover .owl-next { right: 10px; opacity: 1; } } /* Main Slider Next Prev */ #slider-demo .owl-prev, #slider-demo .owl-next { background-color: #ffffff00; text-decoration: none; display: block; margin: -30px 0 0; width: 50px; height: 34px; position: absolute; text-align: center; font-size: 15px; line-height: 2.6; top: 50%; z-index: 10; overflow: hidden; opacity: 1; cursor: pointer; color: var(--thm-base); /* text-shadow: 1px 1px 0 rgb(255 255 255 / 30%); */ /* -webkit-transition: all 0.3s ease-in-out; */ -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; /* border-bottom: 2px solid #3c72fc; */ transform: rotate(270deg); } #slider-demo .owl-prev { left: 0px; -webkit-border-radius: 0px 5px 5px 0px; -moz-border-radius: 0px 5px 5px 0px; border-radius: 0px 5px 5px 0px; } #slider-demo .owl-next { right: 0px; -webkit-border-radius: 5px 0px 0px 5px; -moz-border-radius: 5px 0px 0px 5px; border-radius: 5px 0px 0px 5px; } #slider-demo:hover .owl-prev { left: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #slider-demo:hover .owl-next { right: 30px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #slider-demo .owl-prev:hover, #slider-demo .owl-next:hover { opacity: 1; } @media (max-width: 768px) { #slider-demo .owl-prev, #slider-demo .owl-next { font-size: 0.813rem; line-height: 2.5; width: 30px; height: 30px; } #slider-demo:hover .owl-prev { left: 10px; } #slider-demo:hover .owl-next { right: 10px; } } /*--------------------------------------------------------------*/ /* Owl Carousel Paginations / Dots /*--------------------------------------------------------------*/ .owl-theme .owl-dots .owl-dot span { background: rgba(32, 32, 32, 1); } .testimonial .owl-theme .owl-dots .owl-dot.active span, .testimonial .owl-theme .owl-dots .owl-dot:hover span { background: rgba(255, 255, 255, 1); } .testimonial-two .owl-theme .owl-dots .owl-dot span { background: #cacaca; } /*--------------------------------------------------------------*/ /* About Section /*--------------------------------------------------------------*/ section#about-section { position: relative; padding: 100px 0 25px 0; min-height: 720px; } /*--------------------------------------------------------------*/ /* Service Section /*--------------------------------------------------------------*/ #service-section .section-title { color: var(--thm-base) } .service { position: relative; padding: 100px 0 50px 0; } .service-shape { /* background: url(assets/images/service-shape.png); */ background-repeat: no-repeat; position: absolute; padding: 100px 0; height: 100%; width: 100%; opacity: 0.3; top: 0; } .service .post { position: relative; display: block; background-color: #06050c; padding: 54px 60px 75px; margin-bottom: 30px; transition: background 500ms ease; } .service .post .entry-header .entry-title { font-size: 24px; color: var(--thm-primary); font-weight: 700; text-transform: var(--thm-text-transform); line-height: 29px; margin-bottom: 20px; letter-spacing: -.02em; } .service .post .entry-header .entry-title a { color: var(--thm-base); } .service .post .entry-content p { transition: all 500ms ease; } .service-icon { position: absolute; bottom: 40px; right: 60px; color: var(--thm-primary); } .service-icon i { font-size: 65px; /* color: var(--thm-primary); */ color: inherit; line-height: 65px; transform: scale(1); transform-origin: center center; transition: transform 500ms ease, color 500ms ease; display: block; } .service .post .more-link { position: relative; display: inline-block; font-size: 12px; /* color: #8f8da0; */ color: inherit; font-weight: 700; text-transform: var(--thm-text-transform); letter-spacing: .1em; transition: all 500ms ease; } .service .post .more-link:hover::before { width: 100%; } .service .post .more-link:before { position: absolute; bottom: 0; left: 0; content: ""; height: 2px; width: 10px; background-color: currentColor; transition: width 500ms ease; } .service .post:hover { background-color: var(--thm-primary); } .service .post:hover .entry-content p, .service .post:hover .entry-content a, .service .post:hover .service-icon i, .service .post:hover .entry-title a { color: var(--thm-base) !important; } /*--------------------------------------------------------------*/ /* Portfolio Section /*--------------------------------------------------------------*/ .portfolio { padding: 100px 0 100px !important; } .portfolio .post { position: relative; margin: 0px 0 50px; width: 100%; } .portfolio .portfolio-caption { position: relative; } .portfolio .post img { width: 100%; transform: scale(1); transition: all 500ms ease; max-width: 100%; } .portfolio .post:hover .portfolio-thumbnail>img { transform: scale(1.05); opacity: 1; } .portfolio .portfolio-thumbnail figcaption { position: absolute; display: block; background-color: var(--thm-black); padding: 20px 15px 30px; transition: background 500ms ease; max-width: 338px; width: 100%; bottom: -55px; } .portfolio .portfolio-thumbnail figcaption p.branding { font-size: 14px; font-weight: 800; margin: 0; line-height: 24px; text-transform: var(--thm-text-transform); padding-bottom: 5px; letter-spacing: var(--thm-letter-space-big); transition: all 500ms ease } .portfolio .portfolio-thumbnail figcaption .entry-title { font-size: 30px; color: var(--thm-base); font-weight: 900; text-transform: var(--thm-text-transform); line-height: 34px; letter-spacing: var(--thm-letter-space-small); } .portfolio .portfolio-thumbnail figcaption .entry-title a { position: relative; color: var(--thm-base); } .portfolio .post:hover figcaption { background-color: var(--thm-primary); } .portfolio .post:hover figcaption p { color: var(--thm-base); } .portfolio .post figcaption .entry-title a:before { position: absolute; bottom: 0; left: 0; content: ""; height: 2px; width: 10px; background-color: currentColor; transition: width 500ms ease; } .portfolio .post figcaption .entry-title a:hover::before { width: 100%; } .portfolio-overlay { visibility: hidden; opacity: 0; transition: all 0.3s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 0px; } .portfolio .post:hover .portfolio-overlay { visibility: visible; opacity: 1; } .portfolio-overlay-inner { position: absolute; left: 0; margin-top: 0px; bottom: auto; /* 58px */ -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-100%); } .portfolio-thumbnail .portfolio-icons { margin-top: 0px; text-align: center; width: 100%; } .portfolio-thumbnail .portfolio-icons a { display: inline-block; padding-left: 0px; color: var(--thm-base); padding: 0; text-decoration: none; background-color: var(--thm-black); transition: all 0.1s ease; height: 100%; width: 60px; -wekbit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -wekbit-transform: translateY(70px); -moz-transform: translateY(70px); -o-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); } .portfolio .post:hover .portfolio-thumbnail .portfolio-icons a { -wekbit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .portfolio-thumbnail .portfolio-icons a:hover { color: var(--thm-base); } .portfolio-thumbnail .portfolio-icons a i { font-size: 20px; line-height: 50px; } .portfolio-thumbnail .portfolio-icons a:hover { background-color: var(--thm-primary); } #portfolio-demo figcaption { cursor: default; } /*--------------------------------------------------------------*/ /* Portfolio Single /*--------------------------------------------------------------*/ .project-wrap { padding-right: 450px; } .portfolio-single .project-details { position: absolute; left: 60%; } .portfolio-single .project-detail .entry-title { line-height: 50px !important; } .portfolio-single .project-details .entry-title { font-size: 30px; font-weight: 900; text-transform: var(--thm-text-transform); line-height: 50px; letter-spacing: var(--thm-letter-space-small); } .portfolio-single .project-detail { position: relative; width: 100%; height: 100%; background: #0f0d1d; margin-left: 200px; margin-top: -115px; } .portfolio-single .project-detail-list { float: left; list-style: outside none none; margin-bottom: 0; margin-top: 15px; padding-left: 0; width: 100%; } .project-detail-list li { border-bottom: 1px solid #ebebeb; padding: 15px 0; } .project-detail-list i { display: table-cell; width: 30px; } .project-info { display: table-cell; line-height: 28px; } .portfolio-single .portfolio-thumbnail figcaption { height: 100%; position: initial !important; max-width: 100%; padding: 30px 45px 30px; } .portfolio-single .card-holder.holder-small::before, .portfolio-single .card-holder.holder-small::after { right: -210px !important; } /*--------------------------------------------------------------*/ /* Callout Section /*--------------------------------------------------------------*/ .callout-to-action { /* background: url(assets/images/callout/callout-bg.jpg) center center fixed; */ background-size: cover !important; background-repeat: no-repeat; position: relative; padding: 100px 0; height: 100%; width: 100%; } /* .callout-to-action::before { content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 0; background-color: rgb(15 13 29 / 90%) } */ .callout-to-action .title { font-size: 60px; color: var(--thm-base); font-weight: 900; line-height: 70px; text-transform: var(--thm-text-transform); margin-bottom: 15px; letter-spacing: var(--thm-letter-space-small); } .callout-to-action .callout-inner-txt { position: relative; display: block; text-align: center; } .callout-to-action .callout-inner-txt .subtitle { color: var(--thm-gray); } .callout-to-action .thm-btn:hover { background-color: var(--thm-black); color: var(--thm-base); } /*--------------------------------------------------------------*/ /* Testimonial Section /*--------------------------------------------------------------*/ .testimonial { padding: 100px 0 50px; } .testimonial .owl-carousel .owl-prev, .testimonial .owl-carousel .owl-next { opacity: 1; width: 60px; position: absolute; top: 320px; left: -400px; background-color: var(--thm-black); border-radius: 0; } .testimonial .owl-carousel .owl-next { left: -340px; } .testimonial .owl-carousel .owl-prev:hover, .testimonial .owl-carousel .owl-next:hover { background-color: var(--thm-primary) !important; } .testimonial .section-header { text-align: left !important; padding: 20px 0px; } .testimonial .item { margin-bottom: 30px; } .review { position: relative; display: block; background-color: var(--thm-base); box-shadow: 0px 0px 60px 0px rgb(0 0 0 / 7%); padding: 40px 50px 57px; } .review .wt-title { font-size: 20px; font-weight: 700; margin: 0 0 10px; color: var(--thm-black); } .client-thumbnail { float: left; margin: 0 25px 0px 0; overflow: hidden; position: relative; } .client-thumbnail img { border-radius: 50%; background-color: #fff; border-bottom: 4px solid var(--thm-primary); width: 75px; height: 75px; margin: 0 auto; } .client-name { font-size: 18px; font-weight: 600; font-style: normal; display: block; color: var(--thm-primary); } .client-designation { font-size: 14px; display: block; } .client-designation:before, .review .client-email:before { display: none; } .icon-quote { opacity: 0.1; position: absolute; right: 24px; } .icon-quote img { width: 50px; } /*--------------------------------------------------------------*/ /* Team Section /*--------------------------------------------------------------*/ .team { padding: 100px 0 100px !important; } .team-module { background-color: var(--thm-base); padding: 0px; margin: 0 0 50px; position: relative; width: 100%; } .team-module:hover .team-caption { background-color: var(--thm-primary); color: var(--thm-base); } .team-caption { position: absolute; display: block; background-color: var(--thm-black); padding: 20px 15px 30px; transition: background 500ms ease; max-width: 251px; bottom: -55px; width: 100%; } .team-caption .name { position: relative; font-size: 20px; color: var(--thm-base); line-height: 34px; text-transform: var(--thm-text-transform); font-weight: 700; margin-bottom: 6px; letter-spacing: var(--thm-letter-space-small); display: inline-block; cursor: pointer; } /* @media only screen and (min-width: 1000px) and (max-width: 1132px) { .team-caption .name { font-size: 15px; } } */ .team-caption .name:before { position: absolute; bottom: 0; left: 0; content: ""; height: 2px; width: 10px; background-color: currentColor; transition: width 500ms ease; } .team-caption .name:hover:before { width: 100%; } .team-caption .designation { font-size: 14px; font-weight: 800; margin: 0; line-height: 24px; text-transform: var(--thm-text-transform); letter-spacing: var(--thm-letter-space-big); transition: all 500ms ease; } .team-overlay { visibility: hidden; opacity: 0; transition: all 0.3s ease; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .team-module:hover .team-overlay { visibility: visible; opacity: 1; } .team-overlay-inner { position: absolute; bottom: 40px; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); /* transform: translateY(-50%); */ /* right: 61px; */ /* chintu */ width: 100%; margin-top: 0px; } .team-avatar { text-align: center; position: relative; line-height: 0px; font-size: 0px; transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; width: 100%; position: relative; height: 100%; overflow: hidden; } .team-avatar img { transition: all 300ms ease-out; -webkit-transition: all 300ms ease-out; width: 100%; } .team-module .team-social-icons { display: flex; margin-top: 0px; text-align: center; width: 100%; } .team-module .team-social-icons a { display: inline-block; padding-left: 0px; color: var(--thm-base); padding: 0; text-decoration: none; background-color: var(--thm-black); transition: all 0.1s ease; height: 37px; width: 37px; -wekbit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -wekbit-transform: translateY(70px); -moz-transform: translateY(70px); -o-transform: translateY(70px); -ms-transform: translateY(70px); transform: translateY(70px); } .team .team-module:hover .team-social-icons a { -wekbit-transform: translateY(0); -moz-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .team-module .team-social-icons a:hover { color: var(--thm-base); } .team-module .team-social-icons a i { font-size: 0.875rem; line-height: 2.2; } .team-module .team-social-icons a:hover { background-color: var(--thm-primary); } /*--------------------------------------------------------------*/ /* Funfact Section /*--------------------------------------------------------------*/ .funfact { position: relative; background: var(--thm-black); padding: 100px 0 50px; } .funfact i.funfact-icon { font-size: 65px; color: var(--thm-primary); line-height: 65px; display: block; } .funfact-title { font-size: 40px; color: var(--thm-base); font-weight: 900; line-height: 50px; margin-bottom: 4px; margin-top: 25px; font-family: var(--thm-font) !important; letter-spacing: var(--thm-letter-space-small); } .funfact-inner .description { font-size: 12px; font-weight: 700; color: var(--thm-base); text-transform: var(--thm-text-transform); margin: 0; letter-spacing: var(--thm-letter-space-big); } .funfact-inner { position: relative; background: black; padding: 25px; border-bottom: 2px solid var(--thm-primary); border-radius: 0; margin: 0 0 30px; } .funfact-shape { /* background: url(assets/images/funfact-shape.png); */ position: absolute; padding: 100px 0; height: 100%; width: 100%; opacity: 0.3; top: 0; right: 0; } /*--------------------------------------------------------------*/ /* Blog Section /*--------------------------------------------------------------*/ .home-news { position: relative; /* z-index: 9; */ padding: 100px 0 50px; } .blog { position: relative; } .post.has-no-thumbnail .blog-head { margin-top: 0; } .blog-head { /* background-color: var(--thm-black); */ position: relative; display: block; margin-top: -41.5%; margin-left: 40px; padding: 25px 30px 25px; transition: all 500ms ease; min-height: 155px; } .blog-head .entry-meta { position: relative; } .blog-head .entry-header { position: relative; } .blog-head::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: var(--thm-black); opacity: 0.8; } .home-news.blog::after { position: absolute; bottom: 0px; left: 0; right: 0; content: ""; background-color: var(--thm-light); height: 42.35%; z-index: -1; } .blog .post { margin: 0 0 100px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .blog .post .post-thumbnail { margin: 0; width: 100%; overflow: hidden; position: relative; transition: all 1000ms ease-out 0s; } #news-section figure.post-thumbnail { min-height: 300px; } .blog .post img { width: 100%; transform: scale(1); transition: all 500ms ease; max-width: 100%; } .blog .full-content { position: relative; background-color: var(--thm-base); display: block; margin-top: 0; margin-left: 40px; padding: 30px 36px 10px; transition: all 500ms ease; } #news-section .full-content { box-shadow: rgb(0 0 0 / 10%) 0px 10px 50px !important } .blog .entry-title { font-size: 20px; font-weight: 600; line-height: 30px; letter-spacing: var(--thm-letter-space-small); text-transform: var(--thm-text-transform); } .blog .entry-content { font-size: 17px; margin: 0; padding-bottom: 14px; } .blog .entry-meta .byline, .blog .entry-meta .author a { color: var(--thm-base); } .blog .entry-title a { color: var(--thm-base); transition: all 500ms ease; } .blog .entry-title a:hover { color: var(--thm-primary); } .blog .entry-content a { position: relative; text-decoration: underline; display: inline-block; font-size: 12px; font-weight: 700; text-transform: var(--thm-text-transform); color: var(--thm-black); transition: all 500ms ease; letter-spacing: var(--thm-letter-space-big); } .blog .entry-content a:hover { color: var(--thm-primary); } .blog .entry-content .more-link:before { position: absolute; bottom: 0; left: 0; height: 2px; width: 10px; content: ""; background-color: currentColor; transition: width 500ms ease; } .blog .entry-content .more-link:hover::before { width: 100%; } .blog .entry-meta { display: flex; align-items: center; margin: 0; margin-bottom: 11px; font-size: 12px; color: var(--thm-gray); font-weight: 600; text-transform: var(--thm-text-transform); } .blog .news-date { position: absolute; top: -36px; left: 0; background-color: var(--thm-primary); padding: 0 20px; } .blog .news-date span { font-size: 12px; color: var(--thm-base); font-weight: 700; text-transform: var(--thm-text-transform); letter-spacing: var(--thm-letter-space-big); margin: 0; } /*--------------------------------------------------------------*/ /* Sponsors Section /*--------------------------------------------------------------*/ .sponsors { padding: 100px 0 50px; } /* .home .sponsors { padding-top: 35px !important; } */ .sponsors .section-header { margin: -7px 0 25px !important; } .sponsors .item img { /* opacity: 0.4; */ margin: 0 auto; transition: opacity 500ms ease; } .sponsors .item img:hover { opacity: 1; } /*--------------------------------------------------------------*/ /* Page Module / Title Section /*--------------------------------------------------------------*/ .page-title-module { position: relative; width: 100%; min-height: 450px; /* background: url(assets/images/page-header.jpg); */ background-position: unset; background-repeat: no-repeat; background-size: cover !important; padding: 80px 0 100px; margin-bottom: 32px; } .page-title-module:before { content: ""; display: block; height: 100%; position: absolute; top: 0; left: 0; width: 100%; z-index: 0; background-color: rgba(0, 9, 15, 0.8); } .page-title-module .content-center { position: absolute; left: 0; right: 0; z-index: 0; top: 65%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .page-title { position: relative; } .page-title h1 { font-size: 50px; color: var(--thm-base); line-height: 52px; font-weight: 900; text-transform: var(--thm-text-transform); letter-spacing: var(--thm-letter-space-small); } @media (max-width: 1000px) { .page-title h1 { font-size: 34px; margin-top: 3rem; } } @media (min-width: 1000px) { .page-title h1 { font-size: 45px; margin-top: 3rem; } } .page-breadcrumb { list-style: none outside none; margin: 0px; padding: 0px; font-weight: 500; font-size: 1.000rem; } .page-breadcrumb>li { color: #fff; display: inline-block; position: relative; display: inline-block; color: var(--thm-base); font-size: 14px; font-weight: 600; text-transform: var(--thm-text-transform); transition: all 500ms ease; letter-spacing: var(--thm-letter-space-big); } .page-breadcrumb>li+li:before { color: #fff; content: "/"; padding: 0 10px 0 5px; } .page-breadcrumb>li a { color: #fff; } @media (max-width: 768px) { .page-title-module { padding: 25px 0 35px; } .page-title h1 { font-size: 28px; margin-top: 2rem; text-align: center; } .page-breadcrumb { text-align: center; padding: 15px 0 5px; float: none; } .site-content .blog .post .entry-header .entry-title { font-size: 28px; } } /*--------------------------------------------------------------*/ /* About Us /*--------------------------------------------------------------*/ .about-wrap { padding-right: 30px; } .about-img-holder { margin: 0 0 20px; position: relative; } .about-img-holder img { border-radius: 2px; } .about-module { margin: 0; } .about-module .title { font-size: 50px; font-weight: 900; line-height: 60px; text-transform: var(--thm-text-transform); margin-top: -12px; letter-spacing: var(--thm-letter-space-small); } .about-module .title, .about-module .subtitle { margin: 0 0 20px; } .about-module .subtitle { letter-spacing: 3px; font-weight: 700; } .about-module .social-icons a:after { color: #202020 !important; } .about-module .social-icons a:hover:after { color: #fff !important; } @media (max-width: 768px) { .about-module { padding-left: 0px; margin-bottom: 50px; } .about-img-holder { padding-right: 0px; } } .about-img-holder { position: relative; margin: 0 auto; cursor: pointer; margin-bottom: 100px; -webkit-transition: all .25s; -moz-transition: all .25s; -ms-transition: all .25s; -o-transition: all .25s; transition: all .25s; } .about-img-holder.holder-small { margin-left: 120px; margin-top: -280px; } .about-social-icons { display: flex; } .about-social-icons a { display: flex; padding-left: 0px; color: #fff; padding: 0; text-decoration: none; background-color: #0f0d1d; transition: all 0.1s ease; height: 40px; width: 50px; -wekbit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -wekbit-transform: translateY(70px); -moz-transform: translateY(70px); -o-transform: translateY(70px); -ms-transform: translateY(70px); flex-direction: row; flex-wrap: nowrap; align-content: stretch; justify-content: space-evenly; align-items: center; } .about-social-icons a:hover { background: var(--thm-primary) !important; } /*--------------------------------------------------------------*/ /* Blog Section /*--------------------------------------------------------------*/ .site-content .blog .post .post-thumbnail { width: 100%; overflow: hidden; position: relative; transition: all 1000ms ease-out 0s; margin: 2.5rem 0 1rem } .site-content .full-content { padding: 0 !important; margin-left: 0 !important; } .site-content .blog .post .entry-header { margin: 0 0 18px; padding: 0; } .site-content .blog .post .entry-header .entry-title { font-size: 34px; font-weight: 700; line-height: 46px; text-transform: var(--thm-text-transform); margin-top: 9px; margin-bottom: 20px; letter-spacing: var(--thm-letter-space-small); } @media (max-width: 768px) { .site-content .blog .post .entry-header .entry-title { font-size: 28px; } } .site-content .blog .post .entry-header .entry-title a { color: var(--thm-black); background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 87% / 0px 2px no-repeat; transition: all 500ms ease; } .site-content .blog .post .entry-header .entry-title a:hover { color: var(--thm-primary); } .site-content .blog .entry-meta { font-size: 0.875rem; font-weight: 600; } .site-content .blog .entry-meta>span { font-size: 12px; color: var(--thm-gray); font-weight: 600; letter-spacing: var(--thm-letter-space-big); text-transform: var(--thm-text-transform); padding-right: 15px; } .site-content .blog .entry-meta .byline { color: var(--thm-gray); } .site-content .blog .entry-meta a { display: inline-block; color: var(--thm-primary); } .site-content .blog .entry-meta>span:after { padding-left: 10px; content: '/'; color: var(--thm-gray); } .site-content .blog .entry-meta>span:last-child:after { display: none; } .site-content .blog .entry-meta .entry-date a { color: var(--thm-gray); } .site-content .byline .author:before { content: "\f007"; } /* .site-content .comment:before { content: "\f075"; } */ .site-content .blog .entry-date { position: absolute; bottom: 0; left: 0; background-color: var(--thm-primary); padding: 0 20px; } .site-content .blog .entry-date a { font-size: 12px; font-weight: 700; text-transform: var(--thm-text-transform); margin: 0; letter-spacing: var(--thm-letter-space-big); color: var(--thm-base); } .byline .author:before, .entry-date:before, /* .comments-link:before, */ /* .comment:before, */ .tag-links:before { font-family: FontAwesome; position: relative; display: inline-block; font-size: 14px; padding-right: 7px; padding-left: 1px; text-decoration: inherit; vertical-align: baseline; } .site-content .site-content .entry-meta .comment a:after { content: ','; padding-left: 1px; Padding-right: 5px; } .site-content .site-content .entry-meta .comment a:last-child::after { display: none; } .site-content .more-link { position: relative; display: inline-block; font-size: 12px; font-weight: 700; text-transform: var(--thm-text-transform); color: var(--thm-black); transition: all 500ms ease; text-decoration: unset !important; } .more-link:hover, .more-link:focus { color: #FFF; } .more-link:before { position: absolute; bottom: 0; left: 0; height: 2px; width: 10px; content: ""; background-color: currentColor; transition: all 500ms ease; } .more-link:hover:before, .more-link:focus:before { -webkit-transition: 0.3s all ease; transition: 0.3s all ease; left: 0; right: 0; opacity: 1; } /* Blog Single Page /*--------------------------------------------------------------*/ /*Blog Details*/ .blog-details { margin: 0 0px 60px; } .blog-details .tags a, .blog-details .tags span { color: var(--thm-base); font-size: 12px; font-weight: 700; text-transform: var(--thm-text-transform); background-color: var(--thm-primary); display: inline-block; padding: 0px 20px; letter-spacing: 0.1em; transition: all 500ms ease; } .blog-details .tags span { background-color: var(--thm-black); } /*Blog Author*/ .blog-author { background-color: #f9fafb; display: flow-root; margin: 0 0px 60px; padding: 30px 25px; } .blog-author .avatar { float: left; margin-right: 30px; } .blog-author img { height: 130px; width: 130px; } .blog-author .name { margin: 0 0 10px; font-weight: 700; } .blog-author .designation { margin: 0 0 15px; } .blog-author p { margin: 0 0 15px; } .blog-author .social-icons a:after { color: #202020; } .blog-author .social-icons.spin-icon a:hover:after, .blog-author .social-icons.spin-icon a:focus:after { color: #fff; } /*Comments*/ .comment-section { background-color: var(--thm-base); margin: 0 0px 60px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .comment-title { border-bottom: 1px solid #eeeeee; display: block; margin: 0 0 25px; } .comment-title h3 { margin: 0; color: var(--thm-black); font-size: 25px; font-weight: 800; /* margin-bottom: 51px; */ text-transform: var(--thm-text-transform); letter-spacing: var(--thm-letter-space-small); } .comment-box { margin: 0 !important; padding: 0; position: relative; } .comment-box .media-body { display: flow-root; } .pull-left-comment { float: left; margin-right: 30px; width: 90px; height: auto; } .comment-img { border-radius: 100%; max-width: 100%; margin: 5px 0 20px; } .comment-detail { border-bottom: 1px solid #eeeeee; margin: 0 0 30px; padding: 0 0 30px; } .comment-detail-title { margin: 0 0 10px; font-weight: 700; } .comment-date { font-size: 0.875rem; color: #adadad; display: block; margin: 0 0 15px; } .comment .comment { padding-left: 10%; } .reply a { font-size: 10px; color: var(--thm-base); line-height: 25px; padding: 2px 10px; font-weight: 700; letter-spacing: var(--thm-letter-space-big); position: absolute; top: 0; right: 0; background-color: var(--thm-primary); } .reply a:hover { background-color: var(--thm-black); color: var(--thm-base); overflow: hidden; } .edit-comment a { font-size: 12px; color: var(--thm-base); line-height: 40px; padding: 2px 20px; font-weight: 700; letter-spacing: var(--thm-letter-space-big); /* position: absolute; top: 0; right: 0; */ background-color: var(--thm-primary); } .edit-comment a:hover { background-color: var(--thm-black); color: var(--thm-base); overflow: hidden; } /*Comment Form*/ input#comment-form-submit { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; background-color: var(--thm-primary); color: var(--thm-base); font-size: 14px; font-weight: 700; text-transform: var(--thm-text-transform); padding: 18px 50px; transition: 500ms; letter-spacing: 0.1em; line-height: 1.0; } input#comment-form-submit:hover { background: var(--thm-black); color: var(--thm-base); } .comment-form-section { padding-bottom: 100px; } .comment-form-section form label { font-size: 1rem; /* display: block; */ /* margin: 0 0 20px; */ font-weight: 600; } .comment-form-section form input, .comment-form-section form textarea { height: 3rem; width: 100%; border: none; background: var(--thm-light); padding-left: 30px; padding-right: 60px; margin-bottom: 10px; border-radius: 0px; font-size: 14px; color: var(--thm-gray); font-weight: 500; display: block; } input#wp-comment-cookies-consent { width: 2rem; height: 1.1rem; margin: 10px 10px 10px 10px; display: inline-block; } .comment-form-section form textarea { height: 140px; } .comment-form-section .thm-btn:hover { background: var(--thm-black); color: var(--thm-base); } .comment-title h3#reply-title { display: flex; justify-content: space-between; align-items: baseline; } .comment-title #reply-title>a:first-child { padding-right: 17rem; } .cancel-reply a { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; background-color: var(--thm-primary); color: var(--thm-base); font-size: 11px; font-weight: 700; text-transform: var(--thm-text-transform); padding: 9px 10px; transition: 500ms; letter-spacing: 0.1em; margin: 1rem; } .cancel-reply a:hover { background: var(--thm-black); color: var(--thm-base); } .form-submit input#submit { position: relative; display: inline-block; vertical-align: middle; -webkit-appearance: none; border: none; background-color: var(--thm-primary); color: var(--thm-base); font-size: 14px; font-weight: 700; text-transform: var(--thm-text-transform); padding: 9px 20px; transition: 500ms; letter-spacing: 0.1em; } .form-submit input#submit:hover { background: var(--thm-black); color: var(--thm-base); } /*--------------------------------------------------------------*/ /* Blog Grid /*--------------------------------------------------------------*/ .blog-grid .blog-head { background-color: #0f0d1d87; margin-left: 0px; } .blog-grid .full-content { margin-left: 0px; background-color: var(--thm-black); } .blog-grid .entry-content { color: var(--thm-base); } .blog-grid .entry-content a { color: var(--thm-base); } /*--------------------------------------------------------------*/ /* Contact Section /*--------------------------------------------------------------*/ .contact-form-section { padding-bottom: 100px; } .contact-form-section form label { font-size: 0.938rem; display: block; margin: 0 0 20px; font-weight: 600; } .contact-form-section form input, .contact-form-section form textarea { height: 70px; width: 100%; border: none; background: var(--thm-light); padding-left: 30px; padding-right: 60px; margin-bottom: 30px; border-radius: 0px; font-size: 14px; color: var(--thm-gray); font-weight: 500; display: block; } .contact-form-section form textarea { height: 140px; } .contact-form-section .thm-btn:hover { background: var(--thm-black); color: var(--thm-base); } .contact .contact-header { text-align: left !important; padding: 20px 20px 20px 0px; } .contact .contact-header .section-title { margin-bottom: 40px; } .contact .contact-location { position: relative; display: block; background-color: var(--thm-light); padding: 45px 50px 55px; margin-bottom: 30px; transition: all 500ms ease; cursor: pointer; } .contact .contact-location:hover { background-color: var(--thm-primary) !important; } .contact .contact-location .location-title { font-size: 20px; font-weight: 800; line-height: 30px; text-transform: var(--thm-text-transform); margin-bottom: 20px; letter-spacing: var(--thm-letter-space-small); transition: all 500ms ease; } .contact .contact-location:hover .location-title, .contact .contact-location:hover .location-text { color: var(--thm-base); } .contact .contact-location .location-text { font-size: 16px; margin: 0; line-height: 30px; transition: all 500ms ease; } .contact .google-map { border: 1px solid #f2f4f8; box-shadow: rgb(100 100 111 / 20%) 0px 7px 29px 0px; } .contact .google-map iframe { margin-bottom: -10px; } .contact-location-section { position: relative; display: block; border-top: 1px solid #e6e9ef; padding-top: 120px; } .contact-loc-wrap { margin-bottom: 50px; } /* WPCF7 Contact Section /*--------------------------------------------------------------*/ .wpcf7 { padding-bottom: 100px; } .wpcf7 form label { font-size: 0.938rem; display: block; margin: 0 0 20px; font-weight: 600; } .wpcf7 form input, .wpcf7 form textarea { height: 70px; width: 100%; border: none; background: var(--thm-light); padding-left: 30px; padding-right: 60px; margin-bottom: 30px; border-radius: 0px; font-size: 14px; color: var(--thm-gray); font-weight: 500; display: block; } .wpcf7 form textarea { height: 140px; } .wpcf7 .wpcf7-submit:hover { background: var(--thm-black); color: var(--thm-base); } /*--------------------------------------------------------------*/ /* Sidebars & Widgets Section /*--------------------------------------------------------------*/ @media (min-width: 991px) { .sidebar.space-left { padding-left: 25px; } .sidebar.space-right { padding-right: 25px; } } .sidebar .widget { background-color: #f9fafb; font-size: 0.938rem; /*overflow: hidden;*/ margin: 0 0 60px; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -1px rgb(0 0 0 / 6%); } .sidebar .widget:last-child { margin: 0 0 50px; } .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6 { color: #202020; font-weight: 700; margin: 0 0 30px; /* padding: 5px 0 5px 15px;*/ } .card-holder .widget { padding: 30px; } .sidebar .card-holder { margin-left: 10px; } .sidebar .widget-title { padding: 0; } /*Search*/ button.search-untoggle { background-color: var(--thm-primary); } form#searchform { position: relative; display: block; } form#searchform input#s { display: block; border: none; background-color: var(--thm-primary); color: var(--thm-base); font-size: 18px; font-weight: 500; padding-left: 30px; height: 3rem; border-radius: 0px; width: 100%; padding-right: 80px; } form#searchform input#searchsubmit { background-color: black; color: var(--thm-base); font-size: 20px; position: absolute; top: 0; right: 0px; bottom: 0; width: 80px; border: none; } /*Address*/ .widget address { font-style: normal; } .widget p { font-size: 1.1rem; font-weight: 600; } .widget i.icon { font-size: 1.125rem; padding: 0 12px 0 1px; } /*Sidebar News*/ .widget .post { background: transparent; margin: 0 0 20px; box-shadow: none; border-bottom: 1px solid #eeeeee; padding: 0 0 15px; } .widget .post:last-child { margin: 0px; padding: 0px; border-bottom: none !important; } .widget .post .entry-title { margin: 0px 0 -5px; line-height: 1.5; display: block; font-size: 1.000rem; word-wrap: break-word; } .widget .post .entry-title a { color: #202020; transition: all 500ms ease; } .widget a:hover, .widget a:focus { color: var(--thm-primary) !important; } .widget .post .entry-meta .entry-date:before { display: none; } .sidebar .card-holder::before { width: 5px; top: 5px; left: -5px; } .sidebar .card-holder::after { height: 5px; bottom: -5px; left: -5px; } .sidebar .card-holder.double .card__image::before { width: 5px; top: 10px; } .sidebar .card-holder.double .card__image::after { height: 5px; bottom: -10px; } .sidebar .card-holder.double .card__image::before, .sidebar .card-holder.double .card__image::after { left: -10px; } /*Widget Paragraph*/ .widget p { margin: 0 0 20px; } .widget p:last-child { margin: 0; } /*Sidebar Widget Archive, Widget categories, Widget Links, Widget Meta, widget Nav Menu, Widget Pages, Widget Recent Comments, Widget Recent Entries */ .widget ul { padding: 0; margin: 0; list-style: outside none none; } .widget ul li { margin: 0; padding-left: 15px !important; padding-top: 7px; padding-bottom: 7px; border-bottom: 1px solid var(--thm-gray); } .widget ul li:last-child { border-bottom: none; padding-bottom: 0px; } .widget_archive li:last-child, .widget_categories li:last-child, .widget_links li:last-child, .widget_meta li:last-child, .widget_nav_menu li:last-child, .widget_pages li:last-child, .widget_recent_comments li:last-child, .widget_recent_entries li:last-child { padding-bottom: 0px; border-bottom: none; } .widget li a, .widget_archive li a, .widget_categories li a, .widget_links li a, .widget_meta li a, .widget_nav_menu li a, .widget_pages li a, .widget_recent_comments li a, .widget_recent_entries li a { color: var(--thm-gray); transition: all 0.3s ease 0s; position: relative; } .widget_archive li a:before, .widget_categories li a:before, .widget_links li a:before, .widget_meta li a:before, .widget_nav_menu li a:before, .widget_pages li a:before, .widget_recent_comments li a:before, .widget_recent_entries li a:before { content: "\f105"; font-family: FontAwesome; position: absolute; right: auto; left: -15px; font-size: 0.938rem; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } .widget_archive li a:hover:before, .widget_categories li a:hover:before, .widget_links li a:hover:before, .widget_meta li a:hover:before, .widget_nav_menu li a:hover:before, .widget_pages li a:hover:before, .widget_recent_comments li a:hover:before, .widget_recent_entries li a:hover:before { left: -12px; } /*--------------------------------------------------------------*/ /* 404 page Section /*--------------------------------------------------------------*/ #notfound { width: 100%; } .notfound { margin-bottom: 72px; text-align: center; } .notfound .notfound-404 { position: relative; /* z-index: -1; */ } .notfound .notfound-404 h1 { font-family: 'Montserrat', sans-serif; font-size: 230px; margin: 0px; font-weight: 900; background-position: center; text-shadow: 0px 3px 3px rgba(0, 0, 0, .3); } .notfound h2 { font-size: 40px; font-weight: 900; line-height: 48px; text-transform: var(--thm-text-transform); letter-spacing: var(--thm-letter-space-small); margin-bottom: 42px; } .notfound p { font-size: 20px; font-weight: 400; margin: 0; } .notfound .notfound-404 span { color: var(--thm-primary) } .notfound a.thm-btn:hover { background-color: var(--thm-black); color: var(--thm-base); } /*--------------------------------------------------------------*/ /* Page Scroll Up /*--------------------------------------------------------------*/ .page-scroll-up { background-color: var(--thm-primary); border-radius: 50px; bottom: 30px; padding: 3px; display: none; height: 50px; opacity: 1; position: fixed; right: 60px; text-align: center; width: 50px; overflow: hidden; z-index: 9999; line-height: 2.5; color: var(--thm-base); } .page-scroll-up:hover, .page-scroll-up:focus { color: var(--thm-base); } @media only screen and (max-width: 767px) { .notfound .notfound-404 { height: 142px; } .notfound .notfound-404 h1 { font-size: 112px; } } /*--------------------------------------------------------------*/ /* Footer Section /*--------------------------------------------------------------*/ .footer { position: relative; } .footer-shape { background: url(assets/images/footer-shape.png); background-repeat: no-repeat; position: absolute; padding: 100px 0; height: 100%; width: 530px; opacity: 0.5; top: 0; right: 0; } .site-footer { background-color: transparent; position: relative; padding-top: 130px; padding-bottom: 30px; } @media (max-width:998px) { .site-footer { padding-top: 350px; } } @media (max-width:768px) { .site-footer { padding-top: 80px; } } /*--------------------------------------------------------------*/ /* Contact Info Callout - Top And Bottom /*--------------------------------------------------------------*/ .contact-info-module { margin: 0px; padding: 25px; } .contact-info-module .media-body { padding-top: 2px; } .contact-icon { float: left; text-align: center; margin: 0px 20px 0px 0px; padding: 0; background-color: rgba(255, 255, 255, 1); border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; height: 60px; width: 60px; transition: all 0.2s ease-in-out 0s; } .contact-info-module:hover .contact-icon { background-color: rgba(255, 255, 255, 0.5); } .contact-icon i { font-size: 1.75rem; line-height: 2.2; color: #121212; transition: all 0.3s ease-in-out 0s; } .contact-info-module h4 { color: #fff; font-size: 1.250rem; font-weight: 700; margin: 0px 0 5px; } .contact-info-module h6 { color: #fff; margin: 0; font-weight: 400; } @media (max-width:500px) { .contact-info-module { text-align: center; } .contact-icon { float: none; margin: 0px auto 20px; } } .footer-contact-info { position: absolute; top: -55px; left: 0; right: 0; z-index: 1; margin: 0 auto; } @media (max-width:768px) { .footer-contact-info { position: relative; top: 0; } } .footer-contact-info .row { margin: 0; } /*--------------------------------------------------------------*/ /* Footer Widget Section /*--------------------------------------------------------------*/ .site-footer .widget { margin: 0 0 50px; padding: 0; } .site-footer .widget .widget-title { color: var(--thm-light); border: none; margin: 0 0 30px; padding: 0; font-weight: 600; word-wrap: break-word; } .site-footer .widget .widget-title:after { display: none; } .site-footer p, .site-footer .widget address>a, .site-footer .widget address>p>a, .site-footer .widget .post .entry-title a { font-size: 16px; color: var(--thm-gray); } .site-footer .widget .post { border-bottom: 1px solid rgba(255, 255, 255, .05); } .site-footer .widget .tagcloud a, .site-footer .widget .wp-block-tag-cloud a { background-color: #000000; color: #8f8da0; } .footer .widget-title { font-size: 18px; font-weight: 800; line-height: 28px; text-transform: var(--thm-text-transform); color: var(--thm-base); margin-bottom: 32px; letter-spacing: var(--thm-letter-space-small); } .footer .widget-title img { width: 160px; } .widget .post { background: transparent; margin: 20px 0 20px; box-shadow: none; border-bottom: 1px solid #eeeeee; padding: 0 0 15px; } .widget .post a.post-thumbnail { display: block; float: left; width: 70px; margin-right: 20px; padding: 5px 0px; } .widget .post .entry-meta .entry-date a { color: var(--thm-primary); font-size: 14px; text-transform: var(--thm-text-transform); } .tagcloud a, .wp-block-tag-cloud a { cursor: pointer; background-color: var(--thm-light); display: inline-block; font-size: 12px; margin: 0 -1px 5px 0; padding: 4px 14px; transition: all 0.3s ease 0s; vertical-align: baseline; white-space: nowrap; text-transform: var(--thm-text-transform); } .widget .tagcloud a:hover, .widget .wp-block-tag-cloud a:hover { background-color: var(--thm-primary); color: var(--thm-light) !important; } .widget .post:last-child { margin: 0px; padding: 0px; border-bottom: none !important; } .footer .widget i.icon { color: var(--thm-primary); padding: 0 12px 0 1px; } .footer .widget .post a.post-thumbnail { mix-blend-mode: luminosity; } .footer .footer-copyrights .container { position: relative; display: block; border-top: 1px solid rgba(255, 255, 255, .05); padding: 30px 0; } .footer .footer-copyrights { position: relative; display: flex; align-items: center; justify-content: space-between; } .footer .site-info p { font-size: 16px; color: var(--thm-gray); margin: 0; } .footer .footer-copyrights .sr-copyright a:hover { color: var(--thm-gray); } /*--------------------------------------------------------------*/ /* Screen Reader Text ------------------------ */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; word-break: normal; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* Skip Link --------------------------------- */ .skip-link { left: -9999rem; top: 2.5rem; z-index: 999999999; text-decoration: underline; } .skip-link:focus { display: block; left: 6px; top: 7px; font-size: 14px; font-weight: 600; text-decoration: none; line-height: normal; padding: 15px 23px 14px; z-index: 100000; right: auto; } /* Media Queries Section /*--------------------------------------------------------------*/ @media only screen and (max-width: 767px) { /*--------------------------------------------------------------*/ /* Slider /*--------------------------------------------------------------*/ #slider-section .section-header .section-title { font-size: 30px; line-height: 35px; } .hero-slider .title { font-size: 40px; line-height: 50px; } .nav-wrap { padding-top: 50px; } /*--------------------------------------------------------------*/ /* Portfolio /*--------------------------------------------------------------*/ .portfolio .post { margin-bottom: 80px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { /*--------------------------------------------------------------*/ /* Slider /*--------------------------------------------------------------*/ .hero-slider .title { font-size: 65px; line-height: 75px; } } @media only screen and (max-width: 991px) { /*--------------------------------------------------------------*/ /* Testimonial /*--------------------------------------------------------------*/ .testimonial .owl-carousel .owl-prev, .testimonial .owl-carousel .owl-next { top: 0; left: 0; } .testimonial .owl-carousel .owl-next { left: 60px; } /*--------------------------------------------------------------*/ /* Portfolio Single /*--------------------------------------------------------------*/ .project-wrap { padding-right: 0; } .portfolio-single .project-detail { margin-left: 0; margin-top: 0; } .portfolio-single .card-holder.holder-small::before, .portfolio-single .card-holder.holder-small::after { right: -10px !important; } .portfolio-single .project-details { position: inherit; margin-bottom: 60px; display: inline-block; } /*--------------------------------------------------------------*/ /* contact page /*--------------------------------------------------------------*/ .google-map { margin-bottom: 50px; } } .container-full { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } @media (min-width: 576px) { .container-full { max-width: 540px; } } @media (min-width: 768px) { .container-full { max-width: 720px; } } @media (min-width: 998px) { .container-full { max-width: 1500px; } } @media (min-width: 1200px) { body.theme-boxed .container-full { max-width: 1470px; padding-left: 15px; padding-right: 15px; } } /* Comments Pagination ---------------------------- */ .comments-pagination { display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 6rem; text-align: center; } .comments-pagination.only-next { justify-content: flex-end; } .comments-pagination .page-numbers { display: none; text-decoration: none; } .comments-pagination .page-numbers:focus, .comments-pagination .page-numbers:hover { text-decoration: underline; } .comments-pagination .prev, .comments-pagination .next { display: block; } .comments-pagination .prev { left: 0; } .comments-pagination .next { right: 0; text-align: right; } /* 13. Site Pagination /* -------------------------------------------------------------------------- */ /*Pagination*/ .pagination { margin: 10px 0 40px; display: block; padding: 0; text-align: center; } .pagination a { background-color: var(--thm-black); border-left: 1px solid #ffffff30; color: var(--thm-base); cursor: pointer; display: table-cell; line-height: 2.2; font-weight: 600; transition: all 0.3s ease 0s; font-size: 1.125rem; border-radius: 3px; /* margin: 0 2px 10px; */ /* padding: 2px; */ vertical-align: middle; white-space: nowrap; width: 40px; height: 40px; } .pagination a:hover, .pagination a.active { color: var(--thm-base); background-color: var(--thm-primary); border-right: 1px solid #ffffff1a; } /*--------------------------------------------------------------*/ .pagination .nav-links { align-items: baseline; display: flex; flex-wrap: wrap; font-size: 1.2rem; font-weight: 600; margin: -1rem 0 0 -1.5rem; width: calc(100% + 1.5rem); } .pagination-separator { margin: 2.5rem 0; } .nav-links>* { margin: 1rem 0 0 1.5rem; } .nav-links .placeholder { display: none; visibility: hidden; } .pagination a { text-decoration: none; } .pagination a:focus, .pagination a:hover { text-decoration: underline; } .pagination .dots { /* transform: translateY(-0.3em); */ color: #6d6d6d; } .nav-short { display: none; } @media (min-width: 700px) { /* Site Pagination ----------------------- */ .pagination-separator { margin: 4rem 0; } /* Display the full text for Newer and Older Posts. */ .nav-short { display: inline; } .pagination .nav-links { font-size: 1.4rem; font-weight: 500; margin: -1.5rem 0 0 -2rem; } .nav-links>* { margin: 1.5rem 0 0 2rem; } } @media (min-width: 1000px) { /* Site Pagination ----------------------- */ .pagination .nav-links { justify-content: space-between; margin: 0; width: 100%; } .nav-links>* { margin: 0 1rem; } .pagination .next, .pagination .prev { display: block; } .pagination .prev { margin: 0 auto 0 0; } .pagination .next { margin: 0 0 0 auto; } } /* -------------------------------------------------------------------------- */