From 93fc4929810a6b7ae4f614bcdd2bfd05350105a7 Mon Sep 17 00:00:00 2001 From: yusuf0279 Date: Wed, 15 Jul 2026 13:50:04 +0000 Subject: [PATCH] foot --- src/components/sections/Footer.jsx | 268 +- src/css/dynamic.css | 3 +- src/css/dynamic.css.bak | 169 + src/css/theme-main.css | 26 +- src/css/theme-main.css.bak | 17878 +++++++++++++++++++++++++++ 5 files changed, 18195 insertions(+), 149 deletions(-) create mode 100644 src/css/dynamic.css.bak create mode 100644 src/css/theme-main.css.bak diff --git a/src/components/sections/Footer.jsx b/src/components/sections/Footer.jsx index 95721f8..6570f72 100644 --- a/src/components/sections/Footer.jsx +++ b/src/components/sections/Footer.jsx @@ -10,23 +10,9 @@ const SOCIAL_LINKS = [ ] const CONTACT_INFO = [ - { icon: 'fas fa-location-dot', text: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' }, - { icon: 'fas fa-phone-volume', label: 'Call Us:', text: '+971 4 320 0869', link: 'tel:+97143200869' }, - { icon: 'fas fa-envelope', label: 'Email Us:', text: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' }, -] - -const FOOTER_SERVICES_1 = [ - { label: 'Electro-Mechanical Works', path: '/service/electro-mechanical-works' }, - { label: 'Landscaping & Fencing Works', path: '/service/landscaping-fencing-works' }, - { label: 'Building Contracting Works', path: '/service/building-contracting-works' }, - { label: 'Interior & Fit-Out Works', path: '/service/interior-fit-out-works' }, -] - -const FOOTER_SERVICES_2 = [ - { label: 'Metal Construction & Fabrications', path: '/service/metal-construction-fabrications' }, - { label: 'Chiller Hot & Cool Solutions', path: '/service/chiller-hot-cool-solutions' }, - { label: 'Misting Solutions', path: '/service/misting-solutions' }, - { label: 'Adiabatic Pre-Cooling System', path: '/service/adiabatic-pre-cooling-system' }, + { icon: 'fas fa-location-dot', title: 'Address', text: 'Al Qusais Industrial Area-3, Dubai, UAE', link: 'https://maps.app.goo.gl/5bMqkGpNXNo1K9yC7', target: '_blank' }, + { icon: 'fas fa-phone-volume', title: 'Call Us:', text: '+971 4 320 0869', link: 'tel:+97143200869' }, + { icon: 'fas fa-envelope', title: 'Email Us:', text: 'admin@profeneng.com', link: 'mailto:admin@profeneng.com' }, ] const FOOTER_LINKS = [ @@ -41,146 +27,140 @@ export default function Footer() { useNavFix(ref) return ( - diff --git a/src/css/dynamic.css b/src/css/dynamic.css index 6e835e0..e55d2fa 100644 --- a/src/css/dynamic.css +++ b/src/css/dynamic.css @@ -3,7 +3,8 @@ .th-menu-wrapper .mobile-logo img{width:180px;} .th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);} .breadcumb-wrapper{background-repeat:no-repeat;background-position:center center;background-image:url('/assets/images/breadcumb-bg.jpg');background-size:cover;} -.hero-inner{position:relative;background-color:var(--brand-dark, #101840);} +.hero-inner{position:relative;background-color:var(--brand-dark, #101840);min-height:640px;} +.hero-5 .hero-inner{min-height:720px;} .hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1;pointer-events:none;} .hero-inner .container{position:relative;z-index:2;} .hero-style5 .sub-title2.sub{color:#fff !important;} diff --git a/src/css/dynamic.css.bak b/src/css/dynamic.css.bak new file mode 100644 index 0000000..6e835e0 --- /dev/null +++ b/src/css/dynamic.css.bak @@ -0,0 +1,169 @@ +:root{--icon-font:"Font Awesome 6 Free";--fa-style-family:"Font Awesome 6 Free";} +.header-logo .logo img{width:260px;} +.th-menu-wrapper .mobile-logo img{width:180px;} +.th-menu-wrapper .mobile-logo{background-color:var(--brand-navy, #0a004c);} +.breadcumb-wrapper{background-repeat:no-repeat;background-position:center center;background-image:url('/assets/images/breadcumb-bg.jpg');background-size:cover;} +.hero-inner{position:relative;background-color:var(--brand-dark, #101840);} +.hero-inner::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.3) 100%);z-index:1;pointer-events:none;} +.hero-inner .container{position:relative;z-index:2;} +.hero-style5 .sub-title2.sub{color:#fff !important;} +.hero-style5 .hero-title,.hero-style5 .hero-text{color:#fff !important;} +.slider-area .slider-arrow{display:inline-flex;align-items:center;justify-content:center;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,0.2);color:#fff;border:none;cursor:pointer;transition:0.3s;font-size:18px;} +.slider-area .slider-arrow:hover{background:var(--brand-primary, #FA2D39);} +.slider-area .slider-controller{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:40px;} +.slider-area .slider-pagination{display:flex;align-items:center;gap:6px;} +.slider-area .slider-pagination button{width:12px;height:12px;border-radius:50%;border:none;background:#999;opacity:0.4;cursor:pointer;padding:0;transition:0.3s;} +.slider-area .slider-pagination button.active{opacity:1;background:var(--brand-primary, #FA2D39);} + +.slider-wrap .slider-arrow { + display: inline-flex; + align-items: center; + justify-content: center; + width: 50px; + height: 50px; + border-radius: 50%; + background: rgba(255,255,255,0.2); + color: #fff; + border: none; + cursor: pointer; + transition: 0.3s; + font-size: 18px; +} +.slider-wrap .slider-arrow:hover { + background: var(--brand-primary, #FA2D39); +} + +/* Project section slider - light background, so arrows need dark colors */ +.elementor-element-46cde4a .slider-arrow { + background: rgba(0,0,0,0.08); + color: #333; +} +.elementor-element-46cde4a .slider-arrow:hover { + color: #fff; +} + +.elementor-element-148606f .swiper-pagination-fraction .swiper-pagination-current { + color: #fff; +} + +.promist-btn { justify-content: center; } +.promist-btn .promist-logo { transition: margin 0.3s; } +.promist-btn .fa-arrow-right { opacity: 0; transition: opacity 0.3s; } +.promist-btn:hover { background-color: #101840 !important; border-color: #101840 !important; } +.promist-btn:hover .promist-logo { margin-right: 8px; } +.promist-btn:hover .fa-arrow-right { opacity: 1; } + +/* Tab menu spacing */ +.tab-menu2 { + justify-content: center; + margin-bottom: 40px; +} + +/* ── Services Dropdown (2×4 grid, frosted glass) ── */ +.header-layout5 .main-menu ul.sub-menu { + min-width: 480px; + padding: 20px 24px; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4px 24px; + left: -30px; + background: rgba(16, 25, 64, 0.88); + backdrop-filter: blur(16px); + -webkit-backdrop-filter: blur(16px); + border-radius: 16px; + box-shadow: 0 8px 32px rgba(0,0,0,0.3); +} +.header-layout5 .main-menu ul.sub-menu li { + padding: 0; + margin: 0; +} +.header-layout5 .main-menu ul.sub-menu li a { + font-size: 14px; + font-weight: 400; + padding: 10px 14px; + color: rgba(255,255,255,0.85); + border-radius: 8px; + transition: background 0.2s, color 0.2s; + display: block; + letter-spacing: 0.3px; +} +.header-layout5 .main-menu ul.sub-menu li a:hover { + background: rgba(255,255,255,0.1); + color: #fff; + padding-left: 14px; +} +/* Remove the diamond icon that collides with text on hover */ +.header-layout5 .main-menu ul.sub-menu li a:before, +.header-layout5 .main-menu ul.sub-menu li a:hover:before { + display: none; +} + +/* ── MOBILE RESPONSIVE OVERRIDES ── */ +@media (max-width: 767px) { + /* === Header: reduce overlap and size === */ + .header-layout5 { margin-bottom: 0 !important; } + .header-layout5 .menu-wrap { margin-left: 16px !important; margin-right: 16px !important; } + .header-layout5 .header-logo { transform: none !important; padding: 8px 0 !important; } + .header-layout5 .header-logo img { max-width: 140px !important; } + .header-layout5 .header-button { transform: none !important; padding-top: 8px !important; } + .th-header { z-index: 41; } + + /* === All section containers: tighter spacing === */ + .space, .space-top { padding-top: 40px !important; } + .space, .space-bottom { padding-bottom: 40px !important; } + .e-con-full, .e-con-boxed { --container-default-padding-top: 0px !important; --container-default-padding-bottom: 0px !important; } + .title-area { margin-bottom: 16px !important; } + .sec-title { font-size: 22px !important; margin-bottom: 10px !important; } + .sub-title, .sub-title2 { font-size: 13px !important; } + .box-title { font-size: 18px !important; } + + /* === Service cards === */ + .service-block .box-content { margin: -24px 8px 0 !important; padding: 0 12px 12px !important; } + .service-block .box-title { font-size: 16px !important; } + .service-block .box-icon { width: 48px !important; height: 48px !important; font-size: 20px !important; } + .service-card { padding: 16px !important; } + .service-card .box-number { font-size: 36px !important; } + .service-grid { padding: 16px !important; } + + /* === Counter cards === */ + .counter-card .box-number { font-size: 28px !important; } + .counter-card .box-text { font-size: 14px !important; } + + /* === Gallery === */ + .gallery-grid .icon-btn { opacity: 1 !important; transform: none !important; right: 8px !important; top: 8px !important; width: 32px !important; height: 32px !important; font-size: 11px !important; } + + /* === Brand/Sponsor === */ + .brand-sec3 .brand-inner { margin-top: -24px !important; padding: 12px 8px !important; } + .brand-card img { max-height: 24px !important; width: auto !important; } + + /* === Project cards === */ + .project-card .box-content { padding: 10px !important; } + .project-card .box-title { font-size: 15px !important; } + .filter-menu { margin-bottom: 20px !important; gap: 4px !important; } + .filter-menu .tab-btn { font-size: 12px !important; padding: 4px 12px !important; } + + /* === Process === */ + .process-box { padding: 12px 36px 12px 12px !important; } + .process-box .box-title { font-size: 15px !important; } + .process-card-wrap { grid-template-columns: 1fr !important; gap: 12px !important; } + + /* === Contact === */ + .contact-area { padding: 16px !important; } + .contact-form input, .contact-form textarea { font-size: 13px !important; } + + /* === Buttons === */ + .th-btn { font-size: 13px !important; padding: 10px 20px !important; } + .th-btn2 { font-size: 13px !important; padding: 10px 20px !important; } + + /* === Images === */ + img { max-width: 100% !important; height: auto !important; } + .box-img img { width: 100% !important; object-fit: cover !important; } + .elementor-widget-container { overflow: hidden; } + + /* === Breadcrumb === */ + .breadcumb-wrapper { padding: 40px 0 !important; } + .breadcumb-wrapper .breadcumb-title { font-size: 22px !important; } + + /* === Service detail sidebar === */ + .service-sidebar { padding: 12px !important; } +} diff --git a/src/css/theme-main.css b/src/css/theme-main.css index 0b543c9..c8562b1 100644 --- a/src/css/theme-main.css +++ b/src/css/theme-main.css @@ -9250,14 +9250,32 @@ ul.comment-list:has(> .th-comment-item ~ .th-comment-item):first-child > .th-pos } .hero-5 .icon-box { position: absolute; - bottom: 32px; - right: 32px; + bottom: 0; + right: 0; + background: #fff; + border-radius: 32px 0 0 0; + padding: 24px 32px; + display: inline-flex; + align-items: center; + gap: 8px; + z-index: 6; /* Extra small devices */ } +.hero-5 .icon-box .slider-arrow { + background-color: transparent; + border: 1px solid #101840; + color: #101840; +} +.hero-5 .icon-box .slider-arrow:hover { + background-color: var(--theme-color); + border-color: var(--theme-color); + color: #fff; +} @media (max-width: 575px) { .hero-5 .icon-box { - right: 16px; - bottom: 16px; + right: 0; + bottom: 0; + padding: 16px 20px; } } .hero-5 .swiper-pagination-bullets { diff --git a/src/css/theme-main.css.bak b/src/css/theme-main.css.bak new file mode 100644 index 0000000..0b543c9 --- /dev/null +++ b/src/css/theme-main.css.bak @@ -0,0 +1,17878 @@ +@charset "UTF-8"; +/* +Template Name: Rakar +Template URL: https://html.themeholy.com/rakar/ +Description: Handyman Multipurpose Repairing Services Wordpress Theme +Author: themeholy +Author URI: https://themeforest.net/user/themeholy +Version: 1.0.0 +*/ +/*================================= + CSS Index Here +==================================*/ +/* + +01. Theme Base + 1.1. Mixin + 1.2. Function + 1.3. Variable + 1.4. Typography + 1.5. Extend + 1.7. Wordpress Default +02. Reset + 2.1. Container + 2.2. Grid + 2.3. Input + 2.4. Slider + 2.5. Mobile Menu +03. Utilities + 3.1. Preloader + 3.2. Buttons + 3.3. Titles + 3.4. Common + 3.6. Font + 3.7. Background + 3.8. Text Color + 3.9. Overlay + 3.10. Animation + +04. Template Style + 4.1. Widget + 4.2. Header + 4.3. Footer + 4.4. Breadcumb + 4.5. Pagination + 4.6. Blog + 4.7. Comments + 4.8. Hero Area + 4.9. Error + 4.00. Popup Search + 4.00. Popup Side Menu + 4.00. Wocommerce + 4.00. Products + 4.00. Cart + 4.00. Checkout + 4.00. Wishlist + 4.00. Contact + 4.00. About + 4.00. Team + 4.00. Testimonial + 4.00. Counter + 4.00. Blog + 4.00. Brand + 4.00. Simple Sections + 4.00. Why + 4.00. Faq + 4.00. Feature + 4.00. Gallery + 4.00. Category + 4.00. CTA + 4.00. Tab Menu + 4.00. Event + 4.00. Countdown + 4.00. Price + 4.00. Dark Theme + +05. Spacing + +*/ +/*================================= + CSS Index End +==================================*/ +/*================================= + 01. Theme Base +==================================*/ +/*------------------- 1.1. Mixin -------------------*/ +.indicator { + position: absolute; + top: var(--pos-y); + left: var(--pos-x); + height: var(--height-set); + width: var(--width-set); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +/*------------------- 1.2. Function -------------------*/ +/*------------------- 1.3. Variable-------------------*/ +:root { + --theme-color: #FA2D39; + --gr-color2: #FA2D39; + --title-color: #101840; + --body-color: #666666; + --smoke-color: #F8F8F8; + --smoke-color2: #ECF1FF; + --black-color: #000000; + --black-color2: #101018; + --gray-color: #bdbdbd; + --white-color: #ffffff; + --body-bg: #E1E4E5; + --light-color: #E1E4E5; + --yellow-color: #E2B93B; + --success-color: #27AE60; + --error-color: #EB5757; + --th-border-color: #fff; + --title-font: "Exo", sans-serif; + --body-font: "Inter", sans-serif; + --icon-font: "Font Awesome 6 Pro"; + --main-container: 1320px; + --container-gutters: 24px; + --section-space: 120px; + --section-space-mobile: 80px; + --section-title-space: 60px; + --ripple-ani-duration: 5s; +} + +.home-electrician { + --body-bg: #fff; + --theme-color: #FA2D39; + --th-border-color: #E1E4E5; +} + +/*------------------- 1.5. Typography -------------------*/ +html, +body { + scroll-behavior: auto !important; +} + +body { + font-family: var(--body-font); + font-size: 16px; + font-weight: 400; + color: var(--body-color); + background-color: var(--body-bg); + line-height: 26px; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; +} + +iframe { + border: none; + width: 100%; +} + +.slick-slide:focus, +button:focus, +a:focus, +a:active, +input, +input:hover, +input:focus, +input:active, +textarea, +textarea:hover, +textarea:focus, +textarea:active { + outline: none; +} + +input:focus { + outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} + +img:not([draggable]), +embed, +object, +video { + max-width: 100%; + height: auto; +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: decimal; +} + +table { + margin: 0 0 1.5em; + width: 100%; + border-collapse: collapse; + border-spacing: 0; + border: 1px solid var(--th-border-color); +} + +th { + font-weight: 700; + color: var(--title-color); +} + +td, +th { + border: 1px solid var(--th-border-color); + padding: 9px 12px; +} + +a { + color: var(--theme-color); + text-decoration: none; + outline: 0; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +a:hover { + color: var(--title-color); +} +a:active, a:focus, a:hover, a:visited { + text-decoration: none; + outline: 0; +} + +button { + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} + +img { + border: none; + max-width: 100%; +} + +ins { + text-decoration: none; +} + +pre { + font-family: var(--body-font); + background: #f5f5f5; + color: #666; + font-size: 14px; + margin: 20px 0; + overflow: auto; + padding: 20px; + white-space: pre-wrap; + word-wrap: break-word; +} + +span.ajax-loader:empty, +p:empty { + display: none; +} + +p { + font-family: var(--body-font); + margin: 0 0 18px 0; + color: var(--body-color); + line-height: 1.625; +} + +h1 a, +h2 a, +h3 a, +h4 a, +h5 a, +h6 a, +p a, +span a { + font-size: inherit; + font-family: inherit; + font-weight: inherit; + line-height: inherit; +} + +.h1, +h1, +.h2, +h2, +.h3, +h3, +.h4, +h4, +.h5, +h5, +.h6, +h6 { + font-family: var(--title-font); + color: var(--title-color); + text-transform: none; + font-weight: 700; + line-height: 1.4; + margin: 0 0 15px 0; +} + +.h1, +h1 { + font-size: 48px; + line-height: 1.208; +} + +.h2, +h2 { + font-size: 40px; + line-height: 1.2; +} + +.h3, +h3 { + font-size: 36px; + line-height: 1.278; +} + +.h4, +h4 { + font-size: 30px; + line-height: 1.333; +} + +.h5, +h5 { + font-size: 24px; + line-height: 1.417; +} + +.h6, +h6 { + font-size: 20px; + line-height: 1.5; +} + +/* Large devices */ +@media (max-width: 1199px) { + .h1, + h1 { + font-size: 44px; + line-height: 1.3; + } + .h2, + h2 { + font-size: 36px; + line-height: 1.3; + } + .h3, + h3 { + font-size: 30px; + } + .h4, + h4 { + font-size: 24px; + } + .h5, + h5 { + font-size: 20px; + } + .h6, + h6 { + font-size: 16px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .h1, + h1 { + font-size: 40px; + } + .h2, + h2 { + font-size: 34px; + line-height: 1.3; + } + .h3, + h3 { + font-size: 26px; + } + .h4, + h4 { + font-size: 22px; + } + .h5, + h5 { + font-size: 18px; + } + .h6, + h6 { + font-size: 16px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .h1, + h1 { + font-size: 34px; + line-height: 1.35; + } + .h2, + h2 { + font-size: 28px; + } +} +/* Extra small devices */ +@media (max-width: 375px) { + .h1, + h1 { + font-size: 32px; + } +} +/*------------------- 1.6. Extend -------------------*/ +/*------------------- 1.7. Wordpress Default -------------------*/ +p.has-drop-cap { + margin-bottom: 20px; +} + +.page--item p:last-child .alignright { + clear: right; +} + +.blog-title, +.pagi-title, +.breadcumb-title { + word-break: break-word; +} + +.blocks-gallery-caption, +.wp-block-embed figcaption, +.wp-block-image figcaption { + color: var(--body-color); +} + +.bypostauthor, +.gallery-caption { + display: block; +} + +.page-links, +.clearfix { + clear: both; +} + +.page--item { + margin-bottom: 30px; +} +.page--item p { + line-height: 1.8; +} + +.content-none-search { + margin-top: 30px; +} + +.wp-block-button.aligncenter { + text-align: center; +} + +.alignleft { + display: inline; + float: left; + margin-bottom: 10px; + margin-right: 1.5em; +} + +.alignright { + display: inline; + float: right; + margin-bottom: 10px; + margin-left: 1.5em; + margin-right: 1em; +} + +.aligncenter { + clear: both; + display: block; + margin-left: auto; + margin-right: auto; + max-width: 100%; +} + +.gallery { + margin-bottom: 1.5em; + width: 100%; +} + +.gallery-item { + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; + padding: 0 5px; +} + +.wp-block-columns { + margin-bottom: 1em; +} + +figure.gallery-item { + margin-bottom: 10px; + display: inline-block; +} + +figure.wp-block-gallery { + margin-bottom: 14px; +} + +.gallery-columns-2 .gallery-item { + max-width: 50%; +} + +.gallery-columns-3 .gallery-item { + max-width: 33.33%; +} + +.gallery-columns-4 .gallery-item { + max-width: 25%; +} + +.gallery-columns-5 .gallery-item { + max-width: 20%; +} + +.gallery-columns-6 .gallery-item { + max-width: 16.66%; +} + +.gallery-columns-7 .gallery-item { + max-width: 14.28%; +} + +.gallery-columns-8 .gallery-item { + max-width: 12.5%; +} + +.gallery-columns-9 .gallery-item { + max-width: 11.11%; +} + +.gallery-caption { + display: block; + font-size: 12px; + color: var(--body-color); + line-height: 1.5; + padding: 0.5em 0; +} + +.wp-block-cover p:not(.has-text-color), +.wp-block-cover-image-text, +.wp-block-cover-text { + color: var(--white-color); +} + +.wp-block-cover { + margin-bottom: 15px; +} + +.wp-caption-text { + text-align: center; +} + +.wp-caption { + margin-bottom: 1.5em; + max-width: 100%; +} +.wp-caption .wp-caption-text { + margin: 0.5em 0; + font-size: 14px; +} + +.wp-block-media-text, +.wp-block-media-text.alignwide, +figure.wp-block-gallery { + margin-bottom: 30px; +} + +.wp-block-media-text.alignwide { + background-color: var(--smoke-color); +} + +.editor-styles-wrapper .has-large-font-size, +.has-large-font-size { + line-height: 1.4; +} + +.wp-block-latest-comments a { + color: inherit; +} + +.wp-block-button { + margin-bottom: 10px; +} +.wp-block-button:last-child { + margin-bottom: 0; +} +.wp-block-button .wp-block-button__link { + color: #fff; +} +.wp-block-button .wp-block-button__link:hover { + color: #fff; + background-color: var(--theme-color); +} +.wp-block-button.is-style-outline .wp-block-button__link { + background-color: transparent; + border-color: var(--title-color); + color: var(--title-color); +} +.wp-block-button.is-style-outline .wp-block-button__link:hover { + color: #fff; + background-color: var(--theme-color); + border-color: var(--theme-color); +} +.wp-block-button.is-style-squared .wp-block-button__link { + border-radius: 0; +} + +ol.wp-block-latest-comments li { + margin: 15px 0; +} + +ul.wp-block-latest-posts { + padding: 0; + margin: 0; + margin-bottom: 15px; +} +ul.wp-block-latest-posts a { + color: inherit; +} +ul.wp-block-latest-posts a:hover { + color: var(--theme-color); +} +ul.wp-block-latest-posts li { + margin: 15px 0; +} + +.wp-block-search__inside-wrapper { + position: relative; +} + +.wp-block-search { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin-bottom: 30px; +} +.wp-block-search .wp-block-search__input { + width: 100%; + max-width: 100%; + border: 1px solid transparent; + padding-left: 25px; + border: 1px solid transparent; + -webkit-box-shadow: 0px 13px 25px rgba(0, 0, 0, 0.04); + box-shadow: 0px 13px 25px rgba(0, 0, 0, 0.04); + border-radius: 20px; +} +.wp-block-search .wp-block-search__input:focus { + border-color: var(--theme-color); +} +.wp-block-search .wp-block-search__button { + margin: 0; + min-width: 110px; + height: 100%; + border: none; + color: #fff; + background-color: var(--theme-color); + border-radius: 20px; + position: absolute; + top: 0; + right: 0; +} +.wp-block-search .wp-block-search__button.has-icon { + min-width: 56px; +} +.wp-block-search .wp-block-search__button:hover { + background-color: var(--title-color); +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + padding: 0; + border: none; +} +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { + padding: 0 8px 0 25px; +} + +ul.wp-block-rss a { + color: inherit; +} + +.wp-block-group.has-background { + padding: 15px 15px 1px; + margin-bottom: 30px; +} + +.wp-block-table td, +.wp-block-table th { + border-color: rgba(0, 0, 0, 0.1); +} + +.wp-block-table.is-style-stripes { + border: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 30px; +} + +.wp-block-table.is-style-stripes { + border: 0; + margin-bottom: 30px; + border-bottom: 0; +} +.wp-block-table.is-style-stripes th, +.wp-block-table.is-style-stripes td { + border-color: var(--th-border-color); +} + +.logged-in .sticky-wrapper.sticky, +.logged-in .preloader .th-btn { + top: 32px; +} +@media (max-width: 782px) { + .logged-in .sticky-wrapper.sticky, + .logged-in .preloader .th-btn { + top: 46px; + } +} +@media (max-width: 600px) { + .logged-in .sticky-wrapper.sticky, + .logged-in .preloader .th-btn { + top: 0; + } +} + +.post-password-form { + margin-bottom: 30px; + margin-top: 20px; +} +.post-password-form p { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + gap: 15px; + /* Extra small devices */ +} +@media (max-width: 575px) { + .post-password-form p { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} +.post-password-form label { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-flex: 1; + -ms-flex: auto; + flex: auto; + margin-bottom: 0; + line-height: 1; + margin-top: 0; + gap: 15px; + /* Extra small devices */ +} +@media (max-width: 575px) { + .post-password-form label { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } +} +.post-password-form input { + width: 100%; + border: none; + height: 55px; + padding-left: 25px; + color: var(--body-color); + border: 1px solid var(--th-border-color); +} +.post-password-form input[type=submit] { + padding-left: 0; + padding-right: 0; + margin: 0; + width: 140px; + border: none; + color: #fff; + background-color: var(--theme-color); + text-align: center; +} +.post-password-form input[type=submit]:hover { + background-color: var(--title-color); +} + +.page-links { + clear: both; + margin: 0 0 1.5em; + padding-top: 1em; +} +.page-links > .page-links-title { + margin-right: 10px; +} +.page-links > span:not(.page-links-title):not(.screen-reader-text), +.page-links > a { + display: inline-block; + padding: 5px 13px; + background-color: var(--white-color); + color: var(--title-color); + border: 1px solid rgba(0, 0, 0, 0.08); + margin-right: 10px; +} +.page-links > span:not(.page-links-title):not(.screen-reader-text):hover, +.page-links > a:hover { + opacity: 0.8; + color: var(--white-color); + background-color: var(--theme-color); + border-color: transparent; +} +.page-links > span:not(.page-links-title):not(.screen-reader-text).current, +.page-links > a.current { + background-color: var(--theme-color); + color: var(--white-color); + border-color: transparent; +} +.page-links span.screen-reader-text { + display: none; +} + +.blog-single .wp-block-archives-dropdown { + margin-bottom: 30px; +} +.blog-single.format-quote, .blog-single.format-link, .blog-single.tag-sticky-2, .blog-single.sticky { + border-color: transparent; + position: relative; +} +.blog-single.format-quote .blog-content:before, .blog-single.format-link .blog-content:before, .blog-single.tag-sticky-2 .blog-content:before, .blog-single.sticky .blog-content:before { + display: none; +} +.blog-single.format-quote:before, .blog-single.format-link:before, .blog-single.tag-sticky-2:before, .blog-single.sticky:before { + content: "\f0c1"; + position: absolute; + font-family: var(--icon-font); + font-size: 16px; + font-weight: 500; + opacity: 1; + right: 0; + top: 0; + color: var(--white-color); + background-color: var(--theme-color); + z-index: 1; + height: 44px; + width: 44px; + line-height: 44px; + text-align: center; + border-radius: 0 20px 0 20px; + /* Small devices */ +} +@media (max-width: 767px) { + .blog-single.format-quote:before, .blog-single.format-link:before, .blog-single.tag-sticky-2:before, .blog-single.sticky:before { + border-radius: 0 10px 0 10px; + } +} +.blog-single.tag-sticky-2::before, .blog-single.sticky::before { + content: "\f08d"; +} +.blog-single.format-quote:before { + content: "\f10e"; +} +.blog-single .blog-content .wp-block-categories-dropdown.wp-block-categories, +.blog-single .blog-content .wp-block-archives-dropdown { + display: block; + margin-bottom: 30px; +} + +.blog-details .blog-single:before { + display: none; +} +.blog-details .blog-single .blog-content { + background-color: transparent; + overflow: hidden; +} +.blog-details .blog-single.format-chat .blog-meta { + margin-bottom: 20px; +} +.blog-details .blog-single.format-chat .blog-content > p:nth-child(2n) { + background: var(--smoke-color); + padding: 5px 20px; +} +.blog-details .blog-single.tag-sticky-2, .blog-details .blog-single.sticky, .blog-details .blog-single.format-quote, .blog-details .blog-single.format-link { + background-color: transparent; +} +.blog-details .blog-single.tag-sticky-2:before, .blog-details .blog-single.sticky:before, .blog-details .blog-single.format-quote:before, .blog-details .blog-single.format-link:before { + display: none; +} + +.nof-title { + margin-top: -0.24em; +} + +.th-search { + background-color: var(--smoke-color2); + margin-bottom: 30px; + border-radius: 15px; + overflow: hidden; +} +.th-search .search-grid-content { + padding: 30px; + /* Small devices */ +} +@media (max-width: 767px) { + .th-search .search-grid-content { + padding: 20px; + } +} +.th-search .search-grid-title { + font-size: 20px; + margin-bottom: 5px; + margin-top: 0; +} +.th-search .search-grid-title a { + color: inherit; +} +.th-search .search-grid-title a:hover { + color: var(--theme-color); +} +.th-search .search-grid-meta > * { + display: inline-block; + margin-right: 15px; + font-size: 14px; +} +.th-search .search-grid-meta > *:last-child { + margin-right: 0; +} +.th-search .search-grid-meta a, +.th-search .search-grid-meta span { + color: var(--body-color); +} + +/* Small devices */ +@media (max-width: 767px) { + .blog-single.format-quote:before, .blog-single.format-link:before, .blog-single.tag-sticky-2:before, .blog-single.sticky:before { + font-size: 14px; + width: 40px; + height: 40px; + line-height: 40px; + } +} +@media (max-width: 768px) { + .wp-block-latest-comments { + padding-left: 10px; + } + .page--content.clearfix + .th-comment-form { + margin-top: 24px; + } +} +/*================================= + 02. Reset +==================================*/ +/*------------------- 2.1. Container -------------------*/ +/* Medium Large devices */ +@media (max-width: 1399px) { + :root { + --main-container: 1250px; + } +} +@media (min-width: 1560px) { + .th-container2 { + width: 100%; + max-width: 1560px; + margin-left: auto; + margin-right: 0; + padding-left: 0; + padding-right: 0; + } + .th-container2 .container { + --main-container: 1220px; + } + .th-container3 { + width: 100%; + max-width: 1560px; + margin-left: 0; + margin-right: auto; + padding-left: 0; + padding-right: 0; + } + .th-container3 .container { + --main-container: 1220px; + } +} +/* Hight Resoulation devices */ +@media (min-width: 1922px) { + .th-container3, + .th-container2 { + margin-right: auto; + } +} +@media only screen and (min-width: 1300px) { + .container-xxl, + .container-xl, + .container-lg, + .container-md, + .container-sm, + .container { + max-width: calc(var(--main-container) + var(--container-gutters)); + padding-left: calc(var(--container-gutters) / 2); + padding-right: calc(var(--container-gutters) / 2); + } + .container-xxl.px-0, + .container-xl.px-0, + .container-lg.px-0, + .container-md.px-0, + .container-sm.px-0, + .container.px-0 { + max-width: var(--main-container); + } +} +@media only screen and (min-width: 1300px) { + .th-container { + --main-container: 1620px; + } +} +@media only screen and (max-width: 1600px) { + .container-fluid.px-0 { + padding-left: 15px !important; + padding-right: 15px !important; + } + .container-fluid.px-0 .row { + margin-left: 0 !important; + margin-right: 0 !important; + } +} +.container-gallery { + max-width: 1840px; +} + +/*------------------- 2.2. Grid -------------------*/ +.slick-track > [class*=col] { + -ms-flex-negative: 0; + flex-shrink: 0; + width: 100%; + max-width: 100%; + padding-right: calc(var(--bs-gutter-x) / 2); + padding-left: calc(var(--bs-gutter-x) / 2); + margin-top: var(--bs-gutter-y); +} + +@media (min-width: 1300px) { + .row { + --bs-gutter-x: 24px; + } +} +.gy-30 { + --bs-gutter-y: 30px; +} + +.g-0 { + --bs-gutter-y: 0; + --bs-gutter-x: 0; +} + +.gx-0 { + --bs-gutter-x: 0; +} + +.gy-40 { + --bs-gutter-y: 40px; +} + +.gy-50 { + --bs-gutter-y: 50px; +} + +.gx-10 { + --bs-gutter-x: 10px; +} + +.gy-10 { + --bs-gutter-y: 10px; +} + +@media (min-width: 1299px) { + .gx-60 { + --bs-gutter-x: 60px; + } +} +@media (min-width: 1399px) { + .gx-30 { + --bs-gutter-x: 30px; + } + .gx-25 { + --bs-gutter-x: 25px; + } + .gx-40 { + --bs-gutter-x: 40px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .gy-50 { + --bs-gutter-y: 40px; + } +} +/*------------------- 2.3. Input -------------------*/ +select, +.form-control, +.form-select, +textarea, +input { + height: 56px; + padding: 0 25px 0 25px; + padding-right: 45px; + border: 1px solid var(--th-border-color); + color: var(--body-color); + background-color: var(--smoke-color); + border-radius: 8px; + font-size: 16px; + width: 100%; + font-family: var(--body-font); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +select:focus, +.form-control:focus, +.form-select:focus, +textarea:focus, +input:focus { + outline: 0; + -webkit-box-shadow: none; + box-shadow: none; + border-color: var(--th-border-color); + background-color: var(--smoke-color); +} +select::-moz-placeholder, +.form-control::-moz-placeholder, +.form-select::-moz-placeholder, +textarea::-moz-placeholder, +input::-moz-placeholder { + color: var(--body-color); +} +select::-webkit-input-placeholder, +.form-control::-webkit-input-placeholder, +.form-select::-webkit-input-placeholder, +textarea::-webkit-input-placeholder, +input::-webkit-input-placeholder { + color: var(--body-color); +} +select:-ms-input-placeholder, +.form-control:-ms-input-placeholder, +.form-select:-ms-input-placeholder, +textarea:-ms-input-placeholder, +input:-ms-input-placeholder { + color: var(--body-color); +} +select::-webkit-input-placeholder, .form-control::-webkit-input-placeholder, .form-select::-webkit-input-placeholder, textarea::-webkit-input-placeholder, input::-webkit-input-placeholder { + color: var(--body-color); +} +select::-moz-placeholder, .form-control::-moz-placeholder, .form-select::-moz-placeholder, textarea::-moz-placeholder, input::-moz-placeholder { + color: var(--body-color); +} +select:-ms-input-placeholder, .form-control:-ms-input-placeholder, .form-select:-ms-input-placeholder, textarea:-ms-input-placeholder, input:-ms-input-placeholder { + color: var(--body-color); +} +select::-ms-input-placeholder, .form-control::-ms-input-placeholder, .form-select::-ms-input-placeholder, textarea::-ms-input-placeholder, input::-ms-input-placeholder { + color: var(--body-color); +} +select::placeholder, +.form-control::placeholder, +.form-select::placeholder, +textarea::placeholder, +input::placeholder { + color: var(--body-color); +} + +.form-select, +select { + display: block; + width: 100%; + line-height: 1.5; + vertical-align: middle; + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); + background-position: right 26px center; + background-repeat: no-repeat; + background-size: 16px 12px; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + cursor: pointer; +} +.form-select.style2, +select.style2 { + background-image: url("data:image/svg+xml,%3Csvg width='11' height='6' viewBox='0 0 11 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.87109 1.71094L5.71484 5.62109C5.56901 5.7487 5.41406 5.8125 5.25 5.8125C5.08594 5.8125 4.9401 5.7487 4.8125 5.62109L0.65625 1.71094C0.382812 1.40104 0.373698 1.09115 0.628906 0.78125C0.920573 0.507812 1.23047 0.498698 1.55859 0.753906L5.25 4.25391L8.96875 0.753906C9.27865 0.498698 9.57943 0.498698 9.87109 0.753906C10.1263 1.08203 10.1263 1.40104 9.87109 1.71094Z' fill='%238B929C'/%3E%3C/svg%3E"); +} + +textarea.form-control, +textarea { + min-height: 154px; + padding-top: 16px; + padding-bottom: 17px; +} +textarea.form-control.style2, +textarea.style2 { + min-height: 100px; +} + +.form-group { + margin-bottom: var(--bs-gutter-x); + position: relative; +} +.form-group > i { + display: inline-block; + position: absolute; + right: 25px; + top: 19px; + font-size: 16px; + color: var(--body-color); +} +.form-group > i.fa-envelope { + padding-top: 1px; +} +.form-group > i.fa-comment { + margin-top: -2px; +} +.form-group > i.fa-chevron-down { + width: 17px; + background-color: var(--smoke-color); +} +.form-group.has-label > i { + top: 50px; +} + +[class*=col-].form-group > i { + right: calc(var(--bs-gutter-x) / 2 + 25px); +} + +.form-rounded-10 .form-control, +.form-rounded-10 .form-select { + border-radius: 10px !important; +} +.form-rounded-10 .th-btn { + border-radius: 10px; +} + +option:checked, option:focus, option:hover { + background-color: var(--theme-color); + color: var(--white-color); +} + +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; +} + +input[type=checkbox] { + visibility: hidden; + opacity: 0; + display: inline-block; + vertical-align: middle; + width: 0; + height: 0; + display: none; +} +input[type=checkbox]:checked ~ label:before { + content: "\f00c"; + color: var(--white-color); + background-color: var(--theme-color); + border-color: var(--theme-color); +} +input[type=checkbox] ~ label { + position: relative; + padding-left: 30px; + cursor: pointer; + display: block; +} +input[type=checkbox] ~ label:before { + content: ""; + font-family: var(--icon-font); + font-weight: 700; + position: absolute; + left: 0px; + top: 3.5px; + background-color: var(--white-color); + border: 1px solid var(--th-border-color); + height: 18px; + width: 18px; + line-height: 18px; + text-align: center; + font-size: 12px; +} +input[type=checkbox].style2 ~ label { + color: #8B929C; + padding-left: 23px; + margin-bottom: -0.5em; +} +input[type=checkbox].style2 ~ label:before { + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid #8B929C; + height: 14px; + width: 14px; + line-height: 14px; + border-radius: 3px; + top: 6px; +} +input[type=checkbox].style2:checked ~ label:before { + color: var(--theme-color); +} + +input[type=radio] { + visibility: hidden; + opacity: 0; + display: inline-block; + vertical-align: middle; + width: 0; + height: 0; + display: none; +} +input[type=radio] ~ label { + position: relative; + padding-left: 30px; + cursor: pointer; + line-height: 1; + display: inline-block; + font-weight: 600; + margin-bottom: 0; +} +input[type=radio] ~ label::before { + content: "\f111"; + position: absolute; + font-family: var(--icon-font); + left: 0; + top: -2px; + width: 20px; + height: 20px; + padding-left: 0; + font-size: 0.6em; + line-height: 19px; + text-align: center; + border: 1px solid var(--theme-color); + border-radius: 100%; + font-weight: 700; + background: var(--white-color); + color: transparent; + -webkit-transition: all 0.2s ease; + transition: all 0.2s ease; +} +input[type=radio]:checked ~ label::before { + border-color: var(--theme-color); + background-color: var(--theme-color); + color: var(--white-color); +} + +label { + margin-bottom: 0.5em; + margin-top: -0.3em; + display: block; + color: var(--title-color); + font-family: var(--body-font); + font-size: 16px; +} + +textarea.is-invalid, +select.is-invalid, +input.is-invalid, +.was-validated input:invalid { + border: 1px solid var(--error-color) !important; + background-position: right calc(0.375em + 0.8875rem) center; + background-image: none; +} +textarea.is-invalid:focus, +select.is-invalid:focus, +input.is-invalid:focus, +.was-validated input:invalid:focus { + outline: 0; + -webkit-box-shadow: none; + box-shadow: none; +} + +textarea.is-invalid { + background-position: top calc(0.375em + 0.5875rem) right calc(0.375em + 0.8875rem); +} + +.row.no-gutters > .form-group { + margin-bottom: 0; +} + +.form-messages { + display: none; +} +.form-messages.mb-0 * { + margin-bottom: 0; +} +.form-messages.success { + color: var(--success-color); + display: block; +} +.form-messages.error { + color: var(--error-color); + display: block; +} +.form-messages pre { + padding: 0; + background-color: transparent; + color: inherit; +} + +/*------------------- 2.4. Slick Slider -------------------*/ +.swiper-wrapper.row { + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; +} + +.th-slider.has-shadow { + padding-left: 12px; + padding-right: 12px; + margin: -25px -12px; +} +.th-slider.has-shadow .swiper-wrapper { + padding: 25px 0; +} + +.swiper-pagination-progressbar { + --swiper-pagination-progressbar-size: 2px; + background: var(--th-border-color); + position: relative; + margin-top: 30px; + margin-bottom: 24px; + /* Large devices */ +} +@media (max-width: 1199px) { + .swiper-pagination-progressbar { + margin-top: 20px; + } +} +.swiper-pagination-progressbar .swiper-pagination-progressbar-fill { + background: var(--theme-color); +} + +.swiper-horizontal > .swiper-pagination-progressbar, .swiper-pagination-progressbar.swiper-pagination-horizontal, .swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite, .swiper-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite { + width: 100%; + height: var(--swiper-pagination-progressbar-size, 4px); + left: 0; +} + +.swiper-pagination-fraction { + text-align: center; + font-family: var(--title-font); + font-size: 18px; + font-weight: 700; + color: var(--theme-color); +} +.swiper-pagination-fraction .swiper-pagination-current { + font-size: 24px; + color: var(--title-color); + font-weight: 600; + display: inline-block; + width: 31px; +} + +.white-color .swiper-pagination-current { + color: var(--white-color); +} + +.slider-controller { + margin-top: 60px; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 24px; + /* Large devices */ +} +.slider-controller .button { + width: calc(100% - 204px); +} +.slider-controller .slider-arrow { + min-width: 56px; +} +@media (max-width: 1199px) { + .slider-controller { + margin-top: 45px; + } +} +.slider-controller.style2 { + /* Large devices */ +} +@media (max-width: 1199px) { + .slider-controller.style2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} + +.swiper-fade .swiper-slide { + -webkit-transition: 0.6s ease-in-out; + transition: 0.6s ease-in-out; +} +.swiper-fade .swiper-slide-prev { + opacity: 0; +} +.swiper-fade:after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--title-color); + z-index: 3; + pointer-events: none; +} +.swiper-fade.fade-ani:after { + -webkit-animation: swiperFade 0.8s linear 0.2s forwards; + animation: swiperFade 0.8s linear 0.2s forwards; +} + +@-webkit-keyframes swiperFade { + from { + opacity: 1; + } + to { + opacity: 0; + } +} + +@keyframes swiperFade { + from { + opacity: 1; + } + to { + opacity: 0; + } +} +.swiper-pagination-bullets { + position: relative; + z-index: 3; + text-align: center; + margin: 40px 0 22px 0; + line-height: 4px; + height: 4px; + /* Large devices */ +} +@media (max-width: 1199px) { + .swiper-pagination-bullets { + margin: 25px 0 22px 0; + } +} +.swiper-pagination-bullets .swiper-pagination-bullet { + display: inline-block; + --swiper-pagination-bullet-size: 50px; + height: 4px; + --swiper-pagination-bullet-horizontal-gap: 6px; + margin: 5px 7px; + opacity: 1; + background-color: var(--white-color); + position: relative; + border-radius: 0; + cursor: pointer; + -webkit-transform: skew(-30deg); + transform: skew(-30deg); + color: transparent; +} +.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active { + background-color: var(--theme-color); +} + +.slider-area { + position: relative; +} + +.slider-arrow { + display: inline-block; + padding: 0; + background-color: transparent; + color: var(--title-color); + position: absolute; + top: 50%; + border: 1px solid; + left: var(--pos-x, -120px); + width: var(--icon-size, 56px); + height: var(--icon-size, 56px); + line-height: var(--icon-size, 56px); + font-size: var(--icon-font-size, 18px); + margin-top: calc(var(--icon-size, 56px) / -2); + z-index: 3; + border-radius: 99px; +} +.slider-arrow.default { + position: relative; + --pos-x: 0; + margin-top: 0; +} +.slider-arrow.slider-next { + right: var(--pos-x, -120px); + left: auto; +} +.slider-arrow:hover { + background-color: var(--theme-color); + color: var(--white-color); + border-color: var(--theme-color); +} + +.arrow-margin .slider-arrow { + top: calc(50% - 30px); +} + +.arrow-wrap { + position: relative; +} +.arrow-wrap .slider-arrow { + opacity: 0; + visibility: hidden; + -webkit-transform: scale(0.4); + transform: scale(0.4); + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .arrow-wrap .slider-arrow { + display: none; + } +} +.arrow-wrap:hover .slider-arrow { + opacity: 1; + visibility: visible; + -webkit-transform: scale(1); + transform: scale(1); +} + +/* Extra large devices */ +@media (max-width: 1500px) { + .slider-arrow { + --arrow-horizontal: -20px; + --pos-x: -70px; + } +} +/* Medium Large devices */ +@media (max-width: 1399px) { + .slider-arrow { + --arrow-horizontal: 40px; + --pos-x: -17px; + } +} +.icon-box .slider-arrow:not(:last-child) { + margin-right: 8px; +} + +/* Medium devices */ +@media (max-width: 991px) { + .slick-dots { + margin: 40px 0 0 0; + } + .icon-box .slider-arrow { + margin-right: 0; + } +} +/*------------------- 2.5. Mobile Menu -------------------*/ +.th-menu-wrapper { + position: fixed; + top: 0; + left: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.6); + z-index: 999999; + width: 0; + width: 100%; + height: 100%; + -webkit-transition: all ease 0.8s; + transition: all ease 0.8s; + opacity: 0; + visibility: hidden; +} +.th-menu-wrapper .mobile-logo { + padding-bottom: 30px; + padding-top: 40px; + display: block; + text-align: center; + background-color: var(--smoke-color2); +} +.th-menu-wrapper .mobile-logo svg { + max-width: 185px; +} +.th-menu-wrapper .th-menu-toggle { + border: none; + font-size: 22px; + position: absolute; + right: -16.5px; + top: 25px; + padding: 0; + line-height: 1; + width: 33px; + height: 33px; + line-height: 35px; + font-size: 18px; + z-index: 1; + color: var(--white-color); + background-color: var(--theme-color); + border-radius: 8px; +} +.th-menu-wrapper .th-menu-toggle:hover { + background-color: var(--title-color); + color: var(--white-color); +} +.th-menu-wrapper .th-menu-area { + width: 100%; + max-width: 310px; + background-color: var(--body-bg); + border-right: 3px solid var(--theme-color); + height: 100%; + position: relative; + left: -110%; + opacity: 0; + visibility: hidden; + -webkit-transition: all ease 1s; + transition: all ease 1s; + z-index: 1; +} +.th-menu-wrapper.th-body-visible { + opacity: 1; + visibility: visible; +} +.th-menu-wrapper.th-body-visible .th-menu-area { + left: 0; + opacity: 1; + visibility: visible; +} + +.th-mobile-menu { + overflow-y: scroll; + max-height: calc(100vh - 200px); + padding-bottom: 40px; + margin-top: 33px; + text-align: left; +} +.th-mobile-menu ul { + margin: 0; + padding: 0 0; +} +.th-mobile-menu ul li { + border-bottom: 1px solid var(--th-border-color); + list-style-type: none; +} +.th-mobile-menu ul li li:first-child { + border-top: 1px solid var(--th-border-color); +} +.th-mobile-menu ul li a { + display: block; + position: relative; + padding: 12px 0; + line-height: 1.4; + font-size: 16px; + text-transform: capitalize; + color: var(--title-color); + padding-left: 18px; +} +.th-mobile-menu ul li a:before { + content: "\f105"; + font-family: var(--icon-font); + position: absolute; + left: 0; + top: 12px; + margin-right: 10px; + display: inline-block; +} +.th-mobile-menu ul li.th-active > a { + color: var(--theme-color); +} +.th-mobile-menu ul li.th-active > a:before { + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.th-mobile-menu ul li ul li { + padding-left: 20px; +} +.th-mobile-menu ul li ul li:last-child { + border-bottom: none; +} +.th-mobile-menu ul .menu-item-has-children > a .th-mean-expand { + position: absolute; + right: 0; + top: 50%; + font-weight: 400; + font-size: 12px; + width: 25px; + height: 25px; + line-height: 25px; + margin-top: -12.5px; + display: inline-block; + text-align: center; + background-color: var(--smoke-color); + color: var(--title-color); + -webkit-box-shadow: 0 0 20px -8px rgba(173, 136, 88, 0.5); + box-shadow: 0 0 20px -8px rgba(173, 136, 88, 0.5); + border-radius: 50%; +} +.th-mobile-menu ul .menu-item-has-children > a .th-mean-expand:before { + content: "\f067"; + font-family: var(--icon-font); +} +.th-mobile-menu ul .menu-item-has-children > a:after { + content: "\f067"; + font-family: var(--icon-font); + width: 22px; + height: 22px; + line-height: 22px; + display: inline-block; + text-align: center; + font-size: 12px; + border-radius: 50px; + background-color: var(--smoke-color); + float: right; + margin-top: 1px; +} +.th-mobile-menu ul .menu-item-has-children.th-active > a .th-mean-expand:before { + content: "\f068"; +} +.th-mobile-menu ul .menu-item-has-children.th-active > a:after { + content: "\f068"; +} +.th-mobile-menu > ul { + padding: 0 40px; +} +.th-mobile-menu > ul > li:last-child { + border-bottom: none; +} + +.th-menu-toggle { + width: 56px; + height: 56px; + padding: 0; + font-size: 20px; + border: none; + background-color: var(--theme-color); + color: var(--white-color); + display: inline-block; + border-radius: 8px; +} +.th-menu-toggle:hover { + background-color: var(--title-color); +} +.th-menu-toggle.style-text, .th-menu-toggle.style-text-white { + width: auto; + height: auto; + background-color: transparent; + color: var(--title-color); + font-size: 20px; +} +.th-menu-toggle.style-text i, .th-menu-toggle.style-text-white i { + margin-right: 10px; +} +.th-menu-toggle.style-text-white { + color: var(--white-color); +} + +@media (max-width: 400px) { + .th-menu-wrapper .th-menu-area { + width: 100%; + max-width: 270px; + } + .th-mobile-menu > ul { + padding: 0 20px; + } +} +/*================================= + 03. Utilities +==================================*/ +/*------------------- 3.1. Preloader -------------------*/ +.preloader { + position: fixed; + left: 0; + right: 0; + top: 0; + bottom: 0; + z-index: 999; + background-color: var(--title-color); +} +.preloader .th-btn { + padding: 15px 20px; + border-radius: 0; + font-size: 14px; +} + +.preloader-inner { + text-align: center; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + text-align: center; + line-height: 1; +} +.preloader-inner img { + display: block; + margin: 0 auto 0 auto; +} + +.loader { + width: 48px; + height: 48px; + background: var(--theme-color); + display: block; + margin: 20px auto; + position: relative; + -webkit-box-sizing: border-box; + box-sizing: border-box; + animation: rotationBack 1s ease-in-out infinite reverse; +} + +.loader::before { + content: ""; + -webkit-box-sizing: border-box; + box-sizing: border-box; + left: 0; + top: 0; + -webkit-transform: rotate(45deg); + transform: rotate(45deg); + position: absolute; + width: 48px; + height: 48px; + background: var(--theme-color); + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); +} + +.loader::after { + content: ""; + -webkit-box-sizing: border-box; + box-sizing: border-box; + width: 32px; + height: 32px; + border-radius: 50%; + position: absolute; + left: 50%; + top: 50%; + background: #FFF; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); + box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); +} + +@-webkit-keyframes rotationBack { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} + +@keyframes rotationBack { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + 100% { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } +} +/*------------------- 3.2. Buttons -------------------*/ +.th-btn { + position: relative; + z-index: 2; + overflow: hidden; + vertical-align: middle; + display: inline-block; + border: none; + text-transform: capitalize; + text-align: center; + background-color: var(--theme-color); + color: var(--white-color); + font-family: var(--body-font); + font-size: 15px; + font-weight: 400; + line-height: 1; + padding: 20.5px 32px; + min-width: 170px; + border-radius: 30px; + -webkit-perspective: 320px; + perspective: 320px; +} +.th-btn:before { + content: ""; + position: absolute; + height: 0; + top: 50%; + right: 0; + width: 0; + background-color: var(--title-color); + z-index: -1; + -webkit-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; + border-radius: inherit; + -webkit-transform-origin: top center; + transform-origin: top center; +} +.th-btn i { + font-size: 1em; +} +.th-btn:hover, .th-btn.active { + color: var(--white-color); + -webkit-box-shadow: none; + box-shadow: none; +} +.th-btn:hover::before, .th-btn:hover:after, .th-btn.active::before, .th-btn.active:after { + top: 0; + height: 100%; + width: 100%; + right: unset; + left: 0; +} +.th-btn.style2 { + background-color: transparent; + color: var(--white-color); + border: 1px solid var(--white-color); + padding: 20px 40px; + -webkit-box-shadow: none; + box-shadow: none; +} +.th-btn.style2:hover { + color: var(--title-color); + border-color: var(--white-color); + background-color: var(--white-color); +} +.th-btn.style2:hover:before, .th-btn.style2:hover:after { + background-color: var(--white-color); +} +.th-btn.style3:hover { + color: var(--title-color); +} +.th-btn.style3:hover:before, .th-btn.style3:hover:after { + background-color: var(--white-color); +} +.th-btn.style4 { + background-color: var(--title-color); +} +.th-btn.style4:before, .th-btn.style4:after { + background-color: var(--theme-color); +} +.th-btn.style4:hover { + background-color: var(--theme-color); +} +.th-btn.style5 { + background-color: var(--theme-color); + color: var(--white-color); +} +.th-btn.style5:hover { + color: var(--theme-color); +} +.th-btn.style5:hover:before, .th-btn.style5:hover:after { + background-color: var(--white-color); +} +.th-btn.style6 { + background-color: var(--title-color); +} +.th-btn.style6:hover { + color: var(--theme-color); +} +.th-btn.style6:hover:before, .th-btn.style6:hover:after { + background-color: var(--white-color); +} +.th-btn.btn-fw { + width: 100%; +} +.th-btn.btn-fw:before, .th-btn.btn-fw:after { + display: none; +} +.th-btn.btn-fw:hover { + background-color: var(--title-color); +} +.th-btn.btn-sm { + padding: 16.5px 25px; + min-width: 150px; +} + +.th-btn2 { + position: relative; + z-index: 2; + overflow: hidden; + vertical-align: middle; + display: inline-block; + border: none; + text-transform: capitalize; + text-align: center; + background-color: var(--title-color); + color: var(--white-color); + font-family: var(--body-font); + font-size: 16px; + font-weight: 400; + line-height: 1; + padding: 20.5px 20px 20.5px 24px; + min-width: 160px; + border-radius: 0; +} +.th-btn2:before { + content: ""; + position: absolute; + height: calc(100% + 2px); + top: -1px; + right: -1px; + width: 56px; + background-color: var(--white-color); + z-index: -1; + -webkit-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; + -webkit-clip-path: polygon(16px 0%, 100% 0, 100% 100%, 0% 100%); + clip-path: polygon(16px 0%, 100% 0, 100% 100%, 0% 100%); +} +.th-btn2 i { + color: var(--title-color); + font-size: 1em; + margin-left: 25px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.th-btn2:hover, .th-btn2.active { + color: var(--title-color); + padding-right: 24px; +} +.th-btn2:hover::before, .th-btn2.active::before { + width: calc(100% + 18px); +} +.th-btn2:hover i, .th-btn2.active i { + margin-left: 11px; +} +.th-btn2.style2 { + background-color: transparent; + color: var(--title-color); + border: 1px solid var(--light-color); + padding: 20px 20px 20px 24px; +} +.th-btn2.style2 i { + color: var(--white-color); +} +.th-btn2.style2:before { + background-color: var(--title-color); +} +.th-btn2.style2:hover { + color: var(--white-color); + border-color: var(--title-color); +} +.th-btn2.style3 { + background-color: var(--theme-color); +} +.th-btn2.style3 i { + color: var(--title-color); +} +.th-btn2.style3:before { + background-color: var(--white-color); +} +.th-btn2.style4 { + background-color: var(--theme-color); +} +.th-btn2.style4 i { + color: var(--white-color); +} +.th-btn2.style4:before { + background-color: var(--title-color); +} +.th-btn2.style4:hover { + color: var(--white-color); +} +.th-btn2.btn-sm { + padding: 16px 20px 16px 24px; + min-width: 150px; +} + +.hexa-btn { + display: inline-block; + width: 68px; + height: 78px; + line-height: 78px; + text-align: center; + color: var(--white-color); + font-size: 16px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + position: relative; + z-index: 2; +} +.hexa-btn:after, .hexa-btn:before { + content: ""; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + background-color: var(--white-color); + position: absolute; + inset: 0; + z-index: -2; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.hexa-btn:after { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-transform: scale(0.8); + transform: scale(0.8); + background-color: var(--theme-color); + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.hexa-btn:hover { + color: var(--theme-color); +} +.hexa-btn:hover:after { + background-color: var(--white-color); +} + +.icon-btn { + display: inline-block; + width: var(--btn-size, 56px); + height: var(--btn-size, 56px); + line-height: var(--btn-size, 54px); + font-size: var(--btn-font-size, 20px); + background-color: var(--icon-bg, #f7f7f7); + color: var(--title-color); + text-align: center; + border-radius: 99px; + border: 1px solid var(--th-border-color); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + position: relative; +} +.icon-btn:hover { + background-color: var(--theme-color); + color: var(--white-color); + border-color: var(--theme-color); +} +.icon-btn.style2 { + background-color: var(--theme-color); + color: var(--white-color); + border: none; + border-radius: 99px; +} +.icon-btn.style2:hover { + background-color: var(--theme-color); + color: var(--white-color); +} + +.play-btn { + display: inline-block; + position: relative; + z-index: 1; +} +.play-btn > i { + display: inline-block; + width: var(--icon-size, 56px); + height: var(--icon-size, 56px); + line-height: var(--icon-size, 56px); + text-align: center; + background-color: var(--theme-color); + color: var(--white-color); + font-size: var(--icon-font-size, 1.4em); + border-radius: 50%; + z-index: 1; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.play-btn:after, .play-btn:before { + content: ""; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: var(--theme-color); + z-index: -1; + border-radius: 50%; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.play-btn:after { + -webkit-animation-delay: 2s; + animation-delay: 2s; +} +.play-btn:hover:after, .play-btn:hover::before, +.play-btn:hover i { + background-color: var(--title-color); + color: var(--white-color); +} +.play-btn.gr-style1 > i { + background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-color)), to(var(--gr-color2))); + background-image: linear-gradient(to right, var(--theme-color) 0%, var(--gr-color2) 100%); + color: var(--white-color) !important; +} +.play-btn.gr-style1:before, .play-btn.gr-style1:after { + background-color: rgba(255, 255, 255, 0.5); +} +.play-btn.style2:before, .play-btn.style2:after { + background-color: transparent; + border: 1px solid var(--white-color); +} +.play-btn.style3 > i { + background-color: var(--white-color); + color: var(--theme-color); +} +.play-btn.style3:before, .play-btn.style3:after { + background-color: var(--white-color); +} +.play-btn.style3:hover > i { + background-color: var(--theme-color); + color: var(--white-color); +} +.play-btn.style3:hover:before, .play-btn.style3:hover:after { + background-color: var(--theme-color); +} +.play-btn.style4 { + --icon-size: 120px; +} +.play-btn.style4 > i { + font-size: 28px; + color: var(--white-color); + background-color: rgba(255, 255, 255, 0.3); +} +.play-btn.style4:before, .play-btn.style4:after { + background-color: transparent; + border: 1px solid var(--white-color); +} +.play-btn.style4:hover > i { + background-color: var(--theme-color); +} +.play-btn.style4:hover:before, .play-btn.style4:hover:after { + border-color: var(--theme-color); +} + +.link-btn { + font-weight: 600; + font-size: 14px; + display: inline-block; + line-height: 0.8; + position: relative; + padding-bottom: 2px; + margin-bottom: -2px; + text-transform: uppercase; + color: var(--theme-color); +} +.link-btn i { + margin-left: 5px; + font-size: 0.9rem; +} +.link-btn:before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 0; + height: 2px; + background-color: var(--theme-color); + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.link-btn:hover { + color: var(--theme-color); +} +.link-btn:hover::before { + width: 100%; +} + +.line-btn { + font-size: 14px; + font-weight: 600; + display: inline-block; + line-height: 0.8; + position: relative; + padding-bottom: 4px; + margin-bottom: -1px; + text-transform: uppercase; + color: var(--title-color); +} +.line-btn i { + margin-left: 5px; + font-size: 0.9rem; +} +.line-btn:before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 1px; + background-color: var(--title-color); + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.line-btn:hover { + color: var(--theme-color); +} +.line-btn:hover::before { + background-color: var(--theme-color); + width: 45px; +} + + +/*------------------- 3.3. Titles -------------------*/ +.sec-title { + margin-bottom: calc(var(--section-title-space) - 10px); + margin-top: -0.18em; + text-transform: capitalize; +} + +.sub-title { + font-family: var(--title-font); + display: inline-block; + font-size: 18px; + font-weight: 600; + color: var(--theme-color); + margin-bottom: 31px; + text-transform: capitalize; + line-height: 24px; + margin-top: -0.2em; + position: relative; +} +.sub-title:before { + content: ""; + height: 10px; + width: 100%; + background-color: var(--title-color); + position: absolute; + bottom: -10px; + left: 0; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: auto; + mask-size: auto; + -webkit-mask-position: left bottom; + mask-position: left bottom; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} +.sub-title .line { + display: inline-block; + height: 10px; + width: 100%; + background-color: var(--title-color); + position: absolute; + top: -10px; + left: 0; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: auto; + mask-size: auto; + -webkit-mask-position: left bottom; + mask-position: left bottom; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); +} +.sub-title.shape-white:before { + background-color: var(--white-color); +} +.sub-title.shape-white .line { + background-color: var(--white-color); +} +.sub-title:has(img) { + margin-top: 0; +} +.sub-title.h4 { + font-size: 30px; + font-weight: 600; + line-height: 1; + margin-top: -0.14em; +} +.sub-title img { + margin: -3px 10px 0 0; +} +.sub-title i { + font-size: 32px; + margin-right: 10px; + /* Medium devices */ +} +@media (max-width: 991px) { + .sub-title i { + font-size: 24px; + } +} + +.sub-title2 { + font-family: var(--title-font); + display: block; + font-size: 18px; + font-weight: 600; + color: var(--theme-color); + margin-bottom: 31px; + text-transform: capitalize; + line-height: 24px; + margin-top: -0.2em; + position: relative; + /* Large devices */ +} +.sub-title2 img { + margin: -4px 8px 0 0; +} +@media (max-width: 1199px) { + .sub-title2 { + margin-bottom: 22px; + } +} +.sub-title2 i { + font-size: 32px; + margin-right: 10px; + /* Medium devices */ +} +@media (max-width: 991px) { + .sub-title2 i { + font-size: 24px; + } +} + +.box-title { + font-size: 24px; + line-height: 1.417; + font-weight: 600; + margin-top: -0.24em; +} +.box-title a { + color: inherit; +} +.box-title a:hover { + color: var(--theme-color); +} + +.box-subtitle { + margin-bottom: 8px; +} + +.box-title2 { + font-size: 20px; + line-height: 1.5; + font-weight: 700; + margin-top: -0.35em; +} +.box-title2 a { + color: inherit; +} +.box-title2 a:hover { + color: var(--theme-color); +} + +.title-area { + margin-bottom: calc(var(--section-title-space) - 10px); + position: relative; + z-index: 2; +} +.title-area .sec-title { + margin-bottom: 14px; +} +.title-area.mb-0 .sec-title { + margin-bottom: -0.24em; +} +.title-area .th-btn { + margin-top: 20px; + margin-bottom: 10px; +} + +.mb-32 { + margin-bottom: 32px; +} + +.mb-37 { + margin-bottom: 37px; +} + +hr.title-line { + margin-top: 0; + background-color: var(--th-border-color); + opacity: 1; +} + +.sec-btn { + text-align: center; +} + +.sec-btn, +.title-line { + margin-bottom: var(--section-title-space); +} + +.shadow-title { + font-family: var(--title-font); + font-size: 144px; + font-weight: 700; + line-height: 1; + background-image: -webkit-gradient(linear, left top, left bottom, from(#27282E), color-stop(112.38%, rgba(39, 40, 46, 0))); + background-image: linear-gradient(180deg, #27282E 0%, rgba(39, 40, 46, 0) 112.38%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + text-fill-color: transparent; + margin: -0.18em 0 -0.4em 0; + /* Medium Large devices */ + /* Medium devices */ + /* Small devices */ + /* Extra small devices */ +} +@media (max-width: 1299px) { + .shadow-title { + font-size: 100px; + } +} +@media (max-width: 991px) { + .shadow-title { + font-size: 80px; + } +} +@media (max-width: 767px) { + .shadow-title { + font-size: 50px; + } +} +@media (max-width: 575px) { + .shadow-title { + font-size: 40px; + } +} + +.title-area2 { + padding: 50px 100px; +} +.title-area2 .subtitle { + color: var(--white-color); + text-transform: uppercase; + margin-top: -0.4em; + margin-bottom: 5px; + display: block; +} +.title-area2 .title { + color: var(--white-color); + max-width: 430px; + margin-bottom: -0.26em; +} + +@media (max-width: 1700px) { + .title-area2 { + padding: 50px 50px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .sub-title { + margin-bottom: 20px; + } + .title-area, + .sec-title { + --section-title-space: 60px; + } + .title-area.mb-45, + .sec-title.mb-45 { + margin-bottom: 36px; + } + .title-area.mb-50, + .sec-title.mb-50 { + margin-bottom: 40px; + } + .sec-btn, + .title-line { + --section-title-space: 55px; + } + .title-area2 .title { + max-width: 300px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .title-area, + .sec-title { + --section-title-space: 50px; + } + .title-area.mb-45, + .sec-title.mb-45 { + margin-bottom: 35px; + } + .sec-btn, + .title-line { + --section-title-space: 50px; + } + .sub-title.h4 { + font-size: 22px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .title-area2 { + text-align: center; + } + .title-area2 .title { + max-width: 100%; + } +} +/* Extra small devices */ +@media (max-width: 375px) { + .title-area2 { + padding: 40px 20px; + } +} +/*------------------- 3.4. Common -------------------*/ +.shape-mockup-wrap { + z-index: 2; + position: relative; +} + +.shape-mockup { + position: absolute; + z-index: -1; + pointer-events: none; +} +.shape-mockup.z-index-3 { + z-index: 3; + pointer-events: none; +} +.shape-mockup.z-index-1 { + z-index: 1; + pointer-events: none; +} +.shape-mockup .svg-img { + height: 110px; + width: 110px; +} + +.z-index-step1 { + position: relative; + z-index: 4 !important; +} + +.z-index-common { + position: relative; + z-index: 3; +} + +.z-index-3 { + z-index: 3; +} + +.z-index-n1 { + z-index: -1; +} + +.media-body { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} + +/* color scheme ---------------------------------- */ +.color-scheme { + position: fixed; + right: -1px; + top: calc(50% - 100px); + z-index: 99; + background: var(--black-color); + padding: 20px 30px; + border-radius: 10px 0 0 10px; + max-width: 300px; + -webkit-transform: translate(100%, 0); + transform: translate(100%, 0); + -webkit-transition: 0.4s; + transition: 0.4s; +} +.color-scheme-title { + font-size: 22px; + border-bottom: 1px solid var(--th-border-color); + padding-bottom: 6px; + color: var(--white-color); + margin-bottom: 20px; +} +.color-scheme-title i { + font-size: 18px; + margin-right: 3px; +} +.color-scheme-text { + color: var(--white-color); + font-size: 14px; + margin-bottom: 6px; +} +.color-scheme .switchIcon { + position: absolute; + left: 0; + top: 10px; + border: 0; + background: var(--theme-color); + color: var(--white-color); + height: 45px; + width: 45px; + border-radius: 5px 0 0 5px; + -webkit-transform: translate(-100%, 0); + transform: translate(-100%, 0); +} +.color-scheme .color-switch-btns { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 18px; + margin-bottom: 20px; +} +.color-scheme .color-switch-btns button { + padding: 0; + border: 0; + background: transparent; + font-size: 24px; + color: var(--theme-color); + text-align: left; +} +.color-scheme #thcolorpicker { + padding: 0 !important; + border: 2px solid var(--white-color); + border-radius: 0; + height: 25px; + border-radius: 15px; + overflow: hidden; + max-width: 170px; +} +.color-scheme.active { + -webkit-transform: translate(0, 0); + transform: translate(0, 0); +} + +.badge { + position: absolute; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + display: inline-block; + text-align: center; + background-color: var(--theme-color); + color: var(--white-color); + padding: 0.23em 0.43em; + font-size: 0.7em; + border-radius: 50%; + top: 7px; + right: 7px; + font-weight: 400; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} + +.th-social a { + display: inline-block; + width: var(--icon-size, 46px); + height: var(--icon-size, 46px); + line-height: var(--icon-size, 45px); + background-color: var(--smoke-color); + color: var(--body-color); + font-size: 16px; + text-align: center; + margin-right: 5px; + border-radius: 99px; +} +.th-social a:last-child { + margin-right: 0; +} +.th-social a:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.th-social.color-theme a { + color: var(--body-color); + border-color: var(--theme-color); +} + +.multi-social a:has(.fa-facebook-f) { + --theme-color: #3b5997; +} +.multi-social a:has(.fa-twitter) { + --theme-color: #54abf0; +} +.multi-social a:has(.fa-pinterest-p) { + --theme-color: #c8232c; +} +.multi-social a:has(.fa-linkedin-in) { + --theme-color: #0077b5; +} +.multi-social a:has(.fa-vimeo-v) { + --theme-color: #86c9ef; +} +.multi-social a:has(.fa-youtube) { + --theme-color: #ff0000; +} +.multi-social a:has(.fa-instagram) { + --theme-color: #d63084; +} + +.bg-mask { + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + -webkit-mask-repeat: no-repeat; + mask-repeat: no-repeat; +} + +.box-icon img { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +.box-text { + margin-bottom: -0.4em; +} + +.btn-group { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 30px; + /* Small devices */ +} +.btn-group.style2 { + gap: 20px 70px; + /* Small devices */ +} +@media (max-width: 767px) { + .btn-group.style2 { + gap: 20px 30px; + } +} +@media (max-width: 767px) { + .btn-group { + gap: 20px; + } +} + +.th-bg-img { + position: absolute; + inset: 0; +} +.th-bg-img img { + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +.mfp-zoom-in .mfp-content { + opacity: 0; + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; + -webkit-transform: scale(0.5); + transform: scale(0.5); +} + +.mfp-zoom-in.mfp-bg { + opacity: 0; + -webkit-transition: all 0.4s ease; + transition: all 0.4s ease; +} + +.mfp-zoom-in.mfp-ready .mfp-content { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); +} + +.mfp-zoom-in.mfp-ready.mfp-bg { + opacity: 0.7; +} + +.mfp-zoom-in.mfp-removing .mfp-content { + -webkit-transform: scale(0.7); + transform: scale(0.7); + opacity: 0; +} + +.mfp-zoom-in.mfp-removing.mfp-bg { + opacity: 0; +} + +/*------------------- 3.6. Font -------------------*/ +.font-icon { + font-family: var(--icon-font); +} + +.font-title { + font-family: var(--title-font); +} + +.font-body { + font-family: var(--body-font); +} + +.fw-extralight { + font-weight: 100; +} + +.fw-light { + font-weight: 300; +} + +.fw-normal { + font-weight: 400; +} + +.fw-medium { + font-weight: 500; +} + +.fw-semibold { + font-weight: 600; +} + +.fw-bold { + font-weight: 700; +} + +.ff-title { + font-family: var(--title-font); +} + +.fw-extrabold { + font-weight: 800; +} + +.fs-18 { + font-size: 18px; +} + +.fs-16 { + font-size: 16px !important; +} + +.fs-xs { + font-size: 14px; +} + +/*------------------- 3.7. Background -------------------*/ +.bg-theme { + background-color: var(--theme-color) !important; +} + +.bg-smoke { + background-color: var(--smoke-color) !important; +} + +.bg-smoke2 { + background-color: var(--smoke-color2) !important; +} + +.bg-white { + background-color: var(--white-color) !important; +} + +.bg-black { + background-color: var(--black-color) !important; +} + +.bg-black2 { + background-color: var(--black-color2) !important; +} + +.bg-title { + background-color: var(--title-color) !important; +} + +.gr-bg1 { + background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-color)), to(var(--gr-color2))); + background-image: linear-gradient(to right, var(--theme-color) 0%, var(--gr-color2) 100%); +} + +.gr-bg2 { + background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-color)), to(var(--gr-color2))); + background-image: linear-gradient(to right, var(--theme-color) 0%, var(--gr-color2) 100%); +} + +.bg-body { + background-color: var(--body-bg) !important; +} + +.background-image, +[data-bg-src] { + background-repeat: no-repeat; + background-size: cover; + background-position: center center; +} + +.bg-fixed { + background-attachment: fixed; + scroll-behavior: smooth; +} + +.bg-fluid { + background-repeat: no-repeat; + background-size: 100% 100%; + background-position: center center; +} + +.bg-auto { + background-size: auto auto; +} + +.bg-top-center { + background-size: auto; + background-position: top center; +} + +.bg-repeat { + background-size: auto; + background-repeat: repeat; +} + +.bg-bottom-right { + background-size: auto; + background-position: bottom right; +} + +.bg-top-right { + background-size: auto; + background-position: top right; +} + +.bg-top-left { + background-size: auto; + background-position: top left; +} + +/*------------------- 3.8. Text Color -------------------*/ +.text-theme { + color: var(--theme-color) !important; +} + +.text-title { + color: var(--title-color) !important; +} + +.text-body { + color: var(--body-color) !important; +} + +.text-white { + color: var(--white-color) !important; +} + +.text-light { + color: var(--light-color) !important; +} + +.text-yellow { + color: var(--yellow-color) !important; +} + +.text-success { + color: var(--success-color) !important; +} + +.text-error { + color: var(--error-color) !important; +} + +.text-inherit { + color: inherit; +} +.text-inherit:hover { + color: var(--theme-color); +} + +a.text-theme:hover, +.text-reset:hover { + text-decoration: underline; +} + +/*------------------- 3.9. Overlay -------------------*/ +.overlay { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; +} + +.position-center { + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +[data-overlay] { + position: relative; + z-index: 2; +} +[data-overlay] [class^=col-], +[data-overlay] [class*=col-] { + z-index: 1; +} + +[data-overlay]:before { + content: ""; + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: 1; +} + +[data-overlay=theme]:before { + background-color: var(--theme-color); +} + +[data-overlay=title]:before { + background-color: var(--title-color); +} + +[data-overlay=smoke]:before { + background-color: var(--smoke-color); +} + +[data-overlay=white]:before { + background-color: var(--white-color); +} + +[data-overlay=black]:before { + background-color: var(--black-color); +} + +[data-overlay=overlay1]:before { + background-color: #080E1C; +} + +[data-opacity="1"]:before { + opacity: 0.1; +} + +[data-opacity="2"]:before { + opacity: 0.2; +} + +[data-opacity="3"]:before { + opacity: 0.3; +} + +[data-opacity="4"]:before { + opacity: 0.4; +} + +[data-opacity="5"]:before { + opacity: 0.5; +} + +[data-opacity="6"]:before { + opacity: 0.6; +} + +[data-opacity="7"]:before { + opacity: 0.7; +} + +[data-opacity="8"]:before { + opacity: 0.8; +} + +[data-opacity="9"]:before { + opacity: 0.9; +} + +[data-opacity="10"]:before { + opacity: 1; +} + +/*------------------- 3.10. Animation -------------------*/ +.ripple-animation, .play-btn:after, .play-btn:before { + -webkit-animation-duration: var(--ripple-ani-duration); + animation-duration: var(--ripple-ani-duration); + -webkit-animation-timing-function: ease-in-out; + animation-timing-function: ease-in-out; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-name: ripple; + animation-name: ripple; +} + +@-webkit-keyframes ripple { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } + 30% { + opacity: 0.4; + } + 100% { + -webkit-transform: scale(1.8); + transform: scale(1.8); + opacity: 0; + } +} + +@keyframes ripple { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } + 30% { + opacity: 0.4; + } + 100% { + -webkit-transform: scale(1.8); + transform: scale(1.8); + opacity: 0; + } +} +@-webkit-keyframes ripple2 { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } + 30% { + opacity: 0.4; + } + 100% { + -webkit-transform: scale(2.8); + transform: scale(2.8); + opacity: 0; + } +} +@keyframes ripple2 { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0; + } + 30% { + opacity: 0.4; + } + 100% { + -webkit-transform: scale(2.8); + transform: scale(2.8); + opacity: 0; + } +} +.fancy-animation { + -webkit-animation: morph 8s ease-in-out infinite; + animation: morph 8s ease-in-out infinite; +} + +@-webkit-keyframes morph { + 0% { + border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; + } + 50% { + border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; + } + 100% { + border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; + } +} + +@keyframes morph { + 0% { + border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; + } + 50% { + border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; + } + 100% { + border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; + } +} +.movingX { + -webkit-animation: movingX 8s linear infinite; + animation: movingX 8s linear infinite; +} + +@-webkit-keyframes movingX { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(50px); + transform: translateX(50px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes movingX { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(50px); + transform: translateX(50px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +.moving { + -webkit-animation: moving 8s linear infinite; + animation: moving 8s linear infinite; +} + +@-webkit-keyframes moving { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(-50px); + transform: translateX(-50px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} + +@keyframes moving { + 0% { + -webkit-transform: translateX(0); + transform: translateX(0); + } + 50% { + -webkit-transform: translateX(-50px); + transform: translateX(-50px); + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +.jump { + -webkit-animation: jumpAni 7s linear infinite; + animation: jumpAni 7s linear infinite; +} + +@-webkit-keyframes jumpAni { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes jumpAni { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 40% { + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +.jump-reverse { + -webkit-animation: jumpReverseAni 7s linear infinite; + animation: jumpReverseAni 7s linear infinite; +} + +@-webkit-keyframes jumpReverseAni { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 50% { + -webkit-transform: translateY(30px); + transform: translateY(30px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} + +@keyframes jumpReverseAni { + 0% { + -webkit-transform: translateY(0); + transform: translateY(0); + } + 50% { + -webkit-transform: translateY(30px); + transform: translateY(30px); + } + 100% { + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +.spin { + -webkit-animation: spin 20s linear infinite; + animation: spin 20s linear infinite; +} + +@-webkit-keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes spin { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} +.pulse { + -webkit-animation: pulse 6s linear infinite; + animation: pulse 6s linear infinite; +} + +@-webkit-keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} + +@keyframes pulse { + 0% { + -webkit-transform: scale(1); + transform: scale(1); + } + 50% { + -webkit-transform: scale(1.1); + transform: scale(1.1); + } + 100% { + -webkit-transform: scale(1); + transform: scale(1); + } +} +.bg-color-ani, +.color-animate { + -webkit-animation: bgColor 6s linear infinite; + animation: bgColor 6s linear infinite; +} + +@-webkit-keyframes bgColor { + 0% { + background-color: #F2BA4C; + } + 25% { + background-color: #81F24C; + } + 50% { + background-color: #41F27D; + } + 75% { + background-color: #0500FF; + } + 100% { + background-color: #F2BA4C; + } +} + +@keyframes bgColor { + 0% { + background-color: #F2BA4C; + } + 25% { + background-color: #81F24C; + } + 50% { + background-color: #41F27D; + } + 75% { + background-color: #0500FF; + } + 100% { + background-color: #F2BA4C; + } +} +@-webkit-keyframes animate-positive { + 0% { + width: 0; + } +} +@keyframes animate-positive { + 0% { + width: 0; + } +} +.fadein, +.scalein, +.slidetopleft, +.slidebottomright, +.slideinleft, +.slideinright, +.slideinrighthero, +.slideindown, +.slideinup, +.rollinleft, +.rollinright, +.hero-img1 { + opacity: 0; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + -webkit-animation-iteration-count: 1; + animation-iteration-count: 1; + -webkit-animation-duration: 1.3s; + animation-duration: 1.3s; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; + -webkit-animation-name: var(--animation-name); + animation-name: var(--animation-name); +} + +.swiper-slide-active .fadein { + --animation-name: fadein; +} +.swiper-slide-active .scalein { + --animation-name: scalein; +} +.swiper-slide-active .slidetopleft { + --animation-name: slidetopleft; +} +.swiper-slide-active .slidebottomright { + --animation-name: slidebottomright; +} +.swiper-slide-active .slideinleft { + --animation-name: slideinleft; +} +.swiper-slide-active .slideinright { + --animation-name: slideinright; +} +.swiper-slide-active .slideinrighthero { + --animation-name: slideinrighthero; +} +.swiper-slide-active .slideinup { + --animation-name: slideinup; +} +.swiper-slide-active .slideindown { + --animation-name: slideindown; +} +.swiper-slide-active .rollinleft { + --animation-name: rollinleft; +} +.swiper-slide-active .rollinright { + --animation-name: rollinright; +} +.swiper-slide-active .hero-img1 { + --animation-name: heroImg1; +} + +.hero-img1 { + -webkit-animation-duration: 1.3s; + animation-duration: 1.3s; +} + +@-webkit-keyframes heroImg1 { + 0% { + opacity: 0; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transform: scaleX(0.8) scaleY(0); + transform: scaleX(0.8) scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transform: scaleX(1) scaleY(1); + transform: scaleX(1) scaleY(1); + } +} + +@keyframes heroImg1 { + 0% { + opacity: 0; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transform: scaleX(0.8) scaleY(0); + transform: scaleX(0.8) scaleY(0); + } + 100% { + opacity: 1; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transform: scaleX(1) scaleY(1); + transform: scaleX(1) scaleY(1); + } +} +@-webkit-keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@keyframes fadein { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +@-webkit-keyframes slideinup { + 0% { + opacity: 0; + -webkit-transform: translateY(100px); + transform: translateY(100px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes slideinup { + 0% { + opacity: 0; + -webkit-transform: translateY(100px); + transform: translateY(100px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes slideinright { + 0% { + opacity: 0; + -webkit-transform: translateX(280px); + transform: translateX(280px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slideinright { + 0% { + opacity: 0; + -webkit-transform: translateX(280px); + transform: translateX(280px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes slideinrighthero { + 0% { + opacity: 0; + -webkit-transform: translateX(280px) scale(0.6); + transform: translateX(280px) scale(0.6); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0) scale(1); + transform: translateX(0) scale(1); + } +} +@keyframes slideinrighthero { + 0% { + opacity: 0; + -webkit-transform: translateX(280px) scale(0.6); + transform: translateX(280px) scale(0.6); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0) scale(1); + transform: translateX(0) scale(1); + } +} +@-webkit-keyframes slideindown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + transform: translateY(-100px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@keyframes slideindown { + 0% { + opacity: 0; + -webkit-transform: translateY(-100px); + transform: translateY(-100px); + } + 100% { + opacity: 1; + -webkit-transform: translateY(0); + transform: translateY(0); + } +} +@-webkit-keyframes slideinleft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@keyframes slideinleft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0); + } +} +@-webkit-keyframes slidebottomright { + 0% { + opacity: 0; + -webkit-transform: translateX(120px) translateY(120px); + transform: translateX(120px) translateY(120px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); + } +} +@keyframes slidebottomright { + 0% { + opacity: 0; + -webkit-transform: translateX(120px) translateY(120px); + transform: translateX(120px) translateY(120px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); + } +} +@-webkit-keyframes slidetopleft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px) translateY(-100px); + transform: translateX(-100px) translateY(-100px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); + } +} +@keyframes slidetopleft { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px) translateY(-100px); + transform: translateX(-100px) translateY(-100px); + } + 100% { + opacity: 1; + -webkit-transform: translateX(0) translateY(0); + transform: translateX(0) translateY(0); + } +} +/*================================= + 04. Template Style +==================================*/ +/*------------------- 4.1. Widget -------------------*/ +.widget_nav_menu ul, +.widget_meta ul, +.widget_pages ul, +.widget_archive ul, +.widget_categories ul, +.wp-block-categories ul { + list-style: none; + padding: 0; + margin: 0 0 0 0; +} +.widget_nav_menu a, +.widget_meta a, +.widget_pages a, +.widget_archive a, +.widget_categories a, +.wp-block-categories a { + font-size: 16px; + font-weight: 500; + display: block; + padding: 17px 32px 17px 0; + font-size: 16px; + line-height: 1.313; + color: var(--title-color); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + border-bottom: 1px solid var(--th-border-color); +} +.widget_nav_menu a::before, +.widget_meta a::before, +.widget_pages a::before, +.widget_archive a::before, +.widget_categories a::before, +.wp-block-categories a::before { + content: "\f061"; + position: absolute; + right: 0; + top: 17px; + font-family: var(--icon-font); + font-weight: 600; + color: inherit; +} +.widget_nav_menu a img, +.widget_meta a img, +.widget_pages a img, +.widget_archive a img, +.widget_categories a img, +.wp-block-categories a img { + margin-top: -3px; + margin-right: 6px; +} +.widget_nav_menu li, +.widget_meta li, +.widget_pages li, +.widget_archive li, +.widget_categories li, +.wp-block-categories li { + display: block; + position: relative; +} +.widget_nav_menu li > span, +.widget_meta li > span, +.widget_pages li > span, +.widget_archive li > span, +.widget_categories li > span, +.wp-block-categories li > span { + color: var(--title-color); + text-align: center; + font-weight: 500; + position: absolute; + right: 0; + top: 14px; + -webkit-transition: all ease-in-out 0.4s; + transition: all ease-in-out 0.4s; + pointer-events: none; + min-width: 20px; + text-align: right; + background-color: var(--body-bg); +} +.widget_nav_menu .menu > li:last-child > a, +.widget_nav_menu > ul > li:last-child > a, +.widget_meta .menu > li:last-child > a, +.widget_meta > ul > li:last-child > a, +.widget_pages .menu > li:last-child > a, +.widget_pages > ul > li:last-child > a, +.widget_archive .menu > li:last-child > a, +.widget_archive > ul > li:last-child > a, +.widget_categories .menu > li:last-child > a, +.widget_categories > ul > li:last-child > a, +.wp-block-categories .menu > li:last-child > a, +.wp-block-categories > ul > li:last-child > a { + border-bottom: none; +} +.widget_nav_menu a:hover, +.widget_meta a:hover, +.widget_pages a:hover, +.widget_archive a:hover, +.widget_categories a:hover, +.wp-block-categories a:hover { + color: var(--theme-color); + -webkit-box-shadow: none; + box-shadow: none; +} +.widget_nav_menu a:hover ~ span, +.widget_meta a:hover ~ span, +.widget_pages a:hover ~ span, +.widget_archive a:hover ~ span, +.widget_categories a:hover ~ span, +.wp-block-categories a:hover ~ span { + color: var(--theme-color); +} +.widget_nav_menu .sub-menu, +.widget_nav_menu .children, +.widget_meta .sub-menu, +.widget_meta .children, +.widget_pages .sub-menu, +.widget_pages .children, +.widget_archive .sub-menu, +.widget_archive .children, +.widget_categories .sub-menu, +.widget_categories .children, +.wp-block-categories .sub-menu, +.wp-block-categories .children { + margin-left: 10px; +} + +.wp-block-categories { + list-style: none; + padding: 0; +} +.wp-block-categories > li:last-child > a { + border-bottom: none; +} + +.widget_nav_menu a, +.widget_meta a, +.widget_pages a { + padding-right: 20px; +} + +.widget_nav_menu .sub-menu { + margin-left: 10px; +} + +.wp-block-archives { + list-style: none; + margin: 0; + padding: 0; + margin-bottom: 20px; +} +.wp-block-archives a:not(:hover) { + color: inherit; +} + +.th-blog ul.wp-block-archives li { + margin: 5px 0; +} + +.widget { + padding: var(--widget-padding-y, 32px) var(--widget-padding-x, 32px); + background-color: transparent; + margin-bottom: 32px; + position: relative; + border-radius: 8px; + border: 1px solid var(--th-border-color); +} +.widget[data-overlay]:before { + z-index: -1; +} +.widget .th-social a { + -webkit-box-shadow: 0px 2px 14px rgba(4, 6, 66, 0.1); + box-shadow: 0px 2px 14px rgba(4, 6, 66, 0.1); +} +.widget select, +.widget input, +.widget .form-select, +.widget .form-control, +.widget textarea { + background-color: var(--white-color); + border-radius: 28px; +} +.widget textarea { + min-height: 120px; +} +.widget .form-group > i { + background-color: var(--white-color); +} + +.widget_title { + position: relative; + font-size: 24px; + font-weight: 600; + font-family: var(--title-font); + line-height: 1em; + padding-bottom: 20px; + margin: -0.12em 0 32px 0; +} +.widget_title:after, .widget_title:before { + content: ""; + height: 3px; + width: 100%; + background-color: transparent; + position: absolute; + bottom: 0; + left: 0; +} +.widget_title:after { + background-color: var(--theme-color); + width: 50px; +} + +.widget-form { + --bs-gutter-x: 20px; +} + +.widget .search-form { + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.widget .search-form input { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + padding-right: 25px; + border: 1px solid transparent; +} +.widget .search-form input:focus { + border-color: var(--theme-color); +} +.widget .search-form button { + border: none; + font-size: 16px; + font-size: 500; + background-color: var(--theme-color); + color: var(--white-color); + display: inline-block; + padding: 0; + width: 36px; + height: 36px; + text-align: center; + border-radius: 30px; + position: absolute; + top: 10px; + right: 10px; +} +.widget .search-form button:hover { + background-color: var(--title-color); +} + +.wp-block-tag-cloud a, +.tagcloud a { + display: inline-block; + font-size: 16px; + font-weight: 500; + font-family: var(--body-font); + text-transform: capitalize; + line-height: 1; + padding: 12px 18px 13px 18px; + margin-right: 6px; + margin-bottom: 10px; + color: var(--body-color); + background-color: var(--white-color); + border-radius: 4px; +} +.wp-block-tag-cloud a:hover, +.tagcloud a:hover { + background-color: var(--theme-color); + color: var(--white-color) !important; + border-color: var(--theme-color); +} + +.wp-block-tag-cloud, +.tagcloud { + margin-right: -10px; + margin-bottom: -10px; +} + +.widget_banner { + border: none; + border-radius: 14px; +} + +.widget-banner { + text-align: center; + padding: 42px 30px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .widget-banner { + padding: 30px 10px; + } +} +.widget-banner .box-title, +.widget-banner .box-text, +.widget-banner .box-link { + color: var(--white-color); +} +.widget-banner .box-title { + margin-bottom: 27px; +} +.widget-banner .box-text { + font-size: 18px; + margin-top: 27px; + margin-bottom: 10px; +} +.widget-banner .box-link { + font-size: 24px; + font-weight: 600; +} +.widget-banner .box-link a { + color: inherit; +} +.widget-banner .box-link a:hover { + color: var(--theme-color); +} +.widget-banner .logo { + display: inline-block; + padding: 17px 40px; + border-radius: 99px; + text-align: center; + background-color: var(--white-color); +} + +.sidebar-gallery { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 20px; + max-width: 320px; +} +.sidebar-gallery .gallery-btn { + position: absolute; + top: 50%; + left: 50%; + color: var(--white-color); + visibility: hidden; + opacity: 0; + -webkit-transform: translate(-50%, 20px); + transform: translate(-50%, 20px); +} +.sidebar-gallery .gallery-btn:hover { + color: var(--theme-color); +} +.sidebar-gallery .gallery-thumb { + overflow: hidden; + position: relative; + border-radius: 10px; +} +.sidebar-gallery .gallery-thumb:before { + content: ""; + height: calc(100% - 14px); + width: calc(100% - 14px); + background-color: var(--title-color); + opacity: 0.6; + position: absolute; + top: 7px; + left: 7px; + border: 1px solid var(--white-color); + -webkit-transform: scaleX(0); + transform: scaleX(0); + border-radius: inherit; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.sidebar-gallery .gallery-thumb img { + width: 100%; +} +.sidebar-gallery .gallery-thumb:hover:before { + -webkit-transform: scaleX(1); + transform: scaleX(1); +} +.sidebar-gallery .gallery-thumb:hover .gallery-btn { + visibility: visible; + opacity: 1; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.sidebar-gallery .wp-block-image { + overflow: hidden; + position: relative; + border-radius: 5px; + width: 100% !important; +} +.sidebar-gallery .wp-block-image img { + width: 100%; +} + +.recent-post { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin-bottom: 20px; +} +.recent-post:last-child { + margin-bottom: 0; +} +.recent-post .media-img { + margin-right: 15px; + width: 80px; + overflow: hidden; + border-radius: 4px; + position: relative; +} +.recent-post .media-img img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.recent-post .media-img:after { + content: "\f0c1"; + font-family: var(--icon-font); + position: absolute; + inset: 0; + text-align: center; + line-height: 80px; + font-size: 20px; + background-color: rgba(0, 0, 0, 0.7); + color: var(--theme-color); + pointer-events: none; + border-radius: inherit; + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.recent-post .post-title { + font-weight: 600; + font-size: 16px; + line-height: 26px; + margin: 0 0 6px 0; + font-family: var(--title-font); + text-transform: capitalize; +} +.recent-post .recent-post-meta a { + text-transform: capitalize; + font-size: 14px; + color: var(--body-color); + font-family: var(--body-font); +} +.recent-post .recent-post-meta a i { + margin-right: 6px; + color: var(--body-color); +} +.recent-post .recent-post-meta a:hover { + color: var(--theme-color); +} +.recent-post:hover .media-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.recent-post:hover .media-img:after { + -webkit-transform: scale(1); + transform: scale(1); +} + +.sidebar-area { + margin-bottom: -10px; +} +.sidebar-area ul.wp-block-latest-posts { + margin-bottom: 0; +} +.sidebar-area ul.wp-block-latest-posts li:last-child { + margin-bottom: 0; +} +.sidebar-area select, +.sidebar-area input { + background-color: var(--white-color); +} +.sidebar-area .widget_nav_menu > ul, +.sidebar-area .widget_nav_menu .menu, +.sidebar-area .widget_meta > ul, +.sidebar-area .widget_meta .menu, +.sidebar-area .widget_pages > ul, +.sidebar-area .widget_pages .menu, +.sidebar-area .widget_archive > ul, +.sidebar-area .widget_archive .menu, +.sidebar-area .widget_categories > ul, +.sidebar-area .widget_categories .menu, +.sidebar-area .wp-block-categories > ul, +.sidebar-area .wp-block-categories .menu { + margin: -16px 0 -16px 0; +} +.sidebar-area .wp-block-categories { + margin: -16px 0 -16px 0; +} +.sidebar-area .sidebar-gallery { + margin-bottom: 0 !important; +} +.sidebar-area .widget .wp-block-search { + margin-bottom: 0; +} +.sidebar-area .wp-block-search__label, +.sidebar-area .wp-block-group__inner-container h2 { + position: relative; + font-size: 24px; + font-weight: 700; + font-family: var(--title-font); + line-height: 1em; + padding-bottom: 20px; + margin: -0.12em 0 38px 0; +} +.sidebar-area .wp-block-search__label:after, .sidebar-area .wp-block-search__label:before, +.sidebar-area .wp-block-group__inner-container h2:after, +.sidebar-area .wp-block-group__inner-container h2:before { + content: ""; + height: 3px; + width: 100%; + background-color: var(--th-border-color); + position: absolute; + bottom: 0; + left: 0; +} +.sidebar-area .wp-block-search__label:after, +.sidebar-area .wp-block-group__inner-container h2:after { + background-color: var(--theme-color); + width: 40px; +} +.sidebar-area ol.wp-block-latest-comments { + padding: 0; + margin: 0; +} +.sidebar-area ol.wp-block-latest-comments li { + line-height: 1.5; + margin: 0 0 20px 0; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding-bottom: 20px; +} +.sidebar-area ol.wp-block-latest-comments li:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +.download-widget-wrap .th-btn { + width: 100%; +} +.download-widget-wrap .th-btn:first-child { + margin-bottom: 15px; +} +.download-widget-wrap .th-btn.style2 { + color: var(--body-color); +} +.download-widget-wrap .th-btn.style2:before { + background-color: var(--theme-color); +} +.download-widget-wrap .th-btn.style2:hover { + color: var(--white-color); + border-color: var(--theme-color); +} + +.widget_call { + background-color: var(--title-color); + position: relative; + padding: 0 !important; +} +.widget_call .widget_title { + color: var(--white-color); +} + +.widget-map iframe { + min-height: 280px; +} + +.widget-call { + position: relative; + z-index: 2; + overflow: hidden; + text-align: center; + padding: 0 10px var(--widget-padding-y, 40px) 10px; +} +.widget-call:before { + content: ""; + width: 368px; + height: 368px; + background-color: var(--theme-color); + border: 6px solid var(--white-color); + position: absolute; + bottom: calc(100% - 120px); + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + border-radius: 50%; + z-index: -1; +} +.widget-call .text { + display: block; + margin: 22px auto 25px auto; + color: var(--white-color); + max-width: 310px; +} +.widget-call .call { + font-size: 30px; + font-weight: 600; + color: var(--white-color); + display: block; + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + margin: 30px auto 0 auto; +} +.widget-call .call:hover { + color: var(--theme-color); +} +.widget-call .play-btn { + --icon-size: 60px; +} +.widget-call .play-btn > i { + font-size: 30px; +} +.widget-call .box-title { + font-weight: 500; + color: var(--white-color); + margin-bottom: 35px; + padding-top: 20px; +} + +/* Medium Large devices */ +@media (max-width: 1299px) { + .widget-call .title { + font-size: 34px; + } +} +.widget_info .th-btn { + width: 100%; + margin-bottom: 10px; + display: block; +} +.widget_info .th-video { + margin-bottom: 20px; +} + +.info-list { + margin-top: -16px; +} +.info-list ul { + list-style: none; + padding: 0; + margin: 0; +} +.info-list i { + color: var(--theme-color); + width: 16px; + margin-right: 2px; + font-size: 16px; +} +.info-list strong { + font-weight: 500; + color: var(--title-color); +} +.info-list li { + border-bottom: 1px dashed #D3DBEB; + padding: 12px 0; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 5px; +} +.info-list li:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: -0.45em; +} + +.price_slider_wrapper { + margin-top: -0.5em; +} +.price_slider_wrapper .price_label span { + display: inline-block; + color: var(--body-color); +} +.price_slider_wrapper .ui-slider { + height: 6px; + position: relative; + width: 100%; + background-color: var(--theme-color); + border: none; + margin-top: 15px; + margin-bottom: 25px; + cursor: pointer; + border-radius: 0; +} +.price_slider_wrapper .ui-slider-range { + border: none; + cursor: pointer; + position: absolute; + top: 0; + height: 100%; + z-index: 1; + display: block; + background-color: var(--title-color); +} +.price_slider_wrapper .ui-slider-handle { + width: 16px; + height: 16px; + line-height: 16px; + border-radius: 50%; + text-align: center; + padding: 0; + cursor: pointer; + position: absolute; + margin-top: -5px; + z-index: 2; + background-color: var(--white-color); + border: 3px solid var(--title-color); + -webkit-transform: translateX(-1px); + transform: translateX(-1px); +} +.price_slider_wrapper .ui-slider-handle:focus { + outline: none; + -webkit-box-shadow: 1.5px 2.598px 10px 0px rgba(0, 0, 0, 0.15); + box-shadow: 1.5px 2.598px 10px 0px rgba(0, 0, 0, 0.15); +} +.price_slider_wrapper .ui-slider-handle:last-child { + -webkit-transform: translateX(-9px); + transform: translateX(-9px); +} +.price_slider_wrapper button, +.price_slider_wrapper .button { + background-color: var(--theme-color); + color: var(--white-color); + font-weight: 500; + line-height: 1.6; + text-transform: capitalize; + text-align: center; + border: none; + display: inline-block; + overflow: hidden; + position: relative; + z-index: 2; + padding: 7px 20px; + min-width: 100px; + font-size: 14px; + border-radius: 0; + -webkit-transition: 0.4s ease-in; + transition: 0.4s ease-in; +} +.price_slider_wrapper button:hover, +.price_slider_wrapper .button:hover { + background-color: var(--title-color); +} + +.widget_shopping_cart .widget_title { + margin-bottom: 35px; + border-bottom: none; +} +.widget_shopping_cart ul { + margin: 0; + padding: 0; +} +.widget_shopping_cart ul li { + list-style-type: none; +} +.widget_shopping_cart .mini_cart_item { + position: relative; + padding: 30px 30px 30px 90px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + margin-bottom: 0; + text-align: left; +} +.widget_shopping_cart .mini_cart_item:first-child { + border-top: 1px solid rgba(0, 0, 0, 0.1); +} +.widget_shopping_cart .cart_list a:not(.remove) { + display: block; + color: var(--body-color); + font-size: 16px; + font-weight: 500; + font-family: var(--title-font); + font-weight: 600; + color: var(--title-color); +} +.widget_shopping_cart .cart_list a:not(.remove):hover { + color: var(--theme-color); +} +.widget_shopping_cart .cart_list a.remove { + position: absolute; + top: 50%; + left: 95%; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + color: var(--body-color); +} +.widget_shopping_cart .cart_list a.remove:hover { + color: var(--theme-color); +} +.widget_shopping_cart .cart_list img { + width: 75px; + height: 75px; + position: absolute; + left: 0; + top: 18px; +} +.widget_shopping_cart .quantity { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + white-space: nowrap; + vertical-align: top; + margin-right: 20px; + font-size: 14px; + font-weight: 500; +} +.widget_shopping_cart .total { + margin-top: 20px; + font-size: 18px; + color: var(--title-color); + font-family: var(--body-font); +} +.widget_shopping_cart .total strong { + font-family: var(--title-font); +} +.widget_shopping_cart .amount { + padding-left: 5px; +} +.widget_shopping_cart .th-btn { + margin-right: 15px; +} +.widget_shopping_cart .th-btn:last-child { + margin-right: 0; +} + +.th-video-widget .video-thumb { + position: relative; +} +.th-video-widget .play-btn { + --icon-size: 60px; + position: absolute; + left: 50%; + top: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} +.th-video-widget .play-btn i { + font-size: 16px; +} +.th-video-widget .video-thumb-title { + font-size: 20px; + font-weight: 600; + line-height: 1.4; + margin-top: 10px; + margin-bottom: -0.3em; +} + +.widget_recent_entries ul { + margin: -0.3em 0 0 0; + padding: 0; + list-style: none; +} +.widget_recent_entries ul li > a { + color: var(--body-color); + font-weight: 500; + display: inline-block; +} +.widget_recent_entries ul li > a:hover { + color: var(--theme-color); +} +.widget_recent_entries ul li span.post-date { + font-size: 14px; +} +.widget_recent_entries ul li:not(:last-child) { + border-bottom: 1px solid #dadada; + padding-bottom: 12px; + margin-bottom: 12px; +} + +.widget_recent_comments ul, +.wp-block-latest-comments ul { + list-style-type: none; + padding-left: 0; +} + +ul.widget_recent_comments, +ol.widget_recent_comments, +.wp-block-latest-comments { + margin-top: -0.11em; + padding-left: 0; +} + +.widget_recent_comments ol, +.widget_recent_comments ul, +.wp-block-latest-comments ol, +.wp-block-latest-comments ul { + margin-bottom: 0; +} +.widget_recent_comments li, +.wp-block-latest-comments li { + margin-bottom: 0; + color: var(--body-color); + padding-left: 30px; + position: relative; +} +.widget_recent_comments li:before, +.wp-block-latest-comments li:before { + content: "\f086"; + position: absolute; + left: 0; + top: -1px; + color: var(--theme-color); + font-family: var(--icon-font); +} +.widget_recent_comments.has-avatars li, +.wp-block-latest-comments.has-avatars li { + padding-left: 0; + padding-bottom: 0 !important; +} +.widget_recent_comments.has-avatars li:before, +.wp-block-latest-comments.has-avatars li:before { + display: none; +} +.widget_recent_comments .avatar, +.wp-block-latest-comments .avatar { + margin-top: 0.4em; +} +.widget_recent_comments li:not(:last-child), +.wp-block-latest-comments li:not(:last-child) { + padding-bottom: 12px; +} +.widget_recent_comments article, +.wp-block-latest-comments article { + line-height: 1.5; +} +.widget_recent_comments a, +.wp-block-latest-comments a { + color: inherit; +} +.widget_recent_comments a:hover, +.wp-block-latest-comments a:hover { + color: var(--theme-color); +} + +.wp-block-latest-comments__comment { + line-height: 1.6; +} +.wp-block-latest-comments__comment a { + color: var(--body-color); +} +.wp-block-latest-comments__comment a:hover { + color: var(--theme-color); +} +.wp-block-latest-comments__comment:last-child { + margin-bottom: 0; +} + +.wp-block-calendar tbody td, +.wp-block-calendar th { + padding: 10px; +} + +.wp-block-calendar, +.calendar_wrap { + position: relative; + background-color: #fff; + padding-bottom: 0; + border: none; +} +.wp-block-calendar span[class*=wp-calendar-nav], +.calendar_wrap span[class*=wp-calendar-nav] { + position: absolute; + top: 9px; + left: 20px; + font-size: 14px; + color: var(--white-color); + font-weight: 400; + z-index: 1; + line-height: 1.7; +} +.wp-block-calendar span[class*=wp-calendar-nav] a, +.calendar_wrap span[class*=wp-calendar-nav] a { + color: inherit; +} +.wp-block-calendar span.wp-calendar-nav-next, +.calendar_wrap span.wp-calendar-nav-next { + left: auto; + right: 20px; +} +.wp-block-calendar caption, +.calendar_wrap caption { + caption-side: top; + text-align: center; + color: var(--white-color); + background-color: var(--theme-color); +} +.wp-block-calendar th, +.calendar_wrap th { + font-size: 14px; + padding: 5px 5px; + border: none; + text-align: center; + border-right: 1px solid #fff; + color: var(--title-color); + font-weight: 500; +} +.wp-block-calendar th:first-child, +.calendar_wrap th:first-child { + border-left: 1px solid #eee; +} +.wp-block-calendar th:last-child, +.calendar_wrap th:last-child { + border-right: 1px solid #eee; +} +.wp-block-calendar table th, +.calendar_wrap table th { + font-weight: 500; +} +.wp-block-calendar td, +.calendar_wrap td { + font-size: 14px; + padding: 5px 5px; + color: #01133c; + border: 1px solid #eee; + text-align: center; + background-color: transparent; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.wp-block-calendar #today, +.calendar_wrap #today { + color: var(--theme-color); + background-color: var(--white-color); + border-color: #ededed; +} +.wp-block-calendar thead, +.calendar_wrap thead { + background-color: #fff; +} +.wp-block-calendar .wp-calendar-table, +.calendar_wrap .wp-calendar-table { + margin-bottom: 0; +} +.wp-block-calendar .wp-calendar-nav .pad, +.calendar_wrap .wp-calendar-nav .pad { + display: none; +} +.wp-block-calendar a, +.calendar_wrap a { + color: inherit; + text-decoration: none; +} +.wp-block-calendar a:hover, +.calendar_wrap a:hover { + color: var(--title-color); +} + +.wp-block-calendar { + margin-bottom: 30px; + border: none; + padding-bottom: 0; +} +.wp-block-calendar table caption { + color: var(--white-color); +} + +ul.widget_rss, ul.wp-block-rss, +ol.widget_rss, +ol.wp-block-rss { + padding-left: 0; +} + +.widget_rss, +.wp-block-rss { + list-style-type: none; +} +.widget_rss ul, +.wp-block-rss ul { + margin: -0.2em 0 -0.5em 0; + padding: 0; + list-style: none; +} +.widget_rss ul .rsswidget, +.wp-block-rss ul .rsswidget { + color: var(--title-color); + font-family: var(--theme-font); + font-size: 18px; + display: block; + margin-bottom: 10px; +} +.widget_rss ul .rssSummary, +.wp-block-rss ul .rssSummary { + font-size: 14px; + margin-bottom: 7px; + line-height: 1.5; +} +.widget_rss ul a, +.wp-block-rss ul a { + display: block; + font-weight: 600; + color: inherit; +} +.widget_rss ul a:hover, +.wp-block-rss ul a:hover { + color: var(--theme-color); +} +.widget_rss ul .rss-date, +.wp-block-rss ul .rss-date { + font-size: 14px; + display: inline-block; + margin-bottom: 5px; + font-weight: 400; + color: var(--title-color); +} +.widget_rss ul .rss-date:before, +.wp-block-rss ul .rss-date:before { + content: "\f073"; + font-family: var(--icon-font); + margin-right: 10px; + font-weight: 300; + color: var(--theme-color); +} +.widget_rss ul cite, +.wp-block-rss ul cite { + font-weight: 500; + color: var(--title-color); + font-family: var(--body-font); + font-size: 14px; +} +.widget_rss ul cite:before, +.wp-block-rss ul cite:before { + content: ""; + position: relative; + top: -1px; + left: 0; + width: 20px; + height: 2px; + display: inline-block; + vertical-align: middle; + margin-right: 8px; + background-color: var(--theme-color); +} +.widget_rss li:not(:last-child), +.wp-block-rss li:not(:last-child) { + margin-bottom: 16px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding-bottom: 16px; +} +.widget_rss a:hover, +.wp-block-rss a:hover { + color: var(--theme-color); +} + +.textwidget { + margin-top: -0.1em; +} + +.author-widget-wrap { + position: relative; + background-color: var(--smoke-color); + padding: 30px 40px 30px 30px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 30px; + border-radius: 15px; + /* Large devices */ + /* Extra small devices */ +} +@media (max-width: 1199px) { + .author-widget-wrap { + display: block; + } +} +@media (max-width: 375px) { + .author-widget-wrap { + padding: 25px; + } +} +.author-widget-wrap.style2 { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 40px; + margin-bottom: 50px; + /* Large devices */ +} +@media (max-width: 1199px) { + .author-widget-wrap.style2 { + display: block; + } +} +.author-widget-wrap .avater-content { + position: relative; +} +.author-widget-wrap .avater { + min-width: 189px; + border-radius: 15px; + border-radius: 50%; + /* Large devices */ +} +@media (max-width: 1199px) { + .author-widget-wrap .avater { + min-width: 100%; + margin-bottom: 15px; + } +} +.author-widget-wrap .avater img { + border-radius: 15px; + width: 100%; + /* Large devices */ +} +@media (max-width: 1199px) { + .author-widget-wrap .avater img { + width: 100%; + } +} +.author-widget-wrap .name { + font-weight: 600; + font-size: 24px; + line-height: 30px; + color: var(--title-color); + margin-bottom: 0px; +} +.author-widget-wrap .name a { + color: inherit; +} +.author-widget-wrap .name a:hover { + color: var(--theme-color); +} +.author-widget-wrap .text { + font-weight: 500; + font-size: 14px; + line-height: 24px; + color: var(--theme-color); + margin-bottom: 25px; +} +.author-widget-wrap .author-info { + text-align: left; + padding-right: 20px; + margin-bottom: 15px; + /* Large devices */ +} +@media (max-width: 1199px) { + .author-widget-wrap .author-info { + padding: 10px 0; + margin-bottom: 0; + } +} +.author-widget-wrap .author-bio { + font-weight: 400; + font-size: 18px; + line-height: 26px; + color: var(--body-color); + margin-bottom: 0px; +} +.author-widget-wrap .author-social { + display: block; + position: absolute; + top: 20px; + right: 40px; + /* Extra small devices */ +} +@media (max-width: 575px) { + .author-widget-wrap .author-social { + right: 0px; + } +} +@media (max-width: 450px) { + .author-widget-wrap .author-social { + display: none; + } +} +.author-widget-wrap .author-social a { + font-size: 14px; + color: var(--title-color); + position: relative; + margin-right: 10px; +} +.author-widget-wrap .author-social a:last-child { + margin-right: 0; + border-right: none; +} +.author-widget-wrap .author-social a:hover { + color: var(--theme-color); +} + +.sidebar-area .widget_shopping_cart .th-btn { + margin-right: 10px; + padding: 8px 22px; + font-size: 14px; +} + +@media (min-width: 1200px) { + .sidebar-shop .widget { + padding: 30px; + } +} +@media (min-width: 992px) { + .sidebar-shop .widget { + margin-bottom: 24px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .widget { + --widget-padding-y: 30px; + --widget-padding-x: 30px; + } + .widget_title { + font-size: 22px; + margin: -0.12em 0 28px 0; + } + .author-widget-wrap .name { + font-size: 22px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .sidebar-area { + padding-top: 30px; + } + .widget { + --widget-padding-y: 40px; + --widget-padding-x: 40px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .widget { + padding: 20px; + border-radius: 10px; + } +} +@media (max-width: 330px) { + .recent-post .post-title { + font-size: 14px; + line-height: 24px; + } + .recent-post .recent-post-meta a { + font-size: 12px; + } +} +.footer-widget { + margin-bottom: 50px; +} +.footer-widget, +.footer-widget .widget { + padding: 0; + border: none; + padding-bottom: 0; + background-color: transparent; + -webkit-box-shadow: none; + box-shadow: none; +} +.footer-widget .form-group > i { + color: var(--theme-color); + top: 18px; +} +.footer-widget input, +.footer-widget select { + color: #666666; +} +.footer-widget input::-moz-placeholder, +.footer-widget select::-moz-placeholder { + color: #666666; +} +.footer-widget input::-webkit-input-placeholder, +.footer-widget select::-webkit-input-placeholder { + color: #666666; +} +.footer-widget input:-ms-input-placeholder, +.footer-widget select:-ms-input-placeholder { + color: #666666; +} +.footer-widget input::-webkit-input-placeholder, .footer-widget select::-webkit-input-placeholder { + color: #666666; +} +.footer-widget input::-moz-placeholder, .footer-widget select::-moz-placeholder { + color: #666666; +} +.footer-widget input:-ms-input-placeholder, .footer-widget select:-ms-input-placeholder { + color: #666666; +} +.footer-widget input::-ms-input-placeholder, .footer-widget select::-ms-input-placeholder { + color: #666666; +} +.footer-widget input::placeholder, +.footer-widget select::placeholder { + color: #666666; +} +.footer-widget .sidebar-gallery { + max-width: 287px; + gap: 11px; +} +.footer-widget .sidebar-gallery .gallery-thumb { + border-radius: 5px; +} +.footer-widget .widget_title { + max-width: 270px; + color: var(--white-color); + font-size: 22px; + font-weight: 600; + text-transform: capitalize; + margin: -0.09em 0 32px 0; + padding: 0; +} +.footer-widget .widget_title:after, .footer-widget .widget_title:before { + display: none; +} +.footer-widget .widget_title img { + margin: -6px 3px 0 0; +} +.footer-widget.widget_meta ul, .footer-widget.widget_pages ul, .footer-widget.widget_archive ul, .footer-widget.widget_categories ul, .footer-widget.widget_nav_menu ul { + margin-top: -5px; +} +.footer-widget.widget_meta .menu, +.footer-widget.widget_meta > ul, .footer-widget.widget_pages .menu, +.footer-widget.widget_pages > ul, .footer-widget.widget_archive .menu, +.footer-widget.widget_archive > ul, .footer-widget.widget_categories .menu, +.footer-widget.widget_categories > ul, .footer-widget.widget_nav_menu .menu, +.footer-widget.widget_nav_menu > ul { + margin-bottom: -5px; +} +.footer-widget.widget_meta a, .footer-widget.widget_pages a, .footer-widget.widget_archive a, .footer-widget.widget_categories a, .footer-widget.widget_nav_menu a { + font-size: 16px; + font-weight: 400; + padding: 0 0 0 16px; + margin-bottom: 16px; + font-family: var(--body-font); + color: var(--body-color); + display: block; + max-width: 100%; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + padding-right: 0; + background-color: transparent; + border: none !important; + -webkit-box-shadow: none; + box-shadow: none; + position: relative; +} +.footer-widget.widget_meta a:before, .footer-widget.widget_pages a:before, .footer-widget.widget_archive a:before, .footer-widget.widget_categories a:before, .footer-widget.widget_nav_menu a:before { + content: "\f054"; + font-weight: 600; + left: 0; + top: 2px; + -webkit-transform: translateY(0); + transform: translateY(0); + font-size: 0.9em; + background-color: transparent; + border: none; + color: inherit; +} +.footer-widget.widget_meta a:hover, .footer-widget.widget_pages a:hover, .footer-widget.widget_archive a:hover, .footer-widget.widget_categories a:hover, .footer-widget.widget_nav_menu a:hover { + background-color: transparent; + color: var(--theme-color); +} +.footer-widget.widget_meta a:hover:before, .footer-widget.widget_pages a:hover:before, .footer-widget.widget_archive a:hover:before, .footer-widget.widget_categories a:hover:before, .footer-widget.widget_nav_menu a:hover:before { + color: var(--theme-color); +} +.footer-widget.widget_meta li > span, .footer-widget.widget_pages li > span, .footer-widget.widget_archive li > span, .footer-widget.widget_categories li > span, .footer-widget.widget_nav_menu li > span { + width: auto; + height: auto; + position: relative; + background-color: transparent; + color: var(--body-color); + line-height: 1; +} +.footer-widget.widget_meta li:last-child a, .footer-widget.widget_pages li:last-child a, .footer-widget.widget_archive li:last-child a, .footer-widget.widget_categories li:last-child a, .footer-widget.widget_nav_menu li:last-child a { + margin-bottom: 0; +} +.footer-widget .recent-post { + max-width: 300px; + margin-top: -0.4em; + margin-bottom: 20px; +} +.footer-widget .recent-post .media-img { + max-width: 74px; +} +.footer-widget .recent-post .media-img:after { + line-height: 74px; +} +.footer-widget .recent-post .post-title { + color: var(--white-color); + font-weight: 500; +} +.footer-widget .recent-post:last-child { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: 0; +} +.footer-widget .recent-post .recent-post-meta a { + font-weight: 400; + line-height: 1.2; +} +.footer-widget .recent-post .recent-post-meta i { + color: var(--theme-color); +} +.footer-widget .recent-post .recent-post-meta a:hover i { + color: var(--theme-color); +} +.footer-widget .sidebar-gallery { + max-width: 250px; +} + +.about-logo { + margin-bottom: 15px; +} + +.th-widget-about { + max-width: 260px; +} +.th-widget-about .about-logo { + margin-bottom: 32px; +} +.th-widget-about .about-text { + margin-bottom: 26px; + margin-top: -0.4em; +} + +.footer-text { + margin-top: -0.5em; + margin-bottom: 25px; +} + +.social-box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.social-box .social-title { + font-size: 20px; + color: var(--white-color); + font-weight: 600; + margin-right: 20px; + margin-bottom: 0; +} + +.icon-group a { + color: var(--white-color); + font-size: 18px; + margin-right: 17px; +} +.icon-group a:last-child { + margin-right: 0; +} + +.newsletter-form { + position: relative; + max-width: 465px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; +} +.newsletter-form .th-btn { + min-width: 145px; + padding: 21px 20px; +} + +/* Large devices */ +@media (max-width: 1199px) { + .footer-widget.widget_meta a, .footer-widget.widget_pages a, .footer-widget.widget_archive a, .footer-widget.widget_categories a, .footer-widget.widget_nav_menu a { + margin-bottom: 16px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .footer-widget .widget_title { + margin-bottom: 35px; + } + .social-box.mb-30 { + margin-bottom: 25px; + } +} +/*------------------- 4.2. Header -------------------*/ +.th-header { + position: relative; + z-index: 41; +} +.th-header .icon-btn { + border-radius: 99px; +} +.th-header .menu-area { + position: relative; + z-index: 2; +} + +.sticky-wrapper { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.sticky-wrapper.sticky { + position: fixed; + top: 0; + right: 0; + left: 0; + background-color: var(--white-color); + -webkit-filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07)); + filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.07)); + -webkit-animation: stickyAni 0.4s ease-in-out; + animation: stickyAni 0.4s ease-in-out; +} + +@-webkit-keyframes stickyAni { + 0% { + -webkit-transform: translate3d(0, -40px, 0) scaleY(0.8); + transform: translate3d(0, -40px, 0) scaleY(0.8); + opacity: 0.7; + } + 100% { + -webkit-transform: translate3d(0, 0, 0) scaleY(1); + transform: translate3d(0, 0, 0) scaleY(1); + opacity: 1; + } +} + +@keyframes stickyAni { + 0% { + -webkit-transform: translate3d(0, -40px, 0) scaleY(0.8); + transform: translate3d(0, -40px, 0) scaleY(0.8); + opacity: 0.7; + } + 100% { + -webkit-transform: translate3d(0, 0, 0) scaleY(1); + transform: translate3d(0, 0, 0) scaleY(1); + opacity: 1; + } +} +.main-menu a { + display: block; + position: relative; + font-weight: 500; + font-size: 16px; + font-family: var(--title-font); + color: var(--title-color); + text-transform: capitalize; +} +.main-menu a:hover { + color: var(--theme-color); +} +.main-menu > ul > li { + margin: 0 21px; +} +.main-menu > ul > li > a { + padding: 37px 0; +} +.main-menu > ul > li > a:before { + content: ""; + height: 3px; + width: 0; + background-color: var(--theme-color); + position: absolute; + bottom: 0; + right: 0; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.main-menu > ul > li > a:hover { + color: var(--theme-color); +} +.main-menu > ul > li > a:hover:before { + width: 100%; + right: unset; + left: 0; +} +.main-menu ul { + margin: 0; + padding: 0; +} +.main-menu ul li { + list-style-type: none; + display: inline-block; + position: relative; +} +.main-menu ul li.menu-item-has-children > a:after { + content: "\f078"; + display: inline-block; + position: relative; + font-family: var(--icon-font); + margin-left: 5px; + font-weight: 600; + top: 0; + font-size: 0.9em; + color: inherit; + -webkit-transition: -webkit-transform 0.4s ease-in-out; + transition: -webkit-transform 0.4s ease-in-out; + transition: transform 0.4s ease-in-out; + transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out; +} +.main-menu ul li.menu-item-has-children > a:hover:after { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.main-menu ul li:last-child { + margin-right: 0 !important; +} +.main-menu ul li:first-child { + margin-left: 0 !important; +} +.main-menu ul li:hover > ul.sub-menu { + visibility: visible; + opacity: 1; + -webkit-transform: scaleY(1); + transform: scaleY(1); + z-index: 9; +} +.main-menu ul.sub-menu { + position: absolute; + text-align: left; + top: 100%; + left: 0; + background-color: var(--body-bg); + visibility: hidden; + min-width: 230px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + padding: 7px; + left: -14px; + opacity: 0; + z-index: -1; + -webkit-box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06); + box-shadow: 0px 4px 15px rgba(1, 15, 28, 0.06); + border-radius: 0; + -webkit-transform: scaleY(0); + transform: scaleY(0); + -webkit-transform-origin: top center; + transform-origin: top center; + -webkit-transition: all 0.4s ease 0s; + transition: all 0.4s ease 0s; +} +.main-menu ul.sub-menu a { + font-size: 16px; + line-height: 30px; +} +.main-menu ul.sub-menu { + padding: 18px 20px 18px 18px; + left: -27px; +} +.main-menu ul.sub-menu li { + display: block; + margin: 0 0; + padding: 0px 9px; +} +.main-menu ul.sub-menu li.menu-item-has-children > a:after { + content: "\f078"; + float: right; + top: 1px; + display: inline-block; +} +.main-menu ul.sub-menu li.menu-item-has-children > a:hover:after { + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.main-menu ul.sub-menu li a { + position: relative; + padding-left: 0; + text-transform: capitalize; +} +.main-menu ul.sub-menu li a:before { + content: "\f7d9"; + position: absolute; + top: 6px; + left: 10px; + font-family: var(--icon-font); + width: 11px; + height: 11px; + text-align: center; + border-radius: 50%; + display: inline-block; + font-size: 1em; + line-height: 1; + color: var(--theme-color); + font-weight: 900; + opacity: 0; + visibility: visible; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} +.main-menu ul.sub-menu li a:hover { + padding-left: 23px; +} +.main-menu ul.sub-menu li a:hover:before { + visibility: visible; + opacity: 1; + left: 0; +} +.main-menu ul.sub-menu li ul.sub-menu { + left: 100%; + right: auto; + top: 0; + margin: 0 0; + margin-left: 20px; +} +.main-menu ul.sub-menu li ul.sub-menu li ul { + left: 100%; + right: auto; +} + +@media (max-width: 1500px) { + .main-menu > ul > li { + margin: 0 12px; + } +} +.menu-style1 > ul > li { + margin: 0 14px; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .menu-style1 > ul > li { + margin: 0 10px; + } +} +.menu-style1 > ul > li > a { + padding: 17px 0; + color: var(--white-color); +} +.menu-style1 > ul > li > a:hover { + color: var(--theme-color); +} +.menu-style1 ul li.menu-item-has-children > a:after { + color: var(--white-color); +} + +.header-call { + font-size: 18px; + font-family: var(--title-font); + font-weight: 700; + color: var(--title-color); +} +.header-call .icon-btn { + border: none; + background-color: var(--theme-color); + color: var(--white-color); + margin-right: 5px; +} +.header-call .icon-btn i { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} +.header-call:hover { + color: var(--theme-color); +} +.header-call:hover .icon-btn { + background-color: var(--title-color); +} + +.header-button { + height: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; +} +.header-button .th-btn { + margin-left: 20px; +} +@media (min-width: 1399px) { + .header-button .th-btn { + min-width: 185px; + } +} +.header-button .icon-btn { + --btn-size: 48px; +} +.header-button .icon-btn:hover { + background-color: var(--theme-color); +} +.header-button .icon-btn .badge { + font-size: 12px; + background-color: var(--theme-color); +} +.header-button .icon-btn:hover .badge { + background-color: var(--title-color); +} + +.social-links .social-title { + font-weight: 500; + font-size: 16px; + display: inline-block; + margin: 0 10px 0 0; + color: var(--body-color); +} +.social-links a { + font-size: 16px; + display: inline-block; + color: var(--body-color); + margin: 0 15px 0 0; +} +.social-links a:last-child { + margin-right: 0 !important; +} +.social-links a:hover { + color: var(--theme-color); +} + +.header-logo { + padding-top: 15px; + padding-bottom: 15px; +} + +.header-links ul { + margin: 0; + padding: 0; + list-style-type: none; +} +.header-links li { + display: inline-block; + position: relative; + font-size: 14px; + font-weight: 400; +} +.header-links li:not(:last-child) { + margin: 0 50px 0 0; +} +.header-links li:not(:last-child):after { + content: ""; + height: 14px; + width: 1px; + background-color: var(--body-color); + position: absolute; + top: 0px; + right: -28px; + margin-top: 5px; + opacity: 0.35; +} +.header-links li > i { + margin-right: 6px; + color: var(--theme-color); +} +.header-links li .icon-btn { + margin-right: 8px; +} +.header-links li, +.header-links span, +.header-links p, +.header-links a { + color: var(--body-color); +} +.header-links a:hover { + color: var(--theme-color); +} +.header-links b, +.header-links strong { + font-weight: 600; + margin-right: 6px; +} +.header-links .social-links a { + font-size: 14px; +} + +.header-notice { + margin: 0; +} + +.header-top { + padding: 10.5px 0; + background-color: #101840; + --body-color: #fff; +} +.header-top a:hover { + color: var(--th-border-color); +} +.header-top .icon-btn { + --btn-size: 30px; + background-color: transparent; + border: 1px solid; + font-size: 12px; +} + +/* Header 1 ---------------------------------- */ +.header-layout1 { + position: relative; + max-width: 1832px; + margin: 0 auto -83px auto; +} +.header-layout1 .header-top { + margin-bottom: 24px; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.header-layout1 .menu-area { + --body-bg: #fff; + position: relative; + z-index: 2; + background-color: var(--body-bg); + border-radius: 0 0 24px 24px; + padding-right: 30px; + padding-left: 30px; + /* Medium Large devices */ +} +.header-layout1 .menu-area:before, .header-layout1 .menu-area:after { + content: url('data:image/svg+xml,'); + position: absolute; + top: -2px; +} +.header-layout1 .menu-area:before { + left: -30px; +} +.header-layout1 .menu-area:after { + right: -30px; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} +@media (max-width: 1299px) { + .header-layout1 .menu-area { + border-radius: 0 0 18px 18px; + } +} +.header-layout1 .th-menu-toggle { + margin-left: auto; +} +.header-layout1 .sticky-wrapper { + background-color: transparent; +} +.header-layout1 .sticky-wrapper.sticky .menu-area { + border-radius: 24px; + /* Extra small devices */ +} +.header-layout1 .sticky-wrapper.sticky .menu-area:before, .header-layout1 .sticky-wrapper.sticky .menu-area:after { + display: none; +} +@media (max-width: 575px) { + .header-layout1 .sticky-wrapper.sticky .menu-area { + border-radius: 10px; + } +} +.header-layout1.style-black .menu-area { + --body-bg: #101840; +} +.header-layout1.style-black .main-menu a { + color: var(--white-color); +} +.header-layout1.style-black .main-menu a:hover { + color: var(--theme-color); +} +.header-layout1.style-black .header-call { + color: var(--white-color); + font-weight: 600; +} +.header-layout1.style-black .header-call:hover { + color: var(--theme-color); +} +.header-layout1.style-black .header-call .icon-btn { + background-color: var(--theme-color); +} +.header-layout1.unittest-header .menu-area:before, .header-layout1.unittest-header .menu-area:after { + display: none; +} + +/* Large devices */ +@media (max-width: 1199px) { + .header-layout1 .header-top { + margin-bottom: 12px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .header-layout1 { + margin-bottom: -70px; + } + .header-layout1 .header-top { + border-radius: 0 0 28px 28px; + } + .header-layout1 .menu-area { + padding-left: 15px; + padding-right: 15px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .header-layout1 { + margin-bottom: -85px; + } + .header-layout1 .menu-area:before, .header-layout1 .menu-area:after { + display: none; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .header-layout1 { + margin-bottom: -71px; + } + .header-layout1 .header-top { + margin-bottom: 0; + } + .header-layout1 .menu-area { + border-radius: 10px; + } + .header-layout1 .header-logo h2 { + font-size: 36px; + } + .header-layout1 .header-logo img { + max-width: 160px; + } + .header-layout1 .menu-area { + padding-left: 9px; + padding-right: 9px; + } +} +/* Medium Large devices */ +@media (max-width: 1299px) { + .unittest-header .main-menu a { + font-size: 15px; + } + .unittest-header .main-menu > ul > li { + margin: 0 11px; + } +} +/* Header 2 ---------------------------------- */ +.header-layout2 { + position: absolute; + top: 0; + left: 0; + width: 100%; +} +.header-layout2 .row { + --bs-gutter-x: 16px; +} +.header-layout2 .header-top { + background-color: transparent; +} +.header-layout2 .header-logo { + background-color: var(--white-color); + padding: 8px 9px; + border-radius: 50px; +} +.header-layout2 .header-logo img { + max-width: 180px; + margin-right: 16px; +} +.header-layout2 .menu-area { + --body-bg: #fff; + background-color: var(--body-bg); + border-radius: 48px; + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 10px; +} +.header-layout2 .main-menu { + margin-left: 12px; +} +.header-layout2 .main-menu > ul > li > a { + padding: 18px 0; +} +.header-layout2 .main-menu > ul > li > a:before { + height: 40px; + top: calc(50% - 20px); + right: -12px; + border-radius: 20px; + z-index: -1; +} +.header-layout2 .main-menu > ul > li > a:hover { + color: var(--white-color); +} +.header-layout2 .main-menu > ul > li > a:hover { + color: var(--white-color); +} +.header-layout2 .main-menu > ul > li > a:hover:before { + width: calc(100% + 24px); + right: unset; + left: -12px; +} +.header-layout2 .main-menu .sub-menu { + border-radius: 24px; +} +.header-layout2 .icon-btn { + background-color: var(--title-color); + color: var(--white-color); +} +.header-layout2 .header-search { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.header-layout2 .header-search input { + height: 48px; + border-radius: 27px; + margin-right: -48px; + max-width: 240px; +} +.header-layout2 .header-search .icon-btn { + min-width: 48px; +} +.header-layout2 .sticky-wrapper.sticky .header-logo { + padding-top: 18px; + padding-bottom: 18px; +} +.header-layout2 .th-menu-toggle { + margin-left: auto; +} + +@media (min-width: 1200px) { + .header-layout2 { + --main-container: 1800px; + } +} +/* Medium Large devices */ +@media (max-width: 1299px) { + .header-layout2 .container { + max-width: 100% !important; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .header-layout2 .main-menu > ul > li { + margin: 0 10px; + } + .header-layout2 .header-search input { + font-size: 14px; + max-width: 180px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .header-layout2 .header-button { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + width: 100%; + } + .header-layout2 .menu-area { + height: 62px; + } + .header-layout2 .th-menu-toggle { + width: 48px; + height: 48px; + font-size: 16px; + border-radius: 30px; + } + .header-layout2 .header-search input { + font-size: 14px; + max-width: 240px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .header-layout2 .menu-area { + width: 64px; + padding: 0 8px; + margin-left: auto; + } + .header-layout2 .header-search { + display: none; + } +} +/* Header 3 ---------------------------------- */ +.header-layout3 { + position: absolute; + top: 0; + left: 0; + width: 100%; + /* Large devices */ +} +.header-layout3 .menu-area { + position: relative; + z-index: 3; + padding-right: 44px; +} +.header-layout3 .menu-area:before { + content: ""; + position: absolute; + bottom: 0; + left: -132px; + height: 200px; + width: 100%; + max-width: 707px; + background-color: var(--theme-color); + -webkit-transform: skew(-17deg); + transform: skew(-17deg); + z-index: -1; +} +.header-layout3 .menu-area:after { + content: ""; + position: absolute; + bottom: 0; + right: 15px; + height: 100%; + width: calc(100% + 50px); + background-color: var(--white-color); + z-index: -1; + -webkit-transform: skew(-17deg); + transform: skew(-17deg); +} +.header-layout3 .header-top { + padding: 14.5px 0; + background-color: transparent; + --body-color: #fff; + position: relative; + z-index: 5; +} +.header-layout3 .main-menu > ul > li > a { + padding: 32px 0; +} +.header-layout3 .sticky-wrapper { + background-color: transparent; +} +@media (max-width: 1199px) { + .header-layout3 .sticky-wrapper { + background-color: var(--white-color); + } + .header-layout3 .menu-area { + padding-right: 0; + } + .header-layout3 .menu-area:before { + display: none; + } +} + +/* Header 4 ---------------------------------- */ +.header-layout4 { + --th-border-color: rgba(255, 255, 255, 0.2); + --body-bg: #101111; + --space: 48px; + /* Extra large devices */ + /* Medium Large devices */ +} +@media (max-width: 1500px) { + .header-layout4 { + --space: 32px; + } +} +@media (max-width: 1399px) { + .header-layout4 { + --space: 16px; + } +} +.header-layout4 .container, +.header-layout4 .row { + --bs-gutter-x: 0; +} +.header-layout4 .main-menu ul.sub-menu { + background-color: var(--title-color); +} +.header-layout4 .header-logo { + padding: 16px var(--space); + border-right: 1px solid var(--th-border-color); + height: 100%; + display: grid; + -ms-flex-line-pack: center; + align-content: center; +} +.header-layout4 .header-button { + display: grid; + -ms-flex-line-pack: center; + align-content: center; + padding: 0 var(--space); + height: 100%; + border-left: 1px solid var(--th-border-color); +} +.header-layout4 .header-call { + color: var(--white-color); +} +.header-layout4 .header-call .icon-btn { + background-color: var(--white-color); + color: var(--theme-color); +} +.header-layout4 .header-call:hover { + color: var(--theme-color); +} +.header-layout4 .main-menu a { + color: var(--white-color); +} +.header-layout4 .main-menu a:hover { + color: var(--theme-color); +} +.header-layout4 .icon-btn { + background-color: var(--title-color); + color: var(--white-color); +} +.header-layout4 .header-search { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.header-layout4 .header-search input { + height: 48px; + border-radius: 27px; + margin-right: -48px; + max-width: 240px; +} +.header-layout4 .header-search .icon-btn { + min-width: 48px; +} +.header-layout4 .sticky-wrapper { + background-color: var(--body-bg); + border-bottom: 1px solid var(--th-border-color); +} +.header-layout4 .menu-area { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0 var(--space); +} +.header-layout4 .th-menu-toggle { + margin-left: auto; +} + +@media (min-width: 1200px) { + .header-layout4 { + --main-container: 1920px; + } +} +/* Medium Large devices */ +@media (max-width: 1299px) { + .header-layout4 { + --space: 24px; + } + .header-layout4 .container { + max-width: 100% !important; + } + .header-layout4 .menu-area { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .header-layout4 .menu-area .th-btn { + display: none; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .header-layout4 { + --space: 36px; + } + .header-layout4 .menu-area { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .header-layout4 { + --space: 16px; + } + .header-layout4 .menu-area { + -webkit-box-pack: end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + height: 100%; + padding-left: 0; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .header-layout4 .header-logo { + padding-right: 0; + border-right: none; + } + .header-layout4 .header-logo img { + max-width: 180px; + } +} +/* Header 5 ---------------------------------- */ +.simple-icon { + border: none; + background-color: transparent; + padding: 0; + color: var(--title-color); + font-size: 22px; +} +.simple-icon:hover { + color: var(--theme-color); +} + +.header-layout5 { + --space: 36px; + margin-bottom: -72px; + /* Medium Large devices */ + /* Medium devices */ + /* Extra small devices */ +} +.header-layout5 .header-top { + max-width: 1272px; + margin: 0 auto; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + padding-left: var(--space); + padding-right: var(--space); +} +.header-layout5 .container, +.header-layout5 .row { + --bs-gutter-x: 0; +} +.header-layout5 .header-logo { + padding: 5px var(--space); + -webkit-transform: translateY(25px); + transform: translateY(25px); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.header-layout5 .header-button { + padding: 0 var(--space); + -webkit-transform: translateY(32px); + transform: translateY(32px); +} +.header-layout5 .menu-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + background-color: var(--body-bg); + margin-left: 62px; + margin-right: 66px; + position: relative; + z-index: 2; +} +.header-layout5 .menu-wrap:before, .header-layout5 .menu-wrap:after { + content: ""; + position: absolute; + top: -1px; + width: 84px; + height: calc(100% + 1px); + background-color: var(--body-bg); + z-index: -1; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.header-layout5 .menu-wrap:before { + left: -83px; +} +.header-layout5 .menu-wrap:after { + right: -83px; + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} +.header-layout5 .main-menu > ul > li > a { + padding: 23px 0; +} +.header-layout5 .menu-area { + background-color: transparent; +} +.header-layout5 .th-menu-toggle { + margin-left: auto; +} +.header-layout5 .sticky-wrapper.sticky .header-logo { + -webkit-transform: none !important; + transform: none !important; + background-color: var(--title-color); + border-radius: 12px; + margin-top: 4px; + /* Medium devices */ +} +@media (max-width: 991px) { + .header-layout5 .sticky-wrapper.sticky .header-logo { + background-color: transparent; + } +} +.header-layout5 .sticky-wrapper.sticky .header-button { + padding-top: 8px; + -webkit-transform: none !important; + transform: none !important; +} +@media (max-width: 1299px) { + .header-layout5 { + --space: 0px; + } + .header-layout5 .header-logo { + -webkit-transform: translateY(10px); + transform: translateY(10px); + padding-left: 5px; + padding-right: 5px; + } + .header-layout5 .header-button { + -webkit-transform: translateY(16px); + transform: translateY(16px); + } +} +@media (max-width: 991px) { + .header-layout5 .header-logo { + -webkit-transform: none; + transform: none; + padding: 10px 0; + } +} +@media (max-width: 575px) { + .header-layout5 { + overflow: hidden; + } + .header-layout5 .header-logo { + padding: 15px 0; + } + .header-layout5 .header-logo img { + max-width: 160px; + } + .header-layout5 .menu-wrap { + margin-left: 32px; + margin-right: 32px; + } + .header-layout5 .menu-wrap:before, .header-layout5 .menu-wrap:after { + width: 36px; + } + .header-layout5 .menu-wrap:before { + left: -35px; + } + .header-layout5 .menu-wrap:after { + right: -35px; + } +} + +@media (min-width: 1200px) { + .header-layout5 { + --main-container: 1856px; + } +} +/*------------------- 4.3. Footer -------------------*/ +.footer-wrapper { + --th-border-color: rgba(255, 255, 255, 0.2); + --body-color: #fff; + position: relative; + z-index: 2; + background-color: #101018; + overflow: hidden; +} +.footer-wrapper .th-social a { + --icon-size: 44px; + background-color: rgba(255, 255, 255, 0.2); + color: var(--white-color); +} +.footer-wrapper .th-social a:hover { + background-color: var(--theme-color); +} +.footer-wrapper .social-links a { + margin: 0 30px 0 0; +} + +.widget-area { + padding-top: 100px; + padding-bottom: 48px; +} + + +.footer-links ul { + padding: 0; + margin: 0; + /* Extra small devices */ +} +@media (max-width: 375px) { + .footer-links ul { + text-align: center; + } +} +.footer-links li { + font-size: 14px; + font-family: var(--body-font); + display: inline-block; + padding-right: 25px; + margin-right: 10px; + position: relative; + /* Extra small devices */ +} +@media (max-width: 575px) { + .footer-links li { + padding-right: 20px; + margin-right: 5px; + } +} +.footer-links li:after { + content: ""; + position: absolute; + top: 50%; + height: 1px; + width: 10px; + background-color: var(--theme-color); + right: 0; +} +.footer-links li:last-child { + margin-right: 0; + padding-right: 0; +} +.footer-links li:last-child:after { + display: none; +} +.footer-links a { + font-family: inherit; + color: var(--white-color); +} +.footer-links a:hover { + color: var(--theme-color); +} + +.copyright-text { + font-size: 14px; +} + +.copyright-wrap { + padding: 22px 0; + background-size: 100% auto; + border-top: 1px solid var(--th-border-color); +} +.copyright-wrap .copyright-text { + font-size: 14px; + color: var(--white-color); +} +.copyright-wrap .copyright-text a { + color: var(--theme-color); +} +.copyright-wrap .copyright-text a:hover { + color: var(--white-color); +} +.copyright-wrap.bg-title .copyright-text a:hover { + color: var(--theme-color); +} + +.fa-phone-volume { + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); +} + +.footer-contact { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 16px; +} +.footer-contact-area { + padding: 20px 0; + background-color: var(--white-color); + border-radius: 0 0 40px 40px; + max-width: 1620px; + margin: 0 auto; + /* Small devices */ +} +@media (max-width: 767px) { + .footer-contact-area { + border-radius: 0 0 15px 15px; + } +} +.footer-contact-wrap { + --body-color: #999999; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + /* Small devices */ +} +.footer-contact-wrap .divider { + width: 1px; + height: 80px; + background-color: var(--body-color); +} +@media (max-width: 767px) { + .footer-contact-wrap { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + gap: 30px; + padding: 20px 0; + } + .footer-contact-wrap .divider { + display: none; + } +} +.footer-contact .box-title { + font-size: 16px; + margin-bottom: 7px; +} +.footer-contact .box-text { + color: var(--title-color); + max-width: 205px; + margin-top: -0.45em; +} +.footer-contact .box-text a { + color: inherit; +} +.footer-contact .box-text a:hover { + color: var(--theme-color); +} +.footer-contact .box-icon { + font-size: 34px; + color: var(--theme-color); + /* Extra small devices */ +} +@media (max-width: 575px) { + .footer-contact .box-icon { + font-size: 24px; + } +} + +.footer-layout1 .copyright-text { + font-size: 14px; +} + +.copyright-text { + margin: 0; +} +.copyright-text a { + color: var(--theme-color); +} +.copyright-text a:hover { + color: var(--white-color); +} + +.th-widget-contact { + max-width: 265px; +} + +.footer-newsletter { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + gap: 25px; + padding-left: 60px; +} +.footer-newsletter .newsletter-title { + max-width: 425px; + margin-bottom: 0; +} + +.schedule-info { + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + border-bottom: 1px dashed rgba(255, 255, 255, 0.2); + margin-bottom: 15px; + padding-bottom: 15px; +} +.schedule-info:last-of-type { + margin-bottom: 0; + padding-bottom: 0; + border-bottom: none; +} + +.th-widget-schedule { + width: 280px; + max-width: 100%; +} +.th-widget-schedule .title { + color: var(--white-color); + font-size: 20px; + font-weight: 500; + margin-bottom: 16px; +} + +.newsletter-widget { + max-width: 290px; +} +.newsletter-widget .newsletter-form { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + gap: 15px; +} +.newsletter-widget .newsletter-form .th-btn { + width: 100%; +} +.newsletter-widget .form-group { + margin-bottom: 0; +} +.newsletter-widget .icon-btn { + border: none; + background-color: var(--theme-color); + color: var(--white-color); + border-radius: 0; + min-width: 56px; + padding: 0; +} +.newsletter-widget .icon-btn:hover { + background-color: var(--title-color); +} +.newsletter-widget .footer-text { + margin-bottom: 25px; +} + +.newsletter-form { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + max-width: 500px; + gap: 10px; + /* Large devices */ +} +@media (max-width: 1199px) { + .newsletter-form { + max-width: 460px; + } +} +.newsletter-form .form-group { + margin-bottom: 0; + width: 100%; +} +.newsletter-form .form-group > i { + color: var(--theme-color); +} +.newsletter-form input { + width: 100%; +} +.newsletter-form .th-btn { + min-width: 150px; +} +.newsletter-form .newsletter-btn { + display: inline-block; + border: none; + background-color: var(--theme-color); + color: var(--title-color); + width: 55px; + height: 55px; + line-height: 55px; + min-width: 55px; +} + +.newsletter-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 30px 0; + /* Large devices */ +} +.newsletter-wrap .newsletter-title { + color: var(--white-color); + font-size: 28px; + font-weight: 600; + margin: 0; +} +.newsletter-wrap .info-title { + margin: 0; + font-size: 40px; + font-weight: 600; + text-transform: uppercase; + color: transparent; + -webkit-text-stroke: 0.4px var(--light-color); +} +.newsletter-wrap .divider { + background-color: rgba(255, 255, 255, 0.2); + width: 1px; + height: 50px; +} +.newsletter-wrap .newsletter-form { + max-width: 510px; + gap: 0; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .newsletter-wrap .newsletter-form { + max-width: 440px; + } +} +.newsletter-wrap .newsletter-form input { + height: 50px; + border-radius: 8px 0 0 8px; +} +.newsletter-wrap .newsletter-form .th-btn { + min-width: 190px; + border-radius: 0 8px 8px 0; + height: 50px; + padding: 10px 20px; +} +.newsletter-wrap .newsletter-form .th-btn:before { + background-color: var(--light-color); +} +.newsletter-wrap .newsletter-form .th-btn i { + margin-left: 8px; +} +@media (max-width: 1199px) { + .newsletter-wrap { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + gap: 25px 0; + } + .newsletter-wrap .newsletter-form { + max-width: 700px; + } + .newsletter-wrap .newsletter-form .th-btn { + font-size: 0; + min-width: 50px; + } + .newsletter-wrap .newsletter-form .th-btn i { + font-size: 16px; + margin-left: 0; + } + .newsletter-wrap .divider { + display: none; + } +} + +/* Medium devices */ +@media (max-width: 991px) { + .footer-wrapper .newsletter-form { + max-width: 400px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .footer-wrapper .newsletter-form { + max-width: 550px; + gap: 15px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .footer-wrapper .newsletter-form { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .footer-wrapper .widget-area { + padding-top: var(--section-space-mobile); + padding-bottom: 30px; + } + .copyright-text { + text-align: center; + } +} +/* footer 2 ---------------------------------- */ +.footer-layout2 .copyright-wrap { + border: none; +} +.footer-layout2 .footer-contact-area { + border-radius: 0; + -webkit-clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 100%, 0% 100%); + clip-path: polygon(50px 0%, calc(100% - 50px) 0%, 100% 100%, 0% 100%); + /* Medium Large devices */ + /* Small devices */ +} +@media (max-width: 1299px) { + .footer-layout2 .footer-contact-area { + -webkit-clip-path: polygon(30px 0%, calc(100% - 30px) 0%, 100% 100%, 0% 100%); + clip-path: polygon(30px 0%, calc(100% - 30px) 0%, 100% 100%, 0% 100%); + } +} +@media (max-width: 767px) { + .footer-layout2 .footer-contact-area { + -webkit-clip-path: none; + clip-path: none; + } +} +.footer-layout2 .form-control { + border-radius: 0; +} +.footer-layout2 .th-btn { + border-radius: 0; +} + +.th-widget-contact { + max-width: 280px; +} + +.info-box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 32px; +} +.info-box:last-child { + margin-bottom: 0; +} +.info-box .box-icon { + width: 36px; + height: 36px; + min-width: 36px; + line-height: 36px; + font-size: 20px; + border: 1px solid rgba(255, 255, 255, 0.5); + color: var(--theme-color); + border-radius: 8px; + text-align: center; + margin-right: 10px; +} +.info-box .box-text { + color: var(--body-color); + margin-top: -0.45em; + -ms-flex-item-align: center; + align-self: center; + line-height: 1.5; +} +.info-box .box-link { + display: inline-block; + color: var(--body-color); +} +.info-box .box-link:hover { + color: var(--theme-color); +} + +/* footer 3 ---------------------------------- */ +.footer-layout3 { + --th-border-color: rgba(255, 255, 255, 0.2); + background-color: #101111; +} + +.footer-contact-area.style-black { + background-color: #101111; + max-width: 100%; + border-radius: 0; +} +.footer-contact-area.style-black .footer-contact-wrap .divider { + background-color: rgba(255, 255, 255, 0.2); +} + +/* footer 4 ---------------------------------- */ +.footer-newsletter-area { + background-color: var(--title-color); +} + +.hammer-ani1 img { + -webkit-transform-origin: 0 0; + transform-origin: 0 0; + -webkit-animation: hammer1 1.5s cubic-bezier(0.38, -0.07, 0.58, 1) infinite; + animation: hammer1 1.5s cubic-bezier(0.38, -0.07, 0.58, 1) infinite; +} + +@-webkit-keyframes hammer1 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(-25deg); + transform: rotate(-25deg); + } +} + +@keyframes hammer1 { + 0% { + -webkit-transform: rotate(0); + transform: rotate(0); + } + 100% { + -webkit-transform: rotate(-25deg); + transform: rotate(-25deg); + } +} +.footer-layout4 { + --th-border-color: rgba(255, 255, 255, 0.2); + background-color: #1C244A; + /* Large devices */ +} +.footer-layout4 .th-social a:not(:hover) { + background-color: rgba(255, 255, 255, 0.08); +} +.footer-layout4 .widget-area { + padding-top: 80px; + padding-bottom: 80px; +} +.footer-layout4 .widget-area .divider { + width: 1px; + background-color: var(--th-border-color); + padding: 0; +} +.footer-layout4 .footer-widget { + margin-bottom: 0; +} +@media (max-width: 1199px) { + .footer-layout4 .footer-widget { + margin-bottom: 50px; + } + .footer-layout4 .widget-area { + padding-bottom: 30px; + } + .footer-layout4 .widget-area .divider { + display: none; + } +} + +/* footer 5 ---------------------------------- */ +.footer-layout5 { + --th-border-color: rgba(255, 255, 255, 0.2); + background-color: #1C244A; +} +.footer-layout5 .th-social a:not(:hover) { + background-color: rgba(255, 255, 255, 0.08); +} +.footer-layout5 .footer-contact-area.style-black { + background-color: rgba(0, 0, 0, 0.1); +} + +/*------------------- 4.4. Breadcumb -------------------*/ +.breadcumb-menu { + max-width: 100%; + padding: 0; + margin: 25px 0 -0.42em 0; + list-style-type: none; + position: relative; +} +.breadcumb-menu li { + display: inline-block; + margin-right: 3px; + padding-right: 3px; + list-style: none; + position: relative; +} +.breadcumb-menu li:after { + content: "\f061"; + position: relative; + margin-left: 10px; + font-weight: 500; + font-size: 0.9em; + color: inherit; + font-family: var(--icon-font); +} +.breadcumb-menu li:last-child { + padding-right: 0; + margin-right: 0; + color: var(--white-color); +} +.breadcumb-menu li:last-child:after { + display: none; +} +.breadcumb-menu li, +.breadcumb-menu a, +.breadcumb-menu span { + white-space: normal; + color: inherit; + word-break: break-word; + font-weight: 400; + font-size: 20px; + color: var(--white-color); +} + +.breadcumb-title { + margin: -0.12em 0 -0.2em 0; + line-height: 1.1; + font-weight: 700; + color: var(--white-color); +} + +.breadcumb-wrapper { + background-color: var(--title-color); + padding: 210px 0 125px 0; + overflow: hidden; + text-align: center; + max-width: 1832px; + margin: 0 auto; + border-radius: 24px; +} + +/* Medium Large devices */ +@media (max-width: 1299px) { + .breadcumb-wrapper { + border-radius: 18px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .breadcumb-wrapper { + padding: 170px 0 100px 0; + } + .breadcumb-menu { + margin: 25px 0 -0.5em 0; + } + .breadcumb-menu li, + .breadcumb-menu a, + .breadcumb-menu span { + font-size: 16px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .breadcumb-wrapper { + padding: 174px 0 90px 0; + border-radius: 10px 10px 15px 15px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .breadcumb-wrapper { + padding: 160px 0 90px 0; + } + .breadcumb-title { + font-size: 34px; + } +} +/*------------------- 4.5. Pagination -------------------*/ +.wp-block-query-pagination-numbers, +.th-pagination { + margin-bottom: 30px; +} +.wp-block-query-pagination-numbers ul, +.th-pagination ul { + margin: 0; + padding: 0; +} +.wp-block-query-pagination-numbers li, +.th-pagination li { + display: inline-block; + margin: 0 3px; + list-style-type: none; +} +.wp-block-query-pagination-numbers li:last-child, +.th-pagination li:last-child { + margin-right: 0; +} +.wp-block-query-pagination-numbers li:first-child, +.th-pagination li:first-child { + margin-left: 0; +} +.wp-block-query-pagination-numbers span, +.wp-block-query-pagination-numbers a, +.th-pagination span, +.th-pagination a { + display: inline-block; + text-align: center; + position: relative; + border: 1px solid var(--th-border-color); + color: var(--title-color); + background-color: transparent; + width: 48px; + height: 48px; + line-height: 48px; + z-index: 1; + font-size: 18px; + font-weight: 500; + border-radius: 99px; +} +.wp-block-query-pagination-numbers span.active, .wp-block-query-pagination-numbers span:hover, +.wp-block-query-pagination-numbers a.active, +.wp-block-query-pagination-numbers a:hover, +.th-pagination span.active, +.th-pagination span:hover, +.th-pagination a.active, +.th-pagination a:hover { + color: var(--white-color); + background-color: var(--theme-color); + border-color: var(--theme-color); +} + +.wp-block-query-pagination-next { + display: inline-block; + text-align: center; + position: relative; + border: none; + color: var(--title-color); + background-color: var(--smoke-color2); + min-width: 56px; + height: 56px; + line-height: 56px; + z-index: 1; + font-size: 16px; + padding: 0 20px; + font-weight: 500; + border-radius: 12px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.wp-block-query-pagination-next.active, .wp-block-query-pagination-next:hover { + color: var(--white-color); + background-color: var(--theme-color); + border-color: var(--theme-color); +} + +/* Small devices */ +@media (max-width: 767px) { + .wp-block-query-pagination-numbers span, + .wp-block-query-pagination-numbers a, + .th-pagination span, + .th-pagination a { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 14px; + } +} +/*------------------- 4.6. Blog -------------------*/ +blockquote, +.wp-block-quote { + font-size: 18px; + line-height: 1.56; + padding: 30px; + font-weight: 500; + display: block; + position: relative; + background-color: transparent; + margin: 35px 0 45px 0; + color: var(--title-color); + font-family: var(--body-font); + font-style: italic; + border: 1px solid var(--th-border-color) !important; + border-radius: 10px; +} +blockquote p, +.wp-block-quote p { + font-size: inherit; + font-family: inherit; + margin-top: -0.3em; + margin-bottom: 9px; + line-height: inherit; + color: inherit; + width: 100%; + position: relative; + z-index: 3; +} +blockquote p a, +.wp-block-quote p a { + color: inherit; +} +blockquote:before, +.wp-block-quote:before { + content: ""; + position: absolute; + top: -1px; + left: -1px; + height: 55px; + width: 55px; + background-color: var(--body-bg); +} +blockquote:after, +.wp-block-quote:after { + content: ""; + position: absolute; + top: -17px; + left: 0px; + height: 24px; + width: 30px; + background-color: var(--theme-color); + -webkit-clip-path: path("M2.66334 21.9311C0.930403 20.0114 0 17.8583 0 14.3681C0 8.22637 4.13381 2.72165 10.1453 0L11.6477 2.41807C6.03668 5.58368 4.93971 9.6916 4.50227 12.2816C5.40575 11.7938 6.58853 11.6236 7.74774 11.7359C10.7829 12.029 13.1754 14.6278 13.1754 17.8583C13.1754 19.4872 12.555 21.0493 11.4506 22.2011C10.3463 23.3529 8.84851 24 7.28675 24C6.42307 23.9921 5.56952 23.8052 4.77578 23.45C3.98203 23.0948 3.26396 22.5785 2.66334 21.9311ZM19.488 21.9311C17.755 20.0114 16.8246 17.8583 16.8246 14.3681C16.8246 8.22637 20.9584 2.72165 26.9699 0L28.4723 2.41807C22.8613 5.58368 21.7643 9.6916 21.3269 12.2816C22.2304 11.7938 23.4132 11.6236 24.5724 11.7359C27.6075 12.029 30 14.6278 30 17.8583C30 19.4872 29.3796 21.0493 28.2753 22.2011C27.1709 23.3529 25.6731 24 24.1114 24C23.2477 23.9921 22.3941 23.8052 21.6004 23.45C20.8067 23.0948 20.0886 22.5785 19.488 21.9311Z"); + clip-path: path("M2.66334 21.9311C0.930403 20.0114 0 17.8583 0 14.3681C0 8.22637 4.13381 2.72165 10.1453 0L11.6477 2.41807C6.03668 5.58368 4.93971 9.6916 4.50227 12.2816C5.40575 11.7938 6.58853 11.6236 7.74774 11.7359C10.7829 12.029 13.1754 14.6278 13.1754 17.8583C13.1754 19.4872 12.555 21.0493 11.4506 22.2011C10.3463 23.3529 8.84851 24 7.28675 24C6.42307 23.9921 5.56952 23.8052 4.77578 23.45C3.98203 23.0948 3.26396 22.5785 2.66334 21.9311ZM19.488 21.9311C17.755 20.0114 16.8246 17.8583 16.8246 14.3681C16.8246 8.22637 20.9584 2.72165 26.9699 0L28.4723 2.41807C22.8613 5.58368 21.7643 9.6916 21.3269 12.2816C22.2304 11.7938 23.4132 11.6236 24.5724 11.7359C27.6075 12.029 30 14.6278 30 17.8583C30 19.4872 29.3796 21.0493 28.2753 22.2011C27.1709 23.3529 25.6731 24 24.1114 24C23.2477 23.9921 22.3941 23.8052 21.6004 23.45C20.8067 23.0948 20.0886 22.5785 19.488 21.9311Z"); +} +blockquote cite, +.wp-block-quote cite { + display: inline-block; + font-size: 20px; + line-height: 1; + font-weight: 500; + font-style: normal; + font-family: var(--title-font); + white-space: nowrap; + position: absolute; + bottom: -17px; + left: 80px; + background-color: var(--theme-color); + color: var(--white-color); + padding: 7px 40px 7px 15px; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +blockquote cite br, +.wp-block-quote cite br { + display: none; +} +blockquote.is-large:not(.is-style-plain), blockquote.is-style-large:not(.is-style-plain), blockquote.style-left-icon, blockquote.has-text-align-right, +.wp-block-quote.is-large:not(.is-style-plain), +.wp-block-quote.is-style-large:not(.is-style-plain), +.wp-block-quote.style-left-icon, +.wp-block-quote.has-text-align-right { + padding: 40px; + margin-bottom: 30px; +} +blockquote.style-left-icon, +.wp-block-quote.style-left-icon { + font-size: 18px; + color: var(--body-color); + font-weight: 400; + line-height: 1.556; + background-color: var(--smoke-color); + padding-left: 160px; +} +blockquote.style-left-icon:before, +.wp-block-quote.style-left-icon:before { + right: unset; + left: 56px; + top: 60px; + font-size: 6rem; + font-weight: 400; + line-height: 4rem; + color: var(--theme-color); + text-shadow: none; +} +blockquote.style-left-icon cite, +.wp-block-quote.style-left-icon cite { + color: var(--title-color); +} +blockquote.style-left-icon cite:before, +.wp-block-quote.style-left-icon cite:before { + background-color: var(--title-color); + top: 8px; +} +blockquote:not(:has(> cite)) p:last-child, +.wp-block-quote:not(:has(> cite)) p:last-child { + margin-bottom: -0.3em; +} +blockquote p:has(cite), +.wp-block-quote p:has(cite) { + padding-bottom: 10px; +} +blockquote p cite, +.wp-block-quote p cite { + margin-top: 20px; + margin-bottom: -0.5em; + bottom: -32px; +} + +.wp-block-pullquote { + color: var(--white-color); + padding: 0; +} + +blockquote.has-very-dark-gray-color { + color: var(--title-color) !important; +} + +.wp-block-pullquote blockquote, +.wp-block-pullquote p { + color: var(--title-color); +} + +.wp-block-pullquote cite { + position: absolute; + color: var(--white-color) !important; +} + +.wp-block-column blockquote, +.wp-block-column .wp-block-quote { + padding: 40px 15px 40px 15px; +} +.wp-block-column blockquote.style-left-icon, .wp-block-column blockquote.is-large:not(.is-style-plain), .wp-block-column blockquote.is-style-large:not(.is-style-plain), .wp-block-column blockquote.has-text-align-right, +.wp-block-column .wp-block-quote.style-left-icon, +.wp-block-column .wp-block-quote.is-large:not(.is-style-plain), +.wp-block-column .wp-block-quote.is-style-large:not(.is-style-plain), +.wp-block-column .wp-block-quote.has-text-align-right { + padding: 40px 15px 40px 15px; +} +.wp-block-column blockquote cite, +.wp-block-column .wp-block-quote cite { + font-size: 14px; + left: 20px; +} +.wp-block-column blockquote cite:before, +.wp-block-column .wp-block-quote cite:before { + bottom: 6px; +} + +.wp-block-pullquote__citation::before, +.wp-block-pullquote cite::before, +.wp-block-pullquote footer::before { + bottom: 7px; +} + +.has-cyan-bluish-gray-background-color blockquote, +.has-cyan-bluish-gray-background-color .wp-block-quote { + background-color: var(--body-bg); +} + +.wp-block-pullquote { + border-bottom: none; + border-top: none; + color: currentColor; + margin-bottom: 1.75em; +} + +/* Small devices */ +@media (max-width: 767px) { + .wp-block-pullquote.is-style-solid-color blockquote { + max-width: 90%; + } + blockquote cite, + .wp-block-quote cite { + font-size: 18px; + left: 30px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .wp-block-quote.is-large:not(.is-style-plain) p, + .wp-block-quote.is-style-large:not(.is-style-plain) p { + font-size: 1.2em; + } +} +/* Extra small devices */ +@media (max-width: 375px) { + blockquote cite, + .wp-block-quote cite { + font-size: 18px; + padding-left: 22px; + } + blockquote cite:before, + .wp-block-quote cite:before { + width: 20px; + } +} +.blog-meta { + display: block; +} +.blog-meta span, +.blog-meta a { + display: inline-block; + font-size: 14px; + color: var(--title-color); + font-family: var(--body-font); + position: relative; + margin-right: 10px; +} +.blog-meta span i, +.blog-meta a i { + margin-right: 6px; +} +.blog-meta span:last-child, +.blog-meta a:last-child { + margin-right: 0; +} +.blog-meta span:not(:last-child), +.blog-meta a:not(:last-child) { + padding-right: 15px; +} +.blog-meta span:not(:last-child):after, +.blog-meta a:not(:last-child):after { + content: ""; + height: 14px; + width: 1px; + background-color: var(--title-color); + position: absolute; + top: 50%; + right: 0; + margin-top: -7px; +} +.blog-meta span img, +.blog-meta a img { + max-width: 16px; + margin-top: -3px; + margin-right: 4px; +} +.blog-meta .author img { + border-radius: 50%; + width: 30px; + height: 30px; + margin-right: 6px; +} +.blog-meta a:hover { + color: var(--theme-color); +} + +/* Extra small devices */ +@media (max-width: 575px) { + .blog-meta span, + .blog-meta a { + margin-right: 20px; + } + .blog-meta span:not(:last-child), + .blog-meta a:not(:last-child) { + padding-right: 0; + } + .blog-meta span:not(:last-child):after, + .blog-meta a:not(:last-child):after { + display: none; + } +} +.blog-audio, +.blog-img, +.blog-video { + line-height: 1px; +} +.blog-audio img, +.blog-img img, +.blog-video img { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +.blog-title a { + color: inherit; +} +.blog-title a:hover { + color: var(--theme-color); +} + +.th-blog { + margin-bottom: 30px; +} + +.blog-inner-title { + margin-top: -0.25em; + margin-bottom: 25px; +} +.blog-inner-title i { + color: var(--theme-color); + margin-right: 4px; +} + +@media (min-width: 1300px) { + .search-active-wrap, + .blog-author, + .search-wrap, + .page-single, + .blog-single, + .th-comments-wrap, + .th-comment-form { + margin-right: 8px; + } +} +.th-comments-wrap .th-post-comment blockquote:before, +.th-comments-wrap .th-post-comment .wp-block-quote:before { + height: 35px; + width: 35px; + background-color: var(--white-color); +} + +.blog-single { + position: relative; + margin-bottom: 40px; +} +.blog-single .blog-title { + margin-bottom: 15px; + font-size: 28px; + line-height: 1.25; + font-weight: 600; +} +.blog-single .blog-text { + margin-bottom: 27px; +} +.blog-single .blog-meta { + margin: -0.35em 0 16px 0; +} +.blog-single .blog-content { + margin: 0 0 0 0; + padding: 0; + position: relative; + position: relative; + z-index: 3; +} +.blog-single .blog-audio { + line-height: 1; +} +.blog-single .blog-audio, +.blog-single .blog-img, +.blog-single .blog-video { + position: relative; + overflow: hidden; + background-color: var(--smoke-color); + margin-bottom: 30px; + border-radius: 24px; +} +.blog-single .blog-audio:hover img, +.blog-single .blog-img:hover img, +.blog-single .blog-video:hover img { + -webkit-transform: scale(1.07); + transform: scale(1.07); +} +.blog-single .blog-img .slider-arrow { + --pos-x: 30px; + --icon-size: 44px; + border: none; + background-color: var(--white-color); + color: var(--theme-color); + -webkit-box-shadow: none; + box-shadow: none; + visibility: visible; + opacity: 1; +} +.blog-single .blog-img .slider-arrow:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.blog-single .blog-img .play-btn { + --icon-size: 60px; + position: absolute; + left: 50%; + top: 42%; + margin: calc(var(--icon-size) / -2) 0 0 calc(var(--icon-size) / -2); +} +.blog-single .line-btn { + display: block; + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + margin-bottom: -1px; +} + +.share-links-title { + font-size: 18px; + color: var(--title-color); + font-family: var(--title-font); + font-weight: 600; + margin: 0 15px 0 0; + display: inline-block; + text-transform: capitalize; +} + +.share-links { + margin: 40px 0 0 0; + padding: var(--blog-space-y, 40px) 0 0 0; + border-top: 1px solid var(--th-border-color); +} +.share-links > .row { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + --bs-gutter-y: 15px; +} +.share-links .wp-block-tag-cloud, +.share-links .tagcloud { + display: inline-block; +} +.share-links .wp-block-tag-cloud a, +.share-links .tagcloud a { + background-color: var(--smoke-color); + -webkit-box-shadow: none; + box-shadow: none; +} +.share-links .wp-block-tag-cloud a:hover, +.share-links .tagcloud a:hover { + background-color: var(--theme-color); +} +.share-links .th-social { + display: inline-block; +} +.share-links .th-social a { + --icon-size: 40px; + font-size: 14px; + border-radius: 99px; +} + +.blog-author { + margin-top: 40px; + margin-bottom: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + background-color: var(--smoke-color); + border-radius: 20px; + overflow: hidden; +} +.blog-author .auhtor-img { + width: 212px; + min-height: 100%; + background-color: #00ffff; + text-align: center; + display: grid; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + /* Small devices */ +} +@media (max-width: 767px) { + .blog-author .auhtor-img { + width: 100%; + min-height: 200px; + } +} +.blog-author .auhtor-img img { + width: 96px; + height: auto; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center center; + object-position: center center; +} +.blog-author .author-name { + font-size: 24px; + margin-top: -0.2em; + margin-bottom: 16px; +} +.blog-author .author-text { + margin-bottom: 0; +} +.blog-author .media-body { + padding: 40px 40px 40px 40px; + -ms-flex-item-align: center; + align-self: center; +} + +/* Small devices */ +@media (max-width: 767px) { + .blog-author { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .blog-author .auhtor-img img { + width: 100%; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .blog-author .media-body { + padding: 35px 20px 30px 20px; + } +} +.blog-details .blog-single { + background-color: transparent; +} +.blog-details .blog-content > ol:last-of-type, +.blog-details .blog-content > p:last-child { + margin-bottom: 0; +} + +.blog-content .wp-block-search .wp-block-search__input { + -webkit-box-shadow: none; + box-shadow: none; +} + +/* Medium Large devices */ +@media (max-width: 1399px) { + .blog-single .blog-title { + font-size: 28px; + line-height: 1.4; + } + .share-links { + --blog-space-x: 20px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .blog-single { + --blog-space-x: 20px; + --blog-space-y: 20px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .blog-single { + --blog-space-x: 40px; + --blog-space-y: 40px; + } + .share-links { + --blog-space-x: 40px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .share-links { + --blog-space-x: 20px; + } + .blog-details .blog-single { + --blog-space-x: 20px; + --blog-space-y: 20px; + } + .blog-single { + --blog-space-x: 20px; + --blog-space-y: 20px; + border-radius: 10px; + } + .blog-single .blog-audio, + .blog-single .blog-video, + .blog-single .blog-img { + border-radius: 15px; + } + .blog-single .blog-title { + font-size: 24px; + line-height: 1.3; + } + .blog-single .blog-text { + margin-bottom: 22px; + } + .blog-single .blog-bottom { + padding-top: 15px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .share-links-title { + margin: 0 15px 5px 0; + } +} +.blog-navigation { + 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; + border-radius: 20px; + background: var(--smoke-color); + padding: 40px; + margin-bottom: 40px; + /* Small devices */ +} +@media (max-width: 767px) { + .blog-navigation { + padding: 25px; + } +} +.blog-navigation .nav-text { + font-size: 18px; + font-family: var(--title-font); + color: var(--title-color); + display: inline-block; + font-weight: 600; + /* Small devices */ +} +@media (max-width: 767px) { + .blog-navigation .nav-text { + font-size: 16px; + } +} +.blog-navigation .nav-btn { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; +} +.blog-navigation .nav-btn img { + border-radius: 10px; + /* Large devices */ +} +@media (max-width: 1199px) { + .blog-navigation .nav-btn img { + display: none; + } +} +.blog-navigation .nav-btn.next { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + text-align: right; +} +.blog-navigation .nav-btn:hover .nav-text { + color: var(--theme-color); +} +.blog-navigation .nav-btn:hover .nav-img:after { + -webkit-transform: scale(1); + transform: scale(1); +} +.blog-navigation .nav-btn:hover .nav-img i { + -webkit-transform: scale(1); + transform: scale(1); +} +.blog-navigation .nav-btn .nav-img { + min-width: 85px; + position: relative; + overflow: hidden; + border-radius: 10px; + -webkit-transition: 0.4s; + transition: 0.4s; + /* Small devices */ +} +.blog-navigation .nav-btn .nav-img img { + border-radius: 10px; +} +@media (max-width: 767px) { + .blog-navigation .nav-btn .nav-img { + display: none; + } +} +.blog-navigation .nav-btn .nav-img:after { + content: ""; + position: absolute; + inset: 0; + background-color: rgba(0, 0, 0, 0.7); + -webkit-transform: scale(0); + transform: scale(0); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-navigation .nav-btn .nav-img i { + position: absolute; + inset: 0; + text-align: center; + line-height: 81px; + font-size: 24px; + color: var(--theme-color); + -webkit-transform: scale(0); + transform: scale(0); + z-index: 2; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-navigation .nav-btn .nav-img img { + width: 100%; + height: 100%; + -webkit-transform: scale(1.2); + transform: scale(1.2); + border-radius: 10px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-navigation .blog-next { + text-align: right; +} +.blog-navigation .blog-btn { + font-size: 38px; + color: var(--theme-color); + /* Small devices */ +} +@media (max-width: 767px) { + .blog-navigation .blog-btn { + font-size: 25px; + } +} +.blog-navigation .blog-btn:hover { + color: var(--theme-color); +} + +/*------------------- 4.7. Comments -------------------*/ +.th-comment-form { + margin-top: var(--blog-space-y, 40px); + margin-bottom: 30px; + padding: var(--blog-space-y, 40px) var(--blog-space-x, 40px); + position: relative; +} +.th-comment-form .row { + --bs-gutter-x: 20px; +} +.th-comment-form .blog-inner-title { + margin-bottom: 0px; +} +.th-comment-form .form-title { + margin-top: -0.35em; +} +.th-comment-form .form-title a#cancel-comment-reply-link { + font-size: 0.7em; + text-decoration: underline; +} +.th-comment-form .form-text { + margin-bottom: 25px; +} +.th-comment-form .form-group > i { + color: var(--body-color); +} + +.blog-comment-area { + margin-bottom: 25px; +} + +.th-comment-form, +.th-comments-wrap { + --th-border-color: #E1E4E5; + padding: 40px; + border-radius: 24px; + background-color: var(--white-color); + /* Small devices */ +} +@media (max-width: 767px) { + .th-comment-form, + .th-comments-wrap { + border-radius: 15px; + } +} +.th-comment-form:has(#wp-temp-form-div), +.th-comments-wrap:has(#wp-temp-form-div) { + padding: 0; + -webkit-box-shadow: none; + box-shadow: none; + display: none; +} + +.th-comments-wrap { + margin-top: var(--blog-space-y, 40px); + margin-bottom: 30px; +} +.th-comments-wrap .description p:last-child { + margin-bottom: -0.5em; +} +.th-comments-wrap .comment-respond { + margin: 30px 0; +} +.th-comments-wrap pre { + background: #ededed; + color: #666; + font-size: 14px; + margin: 20px 0; + overflow: auto; + padding: 20px; + white-space: pre-wrap; + word-wrap: break-word; +} +.th-comments-wrap li { + margin: 0; +} +.th-comments-wrap .th-post-comment { + padding: 0; + position: relative; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-bottom: 30px; + padding-bottom: 30px; + position: relative; + border-bottom: 1px solid var(--th-border-color); +} +.th-comments-wrap .th-post-comment ol, +.th-comments-wrap .th-post-comment ul, +.th-comments-wrap .th-post-comment dl { + margin-bottom: 1rem; +} +.th-comments-wrap .th-post-comment ol ol, +.th-comments-wrap .th-post-comment ol ul, +.th-comments-wrap .th-post-comment ul ol, +.th-comments-wrap .th-post-comment ul ul { + margin-bottom: 0; +} +.th-comments-wrap ul.comment-list { + list-style: none; + margin: 0; + padding: 0; + margin-bottom: -30px; +} +.th-comments-wrap ul.comment-list ul ul, +.th-comments-wrap ul.comment-list ul ol, +.th-comments-wrap ul.comment-list ol ul, +.th-comments-wrap ul.comment-list ol ol { + margin-bottom: 0; +} +.th-comments-wrap .comment-avater { + width: 80px; + height: 80px; + margin-right: 20px; + overflow: hidden; + border-radius: 10px; +} +.th-comments-wrap .comment-avater img { + width: 100%; +} +.th-comments-wrap .comment-content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + margin-top: -4px; + position: relative; +} +.th-comments-wrap .commented-on { + font-size: 16px; + display: inline-block; + margin-bottom: 2px; + font-weight: 400; + color: var(--body-color); +} +.th-comments-wrap .commented-on i { + color: var(--theme-color); + margin-right: 7px; + font-size: 0.9rem; +} +.th-comments-wrap .name { + margin-bottom: 12px; + font-size: 18px; +} +.th-comments-wrap .comment-top { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.th-comments-wrap .text { + margin-bottom: 10px; +} +.th-comments-wrap .children { + margin: 0; + padding: 0; + list-style-type: none; + margin-left: 80px; +} +.th-comments-wrap .reply_and_edit { + margin-top: 12px; + margin-bottom: -0.46em; +} +.th-comments-wrap .reply_and_edit a { + margin-right: 15px; +} +.th-comments-wrap .reply_and_edit a:last-child { + margin-right: 0; +} +.th-comments-wrap .reply-btn { + font-weight: 500; + font-size: 16px; + color: var(--body-color); + display: inline-block; +} +.th-comments-wrap .reply-btn i { + color: var(--theme-color); + margin-right: 4px; +} +.th-comments-wrap .reply-btn:hover { + color: var(--theme-color); +} +.th-comments-wrap .star-rating { + font-size: 12px; + margin-bottom: 10px; + position: absolute; + top: 5px; + right: 0; + width: 80px; +} + +.form-submit input[type=submit] { + background-color: var(--theme-color); + color: var(--white-color); +} +.form-submit input[type=submit]:hover { + background-color: var(--title-color); +} + +.wp-block-post-comments-form textarea, +.wp-block-post-comments-form input:not([type=submit]):not([type=checkbox]):not([type=hidden]) { + border: 1px solid var(--th-border-color); +} + +.wp-block-comment-author-name { + font-weight: 600; +} + +ul.comment-list .th-comment-item:last-child > .th-post-comment { + border-bottom: none; + padding-bottom: 0; +} +ul.comment-list .children .th-comment-item > .th-post-comment { + padding-bottom: 30px; + border-bottom: 1px solid var(--th-border-color); +} +ul.comment-list:has(> .th-comment-item ~ .th-comment-item):first-child > .th-post-comment { + padding-bottom: 30px; + border-bottom: 1px solid var(--th-border-color); +} + +.th-comments-wrap.th-comment-form { + margin: 0; +} + +.comment-respond .must-log-in { + margin-bottom: 0; + margin-top: 8px; +} + +/* Medium Large devices */ +@media (max-width: 1399px) { + .th-comment-form, .th-comments-wrap { + padding: 40px 20px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .th-comments-wrap .children { + margin-left: 40px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .th-comment-form, .th-comments-wrap { + padding: 40px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .th-comment-form, .th-comments-wrap { + padding: 40px 20px; + } + .th-comments-wrap .th-post-comment { + display: block; + } + .th-comments-wrap .star-rating { + position: relative; + top: 0; + right: 0; + } + .th-comments-wrap .comment-top { + display: block; + } + .th-comments-wrap .comment-avater { + margin-right: 0; + margin-bottom: 25px; + } + .th-comments-wrap .children { + margin-left: 40px; + } + .th-comments-wrap .children { + margin-left: 30px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .th-comment-form { + --blog-space-x: 20px; + } +} +/*------------------- 4.8. Hero Area -------------------*/ +/* Hero Global ---------------------------------- */ +.th-hero-wrapper { + position: relative; + z-index: 2; + overflow: hidden; +} + +.th-hero-bg { + position: absolute; + inset: 0; +} +.th-hero-bg img { + height: 100%; + width: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +/* Hero 1 ---------------------------------- */ +.hero-title { + font-size: 72px; + font-weight: 700; + line-height: 1.222; + margin-bottom: 22px; + margin-top: -0.17em; + text-transform: capitalize; +} +.hero-title > span { + display: block; + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + position: relative; +} + +.hero-subtitle { + font-family: var(--title-font); + font-size: 18px; + font-weight: 700; + letter-spacing: 0.2em; + color: var(--theme-color); + display: block; + margin-bottom: 20px; + margin-top: -0.35em; + text-transform: uppercase; + /* Small devices */ + /* Extra small devices */ +} +@media (max-width: 767px) { + .hero-subtitle { + font-size: 16px; + letter-spacing: 0.1em; + } +} +@media (max-width: 575px) { + .hero-subtitle { + letter-spacing: 0em; + } +} + +.hero-1 { + overflow: hidden; +} +.hero-1 .hero-img { + position: absolute; + bottom: 0; + right: 7%; + z-index: 3; + width: 100%; + max-width: 744px; + text-align: center; + /* Extra large devices */ + /* Medium Large devices */ + /* Medium Large devices */ + /* Large devices */ +} +.hero-1 .hero-img:before { + content: ""; + position: absolute; + bottom: 36px; + right: 15%; + width: 255px; + height: 255px; + background-color: rgba(255, 255, 255, 0.15); + border-radius: 999px; + z-index: -1; +} +.hero-1 .hero-img .shape1 { + position: absolute; + left: 0; + top: 5%; + z-index: -2; +} +@media (max-width: 1500px) { + .hero-1 .hero-img { + right: 0; + } +} +@media (max-width: 1399px) { + .hero-1 .hero-img { + max-width: 600px; + } +} +@media (max-width: 1299px) { + .hero-1 .hero-img { + max-width: 500px; + } +} +@media (max-width: 1199px) { + .hero-1 .hero-img { + max-width: 450px; + } + .hero-1 .hero-img img { + max-height: 590px; + } +} +.hero-1 .slider-arrow { + --pos-x: 60px; + position: absolute; + background-color: transparent; + color: var(--white-color); + border: 1px solid var(--white-color); + /* Extra large devices */ +} +.hero-1 .slider-arrow:hover { + background-color: var(--white-color); + color: var(--theme-color); +} +@media (max-width: 1500px) { + .hero-1 .slider-arrow { + display: none; + } +} + +.hero-style1 { + position: relative; + z-index: 6; + margin: 316px 0 180px 0; +} +.hero-style1 .hero-subtitle { + margin-bottom: 35px; +} +.hero-style1 .hero-title { + color: var(--white-color); +} +.hero-style1 .hero-text { + max-width: 530px; + color: var(--white-color); + margin-bottom: 42px; +} +.hero-style1 .hero-arrow { + position: absolute; + right: 38%; + top: -72px; +} + +/* Medium Large devices */ +@media (max-width: 1299px) { + .hero-style1 { + margin: 240px 0 150px 0; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .hero-title { + font-size: 50px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .hero-1 .hero-img { + position: relative; + max-width: 600px; + text-align: center; + margin: 0 auto 0 auto; + } + .hero-1 .hero-arrow { + display: none; + } + .hero-title { + font-size: 44px; + line-height: 1.2; + } + .hero-style1 { + margin: 210px 0 40px 0; + text-align: center; + margin-left: auto; + margin-right: auto; + } + .hero-style1 .hero-text, + .hero-style1 .hero-title > span { + margin-left: auto; + margin-right: auto; + } +} +/* Small devices */ +@media (max-width: 767px) { + .hero-title { + font-size: 40px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .hero-1 .hero-img img { + max-height: 400px; + } + .hero-title { + font-size: 32px; + line-height: 1.24; + } +} +@media (max-width: 390px) { + .hero-title { + font-size: 28px; + line-height: 1.3; + } +} +@media (max-width: 330px) { + .hero-title { + font-size: 28px; + } +} +/* Hero 2 ---------------------------------- */ +.hero-2 { + overflow: hidden; +} +.hero-2:before, .hero-2:after { + content: ""; + position: absolute; + top: calc(50% - 232px); + width: 126px; + height: 464px; + background-color: var(--theme-color); + /* Extra large devices */ + /* Medium Large devices */ +} +@media (max-width: 1500px) { + .hero-2:before, .hero-2:after { + top: calc(50% - 166px); + width: 90px; + height: 332px; + } +} +@media (max-width: 1399px) { + .hero-2:before, .hero-2:after { + width: 50px; + display: none; + } +} +.hero-2:before { + left: 0; + -webkit-clip-path: polygon(100% 50%, 0 0, 0 100%); + clip-path: polygon(100% 50%, 0 0, 0 100%); +} +.hero-2:after { + right: 0; + -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%); + clip-path: polygon(0 50%, 100% 0, 100% 100%); +} +.hero-2 .hero-img { + position: absolute; + bottom: 0; + right: 6%; + z-index: 3; + width: 100%; + max-width: 800px; + text-align: center; + /* Extra large devices */ + /* Medium Large devices */ + /* Medium Large devices */ + /* Large devices */ +} +@media (max-width: 1500px) { + .hero-2 .hero-img { + right: 0; + } +} +@media (max-width: 1399px) { + .hero-2 .hero-img { + max-width: 500px; + } +} +@media (max-width: 1299px) { + .hero-2 .hero-img { + max-width: 500px; + } +} +@media (max-width: 1199px) { + .hero-2 .hero-img { + max-width: 450px; + } + .hero-2 .hero-img img { + max-height: 590px; + } +} +.hero-2 .slider-arrow { + --pos-x: 25px; + position: absolute; + background-color: transparent; + color: var(--white-color); + border: 1px solid var(--white-color); + /* Extra large devices */ + /* Medium Large devices */ +} +.hero-2 .slider-arrow:hover { + background-color: var(--white-color); + color: var(--theme-color); +} +@media (max-width: 1500px) { + .hero-2 .slider-arrow { + --pos-x: 5px; + } +} +@media (max-width: 1399px) { + .hero-2 .slider-arrow { + display: none; + } +} +.hero-2 .hero-inner { + padding-top: 145px; +} +.hero-2 .transparen-text { + position: absolute; + bottom: 0; + left: 0; + z-index: 2; + color: transparent; + -webkit-text-stroke: 0.4px var(--white-color); + text-transform: capitalize; + margin-bottom: 0; + line-height: 0.73; + font-size: 72px; + /* Medium Large devices */ + /* Medium devices */ + /* Small devices */ + /* Extra small devices */ +} +@media (max-width: 1299px) { + .hero-2 .transparen-text { + font-size: 48px; + } +} +@media (max-width: 991px) { + .hero-2 .transparen-text { + width: 100%; + text-align: center; + } +} +@media (max-width: 767px) { + .hero-2 .transparen-text { + font-size: 40px; + } +} +@media (max-width: 375px) { + .hero-2 .transparen-text { + font-size: 30px; + } +} + +.hero-style2 { + position: relative; + z-index: 6; + margin: 230px 0 230px 0; +} +.hero-style2 .hero-subtitle { + margin-bottom: 35px; +} +.hero-style2 .hero-title { + color: var(--white-color); +} +.hero-style2 .hero-text { + max-width: 530px; + color: var(--white-color); + margin-bottom: 42px; +} +.hero-style2 .hero-arrow { + position: absolute; + right: 38%; + top: -72px; + /* Medium devices */ +} +@media (max-width: 991px) { + .hero-style2 .hero-arrow { + display: none; + } +} + +/* Extra large devices */ +@media (max-width: 1500px) { + .hero-style2 { + margin: 180px 0; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .hero-2 .hero-img { + position: relative; + max-width: 600px; + text-align: center; + margin: 0 auto 0 auto; + } + .hero-style2 { + margin: 110px 0 40px 0; + text-align: center; + margin-left: auto; + margin-right: auto; + } + .hero-style2 .hero-text, + .hero-style2 .hero-title > span { + margin-left: auto; + margin-right: auto; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .hero-2 .hero-img img { + max-height: 400px; + } +} +/* Hero 3 ---------------------------------- */ +.hero-3 { + overflow: hidden; + background-color: var(--white-color); + max-width: 1832px; + margin: 0 auto 0 auto; + border-radius: 64px; + /* Extra large devices */ + /* Medium devices */ +} +.hero-3 .hero-img { + position: absolute; + bottom: 4%; + right: 6%; + z-index: 3; + width: 100%; + max-width: 615px; + text-align: center; + /* Extra large devices */ + /* Medium Large devices */ + /* Medium Large devices */ + /* Large devices */ +} +.hero-3 .hero-img > img { + border-radius: 90px 90px 999px 999px; +} +@media (max-width: 1500px) { + .hero-3 .hero-img { + right: 1%; + } +} +@media (max-width: 1399px) { + .hero-3 .hero-img { + max-width: 500px; + } +} +@media (max-width: 1299px) { + .hero-3 .hero-img { + max-width: 500px; + } +} +@media (max-width: 1199px) { + .hero-3 .hero-img { + max-width: 450px; + } +} +.hero-3 .hero-img .box-badge { + position: absolute; + bottom: 15%; + left: -10px; +} +.hero-3 .hero-img .box-badge .spin-text { + color: var(--white-color); + position: absolute; + left: -100%; + top: -100%; + -webkit-animation: spinText 8s linear infinite; + animation: spinText 8s linear infinite; +} +.hero-3 .hero-img .box-badge .spin-text svg { + -webkit-transform: scale(1.3); + transform: scale(1.3); +} +.hero-3 .hero-img .play-btn > i { + --icon-size: 100px; + background-color: var(--white-color); + color: var(--theme-color); +} +.hero-3 .swiper-pagination-bullets { + position: absolute; + top: 50%; + left: 0%; + z-index: 3; + -webkit-transform: rotate(90deg) translateY(-50%); + transform: rotate(90deg) translateY(-50%); + width: auto; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.hero-3 .swiper-pagination-bullets .swiper-pagination-bullet { + background-color: var(--light-color); + border-radius: 10px; + -webkit-transform: none; + transform: none; + color: transparent; +} +.hero-3 .swiper-pagination-bullets .swiper-pagination-bullet-active { + background-color: var(--theme-color); +} +.hero-3 .slider-arrow { + --pos-x: 80px; + position: absolute; + background-color: rgba(16, 24, 64, 0.7); + color: var(--white-color); + border: none; + /* Extra large devices */ + /* Medium devices */ +} +.hero-3 .slider-arrow:hover { + background-color: var(--title-color); +} +@media (max-width: 1500px) { + .hero-3 .slider-arrow { + --pos-x: 5px; + } +} +@media (max-width: 991px) { + .hero-3 .slider-arrow { + display: none; + } +} +.hero-3 .hero-inner { + padding-top: 82px; +} +@media (max-width: 1500px) { + .hero-3 { + border-radius: 24px; + } + .hero-3 .swiper-pagination-bullets { + left: -70px; + } +} +@media (max-width: 991px) { + .hero-3 .swiper-pagination-bullets { + display: none; + } + .hero-3 .hero-img .box-badge { + left: 10%; + } +} + +.hero-style3 { + position: relative; + z-index: 6; + margin: 190px 0; +} +.hero-style3 .hero-subtitle { + margin-bottom: 35px; +} +.hero-style3 .hero-text { + max-width: 530px; + margin-bottom: 42px; +} +.hero-style3 .hero-arrow { + position: absolute; + left: 34%; + bottom: 10px; + /* Medium devices */ +} +@media (max-width: 991px) { + .hero-style3 .hero-arrow { + display: none; + } +} +.hero-style3 .sub-title { + text-transform: uppercase; + color: var(--title-color); + padding-top: 3px; +} +.hero-style3 .sub-title:before { + background-color: var(--theme-color); + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + bottom: -9px; +} +.hero-style3 .sub-title .line { + background-color: var(--theme-color); + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); +} + +/* Medium Large devices */ +@media (max-width: 1399px) { + .hero-style3 { + margin: 120px 0; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .hero-3 .hero-img { + position: relative; + max-width: 660px; + text-align: center; + margin: 0 auto 40px auto; + padding-left: 12px; + padding-right: 12px; + right: unset; + } + .hero-style3 { + margin: 110px 0 40px 0; + text-align: center; + margin-left: auto; + margin-right: auto; + } + .hero-style3 .hero-text, + .hero-style3 .hero-title > span { + margin-left: auto; + margin-right: auto; + } +} +/* Hero 4 ---------------------------------- */ +.video-btn { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-size: 18px; + font-weight: 500; + color: var(--white-color); + font-family: var(--title-font); + gap: 18px; +} +.video-btn .play-btn:before, .video-btn .play-btn:after { + background-color: var(--white-color); +} +.video-btn .play-btn > i { + --icon-size: 48px; + font-size: 16px; + background-color: var(--white-color); + color: var(--theme-color); +} +.video-btn:hover { + color: var(--theme-color); +} +.video-btn:hover:hover .play-btn > i { + background-color: var(--theme-color); + color: var(--white-color); +} + +.hero-4 { + overflow: hidden; + background-color: #101111; + background-size: auto; + background-position: top center; + /* Extra large devices */ + /* Medium devices */ + /* Small devices */ +} +.hero-4:after { + content: url('data:image/svg+xml,'); + position: absolute; + bottom: -1px; + right: -1px; + line-height: 0px; + /* Medium devices */ +} +@media (max-width: 991px) { + .hero-4:after { + max-width: 90px; + } +} +.hero-4 .hero-img { + position: absolute; + bottom: 13%; + right: 6%; + z-index: 3; + width: 100%; + max-width: 676px; + text-align: center; + /* Extra large devices */ + /* Medium Large devices */ + /* Medium Large devices */ + /* Large devices */ +} +.hero-4 .hero-img img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +@media (max-width: 1500px) { + .hero-4 .hero-img { + right: 1%; + max-width: 600px; + } +} +@media (max-width: 1399px) { + .hero-4 .hero-img { + max-width: 560px; + } +} +@media (max-width: 1299px) { + .hero-4 .hero-img { + max-width: 500px; + } +} +@media (max-width: 1199px) { + .hero-4 .hero-img { + max-width: 450px; + } +} +.hero-4 .hero-img .box-badge { + position: absolute; + bottom: 15%; + left: -70px; +} +.hero-4 .hero-img .box-badge .spin-text { + color: var(--white-color); + position: absolute; + left: -53%; + top: -53%; + -webkit-animation: spinText 8s linear infinite; + animation: spinText 8s linear infinite; +} +.hero-4 .hero-img .box-badge .spin-text svg { + -webkit-transform: scale(1.35); + transform: scale(1.35); +} +.hero-4 .hero-img .box-icon { + width: 144px; + height: 144px; + line-height: 144px; + background-color: rgba(255, 255, 255, 0.3); + border-radius: 999px; + text-align: center; + position: relative; + z-index: 2; +} +.hero-4 .hero-img .box-icon:before { + content: ""; + position: absolute; + inset: 10px; + background-color: var(--theme-color); + border-radius: inherit; +} +.hero-4 .slider-arrow { + --pos-x: 84px; + position: absolute; + background-color: rgba(255, 255, 255, 0.5); + color: var(--white-color); + border: none; + /* Extra large devices */ + /* Medium devices */ +} +.hero-4 .slider-arrow:hover { + background-color: var(--white-color); + color: var(--theme-color); +} +@media (max-width: 1500px) { + .hero-4 .slider-arrow { + --pos-x: 5px; + } +} +@media (max-width: 991px) { + .hero-4 .slider-arrow { + display: none; + } +} +.hero-4 .swiper-pagination-bullets { + position: absolute; + top: 44%; + left: 0%; + z-index: 3; + -webkit-transform: rotate(90deg) translateY(-50%); + transform: rotate(90deg) translateY(-50%); + width: auto; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.hero-4 .swiper-pagination-bullets .swiper-pagination-bullet { + background-color: rgba(255, 255, 255, 0.3); + border-radius: 10px; + -webkit-transform: none; + transform: none; + color: transparent; +} +.hero-4 .swiper-pagination-bullets .swiper-pagination-bullet-active { + background-color: var(--theme-color); +} +@media (max-width: 1500px) { + .hero-4 .swiper-pagination-bullets { + left: -70px; + } +} +@media (max-width: 991px) { + .hero-4 .swiper-pagination-bullets { + display: none; + } + .hero-4 .hero-img .box-badge { + left: 0; + } +} +@media (max-width: 767px) { + .hero-4 .hero-img .box-badge { + left: 4%; + } +} + +.hero-style4 { + position: relative; + z-index: 6; + margin: 232px 0; +} +.hero-style4 .sub-title2 { + text-transform: uppercase; +} +.hero-style4 .hero-title { + color: var(--white-color); +} +.hero-style4 .hero-text { + max-width: 530px; + margin-bottom: 42px; + color: var(--white-color); +} + +/* Extra large devices */ +@media (max-width: 1500px) { + .hero-style4 { + margin: 170px 0; + } +} +/* Medium Large devices */ +@media (max-width: 1299px) { + .hero-style4 { + margin: 150px 0; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .hero-style4 { + margin: 130px 0; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .hero-4 .hero-img { + position: relative; + max-width: 660px; + text-align: center; + margin: 0 auto 40px auto; + padding-left: 12px; + padding-right: 12px; + right: unset; + } + .hero-style4 { + margin: 110px 0 40px 0; + text-align: center; + margin-left: auto; + margin-right: auto; + } + .hero-style4 .hero-text, + .hero-style4 .hero-title > span { + margin-left: auto; + margin-right: auto; + } +} +/* Hero 5 ---------------------------------- */ +.hero-5 { + overflow: hidden; + max-width: 1856px; + border-radius: 32px; + margin: 0 auto; + /* Extra large devices */ + /* Medium devices */ +} +@media (max-width: 1850px) { + .hero-5 { + margin-left: 12px; + margin-right: 12px; + } +} +.hero-5 .slider-arrow { + --title-color: #fff; + z-index: 5; +} +.hero-5 .icon-box { + position: absolute; + bottom: 32px; + right: 32px; + /* Extra small devices */ +} +@media (max-width: 575px) { + .hero-5 .icon-box { + right: 16px; + bottom: 16px; + } +} +.hero-5 .swiper-pagination-bullets { + position: absolute; + top: 44%; + left: 0%; + z-index: 3; + -webkit-transform: rotate(90deg) translateY(-50%); + transform: rotate(90deg) translateY(-50%); + width: auto; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.hero-5 .swiper-pagination-bullets .swiper-pagination-bullet { + --swiper-pagination-bullet-size: 4px; + --swiper-pagination-bullet-horizontal-gap: 20px; + height: 20px; + background-color: rgba(255, 255, 255, 0.25); + border-radius: 10px; + -webkit-transform: none; + transform: none; + color: transparent; +} +.hero-5 .swiper-pagination-bullets .swiper-pagination-bullet-active { + background-color: var(--theme-color); +} +@media (max-width: 1500px) { + .hero-5 .swiper-pagination-bullets { + left: -70px; + } +} +@media (max-width: 991px) { + .hero-5 .swiper-pagination-bullets { + display: none; + } +} + +.hero-style5 { + position: relative; + z-index: 6; + padding: 256px 0; + /* Medium Large devices */ +} +.hero-style5 .sub-title2 { + text-transform: uppercase; +} +.hero-style5 .hero-title { + color: var(--white-color); +} +.hero-style5 .hero-text { + max-width: 530px; + margin-bottom: 42px; + color: var(--white-color); +} +@media (max-width: 1299px) { + .hero-style5 { + padding: 200px 0; + } +} + +/*------------------- 4.9. Error -------------------*/ +.error-img { + margin-right: -300px; + /* Extra large devices */ +} +@media (max-width: 1500px) { + .error-img { + margin-right: -60px; + } +} +.error-img img { + width: 100%; +} + +.error-title { + margin-bottom: 34px; +} + +.error-subtitle { + max-width: 450px; + font-weight: 600; +} + +.error-text { + margin-bottom: 42px; + max-width: 650px; + margin-left: auto; + margin-right: auto; +} + +/* Medium devices */ +@media (max-width: 991px) { + .error-content { + text-align: center; + max-width: 500px; + margin: 80px auto 40px auto; + } + .error-subtitle { + margin-left: auto; + margin-right: auto; + } + .error-title { + margin-bottom: 25px; + } + .error-img { + margin-right: 0; + } + .error-text { + margin-bottom: 25px; + } +} +/* Extra small devices */ +@media (max-width: 375px) { + .error-subtitle { + font-size: 20px; + } +} +/*------------------- 4.00. Popup Search -------------------*/ +.popup-search-box { + position: fixed; + top: 0; + left: 50%; + background-color: rgba(0, 0, 0, 0.95); + height: 0; + width: 0; + overflow: hidden; + z-index: 99999; + opacity: 0; + visibility: hidden; + border-radius: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.popup-search-box button.searchClose { + width: 60px; + height: 60px; + position: absolute; + top: 40px; + right: 40px; + border-width: 1px; + border-style: solid; + border-color: var(--theme-color); + background-color: transparent; + font-size: 22px; + border-radius: 50%; + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; + color: var(--theme-color); +} +.popup-search-box button.searchClose:hover { + color: var(--body-color); + background-color: #fff; + border-color: transparent; + border-color: transparent; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.popup-search-box form { + position: absolute; + top: 50%; + left: 50%; + display: inline-block; + padding-bottom: 40px; + cursor: auto; + width: 100%; + max-width: 700px; + -webkit-transform: translate(-50%, -50%) scale(0); + transform: translate(-50%, -50%) scale(0); + -webkit-transition: -webkit-transform ease 0.4s; + transition: -webkit-transform ease 0.4s; + transition: transform ease 0.4s; + transition: transform ease 0.4s, -webkit-transform ease 0.4s; + /* Large devices */ +} +@media (max-width: 1199px) { + .popup-search-box form { + max-width: 600px; + } +} +.popup-search-box form input { + font-size: 18px; + height: 70px; + width: 100%; + border: 2px solid var(--theme-color); + background-color: transparent; + padding-left: 30px; + color: #fff; + border-radius: 50px; +} +.popup-search-box form input::-moz-placeholder { + color: #fff; +} +.popup-search-box form input::-webkit-input-placeholder { + color: #fff; +} +.popup-search-box form input:-ms-input-placeholder { + color: #fff; +} +.popup-search-box form input::-ms-input-placeholder { + color: #fff; +} +.popup-search-box form input::placeholder { + color: #fff; +} +.popup-search-box form button { + position: absolute; + top: 0px; + background-color: transparent; + border: none; + color: #fff; + font-size: 24px; + right: 12px; + color: var(--white-color); + cursor: pointer; + width: 70px; + height: 70px; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; + -webkit-transform: scale(1.001); + transform: scale(1.001); +} +.popup-search-box form button:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.popup-search-box.show { + opacity: 1; + visibility: visible; + width: 100.1%; + height: 100%; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; + border-radius: 0; +} +.popup-search-box.show form { + -webkit-transition-delay: 0.5s; + transition-delay: 0.5s; + -webkit-transform: translate(-50%, -50%) scale(1); + transform: translate(-50%, -50%) scale(1); +} + +/*------------------- 4.00. Popup Side Menu -------------------*/ +.sidemenu-wrapper { + position: fixed; + z-index: 99999; + right: 0; + top: 0; + height: 100%; + width: 0; + background-color: rgba(0, 0, 0, 0.75); + opacity: 0; + visibility: hidden; + -webkit-transition: all ease 0.8s; + transition: all ease 0.8s; +} +.sidemenu-wrapper .th-social a { + -webkit-box-shadow: none; + box-shadow: none; +} +.sidemenu-wrapper .closeButton { + display: inline-block; + border: 2px solid; + width: 50px; + height: 50px; + line-height: 48px; + font-size: 24px; + padding: 0; + position: absolute; + top: 20px; + right: 20px; + background-color: var(--white-color); + border-radius: 50%; + -webkit-transform: rotate(0); + transform: rotate(0); + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.sidemenu-wrapper .closeButton:hover { + color: var(--theme-color); + border-color: var(--theme-color); + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} +.sidemenu-wrapper .sidemenu-content { + background-color: var(--white-color); + width: 450px; + max-width: 100%; + margin-left: auto; + padding: 80px 30px; + height: 100%; + overflow: scroll; + position: relative; + right: -500px; + cursor: auto; + -webkit-transition-delay: 1s; + transition-delay: 1s; + -webkit-transition: right ease 1s; + transition: right ease 1s; +} +.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1); + background-color: #f5f5f5; +} +.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar { + width: 2px; + background-color: #f5f5f5; +} +.sidemenu-wrapper .sidemenu-content select, +.sidemenu-wrapper .sidemenu-content input, +.sidemenu-wrapper .sidemenu-content .form-select, +.sidemenu-wrapper .sidemenu-content .form-control, +.sidemenu-wrapper .sidemenu-content textarea { + background-color: var(--smoke-color2); + border-radius: 27px; +} +.sidemenu-wrapper .widget { + padding: 0; + border: none; + background-color: transparent; +} +.sidemenu-wrapper .info-box_icon { + background-color: rgba(255, 156, 0, 0.15); +} +.sidemenu-wrapper.show { + opacity: 1; + visibility: visible; + width: 100%; + -webkit-transition: all ease 0.8s; + transition: all ease 0.8s; +} +.sidemenu-wrapper.show .sidemenu-content { + right: 0; + opacity: 1; + visibility: visible; +} + +/*------------------- 4.00. Wocommerce -------------------*/ +.woocommerce-message, +.woocommerce-info { + position: relative; + padding: 11px 20px 11px 50px; + background-color: var(--theme-color); + color: var(--white-color); + font-size: 14px; + font-weight: 500; + margin-bottom: 15px; + border-radius: 23px; +} +.woocommerce-message a, +.woocommerce-info a { + color: var(--white-color); + text-decoration: underline; +} +.woocommerce-message a:hover, +.woocommerce-info a:hover { + color: var(--title-color); +} +.woocommerce-message:before, +.woocommerce-info:before { + content: "\f06a"; + font-family: var(--icon-font); + font-weight: 400; + margin-right: 10px; + font-size: 18px; + position: absolute; + left: 20px; + top: 11px; +} + +.woocommerce-notices-wrapper .woocommerce-message { + background-color: var(--theme-color); + color: var(--white-color); +} +.woocommerce-notices-wrapper .woocommerce-message:before { + content: "\f14a"; + font-weight: 300; +} + +.woocommerce-form-register, +.woocommerce-form-coupon, +.woocommerce-form-login { + --th-border-color: #E1E4E5; + padding: 35px 40px 35px 40px; + background-color: var(--white-color); + margin-bottom: 0; + border-radius: 20px; + /* Extra small devices */ +} +@media (max-width: 575px) { + .woocommerce-form-register, + .woocommerce-form-coupon, + .woocommerce-form-login { + padding: 40px 20px; + } +} +.woocommerce-form-register .form-group, +.woocommerce-form-coupon .form-group, +.woocommerce-form-login .form-group { + margin-bottom: 20px; +} +.woocommerce-form-register .form-group:last-child, +.woocommerce-form-coupon .form-group:last-child, +.woocommerce-form-login .form-group:last-child { + margin-bottom: 0; +} + +.woocommerce-form-login-toggle .woocommerce-info { + background-color: var(--theme-color); + color: var(--white-color); +} +.woocommerce-form-login-toggle .woocommerce-info a { + color: inherit; +} +.woocommerce-form-login-toggle .woocommerce-info a:hover { + color: var(--title-color); +} + +.woocommerce-form-login-toggle + .row .woocommerce-form-login { + margin-bottom: 30px; +} + +.woocommerce-error { + background-color: var(--error-color); + color: #fff; + list-style: none; + padding: 10px 26px; + margin: 0 0 30px 0; + border-radius: 0; + font-weight: 500; + font-size: 14px; +} + +nav.woocommerce-MyAccount-navigation li { + border: 1px solid #ddd; + margin: 0; + border-top: none; +} +nav.woocommerce-MyAccount-navigation li:first-child { + border-top: 1px solid #ddd; +} +nav.woocommerce-MyAccount-navigation li a { + color: var(--title-color); + font-weight: 700; + padding: 7px 17px; + display: block; +} +nav.woocommerce-MyAccount-navigation li.is-active a, +nav.woocommerce-MyAccount-navigation li a:hover { + color: var(--white-color); + background-color: var(--theme-color); +} + +.woocommerce-MyAccount-content h3 { + margin-top: -0.3em; +} +.woocommerce-MyAccount-content .btn { + background-color: var(--theme-color); + color: var(--white-color); + font-size: 14px; + padding: 10px 25px; + font-weight: 700; +} +.woocommerce-MyAccount-content .btn:hover { + background-color: var(--title-color); + color: var(--white-color); +} + +table.variations, +.woocommerce-grouped-product-list-item { + border-collapse: separate; + border-spacing: 0 15px; + margin-bottom: 5px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: none; +} +table.variations td, +.woocommerce-grouped-product-list-item td { + border: none; + vertical-align: middle; + padding: 0 5px; +} +table.variations td:first-child, +.woocommerce-grouped-product-list-item td:first-child { + padding: 0; +} +table.variations label, +.woocommerce-grouped-product-list-item label { + margin: 0; + font-size: 14px; + text-transform: capitalize; +} +table.variations label a, +.woocommerce-grouped-product-list-item label a { + color: var(--title-color); +} +table.variations label a:hover, +.woocommerce-grouped-product-list-item label a:hover { + color: var(--theme-color); +} +table.variations .label, +.woocommerce-grouped-product-list-item .label { + border: none; +} +table.variations__label, +.woocommerce-grouped-product-list-item__label { + border: none !important; + font-weight: 600; +} +table.variations__price, +.woocommerce-grouped-product-list-item__price { + border: none !important; +} +table.variations__price .price, +table.variations__price .amount, +.woocommerce-grouped-product-list-item__price .price, +.woocommerce-grouped-product-list-item__price .amount { + font-size: 18px !important; +} +table.variations del, +.woocommerce-grouped-product-list-item del { + margin-left: 12px; +} + +.woocommerce-product-attributes th, +.woocommerce-product-attributes td { + border: 1px solid var(--th-border-color); +} +.woocommerce-product-attributes th p:last-child, +.woocommerce-product-attributes td p:last-child { + margin-bottom: 0; +} + +.woocommerce-grouped-product-list.group_table { + border-collapse: collapse; + margin-bottom: 15px; +} +.woocommerce-grouped-product-list.group_table .woocommerce-Price-amount.amount { + font-size: 16px; + color: var(--title-color); +} +.woocommerce-grouped-product-list.group_table label { + margin: 0 0 0 10px; + margin: 0 0 0 10px; + font-family: var(--title-font); + font-size: 18px; +} +.woocommerce-grouped-product-list.group_table .qty-input { + border-color: #e3e6e9; +} +.woocommerce-grouped-product-list.group_table tr { + border-bottom: 1px solid #e3e6e9; +} +.woocommerce-grouped-product-list.group_table tr:last-child { + border-bottom: none; +} +.woocommerce-grouped-product-list.group_table td { + padding: 30px 5px; +} + +table.variations { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + position: relative; +} +table.variations td { + padding: 0; +} +table.variations td.label { + padding-right: 10px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} +table.variations select { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + font-weight: 400; + line-height: 1.5; + vertical-align: middle; + margin: 0; + padding-right: 54px; + padding-left: 20px; + height: 50px; +} +table.variations .reset_variations { + margin-left: 16px; + display: inline-block; + position: absolute; + left: 100%; + bottom: 25px; +} + +.woosq-product .product .woocommerce-grouped-product-list-item__quantity, +.woosq-product .product .woocommerce-grouped-product-list-item__label, +.woosq-product .product .woocommerce-grouped-product-list-item__price { + width: auto !important; +} + +.woocommerce-grouped-product-list-item__label:after, +.woocommerce-grouped-product-list-item__price:after { + display: none; +} + +.woocommerce-variation.single_variation { + margin-bottom: 30px; +} +.woocommerce-variation.single_variation .price { + color: var(--title-color); + font-weight: 700; +} + +.wooscp-table-items td.woocommerce-product-attributes-item__value { + padding-left: 15px !important; +} +.wooscp-table-items a.added_to_cart.wc-forward { + margin-left: 15px; + text-decoration: underline; +} + +.tinvwl_added_to_wishlist.tinv-modal.tinv-modal-open { + z-index: 1111; +} + +table.woocommerce-product-attributes { + margin-bottom: 30px; +} + +#woosq-popup .product_meta { + margin-top: 20px; +} +#woosq-popup .product_title { + font-size: 24px; + margin-bottom: 5px; +} +#woosq-popup .single-product .product .actions { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 20px; +} +#woosq-popup .single-product .product .actions > div { + height: auto; + overflow: visible; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} +#woosq-popup .single-product .product .actions > div .quantity.style2.woocommerce-grouped-product-list-item__quantity { + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.login-tab { + margin-bottom: 30px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.login-tab button.nav-link { + background-color: var(--smoke-color); + color: var(--title-color); + padding: 11px 39px; + font-size: 18px; + font-weight: 500; + border-radius: 15px ​15px 0; +} +.login-tab button.nav-link.active { + background-color: var(--theme-color); + color: var(--white-color); +} + +.star-rating { + overflow: hidden; + position: relative; + width: 100px; + height: 1.2em; + line-height: 1.2em; + display: block; + font-family: var(--icon-font); + font-weight: 700; + font-size: 14px; +} +.star-rating:before { + content: "\e28b\e28b\e28b\e28b\e28b"; + color: #e1e1e1; + float: left; + top: 0; + left: 0; + position: absolute; + letter-spacing: 3px; +} +.star-rating span { + overflow: hidden; + float: left; + top: 0; + left: 0; + position: absolute; + padding-top: 1.5em; +} +.star-rating span:before { + content: "\e28b\e28b\e28b\e28b\e28b"; + top: 0; + position: absolute; + left: 0; + color: var(--yellow-color); + letter-spacing: 3px; +} + +.rating-select label { + margin: 0; + margin-right: 10px; +} +.rating-select p.stars { + margin-bottom: 0; + line-height: 1; +} +.rating-select p.stars a { + position: relative; + height: 14px; + width: 18px; + text-indent: -999em; + display: inline-block; + text-decoration: none; +} +.rating-select p.stars a::before { + display: block; + position: absolute; + top: 0; + left: 0; + width: 18px; + height: 14px; + line-height: 1; + font-family: var(--icon-font); + content: "\e28b"; + font-weight: 400; + text-indent: 0; + color: var(--yellow-color); +} +.rating-select p.stars a:hover ~ a::before { + content: "\e28b"; + font-weight: 400; +} +.rating-select p.stars:hover a::before { + content: "\e28b"; + font-weight: 700; +} +.rating-select p.stars.selected a.active::before { + content: "\e28b"; + font-weight: 700; +} +.rating-select p.stars.selected a.active ~ a::before { + content: "\e28b"; + font-weight: 400; +} +.rating-select p.stars.selected a:not(.active)::before { + content: "\e28b"; + font-weight: 700; +} + +/* Small devices */ +@media (max-width: 767px) { + .woocommerce-message, + .woocommerce-info { + font-size: 14px; + line-height: 22px; + padding: 10px 15px 10px 37px; + } + .woocommerce-message:before, + .woocommerce-info:before { + font-size: 16px; + top: 10px; + left: 15px; + } +} +/*------------------- 4.00. Products -------------------*/ +.th-product { + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; +} +.th-product .product-title { + font-size: 22px; + margin: 4px 0 6px 0; + font-weight: 600; + text-transform: capitalize; +} +.th-product .product-title a { + color: inherit; +} +.th-product .product-title a:hover { + color: var(--theme-color); +} +.th-product .product-category { + font-size: 14px; + color: var(--body-color); + margin-bottom: 0px; + display: block; +} +.th-product .product-category:hover { + color: var(--theme-color); +} +.th-product .product-tag { + font-size: 14px; + position: absolute; + top: 20px; + left: 20px; + background-color: var(--theme-color); + color: var(--white-color); + padding: 0 12px; + min-width: 60px; + z-index: 3; + border-radius: 99px; + line-height: 24px; +} +.th-product .woocommerce-product-rating { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 5px; + margin-top: 8px; + margin-bottom: 5px; +} +.th-product .star-rating { + margin: 0 auto 10px 0; + width: 93px; +} +.th-product .price { + display: block; + color: var(--theme-color); + font-weight: 700; + margin-bottom: -0.4em; + font-family: var(--body-font); +} +.th-product .price del { + margin-left: 5px; + color: var(--body-color); +} +.th-product .product-img { + --space: 0px; + background-color: var(--smoke-color); + overflow: hidden; + position: relative; + margin: 0 0 23px 0; + text-align: center; + background-color: var(--smoke-color); + z-index: 2; + border-radius: 12px; + /* Small devices */ +} +@media (max-width: 767px) { + .th-product .product-img { + border-radius: 20px; + } +} +.th-product .product-img:after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--title-color); + border-radius: inherit; + opacity: 0; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + pointer-events: none; +} +.th-product .product-img img { + width: 100%; + -webkit-transition: all ease 0.4s; + transition: all ease 0.4s; + -webkit-transform: scale(1); + transform: scale(1); +} +.th-product .actions { + height: 100%; + position: absolute; + top: 5px; + right: 15px; + text-align: center; + z-index: 3; + opacity: 0; + visibility: hidden; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + display: grid; + -ms-flex-line-pack: center; + align-content: center; + width: 40px; +} +.th-product .actions .icon-btn { + --btn-size: 40px; + font-size: 14px; + border-color: var(--white-color); + -webkit-box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); + box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.05); + color: var(--title-color); + border-radius: 99px; + margin-bottom: 10px; + -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.08); + box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.08); +} +.th-product .actions .icon-btn:hover { + color: var(--white-color); + border-color: var(--theme-color); +} +.th-product .actions > * { + margin: 0 0; +} +.th-product .actions > * > a { + margin: 0; +} +.th-product .icon-btn { + -webkit-transform: translateX(30px); + transform: translateX(30px); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.th-product .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt, +.th-product .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt { + width: 40px; + height: 40px; + line-height: 40px; + display: inline-block; +} +.th-product .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt::before, +.th-product .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt::before { + position: relative; + top: 0; + left: 0; + line-height: inherit; + margin: 0; + font-size: 24px; +} +.th-product .tinv-wishlist a { + display: inline-block; + width: 40px; + height: 40px; + line-height: 40px; + background-color: var(--white-color); + color: var(--title-color); + border-radius: 50%; +} +.th-product .tinv-wishlist a:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.th-product .add_to_cart_button.added { + display: none; +} +.th-product .added_to_cart { + display: block; + width: 40px; + height: 40px; + line-height: 38px; + background-color: var(--title-color); + color: var(--white-color); + font-size: 0; + text-align: center; + border-radius: 99px; + border: none; + margin-bottom: 10px; +} +.th-product .added_to_cart:after { + content: "\f07a"; + position: relative; + font-family: var(--icon-font); + font-size: 16px; + font-weight: 700; +} +.th-product .added_to_cart:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.th-product .action-btn { + background-color: var(--white-color); + font-size: 14px; + font-family: var(--title-font); + text-transform: uppercase; + font-weight: bold; + display: inline-block; + padding: 13px 25px; +} +.th-product:hover .product-img:after { + opacity: 0.35; +} +.th-product:hover .product-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.th-product:hover .actions { + margin-top: 0; + opacity: 1; + visibility: visible; +} +.th-product:hover .icon-btn { + -webkit-transform: translateY(0); + transform: translateY(0); +} +.th-product.list-view { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + text-align: left; + height: 100%; + padding: 15px; + border: 1px solid var(--th-border-color); + border-radius: 20px; +} +.th-product.list-view .product-img { + --space: 0px; + width: 94px; + margin: 0; + border-radius: 10px; + display: grid; + -ms-flex-line-pack: center; + align-content: center; +} +.th-product.list-view .product-img:before { + --space: 0px; +} +.th-product.list-view .product-category { + font-size: 13px; + line-height: 23px; + margin-top: -3px; + margin-bottom: 2px; +} +.th-product.list-view .star-rating { + margin: 8px 0 0 0; + width: 80px; + font-size: 12px; +} +.th-product.list-view .star-rating span:before { + color: var(--yellow-color); +} +.th-product.list-view .product-content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + padding: 0 0 0 15px; +} +.th-product.list-view .actions { + --icon-gap-x: 2px; + width: 100%; + right: 0; + text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} +.th-product.list-view .actions .icon-btn { + --btn-size: 36px; + --btn-font-size: 14px; + background-color: var(--theme-color); + color: var(--white-color); + border: none; +} +.th-product.list-view .actions .icon-btn:hover { + background-color: var(--title-color); +} +.th-product.list-view .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt, +.th-product.list-view .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt { + width: 35px; + height: 35px; + line-height: 35px; +} +.th-product.list-view .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt::before, +.th-product.list-view .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt::before { + font-size: 20px; +} +.th-product.list-view .tinv-wishlist a { + width: 35px; + height: 35px; + line-height: 35px; +} +.th-product.list-view .added_to_cart { + width: 35px; + height: 35px; + line-height: 35px; +} +.th-product.list-view .added_to_cart:after { + font-size: 16px; +} +.th-product.list-view .tag { + top: 8px; + right: 8px; + padding: 0px 15px; +} +.th-product.list-view .product-title { + font-size: 15px; + font-weight: 500; + margin: 0 0 2px 0; +} +.th-product.list-view .price { + font-weight: 600; + font-size: 13px; + line-height: 23px; + color: var(--theme-color); +} + +.product-list-area { + margin-bottom: -24px; +} + +#productCarousel .slick-arrow { + top: 37.5%; +} + +.mfp-content { + margin: 1.5rem auto; +} +.mfp-content .product-details-img { + padding-top: 15px; +} +.mfp-content .product-about { + padding-top: 20px; + padding-bottom: 20px; +} +.mfp-content .container { + position: relative; +} +.mfp-content .product-big-img { + margin-top: 12px; + margin-bottom: 12px; +} + +.mfp-fade.mfp-bg { + opacity: 0; + -webkit-transition: all 0.15s ease-out; + transition: all 0.15s ease-out; +} + +.mfp-fade.mfp-bg.mfp-ready { + opacity: 0.8; +} + +.mfp-fade.mfp-bg.mfp-removing { + opacity: 0; +} + +.mfp-fade.mfp-wrap .mfp-content { + opacity: 0; + -webkit-transition: all 0.4s ease-out; + transition: all 0.4s ease-out; +} + +.mfp-fade.mfp-wrap.mfp-ready .mfp-content { + opacity: 1; +} + +.mfp-fade.mfp-wrap.mfp-removing .mfp-content { + opacity: 0; +} + +.woosq-popup { + border-radius: 10px; +} +.woosq-popup .product_meta > span > a:after, +.woosq-popup .product_meta > span > span:after { + display: none; +} + +.woosq-product > .product .summary { + display: grid; + -ms-flex-line-pack: center; + align-content: center; +} +.woosq-product .thumbnails .slick-list { + display: block; +} +.woosq-product .thumbnails .slick-dots li button { + width: 12px; + height: 12px; + -webkit-transform: scale(1); + transform: scale(1); + background-color: var(--theme-color); + opacity: 0.4; +} +.woosq-product .thumbnails .slick-dots li button:before { + display: none; +} +.woosq-product .thumbnails .slick-dots li.slick-active button { + opacity: 1; +} +.woosq-product .tinv-wraper { + display: none; +} + +.th-sort-bar { + padding: 12px; + margin: 0 0 24px 0; + background-color: var(--smoke-color); + border-radius: 12px; +} +.th-sort-bar .row { + --bs-gutter-x: 0; + --bs-gutter-y: 15px; +} +.th-sort-bar select { + height: 50px; + border: 1px solid var(--th-border-color); + background-color: var(--white-color); + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + min-width: 250px; + font-size: 16px; + margin: 0; + color: var(--body-color); +} +.th-sort-bar .woocommerce-result-count { + padding-left: 15px; + margin-bottom: 0; + color: var(--body-color); +} +.th-sort-bar .nav a { + display: inline-block; + height: 50px; + width: 50px; + line-height: 50px; + border: 1px solid var(--th-border-color); + background-color: var(--white-color); + text-align: center; + position: relative; + font-family: var(--title-font); + font-weight: 600; + font-size: 16px; + text-transform: capitalize; + color: var(--body-color); + margin: 0 0 0 10px; + border-radius: 5px; +} +.th-sort-bar .nav a.active, .th-sort-bar .nav a:hover { + color: var(--theme-color); +} + +.product-thumb-area { + position: relative; + margin-right: 10px; +} +.product-thumb-area .product-thumb-tab { + position: absolute; + top: 0; + left: 0; +} + +.product-thumb-tab { + --thumb: 120px; + --gap: 10px; + max-width: var(--thumb); + margin-left: calc(0px - var(--thumb) / 2); + position: relative; + z-index: 3; + display: grid; + -ms-flex-line-pack: center; + align-content: center; + height: 100%; +} +.product-thumb-tab .tab-btn { + background-color: var(--white-color); + cursor: pointer; + height: var(--thumb); + width: var(--thumb); + padding: var(--gap); +} +.product-thumb-tab .tab-btn img { + max-width: 100%; +} +.product-thumb-tab .tab-btn:not(:last-of-type) { + margin-bottom: 20px; +} +.product-thumb-tab .indicator { + position: absolute; + top: calc(var(--pos-y) + var(--gap)); + left: calc(var(--pos-x) + var(--gap)); + width: calc(var(--width-set) - var(--gap) * 2); + height: calc(var(--height-set) - var(--gap) * 2); + border: 2px solid var(--theme-color); + pointer-events: none; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +.product-big-img { + background-color: var(--smoke-color); + text-align: center; + overflow: hidden; + border-radius: 20px; + position: sticky; + top: 110px; + left: 0; +} +.product-big-img .img { + width: 100%; +} +.product-big-img .img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.product-big-img .slider-pagination { + position: absolute; + bottom: 40px; + left: 0; +} +.product-big-img .slick-dots { + margin: -11px 0 0 0 !important; + -webkit-transform: translateY(-30px); + transform: translateY(-30px); + --border-color: #c0c0c0; +} + +.img-magnifier-container { + position: relative; +} + +.img-magnifier-glass { + position: absolute; + -webkit-box-shadow: inset 0 10px 18px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 10px 18px rgba(0, 0, 0, 0.2); + border-radius: 50%; + cursor: none; + width: 200px; + height: 200px; +} + +.magnify { + position: relative; + cursor: none; +} +.magnify .magnifier { + height: 180px; + width: 180px; + position: absolute; + z-index: 20; + -webkit-box-shadow: inset 0 10px 18px rgba(0, 0, 0, 0.2); + box-shadow: inset 0 10px 18px rgba(0, 0, 0, 0.2); + border-radius: 50%; + background-size: 700%; + background-repeat: no-repeat; + margin-left: -90px !important; + margin-top: -90px !important; + pointer-events: none; + display: none; +} +.magnify .magnified { + display: block; + z-index: 10; + margin: auto; + width: 100%; + height: 100%; +} +.magnify img { + width: 100%; + height: 100%; +} + +.quantity { + position: relative; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + vertical-align: middle; +} +.quantity > .screen-reader-text { + display: inline-block; + font-weight: 600; + color: var(--title-color); + font-family: var(--title-font); + margin: 0; + -ms-flex-item-align: center; + align-self: center; + margin-right: 10px; +} +.quantity .qty-btn, +.quantity .qty-input { + display: inline-block; + width: 50px; + height: 50px; + border: none; + border-right: none; + background-color: transparent; + padding: 0; + border-radius: 0; + text-align: center; + color: var(--body-color); + font-size: 18px; + font-weight: 600; +} +.quantity .qty-btn:last-child, +.quantity .qty-input:last-child { + border-right: none; +} +.quantity .qty-btn { + font-size: 16px; +} + +.product_meta { + font-weight: 700; + font-size: 16px; + font-family: var(--body-font); + margin: 35px 0 0 0; +} +.product_meta > span { + display: block; + margin-bottom: 5px; + color: var(--title-color); + font-weight: bold; +} +.product_meta > span:last-child { + margin-bottom: 0; +} +.product_meta > span a { + color: inherit; +} +.product_meta > span a:hover { + color: var(--theme-color); +} +.product_meta > span > a, +.product_meta > span > span { + position: relative; + color: var(--body-color); + font-weight: 400; +} +.product_meta > span > a:after, +.product_meta > span > span:after { + content: ","; + margin-right: 5px; +} +.product_meta > span > a:last-child:after, +.product_meta > span > span:last-child:after { + display: none; +} +.product_meta > span > a:first-child, +.product_meta > span > span:first-child { + margin-left: 7px; +} + +.product-tab-style1 { + border-bottom: 1px solid var(--th-border-color); + margin: 95px auto 40px auto; + padding-bottom: 40px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + gap: 24px; +} +.product-tab-style1 .th-btn { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.product-tab-style1 .th-btn.active { + color: var(--white-color); +} + +#productTabContent { + margin-bottom: -10px; +} + +#additional_information { + margin-bottom: 40px; +} + +.product-inner-list > ul { + margin: 0; + padding: 0; + list-style-type: none; +} +.product-inner-list li { + position: relative; + padding-left: 15px; +} +.product-inner-list li:before { + content: "-"; + position: absolute; + left: 0; +} + +.share-title { + font-size: 16px; + font-weight: 600; + color: var(--title-color); + margin-bottom: 8px; +} +.share-title i { + color: var(--theme-color); +} + +.summary-content .product-title, +.product-about .product-title { + font-weight: 700; + margin: 0 0 18px 0; +} +.summary-content .product_title, +.product-about .product_title { + margin-bottom: 20px !important; +} +.summary-content > .price, +.product-about > .price { + font-family: var(--body-font); + font-size: 20px; + font-weight: 800; + color: var(--title-color); + display: block; + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; + margin-bottom: 19px; + margin-top: -0.2em; +} +.summary-content > .price del, +.product-about > .price del { + color: var(--gray-color); + font-weight: 500; + margin-left: 15px; +} +.summary-content .woocommerce-product-rating, +.summary-content .product-rating, +.product-about .woocommerce-product-rating, +.product-about .product-rating { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + gap: 5px; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + top: 2px; + font-size: 16px; + line-height: 20px; + padding: 0 0 0 0; + margin: 0 0 0 0; + margin-bottom: 22px; +} +.summary-content .woocommerce-product-rating .star-rating, +.summary-content .product-rating .star-rating, +.product-about .woocommerce-product-rating .star-rating, +.product-about .product-rating .star-rating { + width: 80px; + font-size: 12px; + margin-right: 8px; +} +.summary-content .woocommerce-review-link, +.product-about .woocommerce-review-link { + color: var(--body-color); +} +.summary-content .checklist, +.product-about .checklist { + margin: 29px 0 29px 0; +} +.summary-content .actions, +.product-about .actions { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 15px; + margin: 32px 0 25px 0; +} +.summary-content .actions .th-btn .btn-icon, +.product-about .actions .th-btn .btn-icon { + padding: 10.5px 15px 10.5px 15px; +} +.summary-content .actions .icon-btn, +.product-about .actions .icon-btn { + border-color: var(--theme-color); + background-color: var(--theme-color); + color: var(--white-color); + border-radius: 99px; +} +.summary-content .actions .icon-btn:hover, +.product-about .actions .icon-btn:hover { + background-color: var(--title-color); + border-color: var(--title-color); +} +.summary-content .share, +.product-about .share { + margin-top: 25px; +} +.summary-content .th-social a, +.product-about .th-social a { + --icon-size: 40px; + line-height: 38px; + font-size: 14px; + border: 1px solid var(--th-border-color); + border-radius: 0; +} +.summary-content .th-social a:hover, +.product-about .th-social a:hover { + border-color: var(--theme-color); +} +.summary-content .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt, +.summary-content .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt, +.product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt, +.product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt { + width: 56px; + height: 56px; + line-height: 54px; + display: inline-block; + border-radius: 99px; + background-color: var(--theme-color); + color: var(--white-color); + border: none; +} +.summary-content .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt::before, +.summary-content .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt::before, +.product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt::before, +.product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt::before { + position: relative; + top: 0; + left: 0; + line-height: inherit; + margin: 0; + font-size: 24px; +} +.summary-content .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt:hover, +.summary-content .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt:hover, +.product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart-plus.no-txt:hover, +.product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.tinvwl-icon-heart.no-txt:hover { + background-color: var(--title-color); +} +.summary-content .tinv-wishlist a, +.product-about .tinv-wishlist a { + display: inline-block; + width: 56px; + height: 56px; + line-height: 56px; + border-radius: 0; +} +.summary-content .tinv-wishlist a:hover, +.product-about .tinv-wishlist a:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.summary-content .quantity, +.product-about .quantity { + position: relative; +} +.summary-content .quantity:after, +.product-about .quantity:after { + content: ""; + height: 100%; + width: 1px; + background-color: var(--title-color); + position: absolute; + top: 0; + left: 55px; +} +.summary-content .quantity .qty-input, +.product-about .quantity .qty-input { + width: 112px; + height: 56px; + border: 1px solid var(--title-color); + background-color: transparent; + color: var(--title-color); + padding: 0 21px; + text-align: left; + font-weight: 500; + border-radius: 27px; +} +.summary-content .quantity .qty-btn, +.product-about .quantity .qty-btn { + color: var(--title-color); + background-color: transparent; + position: absolute; + right: 21px; + height: auto; + width: auto; + border: none; + line-height: 16px; +} +.summary-content .quantity .quantity-minus, +.product-about .quantity .quantity-minus { + bottom: 7px; +} +.summary-content .quantity .quantity-plus, +.product-about .quantity .quantity-plus { + top: 12px; +} + +.productSlide { + position: relative; + /* Medium devices */ +} +.productSlide img { + border-radius: 25px; +} +@media (max-width: 991px) { + .productSlide { + margin-bottom: 30px; + } +} +.productSlide .product-tag { + font-size: 14px; + position: absolute; + top: 10px; + left: 10px; + background-color: var(--theme-color); + color: var(--white-color); + padding: 7px 12px 4px 12px; + min-width: 60px; + border-radius: 100px; + text-align: center; + z-index: 3; + line-height: 14px; +} + +.woocommerce-Reviews .th-comments-wrap { + padding: 0; + margin-right: 0 !important; + -webkit-box-shadow: none; + box-shadow: none; + background-color: transparent; + border: none; +} +.woocommerce-Reviews .th-comment-form { + padding: 60px; + background-color: var(--smoke-color); + -webkit-box-shadow: none; + box-shadow: none; + margin-right: 0 !important; + margin-top: 28px; + margin-bottom: 40px; +} +.woocommerce-Reviews .th-comment-form input, +.woocommerce-Reviews .th-comment-form .form-control { + background-color: var(--white-color); +} +.woocommerce-Reviews .th-comment-form .blog-inner-title { + margin-bottom: 10px; +} +.woocommerce-Reviews .comment-list { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 0 24px; + margin: -12px !important; + margin-bottom: 28px !important; +} +.woocommerce-Reviews .comment-list li { + width: 50%; + /* Medium devices */ +} +@media (max-width: 991px) { + .woocommerce-Reviews .comment-list li { + width: 100%; + } +} +.woocommerce-Reviews .th-post-comment { + border: 1px solid var(--th-border-color) !important; + padding: 40px !important; + margin: 12px; + border-radius: 24px; + background-color: var(--smoke-color); +} +.woocommerce-Reviews .th-post-comment .name { + margin-bottom: 3px; +} +.woocommerce-Reviews .th-post-comment .commented-on { + margin-bottom: 12px; +} +.woocommerce-Reviews .th-post-comment .text { + margin-bottom: -0.4em; +} + +/* Large devices */ +@media (max-width: 1199px) { + .woocommerce-Reviews .th-post-comment { + padding: 30px !important; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .woocommerce-Reviews .comment-list { + grid-template-columns: repeat(1, 1fr); + } + .woocommerce-Reviews .th-comment-form { + padding: 40px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .woocommerce-Reviews .th-comment-form { + padding: 40px 20px; + } +} +#description { + margin-bottom: 30px; +} + +.product-details .th-comments-wrap { + margin-top: 0; +} +.product-details .border-title { + position: relative; + padding-bottom: 20px; + margin-bottom: 40px; +} +.product-details .border-title:before { + content: ""; + position: absolute; + left: 0; + bottom: 0; + height: 2px; + width: 80px; + background-color: var(--theme-color); +} + +.product-inner-title { + font-size: 32px; + border-bottom: 1px solid var(--th-border-color); + padding: 0 0 7px 0; + margin: 0 0 30px 0; +} + +.related-product-wrapper { + padding-top: 115px; +} + +/* Medium Large devices */ +@media (max-width: 1399px) { + .th-product.list-view .product-img { + max-width: 150px; + } +} +/* Medium Large devices */ +@media (max-width: 1299px) { + .product-thumb-tab { + --thumb: 100px; + margin-left: -40px; + } + .product-thumb-area { + margin-right: 0; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .th-sort-bar select { + min-width: auto; + } + .product-tab-style1 { + margin: 55px 0 40px 0; + } + .summary-content, + .product-about { + padding-left: 0; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .product-big-img { + margin-bottom: 40px; + } + .product-thumb-tab { + margin-left: -10px; + } + .th-product-box.list-view .product-img { + max-width: 150px; + } + .th-sort-bar .row { + --bs-gutter-x: 20px; + } + .th-sort-bar .nav a:last-child { + margin-right: 0; + padding-right: 0; + } + .th-sort-bar .nav a:last-child:before { + display: none; + } + .woosq-product > .product .thumbnails { + max-height: 400px; + min-height: 200px; + padding: 10px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .th-sort-bar { + text-align: center; + padding: 10px 15px 15px 15px; + } + .th-sort-bar .nav { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .th-sort-bar select { + margin: 0 auto; + } + .th-sort-bar .woocommerce-result-count { + padding-left: 0; + } + .th-product-box.list-view .product-img { + max-width: 130px; + } + .th-product-box.list-view .actions { + --btn-size: 30px; + --btn-font-size: 10px; + --icon-gap-x: 2px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .product-about .actions { + gap: 15px 15px; + } + .product-thumb-tab { + --thumb: 74px; + --gap: 6px; + } + .product-thumb-tab .tab-btn:not(:last-of-type) { + margin-bottom: 10px; + } +} +/* Extra small devices */ +@media (max-width: 375px) { + .th-product.list-view .product-img { + max-width: 130px; + } + .th-product.list-view .product-content { + padding: 0 15px; + } +} +.productSlide { + position: relative; + /* Medium devices */ +} +.productSlide img { + border-radius: 25px; +} +@media (max-width: 991px) { + .productSlide { + margin-bottom: 30px; + } +} +.productSlide .product-tag { + font-size: 14px; + position: absolute; + top: 10px; + left: 10px; + background-color: var(--theme-color); + color: var(--white-color); + padding: 7px 12px 4px 12px; + min-width: 60px; + border-radius: 100px; + text-align: center; + z-index: 3; + line-height: 14px; +} + +.product-thumb { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 10px; + cursor: pointer; +} +.product-thumb .tab-btn { + border: 1px solid var(--title-color); + width: 60px; + height: 60px; + border-radius: 10px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .product-thumb .tab-btn { + width: 40px; + height: 40px; + } +} +.product-thumb .tab-btn.active { + border: 1px solid var(--theme-color); +} +.product-thumb-wrap { + position: absolute; + left: 30px; + bottom: 30px; + z-index: 2; + /* Large devices */ + /* Medium devices */ +} +@media (max-width: 1199px) { + .product-thumb-wrap { + left: 10px; + bottom: 10px; + } +} +@media (max-width: 991px) { + .product-thumb-wrap { + left: 20px; + bottom: 20px; + } +} + +/*------------------- 4.00. Cart -------------------*/ +.woocommerce-cart-form { + text-align: center; +} + +.cart_table { + border: 1px solid #eaf0f2; + margin-bottom: 45px; +} +.cart_table thead { + background-color: #ecf0f1; +} +.cart_table thead th { + border: none !important; +} +.cart_table td:before, +.cart_table th { + font-family: var(--title-font); + color: var(--title-color); + font-weight: 600; + border: none; + padding: 27px 15px; +} +.cart_table td:before { + content: attr(data-title); + position: absolute; + left: 15px; + top: 50%; + vertical-align: top; + padding: 0; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + display: none; +} +.cart_table td { + border: none; + border-bottom: 1px solid #f3f3f3; + color: #8b8b8b; + padding: 20px 10px; + position: relative; + vertical-align: middle; +} +.cart_table .product-quantity { + color: var(--title-color); +} +.cart_table .product-quantity input { + position: relative; + top: -2px; +} +.cart_table .cart-productname { + font-weight: 400; + font-family: var(--body-font); + color: var(--title-color); +} +.cart_table .cart-productimage { + display: inline-block; + border: 2px solid var(--smoke-color); + background-color: var(--smoke-color); + border-radius: 8px; +} +.cart_table .remove { + color: var(--theme-color); + font-size: 18px; +} +.cart_table .quantity { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.cart_table td.product-quantity { + min-width: 155px; +} +.cart_table .qty-btn { + border: 2px solid var(--smoke-color) !important; + background-color: transparent; + color: var(--title-color); + padding: 0; + width: 30px; + height: 30px; + line-height: 28px; + font-size: 14px; + border-radius: 4px; +} +.cart_table .qty-btn:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.cart_table .qty-input { + vertical-align: middle; + border: 2px solid var(--smoke-color); + width: 60px; + height: 30px; + font-size: 14px; + text-align: center; + color: var(--title-color); + font-weight: 700; + margin: 0 3px; + border-radius: 4px; + padding: 0; + /* Firefox */ +} +.cart_table .qty-input::-moz-placeholder { + color: var(--title-color); +} +.cart_table .qty-input::-webkit-input-placeholder { + color: var(--title-color); +} +.cart_table .qty-input:-ms-input-placeholder { + color: var(--title-color); +} +.cart_table .qty-input::-ms-input-placeholder { + color: var(--title-color); +} +.cart_table .qty-input::placeholder { + color: var(--title-color); +} +.cart_table .qty-input::-webkit-outer-spin-button, .cart_table .qty-input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} +.cart_table .qty-input[type=number] { + -moz-appearance: textfield; +} +.cart_table .actions { + text-align: right; + vertical-align: middle; + padding-left: 20px; +} +.cart_table .actions > .th-btn { + font-size: 16px; + padding: 20px 28px; + margin-right: 15px; +} +.cart_table .actions > .th-btn:last-child { + margin-right: 0; +} +.cart_table .th-cart-coupon { + float: left; + margin: 0; + width: 455px; + max-width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} +.cart_table .th-cart-coupon input { + width: calc(100% - 200px); + margin-right: 10px; + border-radius: 30px; +} +.cart_table .th-cart-coupon .th-btn { + font-size: 16px; + padding: 20px 25px; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; +} + +.cart_totals { + --th-border-color: #E1E4E5; + border: 1px solid var(--th-border-color); +} +.cart_totals th, +.cart_totals td { + vertical-align: top; + padding: 20px 20px; + border: none; + border: 1px solid var(--th-border-color); + font-size: 14px; + color: var(--title-color); + width: 55%; + background-color: var(--white-color); +} +.cart_totals th:first-child, +.cart_totals td:first-child { + width: 45%; + background-color: var(--white-color); + font-weight: 700; + font-size: 14px; + color: var(--title-color); +} +.cart_totals .shipping-calculator-button { + display: inline-block; + border-bottom: 1px solid; + color: var(--title-color); + font-weight: 700; +} +.cart_totals .shipping-calculator-button:hover { + color: var(--theme-color); +} +.cart_totals .woocommerce-shipping-destination { + margin-bottom: 10px; +} +.cart_totals .woocommerce-shipping-methods { + margin-bottom: 0; +} +.cart_totals .shipping-calculator-form { + display: none; +} +.cart_totals .shipping-calculator-form p:first-child { + margin-top: 20px; +} +.cart_totals .shipping-calculator-form p:last-child { + margin-bottom: 0; +} +.cart_totals .amount { + font-weight: 700; +} +.cart_totals .order-total .amount { + color: var(--theme-color); +} + +.empty-notice { + margin: 40px auto; +} + +/* Medium devices */ +@media (max-width: 991px) { + .cart_table th { + padding: 23px 8px; + font-size: 14px; + } + .cart_table .cart-productname { + font-size: 14px; + } + .cart_table .th-cart-coupon { + width: 100%; + margin-bottom: 20px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } + .cart_table .actions { + text-align: center; + } + .cart_table .cart-productimage { + max-width: 100px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .cart_table { + text-align: left; + min-width: auto; + border-collapse: separate; + border-spacing: 0 20px; + border: none; + } + .cart_table thead { + display: none; + } + .cart_table td { + padding: 15px; + display: block; + width: 100%; + padding-left: 25%; + text-align: right; + border: 1px solid #f3f3f3; + border-bottom: none; + } + .cart_table td::before { + display: block; + } + .cart_table td:last-child { + border-bottom: 1px solid #f3f3f3; + } + .cart_table td.actions { + padding-left: 15px; + text-align: center; + } + .cart_table td.actions > .th-btn { + margin-top: 10px; + margin-right: 0; + display: block; + width: -webkit-max-content; + width: -moz-max-content; + width: max-content; + margin-left: auto; + margin-right: auto; + } + .cart_table td.actions > .th-btn:last-child { + margin-right: auto; + } + .cart_table .th-cart-coupon { + width: 100%; + text-align: center; + float: none; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + display: block; + padding-bottom: 10px; + } + .cart_table .th-cart-coupon input { + width: 100%; + margin-bottom: 10px; + } + .cart_totals th, + .cart_totals td { + padding: 15px 10px; + } + .cart_totals th:first-child, + .cart_totals td:first-child { + width: 17%; + line-height: 1.4; + } +} +.wc-block-components-quantity-selector { + height: 40px; +} +.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { + height: 40px; +} + +.wc-block-components-product-badge { + background: var(--theme-color); + color: var(--white-color); +} + +.wc-block-cart__submit-button { + background: var(--theme-color) !important; + color: var(--white-color) !important; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +.wc-block-grid .wc-block-grid__product-onsale, +.wc-block-grid__product-image .wc-block-grid__product-onsale { + background: var(--theme-color) !important; + color: var(--white-color) !important; + padding: 12px 20px; + border: none !important; +} + +/*------------------- 4.00. Checkout -------------------*/ +.woocommerce-checkout .form-group, +.woocommerce-checkout .form-row { + margin-bottom: 0; +} +.woocommerce-checkout .form-select, +.woocommerce-checkout .select2-container, +.woocommerce-checkout .form-control { + margin-bottom: 0; +} +.woocommerce-checkout .select2-container--open .select2-dropdown--below { + margin-top: 0; +} +.woocommerce-checkout .select2-container--open .select2-dropdown--above { + position: relative; + bottom: 0; +} +.woocommerce-checkout .select2-dropdown { + border: none; + border-top: none; +} +.woocommerce-checkout .select2-container--default .select2-selection--single { + border-radius: 27px; +} +.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered, +.woocommerce-checkout .select2-container--default .select2-selection--single .form-control:focus { + color: var(--body-color); +} +.woocommerce-checkout .shipping_address { + margin-top: -3px; +} + +.select2-container--default .select2-search--dropdown .select2-search__field { + border: 1px solid transparent; + padding: 0; +} + +.woocommerce-form-login select, +.woocommerce-form-login .form-select, +.woocommerce-form-login .form-control, +.woocommerce-form-login .select2, +.woocommerce-form-login .select2-container, +.woocommerce-form-coupon select, +.woocommerce-form-coupon .form-select, +.woocommerce-form-coupon .form-control, +.woocommerce-form-coupon .select2, +.woocommerce-form-coupon .select2-container, +.woocommerce-checkout select, +.woocommerce-checkout .form-select, +.woocommerce-checkout .form-control, +.woocommerce-checkout .select2, +.woocommerce-checkout .select2-container { + margin-bottom: var(--bs-gutter-x); +} + +#ship-to-different-address { + margin-top: 15px; + margin-bottom: 20px; +} + +.select2-container--default .select2-selection--single { + height: 56px; + border: 1px solid transparent; + background-color: var(--smoke-color); + border-radius: 27px; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered { + line-height: 56px; + padding-left: 25px; + padding-right: 25px; +} + +.woocommerce-billing-fields .form-row { + margin-bottom: 0; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow b:before { + content: "\f107"; + font-family: var(--icon-font); +} + +.select2-container--default .select2-selection--single .select2-selection__arrow b { + margin: 0; + border: none; + top: 0; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow { + height: 56px; + line-height: 56px; + margin-right: 30px; +} + +span.select2-selection.select2-selection--single:focus { + outline: none; +} + +.checkout-ordertable th, +.checkout-ordertable td { + border: 1px solid #ededed; + text-align: right; + padding: 5px 20px; + vertical-align: top; + font-size: 14px; + font-weight: 600; + color: #2c3e50; +} +.checkout-ordertable th { + font-weight: 800; + text-align: left; +} +.checkout-ordertable ul { + margin: 0; + padding: 0; +} +.checkout-ordertable .order-total .amount { + color: var(--theme-color); +} +.checkout-ordertable input[type=hidden] ~ label { + color: var(--theme-color); +} + +.woocommerce-checkout .form-group input:not(:last-child) { + margin-bottom: var(--bs-gutter-x); +} + +.woocommerce-checkout-payment { + text-align: left; +} +.woocommerce-checkout-payment ul { + margin: 0; + padding: 0; + list-style-type: none; +} +.woocommerce-checkout-payment ul li { + padding-top: 12px; + border-bottom: 1px solid #d8d8d8; + border-radius: 0; + font-size: 16px; +} +.woocommerce-checkout-payment ul input[type=radio] ~ label { + margin-bottom: 17px; + color: var(--body-color); +} +.woocommerce-checkout-payment ul input[type=radio] ~ label img { + margin-bottom: -2px; + margin-left: 10px; +} +.woocommerce-checkout-payment .place-order { + padding-top: 30px; +} +.woocommerce-checkout-payment .payment_box { + color: #a1b1bc; + background-color: #ecf0f1; + border: 1px solid #d8d8d8; + border-bottom: none; + font-size: 14px; + padding: 10px 20px; + border-radius: 4px; + display: none; +} +.woocommerce-checkout-payment .payment_box p { + margin: 0; +} + +.th-checkout-wrapper form.woocommerce-form { + margin-bottom: 30px; +} + +/* Small devices */ +@media (max-width: 767px) { + tfoot.checkout-ordertable th { + display: none; + } + .woocommerce-checkout-payment ul input[type=radio] ~ label img { + max-width: 150px; + } + .checkout-ordertable th, + .checkout-ordertable td { + padding: 5px 20px 5px 60px; + } +} +.components-button { + background-color: var(--theme-color); + border-color: var(--theme-color); + color: var(--white-color); + border: none; + -webkit-transition: all 0.4s ease-in-out; + transition: all 0.4s ease-in-out; +} +.components-button:hover { + background-color: var(--title-color); +} + +/*------------------- 4.00. Wishlist -------------------*/ +.tinv-wishlist input[type=checkbox] { + display: inline-block; + opacity: 1; + visibility: visible; + vertical-align: middle; + width: auto; + height: auto; +} +.tinv-wishlist .tinv-header { + margin-top: -0.4rem; + text-transform: capitalize; +} +.tinv-wishlist .cart-empty { + padding: 14px 25px; + font-weight: 700; + font-size: 14px; + padding-left: 45px; + border-radius: 8px; +} +.tinv-wishlist p.return-to-shop .button { + display: inline-block; + background-color: var(--theme-color); + color: #fff; + font-size: 14px; + padding: 10px 25px; + margin-top: 10px; + font-weight: 700; +} +.tinv-wishlist p.return-to-shop .button:hover { + background-color: var(--title-color); + color: var(--white-color); +} +.tinv-wishlist table { + border: none; +} +.tinv-wishlist table th { + color: var(--title-color); +} +.tinv-wishlist table td, +.tinv-wishlist table th { + padding: 15.3px 10px; + border-bottom: 1px solid var(--th-border-color); + text-align: center; +} +.tinv-wishlist table thead { + background-color: var(--smoke-color); +} +.tinv-wishlist .product-cb, +.tinv-wishlist .product-remove { + width: 40px; + text-align: center; +} +.tinv-wishlist .product-thumbnail { + width: 110px; +} +.tinv-wishlist .product-thumbnail img { + background-color: var(--smoke-color); + border-radius: 8px; +} +.tinv-wishlist .stock.in-stock { + margin-bottom: 0; +} +.tinv-wishlist ins { + text-decoration: none; +} +.tinv-wishlist .product-remove button { + border: none; + height: 22px; + width: 22px; + text-align: center; + font-size: 12px; + line-height: 22px; + border-radius: 30px; + padding-top: 0; +} +.tinv-wishlist .product-remove button i { + line-height: 22px; + font-size: 16px; +} +.tinv-wishlist .tinvwl-mobile { + display: none; +} +.tinv-wishlist .social-buttons { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + max-width: 295px; + margin-left: auto; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +.tinv-wishlist .social-buttons ul { + padding-left: 0; + margin-bottom: 0; + margin-left: auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 6px; +} +.tinv-wishlist table.tinvwl-table-manage-list { + font-size: 16px; +} +.tinv-wishlist .product-stock .stock { + display: block; +} +.tinv-wishlist .product-stock span { + display: inline; +} +.tinv-wishlist .product-stock i { + margin-right: 5px; +} +.tinv-wishlist .tinv-modal .icon_big_times { + margin-bottom: 5px; + color: var(--theme-color); +} +.tinv-wishlist button.button { + border: none; + height: 38px; + line-height: 38px; + font-size: 14px; + font-weight: 600; + background-color: var(--theme-color); + color: #fff; + padding: 1px 15px; + min-width: 140px; + border-radius: 30px; +} +.tinv-wishlist button.button i { + font-size: 18px !important; + margin-right: 3px !important; +} +.tinv-wishlist button.button:hover { + background-color: var(--title-color); + color: #fff; +} +.tinv-wishlist .tinvwl-buttons-group button i { + font-size: 14px; +} +.tinv-wishlist .tinv-modal-inner button.button { + color: var(--title-color); +} +.tinv-wishlist th, +.tinv-wishlist td.product-name { + font-size: 16px; + font-weight: 600; + font-family: var(--title-font); +} +.tinv-wishlist td.product-name a { + color: var(--body-color); +} +.tinv-wishlist td.product-name a:hover { + color: var(--theme-color); +} +.tinv-wishlist td.product-price del { + margin-left: 8px; + font-size: 0.9em; +} +.tinv-wishlist .social-buttons > span { + font-weight: 700; + margin-right: 10px; + font-family: var(--title-font); + color: var(--title-color); +} +.tinv-wishlist .social-buttons li { + display: inline-block; + margin-right: 0; +} +.tinv-wishlist .social-buttons li a.social { + background-color: var(--theme-color); + color: #fff; + width: 30px; + height: 30px; + line-height: 30px; + font-size: 14px; + display: inline-block; + text-align: center; + border-radius: 50px; + margin-left: 3px; +} +.tinv-wishlist .social-buttons li a.social:first-child { + margin-left: 0; +} +.tinv-wishlist .social-buttons li a.social i { + line-height: inherit; +} +.tinv-wishlist .social-buttons li a.social:hover { + background-color: var(--title-color); + color: var(--white-color); +} + +/* Medium devices */ +@media (max-width: 991px) { + .tinvwl-full { + display: none; + } + .tinv-wishlist .tinvwl-mobile { + display: block; + } + .tinvwl-txt { + display: inline-block !important; + } + .product-stock { + width: 40px; + text-align: center; + } +} +/* Small devices */ +@media (max-width: 767px) { + .tinv-wishlist table { + table-layout: fixed; + border-bottom: 1px solid var(--th-border-color); + } + .tinv-wishlist table.tinvwl-table-manage-list tbody td.product-remove, + .tinv-wishlist table.tinvwl-table-manage-list thead th:not(.product-name) { + display: none; + } + .tinv-wishlist table td, + .tinv-wishlist table th { + border: 1px solid var(--th-border-color); + } + .tinv-wishlist table.tinvwl-table-manage-list tbody td { + display: block; + width: 100% !important; + text-align: center; + } + .product-name { + text-align: center; + } + .tinv-wishlist table td, + .tinv-wishlist table th { + border-bottom: none; + } + .tinv-wishlist table tfoot { + border-bottom: 1px solid var(--th-border-color); + } + .tinv-wishlist .social-buttons { + max-width: 100%; + margin-left: unset; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } + .tinv-wishlist .social-buttons ul { + margin-left: unset; + margin-top: 5px; + } + .tinvwl-txt { + display: inline-block !important; + } +} +/*------------------- 4.00. Contact -------------------*/ +/* contact 1 ---------------------------------- */ +.input-light .form-select, +.input-light .form-control { + background-color: var(--light-color); + border-radius: 28px; +} +.input-light .form-group > i { + background-color: var(--light-color); +} + +.img-box3 { + position: relative; + margin-left: -300px; + margin-right: 36px; + /* Medium Large devices */ + /* Large devices */ + /* Medium devices */ + /* Extra small devices */ +} +.img-box3 .img1 { + margin-right: 160px; +} +.img-box3 .img1 img { + width: 100%; +} +.img-box3 .contact-process-wrap { + position: absolute; + right: 0; + bottom: 50%; + z-index: 2; + -webkit-transform: translateY(50%); + transform: translateY(50%); +} +@media (max-width: 1299px) { + .img-box3 { + margin-right: 0; + } +} +@media (max-width: 1199px) { + .img-box3 { + margin-left: 0; + } + .img-box3 .img1 { + margin-right: 0; + } + .img-box3 .img1 img { + max-height: 600px; + -o-object-fit: cover; + object-fit: cover; + } + .img-box3 .contact-process-wrap { + position: relative; + bottom: unset; + right: unset; + -webkit-transform: none; + transform: none; + max-width: 100%; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; + margin: -100px auto -50px auto; + padding: 40px 10px; + } + .img-box3 .contact-process-wrap:before { + display: none; + } +} +@media (max-width: 991px) { + .img-box3 .contact-process-wrap { + grid-template-columns: repeat(2, 1fr); + gap: 32px 10px; + margin: -100px auto -20px auto; + padding: 40px 10px; + } +} +@media (max-width: 575px) { + .img-box3 .contact-process-wrap { + grid-template-columns: repeat(1, 1fr); + padding: 40px 20px; + } +} + +.contact-process { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 32px; + margin-bottom: 78px; + /* Large devices */ +} +.contact-process-wrap { + background-color: #101840; + padding: 48px; + border-radius: 24px; + max-width: 495px; + position: relative; + z-index: 2; +} +.contact-process-wrap:before { + content: ""; + position: absolute; + top: 70px; + left: 92px; + height: calc(100% - 160px); + border-left: 1px dashed var(--light-color); +} +.contact-process-wrap.no-bg { + padding: 0; + background-color: transparent; + /* Large devices */ +} +.contact-process-wrap.no-bg:before { + top: 70px; + left: 44px; + height: calc(100% - 150px); + border-left: 1px dashed #666; +} +@media (max-width: 1199px) { + .contact-process-wrap.no-bg { + margin-left: auto; + margin-right: auto; + } + .contact-process-wrap.no-bg:before { + display: none; + } + .contact-process-wrap.no-bg .contact-process { + margin-bottom: 32px !important; + } + .contact-process-wrap.no-bg .contact-process:last-child { + margin-bottom: 0 !important; + } +} +.contact-process:last-child { + margin-bottom: 0; +} +.contact-process .box-number { + width: 88px; + height: 88px; + line-height: 88px; + font-family: var(--title-font); + font-size: 18px; + font-weight: 600; + color: var(--white-color); + text-align: center; + border-radius: 99px; + background-color: rgba(244, 118, 41, 0.2); + position: relative; + z-index: 2; +} +.contact-process .box-number:before { + content: ""; + position: absolute; + inset: 18px; + background-color: var(--theme-color); + border-radius: inherit; + z-index: -1; +} +.contact-process .box-title { + color: var(--white-color); + margin-bottom: 12px; +} +.contact-process .box-text { + font-size: 14px; + color: var(--light-color); +} +@media (max-width: 1199px) { + .contact-process { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + margin-bottom: 0; + gap: 24px; + } +} + +/* Contact 2 ------------------------------------- */ +.contact-form2 .form-control, +.contact-form2 .form-select { + background-color: transparent; + border: 1px solid var(--light-color); + border-radius: 0; +} +.contact-form2 .form-group > i { + background-color: var(--white-color); +} + +.contact-area { + background-color: var(--white-color); + padding: 80px; + /* Small devices */ + /* Extra small devices */ +} +@media (max-width: 767px) { + .contact-area { + padding: 40px; + } +} +@media (max-width: 575px) { + .contact-area { + padding: 20px; + } +} +.contact-area.area-rounded { + border-radius: 0 0 40px 40px; + /* Medium devices */ +} +.contact-area.area-rounded .contact-media-area { + border-radius: 24px; +} +@media (max-width: 991px) { + .contact-area.area-rounded { + border-radius: 0 0 20px 20px; + } + .contact-area.area-rounded .contact-media-area { + border-radius: 16px; + } +} +.contact-area.area-rounded .contact-form2 .form-control, +.contact-area.area-rounded .contact-form2 .form-select { + border-radius: 8px; +} +.contact-area.area-shape1 { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + border-radius: 0 0 16px 0; + /* Medium devices */ +} +.contact-area.area-shape1 .contact-media-area { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + border-radius: 16px; +} +.contact-area.area-shape1 .contact-form2 .form-control, +.contact-area.area-shape1 .contact-form2 .form-select { + border-radius: 8px; +} +@media (max-width: 991px) { + .contact-area.area-shape1 { + -webkit-mask-image: none; + mask-image: none; + border-radius: 0 0 16px 16px; + } + .contact-area.area-shape1 .contact-media-area { + -webkit-mask-image: none; + mask-image: none; + } +} + +.home5_form { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + border-radius: 0 0 16px 0; + /* Medium devices */ +} +.home5_form .contact-media-area { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + border-radius: 16px; +} +@media (max-width: 991px) { + .home5_form { + -webkit-mask-image: none; + mask-image: none; + border-radius: 0 0 16px 16px; + } + .home5_form .contact-media-area { + -webkit-mask-image: none; + mask-image: none; + } +} + +.home4_contact .contact-media-area { + border-radius: 24px; +} + +.contact-media { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 16px; + margin-bottom: 24px; +} +.contact-media-area { + background-color: var(--title-color); + padding: 48px; + height: 100%; + /* Extra small devices */ +} +.contact-media-area .contact-info-text { + font-size: 18px; + font-weight: 600; + color: var(--white-color); + text-transform: capitalize; + margin-bottom: -0.2em; + max-width: 280px; +} +@media (max-width: 575px) { + .contact-media-area { + padding: 20px; + } +} +.contact-media-wrap { + margin-bottom: 48px; +} +.contact-media-wrap .box-title { + font-size: 20px; + color: var(--theme-color); + text-transform: uppercase; + margin-bottom: 26px; +} +.contact-media .icon-btn { + --btn-size: 40px; + min-width: 40px; + background-color: transparent; + color: var(--theme-color); + border: 1px solid var(--white-color); + border-radius: 8px; + font-size: 16px; +} +.contact-media .box-text { + color: var(--white-color); + max-width: 206px; + margin-top: -0.4em; +} +.contact-media .box-text a { + color: inherit; +} +.contact-media .box-text a:hover { + color: var(--theme-color); +} +.contact-media .box-label { + font-size: 16px; + color: var(--white-color); + font-weight: 700; + margin-bottom: 8px; + margin-top: -0.2em; +} + +.contact-sec5 { + background-repeat: no-repeat; + /* Hight Resoulation devices */ + /* Large devices */ +} +@media (min-width: 1922px) { + .contact-sec5 { + background-size: 100% 100%; + } +} +@media (max-width: 1199px) { + .contact-sec5 { + background-position: right -300px center; + } +} + +.input-transparent .form-control, +.input-transparent .form-select { + border: 1px solid var(--white-color); + border-radius: 8px; + background-color: transparent; + color: var(--white-color); +} +.input-transparent .form-control::-moz-placeholder, +.input-transparent .form-select::-moz-placeholder { + color: var(--white-color); +} +.input-transparent .form-control::-webkit-input-placeholder, +.input-transparent .form-select::-webkit-input-placeholder { + color: var(--white-color); +} +.input-transparent .form-control:-ms-input-placeholder, +.input-transparent .form-select:-ms-input-placeholder { + color: var(--white-color); +} +.input-transparent .form-control::-webkit-input-placeholder, .input-transparent .form-select::-webkit-input-placeholder { + color: var(--white-color); +} +.input-transparent .form-control::-moz-placeholder, .input-transparent .form-select::-moz-placeholder { + color: var(--white-color); +} +.input-transparent .form-control:-ms-input-placeholder, .input-transparent .form-select:-ms-input-placeholder { + color: var(--white-color); +} +.input-transparent .form-control::-ms-input-placeholder, .input-transparent .form-select::-ms-input-placeholder { + color: var(--white-color); +} +.input-transparent .form-control::placeholder, +.input-transparent .form-select::placeholder { + color: var(--white-color); +} +.input-transparent .form-select { + background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); +} +.input-transparent .form-select option { + background-color: var(--title-color); +} + +/* Contact Page ---------------------------------- */ +.contact-form { + border-radius: 16px; + background-color: var(--white-color); + padding: 40px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .contact-form { + padding: 20px; + } +} +.contact-form .sec-title { + margin-bottom: 30px; + /* Medium devices */ +} +@media (max-width: 991px) { + .contact-form .sec-title { + margin-bottom: 25px; + text-align: center; + } +} +.contact-form .row { + --bs-gutter-x: 24px; +} +.contact-form .form-control, +.contact-form .form-select { + border: 1px solid var(--light-color); + background-color: var(--white-color); +} +.contact-form .form-group > i { + background-color: var(--white-color); +} + +.rounded-20 { + border-radius: 20px; + overflow: hidden; +} + +.form-text { + font-size: 16px; +} + +.contact-map { + line-height: 0px; +} +.contact-map iframe { + width: 100%; + height: 400px; + /* Large devices */ + /* Medium devices */ +} +@media (max-width: 1199px) { + .contact-map iframe { + height: 400px; + } +} +@media (max-width: 991px) { + .contact-map iframe { + height: 350px; + } +} + +/*------------------- 4.00. About -------------------*/ +/* About 1 ---------------------------------- */ +.img-box1 { + margin-left: 36px; + position: relative; + z-index: 2; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .img-box1 { + margin-left: 0; + } +} +.img-box1 .img1 { + border-radius: 48px; + overflow: hidden; + /* Small devices */ +} +.img-box1 .img1 img { + width: 100%; +} +@media (max-width: 767px) { + .img-box1 .img1 { + border-radius: 30px; + } +} +.img-box1 .box-badge { + position: absolute; + top: 80px; + right: -77px; + /* Extra large devices */ + /* Medium Large devices */ +} +@media (max-width: 1500px) { + .img-box1 .box-badge { + right: -30px; + } +} +.img-box1 .box-badge .spin-text { + color: var(--white-color); + position: absolute; + right: -50%; + top: -50%; + -webkit-animation: spinText 8s linear infinite; + animation: spinText 8s linear infinite; +} +.img-box1 .box-badge .spin-text svg { + -webkit-transform: scale(1.45); + transform: scale(1.45); +} +@media (max-width: 1399px) { + .img-box1 .box-badge { + right: 0; + } +} +.img-box1 .box-icon { + width: 154px; + height: 154px; + line-height: 154px; + background-color: var(--theme-color); + border: 2px solid var(--white-color); + border-radius: 999px; + text-align: center; +} +.img-box1 .dot-shape { + position: absolute; + bottom: 0; + right: -50px; + -webkit-animation: spin 10s linear infinite; + animation: spin 10s linear infinite; +} + +@-webkit-keyframes spinText { + from { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } + to { + -webkit-transform: rotate(0); + transform: rotate(0); + } +} + +@keyframes spinText { + from { + -webkit-transform: rotate(-360deg); + transform: rotate(-360deg); + } + to { + -webkit-transform: rotate(0); + transform: rotate(0); + } +} +.call-btn { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; + text-align: left; +} +.call-btn .play-btn { + --icon-size: 48px; +} +.call-btn .box-label { + color: var(--theme-color); + font-weight: 500; + margin-bottom: 0; +} +.call-btn .box-link { + margin-bottom: 0; +} +.call-btn .box-link a { + color: inherit; +} +.call-btn .box-link a:hover { + color: var(--theme-color); +} + +.about-feature { + padding: 24px; + border-radius: 16px; + border: 1px solid rgba(255, 255, 255, 0.3); + /* Large devices */ +} +.about-feature-wrap { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + margin-bottom: 48px; + max-width: 650px; + /* Large devices */ + /* Extra small devices */ +} +@media (max-width: 1199px) { + .about-feature-wrap { + margin-left: auto; + margin-right: auto; + } +} +@media (max-width: 575px) { + .about-feature-wrap { + grid-template-columns: repeat(1, 1fr); + } +} +@media (max-width: 1199px) { + .about-feature { + text-align: center; + } +} +.about-feature .box-title { + margin-bottom: 8px; + font-weight: 500; + color: var(--white-color); + margin-bottom: -0.3em; + /* Large devices */ +} +@media (max-width: 1199px) { + .about-feature .box-title { + max-width: 280px; + margin-left: auto; + margin-right: auto; + } +} +.about-feature .box-icon { + margin-bottom: 16px; +} +.about-feature:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.mb-42 { + margin-bottom: 42px; +} + +/* About 2 ---------------------------------- */ + +.img-box4 { + position: relative; + z-index: 2; + margin-left: auto; + margin-right: auto; + aspect-ratio: 1.178/1; +} + +/* About 3 ---------------------------------- */ +.rounded-img1 img { + border-radius: 999px; + max-height: 555px; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: center; + object-position: center; +} + +.btn-mr { + margin-right: -100px; + /* Large devices */ +} +@media (max-width: 1199px) { + .btn-mr { + margin-right: auto; + } +} + +/* About 4 ---------------------------------- */ +.img-box6 { + position: relative; + z-index: 2; + margin-right: 36px; + /* Extra large devices */ + /* Medium Large devices */ + /* Medium Large devices */ + /* Large devices */ + /* Extra small devices */ + /* Extra small devices */ +} +.img-box6 .img1 img { + width: 100%; +} +.img-box6 .year-box { + position: absolute; + bottom: 15%; + left: -68px; + background-color: var(--title-color); + width: 202px; + height: 224px; + display: grid; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.img-box6 .year-box .box-number { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + font-size: 80px; + font-weight: 700; + color: var(--white-color); + opacity: 0.3; +} +.img-box6 .year-box .box-text { + font-size: 18px; + color: var(--white-color); +} +@media (max-width: 1500px) { + .img-box6 .year-box { + left: -50px; + } +} +@media (max-width: 1399px) { + .img-box6 .year-box { + left: 0px; + } +} +@media (max-width: 1299px) { + .img-box6 { + margin-right: 0; + } +} +@media (max-width: 1199px) { + .img-box6 { + max-width: 760px; + margin-left: auto; + margin-right: auto; + } +} +@media (max-width: 575px) { + .img-box6 .year-box { + left: -12px; + bottom: 5%; + } +} +@media (max-width: 375px) { + .img-box6 .year-box { + width: 160px; + height: 160px; + bottom: 0; + left: 0; + } + .img-box6 .year-box .box-number { + font-size: 70px; + } + .img-box6 .year-box .box-text { + font-size: 14px; + } +} + +/* About 5 ---------------------------------- */ +.img-box5 { + position: relative; + z-index: 2; + /* Large devices */ + /* Small devices */ +} +.img-box5 .img1 { + width: 100%; +} +.img-box5 .box-badge { + position: absolute; + top: 80px; + right: -77px; + /* Medium Large devices */ +} +.img-box5 .box-badge .spin-text { + color: var(--title-color); + position: absolute; + right: -50%; + top: -50%; + -webkit-animation: spinText 8s linear infinite; + animation: spinText 8s linear infinite; +} +.img-box5 .box-badge .spin-text text { + font-weight: 600; + fill: var(--title-color); +} +.img-box5 .box-badge .spin-text svg { + -webkit-transform: scale(1.45); + transform: scale(1.45); +} +@media (max-width: 1399px) { + .img-box5 .box-badge { + right: 0; + } +} +.img-box5 .box-icon { + width: 154px; + height: 154px; + line-height: 154px; + background-color: var(--title-color); + border: 2px solid var(--white-color); + border-radius: 999px; + text-align: center; +} +.img-box5 .customer-box { + position: absolute; + bottom: 0; + left: 0; +} +@media (max-width: 1199px) { + .img-box5 { + max-width: 700px; + margin-left: auto; + margin-right: auto; + } +} +@media (max-width: 767px) { + .img-box5 .box-badge { + top: 0; + -webkit-transform: scale(0.7); + transform: scale(0.7); + } +} + +.customer-box { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 10px; + background-color: var(--theme-color); + border-radius: 24px; + padding: 20px 51px; + /* Small devices */ +} +.customer-box .box-title { + font-size: 28px; + color: var(--white-color); + margin-bottom: 0px; +} +.customer-box .box-text { + color: var(--white-color); +} +@media (max-width: 767px) { + .customer-box { + padding: 12px 19px; + } +} + +.about-media { + padding: 32px; + border-radius: 16px; + border: 1px solid var(--light-color); + text-align: left; +} +.about-media-wrap { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + margin-bottom: 48px; + max-width: 650px; + /* Large devices */ + /* Extra small devices */ +} +@media (max-width: 1199px) { + .about-media-wrap { + margin-left: auto; + margin-right: auto; + } +} +@media (max-width: 575px) { + .about-media-wrap { + grid-template-columns: repeat(1, 1fr); + } +} +.about-media .box-title { + margin-bottom: 8px; +} +.about-media .box-icon { + width: 64px; + height: 64px; + line-height: 64px; + text-align: center; + background-color: var(--title-color); + border-radius: 99px; + margin-bottom: 32px; +} +.about-media:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +/*------------------- 4.00. Team -------------------*/ +/* Team global ---------------------------------- */ +.th-team { + position: relative; +} +.th-team .box-img { + position: relative; +} +.th-team .box-desig { + display: block; + margin-bottom: -0.4em; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + color: var(--theme-color); +} +.th-team .th-social { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.th-team .th-social a { + --icon-size: 40px; + background-color: var(--white-color); + color: var(--theme-color); +} +.th-team .th-social a:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.th-team .box-title { + margin-bottom: 0; +} + +/* Team Card ---------------------------------- */ +.team-card { + position: relative; + text-align: center; +} +.team-card .box-social { + width: 60px; + padding: 9px 10px; + background: rgba(255, 255, 255, 0.3); + border: 1px solid var(--white-color); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + border-radius: 99px; + margin: -30px auto 24px auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + overflow: hidden; + position: relative; +} +.team-card .box-btn { + height: 40px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + position: absolute; + top: calc(50% - 20px); + left: calc(50% - 20px); +} +.team-card .box-btn i { + width: 40px; + height: 40px; + line-height: 40px; + font-size: 22px; + background-color: var(--white-color); + color: var(--theme-color); + text-align: center; + border-radius: 30px; +} +.team-card .th-social { + visibility: hidden; + opacity: 0; + -webkit-transform-origin: center; + transform-origin: center; + height: 40px; + -webkit-transform: scaleX(0); + transform: scaleX(0); + white-space: nowrap; +} +.team-card .th-social a { + margin-right: 2px; + color: var(--theme-color); + /* Large devices */ +} +@media (max-width: 1199px) { + .team-card .th-social a { + margin-right: 5px; + } +} +.team-card .th-social a:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.team-card .th-social a:last-child { + margin-right: 0; +} +.team-card .box-content { + padding: 0 12px 24px 12px; + position: absolute; + bottom: 24px; + left: 24px; + right: 24px; + z-index: 2; + /* Extra small devices */ +} +.team-card .box-content:before { + content: ""; + position: absolute; + inset: 0; + background: rgba(16, 24, 64, 0.8); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + z-index: -1; + border-radius: 16px; +} +@media (max-width: 375px) { + .team-card .box-content { + bottom: 16px; + left: 16px; + right: 16px; + } +} +.team-card .box-img { + border-radius: 24px; +} +.team-card .box-desig { + color: var(--white-color); +} +.team-card .box-title { + color: var(--white-color); + margin-bottom: 8px; + font-weight: 600; +} +.team-card.active .box-img img, .team-card:hover .box-img img { + -webkit-transform: scale(1.08); + transform: scale(1.08); +} +.team-card.active .box-btn, .team-card:hover .box-btn { + visibility: hidden; + opacity: 1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + width: 0; +} +.team-card.active .box-social, .team-card:hover .box-social { + width: 202px; +} +.team-card.active .th-social, .team-card:hover .th-social { + -webkit-transform: scaleX(1); + transform: scaleX(1); + visibility: visible; + opacity: 1; +} + +/* Team Box ---------------------------------- */ +.team-box { + text-align: center; + background-color: var(--theme-color); +} +.team-box .box-img { + background-image: -webkit-gradient(linear, left top, right top, from(var(--smoke-color)), to(var(--white-color))); + background-image: linear-gradient(to right, var(--smoke-color), var(--white-color)); + -webkit-clip-path: polygon(100% 0, 100% 100%, 50% calc(100% - 32px), 0 100%, 0 0); + clip-path: polygon(100% 0, 100% 100%, 50% calc(100% - 32px), 0 100%, 0 0); +} +.team-box .box-img img { + min-height: 280px; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: top center; + object-position: top center; +} +.team-box .box-desig { + color: var(--white-color); + max-width: 260px; + margin: 0 auto 25px auto; +} +.team-box .box-title { + font-size: 28px; + color: var(--white-color); + margin-bottom: 6px; +} +.team-box .box-title a:hover { + color: var(--title-color); +} +.team-box .box-content { + padding: 4px 10px 32px 10px; +} +.team-box .box-social { + width: 60px; + padding: 4px 5px; + background: var(--theme-color); + border-radius: 99px; + margin: -60px auto 24px auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + overflow: hidden; + position: relative; +} +.team-box .box-btn { + height: 52px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + position: absolute; + top: calc(50% - 26px); + left: calc(50% - 26px); +} +.team-box .box-btn i { + width: 52px; + height: 52px; + line-height: 52px; + font-size: 22px; + background-color: var(--white-color); + color: var(--theme-color); + text-align: center; + border-radius: 30px; +} +.team-box .th-social { + visibility: hidden; + opacity: 0; + -webkit-transform-origin: center; + transform-origin: center; + height: 52px; + -webkit-transform: scaleX(0); + transform: scaleX(0); + white-space: nowrap; +} +.team-box .th-social a { + --icon-size: 52px; + font-size: 18px; + margin-right: 2px; + color: var(--white-color); + background-color: var(--theme-color); +} +.team-box .th-social a:hover { + background-color: var(--title-color); + color: var(--white-color); +} +.team-box .th-social a:last-child { + margin-right: 0; +} +.team-box:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.team-box:hover .box-btn { + visibility: hidden; + opacity: 1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + width: 0; +} +.team-box:hover .box-social { + width: 236px; + background-color: var(--white-color); +} +.team-box:hover .th-social { + -webkit-transform: scaleX(1); + transform: scaleX(1); + visibility: visible; + opacity: 1; +} + +/* Team Grid ---------------------------------- */ +.team-grid { + position: relative; + z-index: 2; + border-radius: 24px; + text-align: center; + overflow: hidden; +} +.team-grid .box-content { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + padding: 92px 12px 32px 12px; + -webkit-mask-position: top center; + mask-position: top center; + background-color: var(--white-color); + margin-top: -74px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .team-grid .box-content { + -webkit-mask-size: 110% 103%; + mask-size: 110% 103%; + } +} +.team-grid .box-title { + margin-bottom: 8px; +} +.team-grid .box-img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + -webkit-mask-position: bottom center; + mask-position: bottom center; + background-color: var(--white-color); +} +.team-grid .box-desig { + color: var(--body-color); + max-width: 260px; + margin: 0 auto 25px auto; +} +.team-grid .box-social { + width: 60px; + padding: 4px 5px; + background: var(--white-color); + border-radius: 99px; + margin: -27px auto 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + overflow: hidden; + position: relative; + z-index: 3; +} +.team-grid .box-btn { + height: 52px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + position: absolute; + top: calc(50% - 26px); + left: calc(50% - 26px); +} +.team-grid .box-btn i { + width: 52px; + height: 52px; + line-height: 52px; + font-size: 22px; + background-color: var(--theme-color); + color: var(--white-color); + text-align: center; + border-radius: 30px; +} +.team-grid .th-social { + visibility: hidden; + opacity: 0; + -webkit-transform-origin: center; + transform-origin: center; + height: 52px; + -webkit-transform: scaleX(0); + transform: scaleX(0); + white-space: nowrap; +} +.team-grid .th-social a { + --icon-size: 52px; + font-size: 18px; + margin-right: 5px; + color: var(--theme-color); + background-color: var(--white-color); +} +.team-grid .th-social a:hover { + background-color: var(--title-color); + color: var(--white-color); +} +.team-grid .th-social a:last-child { + margin-right: 0; +} +.team-grid:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.team-grid:hover .box-btn { + visibility: hidden; + opacity: 1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + width: 0; +} +.team-grid:hover .box-social { + width: 236px; + background-color: var(--theme-color); +} +.team-grid:hover .th-social { + -webkit-transform: scaleX(1); + transform: scaleX(1); + visibility: visible; + opacity: 1; +} + +/* Team Block ---------------------------------- */ +.team-block { + border-radius: 16px; + text-align: center; + overflow: hidden; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + background-color: var(--white-color); + padding: 24px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .team-block { + padding: 20px; + } +} +.team-block .box-content { + padding: 0 12px 48px 12px; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + z-index: 2; +} +.team-block .box-content:before { + content: ""; + position: absolute; + inset: 0; + background: rgba(16, 24, 64, 0.8); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + z-index: -1; +} +.team-block .box-title { + color: var(--white-color); + margin-bottom: 2px; + margin-top: 28px; +} +.team-block .box-img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + border-radius: 12px; +} +.team-block .box-shape { + position: absolute; + bottom: 22px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: -1; +} +.team-block .box-social { + width: 68px; + padding: 8px 5px; + margin: -35px auto 0 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + overflow: hidden; + position: relative; + z-index: 3; +} +.team-block .box-btn { + width: 62px; + height: 70px; + line-height: 70px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + position: absolute; + top: calc(50% - 35px); + left: calc(50% - 31px); +} +.team-block .th-social { + visibility: hidden; + opacity: 0; + -webkit-transform-origin: center; + transform-origin: center; + height: 54px; + -webkit-transform: scaleX(0); + transform: scaleX(0); + white-space: nowrap; +} +.team-block .th-social a { + height: 54px; + width: 48px; + line-height: 54px; + font-size: 18px; + margin-right: 0; + color: var(--white-color); + background-color: var(--theme-color); + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.team-block .th-social a:hover { + background-color: var(--title-color); + color: var(--white-color); +} +.team-block .th-social a:last-child { + margin-right: 0; +} +.team-block:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.team-block:hover .box-btn { + visibility: hidden; + opacity: 1; + -webkit-transform: scaleX(0); + transform: scaleX(0); + width: 0; +} +.team-block:hover .box-social { + width: 236px; +} +.team-block:hover .th-social { + -webkit-transform: scaleX(1); + transform: scaleX(1); + visibility: visible; + opacity: 1; +} + +/* Team Element ---------------------------------- */ +.team-element { + padding-bottom: 65px; + margin-bottom: 26px; +} +.team-element .arrow-icon { + --btn-size: 60px; + font-size: 20px; + position: absolute; + top: 0; + right: 0; + z-index: 3; + background-color: var(--title-color); + color: var(--white-color); +} +.team-element .arrow-icon:hover { + background-color: var(--theme-color); + -webkit-transform: rotate(45deg); + transform: rotate(45deg); +} +.team-element .whatsapp { + position: absolute; + bottom: -28px; + left: calc(50% - 28px); + border: 2px solid var(--white-color); + background-color: var(--theme-color); + color: var(--white-color); + line-height: 52px; +} +.team-element .whatsapp:hover { + background-color: var(--title-color); +} +.team-element .box-img { + border-radius: 24px; + background-color: var(--white-color); + position: relative; + z-index: 2; +} +.team-element .box-img:after { + content: url('data:image/svg+xml,'); + position: absolute; + right: -1px; + top: -1px; +} +.team-element .box-content { + padding: 24px 12px 53px 12px; + position: absolute; + bottom: 0; + left: 22px; + right: 22px; + z-index: 2; + background-color: var(--title-color); + border: 2px solid var(--white-color); + border-radius: 20px; +} +.team-element .box-title { + color: var(--white-color); + margin-bottom: 2px; +} +.team-element .box-desig { + color: var(--white-color); +} +.team-element:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Team Details ---------------------------------- */ +.about-card { + margin-left: 50px; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .about-card { + margin-left: 0; + } +} +.about-card .box-desig { + color: var(--theme-color); + margin-bottom: 0; +} +.about-card hr { + margin: 33px 0; + color: inherit; + background-color: var(--th-border-color); + opacity: 1; +} + +.team-counter { + text-align: center; + border: 1px solid var(--th-border-color); + border-radius: 12px; + padding: 65px 10px; +} +.team-counter-wrap { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 40px; + margin-top: 40px; + /* Medium Large devices */ + /* Large devices */ +} +@media (max-width: 1299px) { + .team-counter-wrap { + gap: 24px; + } +} +@media (max-width: 1199px) { + .team-counter-wrap { + grid-template-columns: repeat(2, 1fr); + } +} +.team-counter .box-title { + margin-bottom: 2px; +} +.team-counter .box-text { + font-size: 18px; + color: var(--title-color); +} + +.position-relative .team-card.active { + position: sticky; + top: 100px; + left: 0; +} + +.team-contact { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 20px; + padding: 32px; + border: 1px solid var(--th-border-color); + border-radius: 12px; + /* Medium Large devices */ + /* Extra small devices */ +} +@media (max-width: 1299px) { + .team-contact { + padding: 24px; + } +} +@media (max-width: 375px) { + .team-contact { + padding: 16px; + } +} +.team-contact .icon-btn { + --btn-size: 70px; + font-size: 20px; + background-color: var(--theme-color); + border: none; + color: var(--white-color); +} +.team-contact .box-text { + max-width: 230px; +} +.team-contact .box-text a { + color: inherit; + display: block; + max-width: -webkit-fit-content; + max-width: -moz-fit-content; + max-width: fit-content; +} +.team-contact .box-text a:hover { + color: var(--theme-color); +} +.team-contact .box-title { + font-size: 20px; + margin-bottom: 2px; +} + +.skill-feature { + text-align: left; +} +.skill-feature:not(:last-child) { + margin-bottom: 30px; +} +.skill-feature .box-title, +.skill-feature .progress-value { + font-size: 16px; + font-weight: 600; + margin-bottom: 10px; + margin-top: -0.3em; + font-family: var(--title-font); + color: var(--title-color); +} +.skill-feature .progress { + position: relative; + height: 6px; + background-color: var(--th-border-color); + overflow: visible; + border-radius: 0; + border-radius: 9px; +} +.skill-feature .progress-bar { + background-color: var(--theme-color); + height: 100%; + border-radius: inherit; + overflow: visible; + position: relative; +} +.skill-feature .progress-value { + position: absolute; + top: -30px; + right: -8px; +} + +/*------------------- 4.00. Testimonial -------------------*/ +/* Testimonial Card ---------------------------------- */ +.box-profile { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 16px; +} + +.testi-card { + position: relative; + padding: 32px 0 32px 32px; + /* Extra small devices */ +} +.testi-card .box-text { + font-size: 18px; + color: var(--white-color); +} +.testi-card .box-img { + position: absolute; + bottom: 0; + left: 0; + height: 100%; + border-radius: 24px; + max-width: calc(100% - 32px); +} +.testi-card .box-img img { + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +.testi-card .box-content { + max-width: 415px; + margin-left: auto; + padding: 30px; + position: relative; + z-index: 3; + border-radius: 16px; +} +.testi-card .box-content:before { + content: ""; + position: absolute; + inset: 0; + border-radius: inherit; + background-color: var(--title-color); + border-right: 4px solid var(--theme-color); + z-index: -1; +} +.testi-card .box-review { + color: var(--theme-color); + font-size: 18px; + margin-bottom: 13px; +} +.testi-card .box-review i { + margin-right: 8px; +} +.testi-card .box-review i:last-child { + margin-right: 0; +} +.testi-card .box-profile { + margin-top: 34px; +} +.testi-card .box-avater { + border-radius: 99px; + border: 2px solid var(--white-color); + overflow: hidden; +} +.testi-card .box-title { + color: var(--theme-color); + margin-bottom: 2px; +} +.testi-card .box-desig { + color: var(--white-color); + margin-bottom: -0.45em; +} +.testi-card.style2 .box-img { + border-radius: 0; +} +.testi-card.style2 .box-content { + border-radius: 0; +} +.testi-card.style2 .box-content:before { + -webkit-transform: skew(-8deg) translateX(-24px); + transform: skew(-8deg) translateX(-24px); + /* Extra small devices */ +} +@media (max-width: 575px) { + .testi-card.style2 .box-content:before { + -webkit-transform: none; + transform: none; + } +} +@media (max-width: 375px) { + .testi-card { + padding: 0; + } + .testi-card .box-img { + display: none; + } + .testi-card .box-text { + font-size: 16px; + } + .testi-card .box-title { + font-size: 21px; + } + .testi-card .box-content { + padding: 20px; + } +} + +/* Testimonial Box ---------------------------------- */ +.testi-box { + position: relative; + /* Large devices */ +} +.testi-box-area { + position: relative; + z-index: 3; + padding: 40px 35px 40px 0; + /* Large devices */ +} +@media (max-width: 1199px) { + .testi-box-area { + text-align: center; + padding: 80px 0 120px 0; + } +} +.testi-box-tab { + position: absolute; + bottom: 50%; + -webkit-transform: translateY(50%); + transform: translateY(50%); + right: -70px; + z-index: 3; + background-color: var(--title-color); + padding: 36px 10px 10px 10px; + border-radius: 99px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + /* Large devices */ + /* Large devices */ +} +@media (max-width: 1199px) { + .testi-box-tab { + margin-bottom: 40px; + } +} +.testi-box-tab .tab-btn { + border-radius: 99px; + overflow: hidden; + cursor: pointer; + margin-top: -26px; + position: relative; + z-index: 1; + padding: 3px; + background-color: var(--title-color); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; +} +.testi-box-tab .tab-btn img { + -webkit-filter: blur(1.5px); + filter: blur(1.5px); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.testi-box-tab .tab-btn.active { + background-color: var(--white-color); + z-index: 2; +} +.testi-box-tab .tab-btn.active img { + -webkit-filter: none; + filter: none; +} +.testi-box-tab .tab-btn img { + border-radius: 99px; +} +@media (max-width: 1199px) { + .testi-box-tab { + position: relative; + bottom: 0; + right: auto; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} +.testi-box-tab .indicator { + display: none; +} +@media (max-width: 1199px) { + .testi-box { + text-align: center; + } +} +.testi-box .box-text { + font-size: 20px; + font-weight: 500; + line-height: 1.5; + margin-bottom: 32px; + color: var(--white-color); + max-width: 650px; + /* Large devices */ +} +@media (max-width: 1199px) { + .testi-box .box-text { + max-width: 800px; + margin-left: auto; + margin-right: auto; + } +} +.testi-box .box-review { + color: var(--theme-color); + font-size: 18px; + margin-bottom: 30px; + margin-top: -4px; +} +.testi-box .box-review i { + margin-right: 8px; +} +.testi-box .box-review i:last-child { + margin-right: 0; +} +.testi-box .box-title { + font-size: 28px; + color: var(--white-color); + margin-bottom: 5px; +} +.testi-box .box-desig { + color: var(--white-color); + margin-bottom: -0.45em; +} + +.testi-sec3 { + background-color: var(--title-color); + background-size: auto; + background-position: top left; + overflow: hidden; +} + +.testi-img1 { + margin-right: -300px; + /* Large devices */ +} +@media (max-width: 1199px) { + .testi-img1 { + margin-right: 0; + } +} +.testi-img1 img { + width: 100%; +} + +/* Testimonial Grid ---------------------------------- */ +.testi-grid { + position: relative; + z-index: 2; + text-align: left; + padding: 48px; + /* Large devices */ + /* Extra small devices */ + /* Extra small devices */ + /* Extra small devices */ +} +.testi-grid:before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--white-color); + border-radius: 16px; + z-index: -1; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.testi-grid .box-profile { + margin-bottom: 40px; +} +.testi-grid .box-text { + font-size: 20px; + font-weight: 500; + line-height: 1.5; + margin-bottom: -8px; +} +.testi-grid .box-review { + color: var(--theme-color); + font-size: 18px; + margin-bottom: 21px; + margin-top: -4px; +} +.testi-grid .box-review i { + margin-right: 8px; +} +.testi-grid .box-review i:last-child { + margin-right: 0; +} +.testi-grid .box-title { + font-size: 28px; + margin-bottom: 5px; +} +.testi-grid .box-desig { + color: var(--title-color); + margin-bottom: -0.45em; +} +.testi-grid .box-avater { + border-radius: 99px; + overflow: hidden; +} +.testi-grid .box-icon { + position: absolute; + bottom: 0; + right: 0; +} +.testi-grid .box-logo { + position: absolute; + top: 48px; + right: 48px; + z-index: -1; +} +@media (max-width: 1199px) { + .testi-grid { + padding: 40px; + } + .testi-grid .box-logo { + right: 40px; + top: 40px; + } +} +@media (max-width: 575px) { + .testi-grid { + padding: 40px; + } +} +@media (max-width: 575px) { + .testi-grid .box-logo { + right: 26px; + top: 50px; + max-width: 60px; + } + .testi-grid .box-title { + font-size: 24px; + } + .testi-grid .box-profile { + margin-bottom: 30px; + } + .testi-grid .box-text { + font-size: 18px; + } +} +@media (max-width: 375px) { + .testi-grid { + padding: 30px 40px 30px 30px; + } + .testi-grid .box-logo { + display: none; + } + .testi-grid .box-avater { + max-width: 70px; + } + .testi-grid .box-title { + font-size: 22px; + } +} +.testi-grid.style2:before { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-position: bottom right; + mask-position: bottom right; + /* Extra small devices */ +} +@media (max-width: 575px) { + .testi-grid.style2:before { + -webkit-mask-image: none; + mask-image: none; + } +} +.testi-grid.style2 .box-review { + color: var(--theme-color); +} +.testi-grid.style2 .box-icon { + /* Extra small devices */ +} +.testi-grid.style2 .box-icon svg { + max-width: 70px; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .testi-grid.style2 .box-icon svg { + max-width: 60px; + } +} +@media (max-width: 575px) { + .testi-grid.style2 .box-icon { + display: none; + } +} + +/*------------------- 4.00. Counter -------------------*/ +/* Counter 1 ---------------------------------- */ +.counter-card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 15px; +} +.counter-card-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} +.counter-card-wrap .divider { + width: 1px; + height: 66px; + background-color: var(--th-border-color); +} +.counter-card-wrap .divider:last-of-type { + display: none; +} +.counter-card .box-number { + font-size: 40px; + color: var(--title-color); + font-weight: 700; + margin-bottom: 0px; + margin-top: -0.2em; +} +.counter-card .box-text { + font-size: 18px; + color: var(--title-color); +} +.counter-card .media-body { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; +} +.counter-card-wrap.style2 { + background-color: var(--title-color); + padding: 42px 60px; + /* Medium Large devices */ + /* Small devices */ + /* Extra small devices */ +} +.counter-card-wrap.style2 .divider { + background-color: rgba(255, 255, 255, 0.5); +} +@media (max-width: 1299px) { + .counter-card-wrap.style2 { + padding: 40px 30px; + } +} +@media (max-width: 767px) { + .counter-card-wrap.style2 { + padding: 40px 12px; + } +} +@media (max-width: 375px) { + .counter-card-wrap.style2 { + display: block; + } + .counter-card-wrap.style2 .counter-card:not(:last-child) { + margin-bottom: 30px; + } +} +.counter-card-wrap.style3 { + background-color: var(--theme-color); + padding: 42px 8px; + text-align: center; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + /* Small devices */ +} +.counter-card-wrap.style3 .divider { + background-color: rgba(255, 255, 255, 0.5); + /* Medium devices */ +} +@media (max-width: 991px) { + .counter-card-wrap.style3 .divider { + height: 60px; + } +} +@media (max-width: 767px) { + .counter-card-wrap.style3 { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + } +} +.counter-card-wrap.style3 .counter-card { + display: block; +} +.counter-card-wrap.style4 { + background-color: var(--title-color); + padding: 42px 8px; + text-align: center; + -webkit-box-pack: space-evenly; + -ms-flex-pack: space-evenly; + justify-content: space-evenly; + border-radius: 24px; +} +.counter-card-wrap.style4 .divider { + background-color: rgba(255, 255, 255, 0.5); + /* Medium devices */ +} +@media (max-width: 991px) { + .counter-card-wrap.style4 .divider { + height: 60px; + } +} +.counter-card-wrap.style4 .counter-card { + display: block; +} + +/* Medium devices */ +@media (max-width: 991px) { + .counter-card { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + gap: 20px; + } + .counter-card-wrap .divider { + height: 155px; + } + .counter-card .box-number { + font-size: 36px; + margin-bottom: 0; + } +} +/* Small devices */ +@media (max-width: 767px) { + .counter-card { + -webkit-box-flex: calc(50% - 18px); + -ms-flex: calc(50% - 18px); + flex: calc(50% - 18px); + padding-left: 10px; + padding-right: 10px; + } + .counter-card-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + position: relative; + gap: 32px; + } + .counter-card-wrap .divider { + display: none; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .counter-card { + -webkit-box-flex: calc(50% - 10px); + -ms-flex: calc(50% - 10px); + flex: calc(50% - 10px); + } + .counter-card-wrap { + gap: 36px 20px; + } +} +/*------------------- 4.00. Blog -------------------*/ +/* Blog Card ---------------------------------- */ +.blog-card { + padding: 16px; + border-radius: 24px; + background-color: var(--white-color); + position: relative; + z-index: 2; +} +.blog-card .blog-img { + display: block; + overflow: hidden; + border-radius: 16px; + position: relative; + z-index: 2; +} +.blog-card .blog-img img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-card .box-date { + display: block; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + margin: -19px 19px 15px auto; + color: var(--white-color); + padding: 0 24px; + border-radius: 24px; + line-height: 38px; + z-index: 1; + position: relative; + z-index: 3; +} +.blog-card .box-date:before { + content: ""; + position: absolute; + inset: 0; + background-color: var(--theme-color); + border-radius: inherit; + z-index: -1; +} +.blog-card .blog-content { + padding: 0 8px 12px 8px; +} +.blog-card .box-title { + margin-bottom: 15px; + font-weight: 600; +} +.blog-card .box-title a { + background-image: -webkit-gradient(linear, right top, left top, from(var(--theme-color)), to(var(--theme-color))); + background-image: linear-gradient(to left, var(--theme-color), var(--theme-color)); + background-repeat: no-repeat; + background-position: bottom left; + background-size: 0 2px; + -webkit-transition: 0.5s ease-in-out; + transition: 0.5s ease-in-out; +} +.blog-card .box-title a:hover { + background-size: 100% 2px; +} +.blog-card .blog-meta { + margin: -0.4em 0 15px 0; +} +.blog-card .blog-meta span > i, +.blog-card .blog-meta a > i { + color: var(--theme-color); +} +.blog-card.style2 { + border-radius: 0; +} +.blog-card.style2 .blog-img { + border-radius: 0; +} +.blog-card.style2 .box-date:before { + border-radius: 0; + -webkit-transform: skew(-15deg) translateX(-10px); + transform: skew(-15deg) translateX(-10px); +} +.blog-card.style3 .box-date { + position: absolute; + margin: 0; + top: 0; + right: 32px; + line-height: 1.1; + text-align: center; + border-radius: 0 0 90px 90px; + padding: 24px 10px 32px 10px; + font-size: 14px; +} +.blog-card.style3 .box-date .date { + display: block; + font-size: 24px; + font-weight: 600; + font-family: var(--title-font); +} +.blog-card.style3 .blog-img { + margin-bottom: 30px; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.blog-card:hover .blog-img img { + -webkit-transform: scale(1.08); + transform: scale(1.08); +} + +/* Medium Large devices */ +@media (max-width: 1299px) { + .blog-card .box-title { + font-size: 22px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .blog-card .box-title { + font-size: 24px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .blog-card .box-title { + font-size: 20px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .blog-card .box-title { + font-size: 24px; + } +} +@media (max-width: 410px) { + .blog-card .box-title { + font-size: 22px; + } +} +@media (max-width: 350px) { + .blog-card .box-title { + font-size: 20px; + } +} +/* Blog Box ---------------------------------- */ +.blog-box { + position: relative; + z-index: 2; + padding-bottom: 130px; + margin-bottom: 39px; +} +.blog-box .blog-img { + display: block; + overflow: hidden; + border-radius: 16px; + position: relative; + z-index: 2; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100%; + mask-size: 100%; +} +.blog-box .blog-img img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-box .blog-content { + padding: 32px 28px 64px 32px; + position: absolute; + left: 24px; + right: 24px; + bottom: 0; + z-index: 3; +} +.blog-box .blog-content:before { + content: ""; + position: absolute; + inset: 0; + background: rgba(16, 24, 64, 0.8); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + border-radius: 16px; + z-index: -1; +} +.blog-box .box-title { + font-size: 22px; + color: var(--white-color); + margin-bottom: -0.2em; + font-weight: 600; +} +.blog-box .box-title a { + background-image: -webkit-gradient(linear, right top, left top, from(var(--theme-color)), to(var(--theme-color))); + background-image: linear-gradient(to left, var(--theme-color), var(--theme-color)); + background-repeat: no-repeat; + background-position: bottom left; + background-size: 0 2px; + -webkit-transition: 0.5s ease-in-out; + transition: 0.5s ease-in-out; +} +.blog-box .box-title a:hover { + background-size: 100% 2px; +} +.blog-box .blog-meta { + margin: -0.4em 0 15px 0; +} +.blog-box .blog-meta span, +.blog-box .blog-meta a { + color: var(--white-color); +} +.blog-box .blog-meta span > i, +.blog-box .blog-meta a > i { + color: var(--theme-color); +} +.blog-box .blog-meta span:after, +.blog-box .blog-meta a:after { + display: none; +} +.blog-box .box-btn { + position: absolute; + bottom: -39px; + left: calc(50% - 34px); +} +.blog-box:hover .blog-img img { + -webkit-transform: scale(1.08); + transform: scale(1.08); +} + +/* Medium Large devices */ +@media (max-width: 1299px) { + .blog-box .box-title { + font-size: 22px; + } +} +/* Large devices */ +@media (max-width: 1199px) { + .blog-box .box-title { + font-size: 24px; + } +} +/* Medium devices */ +@media (max-width: 991px) { + .blog-box .box-title { + font-size: 20px; + } + .blog-box .blog-content { + padding: 24px 24px 48px 24px; + } +} +/* Small devices */ +@media (max-width: 767px) { + .blog-box .box-title { + font-size: 24px; + } +} +/* Extra small devices */ +@media (max-width: 575px) { + .blog-box .box-title { + font-size: 22px; + } +} +@media (max-width: 350px) { + .blog-box .box-title { + font-size: 20px; + } +} +/* Blog Grid ---------------------------------- */ +.blog-grid { + position: relative; + z-index: 2; + overflow: hidden; + /* Extra small devices */ +} +.blog-grid:after, .blog-grid:before { + content: ""; + -webkit-box-shadow: inset 30px 30px 0 0 var(--body-bg); + box-shadow: inset 30px 30px 0 0 var(--body-bg); + width: 60px; + height: 60px; + position: absolute; + border-radius: 24px; + top: 43px; + right: -30px; + z-index: 2; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + z-index: 3; +} +.blog-grid:before { + top: -30px; + right: 43px; +} +.blog-grid .blog-img { + display: block; + border-radius: 24px; + overflow: hidden; +} +.blog-grid .blog-img img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-grid .blog-content { + padding: 32px 28px 32px 32px; + position: absolute; + bottom: 24px; + left: 24px; + right: 24px; + z-index: 3; +} +.blog-grid .blog-content:before { + content: ""; + position: absolute; + inset: 0; + background: rgba(16, 24, 64, 0.8); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + border-radius: 16px; + z-index: -1; +} +.blog-grid .box-title { + font-size: 22px; + color: var(--white-color); + margin-bottom: -0.2em; + font-weight: 600; +} +.blog-grid .box-title a { + background-image: -webkit-gradient(linear, right top, left top, from(var(--theme-color)), to(var(--theme-color))); + background-image: linear-gradient(to left, var(--theme-color), var(--theme-color)); + background-repeat: no-repeat; + background-position: bottom left; + background-size: 0 2px; + -webkit-transition: 0.5s ease-in-out; + transition: 0.5s ease-in-out; +} +.blog-grid .box-title a:hover { + background-size: 100% 2px; +} +.blog-grid .blog-meta { + margin: -0.4em 0 15px 0; +} +.blog-grid .blog-meta span, +.blog-grid .blog-meta a { + color: var(--white-color); +} +.blog-grid .blog-meta span > i, +.blog-grid .blog-meta a > i { + color: var(--theme-color); +} +.blog-grid .blog-meta span:after, +.blog-grid .blog-meta a:after { + display: none; +} +.blog-grid .icon-btn { + --btn-size: 66px; + font-size: 26px; + position: absolute; + top: 0; + right: 0; + z-index: 4; +} +.blog-grid .icon-btn:after { + content: ""; + position: absolute; + inset: -8px; + background-color: var(--light-color); + border: 8px solid var(--body-bg); + border-radius: 99px; + z-index: -1; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.blog-grid .icon-btn:hover:after { + background-color: var(--title-color); +} +.blog-grid:hover .blog-img img { + -webkit-transform: scale(1.08); + transform: scale(1.08); +} +@media (max-width: 375px) { + .blog-grid .box-title { + font-size: 20px; + } + .blog-grid .blog-content { + left: 16px; + right: 16px; + bottom: 16px; + padding: 20px; + } +} + +/*------------------- 4.00. Brand -------------------*/ +/* Brand 1 ---------------------------------- */ +.brand-box { + display: grid; + -ms-flex-line-pack: center; + align-content: center; + text-align: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 46px; + width: auto; + -webkit-filter: grayscale(1) invert(0.3) brightness(1.4); + filter: grayscale(1) invert(0.3) brightness(1.4); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.brand-box:hover { + -webkit-filter: none; + filter: none; +} + +.brand-list-area { + 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; + /* Medium devices */ + /* Small devices */ +} +.brand-list-area .arrow-down { + width: 125px; + height: 125px; + position: relative; + z-index: 2; + margin: -70px 120px; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .brand-list-area .arrow-down { + margin-left: 50px; + margin-right: 50px; + } +} +.brand-list-area .arrow-down .shape { + position: absolute; + inset: -53px; + -webkit-animation: spin 10s linear infinite; + animation: spin 10s linear infinite; +} +.brand-list-area .arrow-down .link { + display: grid; + width: 125px; + height: 125px; + line-height: 125px; + border: 1px solid var(--theme-color); + border-radius: 999px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-line-pack: center; + align-content: center; + position: relative; + z-index: 2; +} +.brand-list-area .arrow-down .link:before { + content: ""; + position: absolute; + inset: 10px; + background-color: var(--white-color); + border-radius: inherit; + z-index: -1; +} +.brand-list-area .arrow-down .icon { + display: inline-block; + width: 26px; + height: 42px; + line-height: 42px; + border-radius: 99px; + border: 1px solid var(--theme-color); + text-align: center; +} +.brand-list-area .arrow-down .icon svg { + margin: -2px -1px 0 0; +} +@media (max-width: 991px) { + .brand-list-area { + gap: 10px 20px; + } + .brand-list-area .arrow-down { + display: none; + } +} +@media (max-width: 767px) { + .brand-list-area { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: unset; + -ms-flex-align: unset; + align-items: unset; + } +} +.brand-list-wrap { + 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; + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + gap: 10px; +} + +.brand-sec1 { + padding: 20px 12px 50px 12px; + max-width: 1620px; + margin: 0 auto; + position: relative; + z-index: 3; + /* Medium devices */ +} +@media (max-width: 991px) { + .brand-sec1 { + padding-bottom: 0; + } +} +.brand-sec1 .top-shape { + position: absolute; + bottom: calc(100% - 5px); + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + z-index: 2; +} +.brand-sec1 .top-shape.style2 .link { + position: absolute; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); + bottom: 20px; + /* Extra small devices */ +} +@media (min-width: 992px) { + .brand-sec1 .top-shape.style2 .link { + display: none; + } +} +@media (max-width: 575px) { + .brand-sec1 .top-shape.style2 .link { + bottom: -15px; + } +} +.brand-sec1 .top-shape.style2 .link .icon { + display: inline-block; + width: 26px; + height: 42px; + line-height: 42px; + border-radius: 99px; + border: 1px solid var(--theme-color); + text-align: center; +} + +/* Brand 2 ---------------------------------- */ +.brand-card { + display: grid; + -ms-flex-line-pack: center; + align-content: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + min-height: 40px; +} + +.brand-sec3 { + max-width: 1856px; + margin: 0 auto; +} +@media (max-width: 1850px) { + .brand-sec3 { + margin-left: 12px; + margin-right: 12px; + } +} +.brand-sec3 .brand-card { + min-height: 40px; +} +.brand-sec3 .brand-inner { + position: relative; + z-index: 4; + background-color: var(--body-bg); + margin-top: -72px; + padding-top: 24px; + padding-right: 30px; + padding-left: 30px; + /* Extra small devices */ +} +.brand-sec3 .brand-inner:before, .brand-sec3 .brand-inner:after { + content: ""; + position: absolute; + top: 0; + width: 84px; + height: 73px; + right: -83px; + background-color: var(--body-bg); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + z-index: -1; +} +.brand-sec3 .brand-inner:after { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} +.brand-sec3 .brand-inner:before { + width: 32px; + height: 31px; + top: -30px; + left: -1px; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); +} +@media (max-width: 575px) { + .brand-sec3 .brand-inner { + padding-right: 0; + padding-left: 0; + } +} + +/*------------------- 4.00. Simple Sections -------------------*/ +.checklist ul { + padding-left: 0; + list-style: none; + text-align: left; + margin-bottom: 0; + display: inline-block; +} +.checklist.list-two-column ul { + display: inline-grid; + grid-template-columns: auto auto; + gap: 0 40px; + /* Small devices */ +} +@media (max-width: 767px) { + .checklist.list-two-column ul { + grid-template-columns: auto; + } + .checklist.list-two-column ul li { + text-align: initial; + } +} +.checklist li { + font-family: var(--title-font); + font-size: 18px; + font-weight: 500; + color: var(--title-color); + font-weight: 600; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 8px; +} +.checklist li:before { + content: url('data:image/svg+xml,'); + position: relative; + top: 3px; +} +.checklist li > i { + color: var(--theme-color); +} +.checklist li:not(:last-child) { + margin-bottom: 15px; +} +.checklist.fw-regular li { + font-weight: 400; +} +.checklist.mb-45 { + /* Large devices */ +} +@media (max-width: 1199px) { + .checklist.mb-45 { + margin-bottom: 40px; + } +} + +.check-list ul { + padding-left: 0; + list-style: none; + text-align: left; + margin-bottom: 0; +} +.check-list li { + margin-bottom: 10px; +} +.check-list li:last-child { + margin-bottom: 0; +} +.check-list li > i { + color: var(--theme-color); + margin-right: 5px; +} + +.mega-hover { + position: relative; + overflow: hidden; + z-index: 2; +} +.mega-hover:after, .mega-hover:before { + content: ""; + position: absolute; + pointer-events: none; + opacity: 1; + z-index: -1; +} +.mega-hover:before { + top: 0; + right: 51%; + bottom: 0; + left: 50%; + background: rgba(255, 255, 255, 0.2); +} +.mega-hover:after { + top: 50%; + right: 0; + bottom: 50%; + left: 0; + background: rgba(255, 255, 255, 0.3); +} +.mega-hover:hover:before { + left: 0; + right: 0; + opacity: 0; + -webkit-transition: all 900ms linear; + transition: all 900ms linear; +} +.mega-hover:hover:after { + top: 0; + bottom: 0; + opacity: 0; + -webkit-transition: all 900ms linear; + transition: all 900ms linear; +} + +.bg-img { + position: absolute; + inset: 0; + height: 100%; + width: 100%; +} +.bg-img img { + width: 100%; + height: 100%; +} + +.box-img { + overflow: hidden; +} +.box-img img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +.box-icon img { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +.th-video { + position: relative; + border-radius: 10px; +} +.th-video img { + border-radius: inherit; +} +.th-video .play-btn { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.rounded-10 { + border-radius: 10px; +} + +.rounded-12 { + border-radius: 12px; +} + +.rounded-20 { + border-radius: 20px; + /* Small devices */ +} +@media (max-width: 767px) { + .rounded-20 { + border-radius: 10px; + } +} + +.rounded-30 { + border-radius: 30px; + /* Small devices */ +} +@media (max-width: 767px) { + .rounded-30 { + border-radius: 15px; + } +} + +.rounded-24 { + border-radius: 24px; + /* Small devices */ +} +@media (max-width: 767px) { + .rounded-24 { + border-radius: 15px; + } +} + +.rounded-50 { + border-radius: 50px; + /* Small devices */ +} +@media (max-width: 767px) { + .rounded-50 { + border-radius: 20px; + } +} + +.btn-wrap { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px 30px; +} + +/* Large devices */ +@media (max-width: 1199px) { + p.mb-40 { + margin-bottom: 35px; + } + p.mb-45 { + margin-bottom: 38px; + } +} +/*------------------- 4.00. Why -------------------*/ +/* Why 1 ---------------------------------- */ +.choose-feature { + background-color: var(--white-color); + -webkit-box-shadow: 0px 10px 50px rgba(204, 204, 204, 0.32); + box-shadow: 0px 10px 50px rgba(204, 204, 204, 0.32); + border-radius: 12px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 18px; + padding: 24px; + text-align: left; + /* Small devices */ +} +.choose-feature-wrap { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 24px; + margin-bottom: 60px; + /* Large devices */ + /* Extra small devices */ +} +@media (max-width: 1199px) { + .choose-feature-wrap { + max-width: 750px; + margin-left: auto; + margin-right: auto; + margin-bottom: 50px; + } +} +@media (max-width: 575px) { + .choose-feature-wrap { + grid-template-columns: repeat(1, 1fr); + } +} +@media (max-width: 767px) { + .choose-feature { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + text-align: center; + } +} +.choose-feature .box-title { + margin: -0.24em 0; + max-width: 190px; +} +.choose-feature:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.img-box2 { + position: relative; + z-index: 2; + margin-left: -305px; + height: 100%; + /* Extra large devices */ + /* Medium Large devices */ + /* Large devices */ +} +@media (max-width: 1500px) { + .img-box2 { + margin-left: -200px; + } +} +@media (max-width: 1399px) { + .img-box2 { + margin-left: -100px; + } +} +@media (max-width: 1199px) { + .img-box2 { + margin-left: 0; + } +} +.img-box2 .play-btn { + --icon-size: 90px; + font-size: 20px; + position: absolute; + top: calc(50% - var(--icon-size) / 2); + left: calc(50% - var(--icon-size) / 2); + z-index: 3; + /* Small devices */ +} +@media (max-width: 767px) { + .img-box2 .play-btn { + --icon-size: 70px; + font-size: 18px; + } +} +.img-box2 .play-btn:before, .img-box2 .play-btn:after { + background-color: transparent; + border: 1px solid var(--white-color); +} +.img-box2 .img1 { + height: 100%; +} +.img-box2 .img1 img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} + +/* Why 2 ---------------------------------- */ +.why-feature { + border-radius: 24px; + padding: 24px; + position: relative; + z-index: 2; + margin-bottom: 24px; + background-color: var(--light-color); +} +.why-feature:after { + content: url('data:image/svg+xml,'); + position: absolute; + top: -1px; + right: -1px; + z-index: 2; +} +.why-feature .box-number { + position: absolute; + top: 0; + right: 0; + background-color: var(--title-color); + color: var(--white-color); + font-size: 24px; + font-weight: 600; + font-family: var(--title-font); + width: 60px; + height: 60px; + line-height: 60px; + text-align: center; + border-radius: 99px; + z-index: 4; +} +.why-feature .box-icon { + margin-bottom: 24px; +} +.why-feature .box-title { + margin-bottom: 8px; +} +.why-feature:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.why-img2 img { + vertical-align: bottom; +} + +/*------------------- 4.00. Faq -------------------*/ +/* Faq 1 ---------------------------------- */ +.accordion-card { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + border-radius: 8px; + overflow: hidden; + background-color: var(--smoke-color); + text-align: left; + position: relative; + z-index: 3; +} +.accordion-card:not(:last-child) { + margin-bottom: 24px; +} +.accordion-card .accordion-button { + font-size: 22px; + font-weight: 600; + font-family: var(--title-font); + border: 0; + border-color: var(--th-border-color); + color: var(--title-color); + background-color: transparent; + border-radius: 0; + padding: 24px 45px 24px 32px; + min-height: 56px; + gap: 10px; + margin-bottom: 0; + text-align: left; + -webkit-transition: 0.3s; + transition: 0.3s; + position: relative; +} +.accordion-card .accordion-button:after { + content: "\f078"; + height: 100%; + width: auto; + line-height: 1; + background-color: transparent; + background-image: none; + font-family: var(--icon-font); + color: var(--body-color); + font-weight: 500; + font-size: 20px; + display: grid; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + position: absolute; + top: 0; + right: 30px; + -webkit-transition: 0.3s ease-in-out; + transition: 0.3s ease-in-out; +} +.accordion-card .accordion-button:focus { + outline: none; + -webkit-box-shadow: none; + box-shadow: none; +} +.accordion-card .accordion-button:not(.collapsed) { + -webkit-box-shadow: none; + box-shadow: none; + border-radius: 0; +} +.accordion-card .accordion-button:not(.collapsed):after { + -webkit-transform: rotateX(180deg); + transform: rotateX(180deg); +} +.accordion-card .accordion-collapse { + border: none; +} +.accordion-card .accordion-body { + border-radius: 0; + border: none; + padding: 0px 32px 32px 32px; + margin-top: -7px; +} +.accordion-card .faq-text { + margin-bottom: -0.48em; +} +.accordion-card:has(.show) { + padding-top: 6px; + border-radius: 12px; +} + +.load-more-active .accordion-card { + margin-bottom: 24px; +} + +.faq-search { + position: relative; + max-width: 850px; + margin-left: auto; + margin-right: auto; +} +.faq-search input { + border-radius: 99px; +} +.faq-search button { + position: absolute; + top: 9px; + right: 9px; + background-color: var(--theme-color); + color: var(--white-color); + border: none; + border-radius: 99px; + height: 38px; + width: 38px; + line-height: 38px; +} +.faq-search button:hover { + background-color: var(--title-color); +} + +/* Extra small devices */ +@media (max-width: 575px) { + .accordion-card .accordion-button { + font-size: 16px; + } +} +/*------------------- 4.00. Feature -------------------*/ +/* Feature Card ---------------------------------- */ +.feature-card { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + text-align: center; + margin-top: -10px; +} +.feature-card-wrap { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 30px; + margin: -15px 0; + /* Medium Large devices */ + /* Large devices */ + /* Small devices */ +} +@media (max-width: 1299px) { + .feature-card-wrap { + gap: 24px; + } +} +@media (max-width: 1199px) { + .feature-card-wrap { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 767px) { + .feature-card-wrap { + grid-template-columns: repeat(1, 1fr); + } +} +.feature-card .box-title { + margin-bottom: 10px; +} +.feature-card .box-icon { + width: 180px; + height: 180px; + line-height: 150px; + text-align: center; + background-color: var(--theme-color); + border-radius: 99px; + margin-bottom: -90px; + position: relative; + z-index: 3; + border: 15px solid var(--smoke-color); +} +.feature-card .box-content { + background-color: var(--white-color); + -webkit-box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04); + box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.04); + border-radius: 30px; + padding: 120px 20px 30px 20px; + /* Small devices */ +} +@media (max-width: 767px) { + .feature-card .box-content { + padding: 120px 30px 30px 30px; + } +} +.feature-card .box-text { + line-height: 26px; +} +@media (min-width: 1200px) { + .feature-card:nth-child(even) { + margin-top: 90px; + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + .feature-card:nth-child(even) .box-icon { + background-color: var(--theme-color); + margin-bottom: 0; + margin-top: -90px; + } + .feature-card:nth-child(even) .box-content { + padding: 30px 20px 120px 20px; + } +} +@media (min-width: 768px) and (max-width: 1199px) { + .feature-card:nth-child(3), .feature-card:nth-child(4) { + -webkit-box-orient: vertical; + -webkit-box-direction: reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + } + .feature-card:nth-child(3) .box-icon, .feature-card:nth-child(4) .box-icon { + background-color: var(--theme-color); + margin-bottom: 0; + margin-top: -90px; + } + .feature-card:nth-child(3) .box-content, .feature-card:nth-child(4) .box-content { + padding: 30px 20px 120px 20px; + } +} + +/*------------------- 4.00. Gallery -------------------*/ +/* Gallery Card -------------------------------*/ +.gallery-card { + text-align: center; +} +.gallery-card .box-img { + display: block; + position: relative; + z-index: 2; + border-radius: 24px; + overflow: hidden; + -webkit-perspective: 1400px; + perspective: 1400px; + /* Small devices */ +} +@media (max-width: 767px) { + .gallery-card .box-img { + border-radius: 20px; + border: 20px; + } +} +.gallery-card .box-img img { + width: 100%; +} +.gallery-card .icon-btn { + z-index: 3; + background-color: var(--white-color); + color: var(--theme-color); +} +.gallery-card .icon-btn:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.gallery-card .box-btn { + color: var(--white-color); + font-size: 40px; +} +.gallery-card .box-content { + position: absolute; + inset: -1px; + -webkit-transform: rotate3d(1, 0, 0, 90deg); + transform: rotate3d(1, 0, 0, 90deg); + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + background-color: rgba(16, 24, 64, 0.8); + pointer-events: none; + border-radius: inherit; + z-index: -1; + -webkit-transition: z-index 1s ease-in-out; + transition: z-index 1s ease-in-out; +} +.gallery-card:hover .box-img:after { + -webkit-transform: scale(1); + transform: scale(1); + opacity: 0.7; +} +.gallery-card:hover .icon-btn { + -webkit-transform: scale(1); + transform: scale(1); +} +.gallery-card:hover .box-content { + z-index: 2; + -webkit-transition: z-index 0.5s ease-in-out; + transition: z-index 0.5s ease-in-out; +} + +.load-more-btn { + margin-top: 60px; + text-align: center; + margin-right: auto; + margin-right: auto; + /* Large devices */ +} +@media (max-width: 1199px) { + .load-more-btn { + margin-top: 50px; + } +} + +.gallery-sec2 { + max-width: 1720px; + margin-left: auto; + margin-right: auto; + /* Large devices */ + /* Small devices */ +} +@media (max-width: 1199px) { + .gallery-sec2 { + padding-left: 24px; + padding-right: 24px; + } +} +@media (max-width: 767px) { + .gallery-sec2 { + padding: 0; + max-width: 540px; + } +} + +/* Galler 2 ----------------------------------*/ +.gallery-grid { + position: relative; + overflow: hidden; + border-radius: 22px; +} +.gallery-grid:after { + content: url('data:image/svg+xml,'); + position: absolute; + top: -90px; + right: -90px; + z-index: 2; + -webkit-transition: 0.4s ease-out; + transition: 0.4s ease-out; +} +.gallery-grid .box-img { + border-radius: 24px; +} +.gallery-grid .box-img img { + width: 100%; +} +.gallery-grid .icon-btn { + --btn-size: 60px; + font-size: 24px; + background-color: var(--title-color); + color: var(--white-color); + border: none; + position: absolute; + top: -60px; + right: -60px; + z-index: 4; + visibility: hidden; + opacity: 0; +} +.gallery-grid .icon-btn:hover { + background-color: var(--theme-color); + color: var(--white-color); +} +.gallery-grid:hover:after { + top: -1px; + right: -1px; +} +.gallery-grid:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.gallery-grid:hover .icon-btn { + visibility: visible; + opacity: 1; + top: 0; + right: 0; +} + +/* Galler 3 ----------------------------------*/ +.gallery-insta { + position: relative; + overflow: hidden; + border-radius: 24px; +} +.gallery-insta:after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--title-color); + opacity: 0; + pointer-events: none; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.gallery-insta img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.gallery-insta .box-btn { + position: absolute; + right: 20px; + top: 20px; + font-size: 26px; + color: var(--white-color); + line-height: 1; + z-index: 3; +} +.gallery-insta:hover:after { + opacity: 0.4; +} +.gallery-insta:hover img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +.gallery-sec3 { + max-width: 1668px; + margin: 0 auto; + padding-left: 12px; + padding-right: 12px; +} + +@media (max-width: 1199px) { + .tab-menu2 { + margin-top: -15px; + } +} +.tab-menu2 .tab-btn { + font-family: var(--title-font); + font-size: 16px; + font-weight: 500; + line-height: 60px; + background-color: transparent; + border: none; + padding: 0 32px; + color: var(--title-color); + position: relative; + z-index: 2; + overflow: hidden; + border: 1px solid var(--th-border-color); + border-right: 0; + border-left: 0; + background-color: var(--body-bg); + border-radius: 32px 32px 32px 32px/32px 33px 32px 32px; + position: relative; + z-index: 2; + margin: 0 -2px; + /* Small devices */ +} +.tab-menu2 .tab-btn:before { + content: ""; + position: absolute; + inset: 8px; + background-color: var(--light-color); + border-radius: inherit; + background-color: var(--light-color); + z-index: -1; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.tab-menu2 .tab-btn:last-of-type { + border-right: 1px solid var(--th-border-color); +} +.tab-menu2 .tab-btn:first-of-type { + border-left: 1px solid var(--th-border-color); +} +.tab-menu2 .tab-btn.active { + color: var(--white-color); +} +.tab-menu2 .tab-btn.active:before { + background-color: var(--theme-color); +} +@media (max-width: 767px) { + .tab-menu2 .tab-btn { + padding: 0 18px; + } +} +.tab-menu2 .indicator { + display: none; +} + +/*------------------- 4.00. Price -------------------*/ +/* Price Card ---------------------------------- */ +.box-list ul { + padding: 0; + margin: 0; +} +.box-list li { + display: block; + list-style: none; +} + +.box-list { + display: inline-block; + text-align: left; +} +.box-list li { + font-size: 18px; + color: var(--title-color); + position: relative; + margin-bottom: 16px; +} +.box-list li:before { + content: url('data:image/svg+xml,'); + margin-right: 10px; + position: relative; + top: 4px; +} +.box-list li.unavailable { + color: var(--body-color); +} +.box-list li.unavailable:before { + content: url('data:image/svg+xml,'); +} +.box-list li:last-child { + margin-bottom: 0; +} + +.price-card { + text-align: center; + position: relative; + z-index: 2; + padding: 62px 20px 32px 20px; + background-color: var(--white-color); + border-radius: 16px; +} +.price-card .box-title { + margin-bottom: 5px; + font-weight: 600; +} +.price-card .box-price { + font-size: 24px; + font-weight: 700; + color: var(--title-color); + margin-bottom: 32px; +} +.price-card .box-price .duration { + font-size: 16px; + color: var(--body-color); + font-weight: 400; +} +.price-card .th-btn { + margin-top: 45px; +} +.price-card .tag { + position: absolute; + top: 0; + left: calc(50% - 85px); + background-color: var(--light-color); + border-radius: 0 0 16px 16px; + font-size: 14px; + color: var(--title-color); + line-height: 40px; + padding: 0 10px; + text-align: center; + min-width: 170px; + font-weight: 500; +} +.price-card .box-shape { + position: absolute; + top: 0; + left: 7px; + right: 7px; +} + +.tag-black .price-card .tag { + background-color: var(--title-color); + color: var(--white-color); +} + +/* Price Box ---------------------------------- */ +.price-box { + position: relative; + z-index: 2; + padding: 48px 32px 32px 32px; + background-color: var(--white-color); + border-radius: 16px; +} +.price-box .box-img { + position: absolute; + top: 0; + right: 32px; + border-radius: 0 0 999px 999px; + z-index: -1; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .price-box .box-img { + max-width: 40%; + } +} +.price-box .box-icon { + margin-bottom: 24px; +} +.price-box .box-title { + margin-bottom: 5px; + font-weight: 600; +} +.price-box .box-price { + font-size: 24px; + font-weight: 700; + color: var(--title-color); + margin-bottom: 32px; +} +.price-box .box-price .duration { + font-size: 16px; + color: var(--body-color); + font-weight: 400; +} +.price-box .th-btn { + width: 100%; + margin-top: 45px; +} + +/*------------------- 4.00. Service -------------------*/ +/* Service Card ---------------------------------- */ +.service-card { + position: relative; + z-index: 2; + background-color: var(--white-color); + border-radius: 24px; + padding: 32px; +} +.service-card .box-number { + font-size: 48px; + line-height: 1; + font-weight: 700; + font-family: var(--title-font); + color: #E1E4E5; + position: absolute; + right: 32px; + top: 32px; +} +.service-card .box-title { + margin-bottom: 12px; +} +.service-card .box-subtitle { + color: var(--theme-color); + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + margin-bottom: 19px; +} +.service-card .box-icon { + margin-bottom: 27px; +} +.service-card .th-btn { + margin-top: 32px; + background-color: var(--title-color); +} +.service-card .th-btn:before { + background-color: var(--theme-color); +} +.service-card .th-btn:hover { + background-color: var(--theme-color); +} +.service-card .th-btn2 { + margin-top: 32px; +} +.service-card.style2 { + border-radius: 0; +} +.service-card:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} + +.bg-white .service-card { + background-color: var(--light-color); +} +.bg-white .service-card .box-number { + color: var(--white-color); +} +.bg-white .swiper-pagination-bullets .swiper-pagination-bullet { + background-color: var(--light-color); +} +.bg-white .swiper-pagination-bullets .swiper-pagination-bullet-active { + background-color: var(--theme-color); +} + +/* Service Box ---------------------------------- */ +.service-box { + position: relative; + z-index: 2; + border-radius: 24px; + text-align: center; + overflow: hidden; +} +.service-box .box-img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.service-box .box-content { + padding: 112px 12px 32px 12px; + background-color: var(--white-color); + margin-top: -90px; + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; +} +.service-box .box-title { + margin-bottom: 8px; +} +.service-box .box-icon { + width: 100px; + height: 100px; + line-height: 100px; + text-align: center; + border-radius: 999px; + background-color: var(--title-color); + border: 2px solid var(--white-color); + margin: -52px auto 0 auto; + position: relative; + z-index: 3; +} +.service-box .th-btn { + margin-top: 24px; + border-color: var(--light-color); + color: var(--title-color); +} +.service-box .th-btn:hover { + color: var(--white-color); + border-color: var(--theme-color); + background-color: var(--theme-color); +} +.service-box .th-btn:hover:before { + background-color: var(--theme-color); +} +.service-box:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} +.service-box:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Service Grid ---------------------------------- */ +.service-grid { + position: relative; + z-index: 2; + border-radius: 16px; + padding: 32px; + background-color: var(--white-color); + text-align: left; +} +.service-grid .box-number { + font-size: 48px; + line-height: 1; + font-weight: 700; + font-family: var(--title-font); + color: #E1E4E5; + position: absolute; + right: 32px; + top: 32px; +} +.service-grid .box-img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + margin-top: 32px; + border-radius: 12px; +} +.service-grid .box-img img { + width: 100%; +} +.service-grid .box-title { + margin-bottom: 8px; +} +.service-grid .box-icon { + margin-bottom: 21px; +} +.service-grid:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); +} +.service-grid:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Large devices */ +@media (max-width: 1199px) { + .sec-shape1 { + max-width: 80px; + } +} +/* Service Block ---------------------------------- */ +.service-block { + --body-bg: #101943; + position: relative; + z-index: 2; + text-align: center; +} +.service-block:after, .service-block:before { + content: ""; + -webkit-box-shadow: inset 25px 25px 0 0 var(--body-bg); + box-shadow: inset 25px 25px 0 0 var(--body-bg); + width: 50px; + height: 50px; + position: absolute; + border-radius: 16px; + top: 38px; + right: -25px; + z-index: 2; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); + z-index: 3; +} +.service-block:before { + top: -25px; + right: 38px; +} +.service-block .box-img { + border-radius: 24px; +} +.service-block .box-img img { + width: 100%; + aspect-ratio: 4 / 3; + object-fit: cover; +} +.service-block .box-title { + margin-bottom: -0.2em; +} +.service-block .box-content { + background-color: var(--white-color); + border-radius: 16px; + position: relative; + z-index: 3; + margin: -60px 16px 0 16px; + padding: 0 32px 24px 32px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.service-block .box-icon { + width: 72px; + height: 72px; + line-height: 70px; + text-align: center; + background-color: var(--title-color); + border: 2px solid var(--white-color); + border-radius: 99px; + margin: -36px auto -20px auto; + -webkit-transform: translateY(-36px); + transform: translateY(-36px); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.service-block .box-icon img { + -webkit-filter: brightness(0) invert(1); + filter: brightness(0) invert(1); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.service-block .icon-btn { + --btn-size: 56px; + font-size: 20px; + position: absolute; + top: 0; + right: 0; + z-index: 4; +} +.service-block .icon-btn:after { + content: ""; + position: absolute; + inset: -8px; + background-color: var(--light-color); + border: 8px solid var(--body-bg); + border-radius: 99px; + z-index: -1; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.service-block .icon-btn:hover:after { + background-color: var(--theme-color); +} +.service-block:hover .box-icon { + border-color: var(--theme-color); + background-color: var(--white-color); +} +.service-block:hover .box-icon img { + -webkit-transform: rotateY(180deg); + transform: rotateY(180deg); + -webkit-filter: none; + filter: none; +} +.service-block:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.service-block:hover .box-content { + background-color: var(--theme-color); +} +.service-block:hover .box-title { + color: var(--white-color); +} +.service-block:hover .box-title a:hover { + color: var(--white-color); + text-decoration: underline; +} + +/* Service Details -------------------------------- */ +.page-title { + margin-bottom: 20px; +} + +.page-img { + margin-bottom: 48px; + overflow: hidden; + border-radius: 12px; + /* Medium devices */ +} +@media (max-width: 991px) { + .page-img { + margin-bottom: 40px; + } +} +.page-img img { + width: 100%; +} + +.page-single { + margin-bottom: 30px; +} + +.service-meta { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + gap: 10px; + margin-bottom: 48px; + /* Medium devices */ +} +@media (max-width: 991px) { + .service-meta { + margin-bottom: 40px; + } +} +.service-meta a, .service-meta span { + line-height: 36px; + display: inline-block; + color: var(--white-color); + background-color: var(--title-color); + font-size: 17px; + padding: 0 18px; + border-radius: 30px; +} +.service-meta a i, .service-meta span i { + color: var(--theme-color); + font-size: 16px; + margin-right: 5px; +} +.service-meta a:hover, .service-meta span:hover { + background-color: var(--white-color); + color: var(--title-color); + font-weight: 500; +} + +.service-gallery { + position: relative; + overflow: hidden; + border-radius: 12px; +} +.service-gallery:after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--title-color); + opacity: 0; + pointer-events: none; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.service-gallery img { + width: 100%; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + /* Medium Large devices */ +} +@media (max-width: 1299px) { + .service-gallery img { + height: 290px; + -o-object-fit: cover; + object-fit: cover; + } +} +.service-gallery .box-btn { + position: absolute; + left: 50%; + top: 50%; + font-size: 30px; + color: var(--white-color); + line-height: 1; + z-index: 3; + -webkit-transform: translate(-50%, 30%); + transform: translate(-50%, 30%); + visibility: hidden; + opacity: 0; + -webkit-transition: 0.4 ease-in-out; + transition: 0.4 ease-in-out; +} +.service-gallery .box-btn:hover { + color: var(--theme-color); +} +.service-gallery:hover:after { + opacity: 0.5; +} +.service-gallery:hover img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.service-gallery:hover .box-btn { + visibility: visible; + opacity: 1; + -webkit-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +/*------------------- 4.00. Project -------------------*/ +/* Project Card ---------------------------------- */ +.project-card { + position: relative; + z-index: 2; +} +.project-card .box-content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + position: absolute; + right: 16px; + bottom: 16px; + left: 16px; + background-color: rgba(255, 255, 255, 0.8); + -webkit-backdrop-filter: blur(5px); + backdrop-filter: blur(5px); + border-radius: 16px; + padding: 24px; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.project-card .box-title { + margin: 0; +} +.project-card .box-img { + border-radius: 24px; +} +.project-card .icon-btn { + --btn-size: 48px; + min-width: 48px; + font-size: 18px; + border: none; + background-color: var(--theme-color); + color: var(--white-color); +} +.project-card .icon-btn:hover { + background-color: var(--white-color); + color: var(--title-color); +} +.project-card:hover .box-title { + color: var(--white-color); +} +.project-card:hover .box-content { + background-color: rgba(16, 24, 64, 0.8); +} +.project-card:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Project Grid ---------------------------------- */ +.filter-menu { + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + gap: 10px 12px; + margin-top: -28px; + margin-bottom: 60px; + /* Large devices */ + /* Medium devices */ +} +@media (max-width: 1199px) { + .filter-menu { + margin-bottom: 50px; + } +} +@media (max-width: 991px) { + .filter-menu { + margin-top: -16px; + } +} +.filter-menu .tab-btn { + display: inline-block; + border: none; + background-color: transparent; + color: var(--title-color); + padding: 9px 24px; + position: relative; + z-index: 2; +} +.filter-menu .tab-btn:before { + content: ""; + position: absolute; + inset: 0; + border: 1px solid var(--th-border-color); + -webkit-transform: skew(-15deg); + transform: skew(-15deg); + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + z-index: -1; +} +.filter-menu .tab-btn:hover:before { + -webkit-transform: skew(15deg); + transform: skew(15deg); +} +.filter-menu .tab-btn.active { + color: var(--white-color); +} +.filter-menu .tab-btn.active:before { + background-color: var(--theme-color); + border-color: var(--theme-color); +} +.filter-menu .indicator { + display: none; +} +.filter-menu.style2 { + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + border: 1px solid var(--th-border-color); + padding: 8px; + border-radius: 40px; +} +.filter-menu.style2 .tab-btn:before { + -webkit-transform: none !important; + transform: none !important; + border-radius: 30px; +} + +.project-grid { + position: relative; + z-index: 2; + background-color: var(--white-color); + text-align: left; +} +.project-grid .box-content { + padding: 32px; + /* Large devices */ + /* Small devices */ + /* Extra small devices */ +} +@media (max-width: 1199px) { + .project-grid .box-content { + padding: 24px; + } +} +@media (max-width: 767px) { + .project-grid .box-content { + padding: 32px; + } +} +@media (max-width: 375px) { + .project-grid .box-content { + padding: 24px; + } +} +.project-grid .box-title { + margin-bottom: 8px; +} +.project-grid .th-btn2, +.project-grid .th-btn { + margin-top: 31px; +} +.project-grid .th-btn.style2 { + font-weight: 500; + color: var(--title-color); + border-color: var(--title-color); +} +.project-grid:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +/* Project Box ---------------------------------- */ +.project-box { + position: relative; + z-index: 2; + border-radius: 24px; + text-align: center; + overflow: hidden; +} +.project-box .box-content { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + padding: 140px 12px 32px 12px; + -webkit-mask-position: bottom center; + mask-position: bottom center; + background-color: var(--white-color); + margin-top: -86px; + /* Extra small devices */ +} +@media (max-width: 575px) { + .project-box .box-content { + -webkit-mask-size: 127% 103%; + mask-size: 127% 103%; + } +} +.project-box .box-title { + margin-bottom: 8px; +} +.project-box .box-img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + -webkit-mask-position: bottom center; + mask-position: bottom center; +} +.project-box .th-btn { + margin-top: 32px; +} +.project-box:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +@media (min-width: 1500px) { + .project-slider3 { + padding-right: 1200px !important; + margin-right: -1200px !important; + } +} +/* Project Block ---------------------------------- */ +.project-block { + position: relative; + z-index: 2; + border-radius: 16px; + overflow: hidden; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + text-align: left; +} +.project-block .box-number { + font-size: 72px; + line-height: 1; + font-weight: 700; + font-family: var(--title-font); + color: rgba(255, 255, 255, 0.1); + position: absolute; + right: 40px; + top: 32px; +} +.project-block .box-content { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + background-color: var(--title-color); + padding: 40px; + /* Extra small devices */ + /* Extra small devices */ +} +@media (max-width: 575px) { + .project-block .box-content { + padding: 32px; + } +} +@media (max-width: 375px) { + .project-block .box-content { + padding: 24px; + } +} +.project-block .box-img { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + position: relative; +} +.project-block .box-img:after { + content: ""; + position: absolute; + inset: 0; + background-color: var(--title-color); + opacity: 0; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.project-block .box-img img { + width: 100%; + /* Small devices */ +} +@media (max-width: 767px) { + .project-block .box-img img { + min-height: 420px; + -o-object-fit: cover; + object-fit: cover; + } +} +.project-block .box-title { + margin-bottom: 8px; + color: var(--white-color); +} +.project-block .box-subtitle { + color: var(--theme-color); + margin-top: -5px; + margin-bottom: 8px; +} +.project-block .box-text { + color: var(--white-color); +} +.project-block .box-btn { + position: absolute; + z-index: 3; + top: 30%; + left: calc(50% - 34px); + visibility: hidden; + opacity: 0; +} +.project-block:hover .box-img:after { + opacity: 0.3; +} +.project-block:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.project-block:hover .box-btn { + visibility: visible; + opacity: 1; + top: 23%; +} + +@media (min-width: 1500px) { + .project-slider4 { + padding-right: 1200px !important; + margin-right: -1200px !important; + } +} +.swiper-slide .project-block { + -webkit-transform: scale(0.75) translateX(-17%); + transform: scale(0.75) translateX(-17%); + -webkit-filter: blur(2.5px); + filter: blur(2.5px); +} +.swiper-slide .project-block .box-content { + visibility: hidden; + opacity: 0; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} + +.swiper-slide-active .project-block { + -webkit-transform: scale(1) translateX(0); + transform: scale(1) translateX(0); + -webkit-filter: none; + filter: none; +} +.swiper-slide-active .project-block .box-content { + visibility: visible; + opacity: 1; +} + +/* Project Element ---------------------------------- */ +.project-element { + position: relative; + z-index: 2; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + text-align: left; +} +.project-element .box-content { + position: absolute; + bottom: 0; + left: 0; + right: 0; + visibility: hidden; + opacity: 0; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +.project-element .box-img { + border-radius: 24px; +} +.project-element .box-img:after { + content: url('data:image/svg+xml,'); + position: absolute; + top: -1px; + right: -1px; + z-index: 2; +} +.project-element .box-img img { + width: 100%; + height: 480px; + -o-object-fit: cover; + object-fit: cover; +} +.project-element .box-title { + background-color: var(--white-color); + display: inline-block; + padding: 8px 24px 0 24px; + margin: -1px 0 -1px 0; + position: relative; + border-radius: 0 16px 0 0; +} +.project-element .box-title:after { + content: url('data:image/svg+xml,'); + position: absolute; + bottom: 0; + left: calc(100% - 1px); + line-height: 1px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .project-element .box-title:after { + display: none; + } +} +.project-element .box-subtitle { + color: var(--theme-color); + margin-top: -5px; + margin-bottom: 8px; + background-color: var(--white-color); + display: block; + width: -webkit-fit-content; + width: -moz-fit-content; + width: fit-content; + padding: 15px 24px 0 24px; + margin: 0; + position: relative; + border-radius: 16px 16px 0 0; +} +.project-element .box-subtitle:after { + content: url('data:image/svg+xml,'); + position: absolute; + bottom: 0; + left: 100%; + line-height: 1px; +} +.project-element .box-text { + background-color: var(--white-color); + padding: 8px 24px 18px 24px; + border-radius: 0 16px 16px 16px; + margin: 0; + /* Extra small devices */ +} +@media (max-width: 375px) { + .project-element .box-text { + border-radius: 0 0 16px 16px; + } +} +.project-element .icon-btn { + --btn-size: 60px; + font-size: 20px; + position: absolute; + top: 0; + right: 0; + z-index: 4; + background-color: var(--title-color); + color: var(--white-color); + border: none; +} +.project-element:hover .box-img img { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} + +.swiper-slide-active .project-element .box-content { + visibility: visible; + opacity: 1; + left: 24px; + right: 24px; + bottom: 24px; + /* Extra small devices */ +} +@media (max-width: 375px) { + .swiper-slide-active .project-element .box-content { + bottom: 12px; + left: 12px; + right: 12px; + } +} + +.project-slider5 { + border-radius: 24px; +} +.project-slider5 .swiper-slide { + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; +} +/* Project Details ------------------------------------ */ +.project-info-wrap { + background-color: var(--white-color); + padding: 40px; + margin-left: 36px; + /* Medium devices */ + /* Extra small devices */ +} +@media (max-width: 991px) { + .project-info-wrap { + margin-left: 0; + margin-top: 40px; + } +} +@media (max-width: 575px) { + .project-info-wrap { + padding: 30px; + } +} +.project-info-wrap .box-title { + margin-bottom: 30px; + padding-bottom: 10px; + border-bottom: 1px solid var(--light-color); + position: relative; +} +.project-info-wrap .box-title:after { + content: ""; + position: absolute; + bottom: -1px; + left: 0; + width: 40px; + height: 1px; + background-color: var(--theme-color); +} +.project-info:not(:last-of-type) { + margin-bottom: 20px; + padding-bottom: 20px; + border-bottom: 1px solid var(--light-color); +} +.project-info .box-label { + margin-top: -0.45em; + margin-bottom: 5px; +} +.project-info .box-name { + font-size: 18px; + font-weight: 700; + margin-bottom: -0.3em; +} + +.project-listing ul li, .project-listing ol li { + margin-bottom: 16px; +} +.project-listing ul li:last-of-type, .project-listing ol li:last-of-type { + margin-bottom: 0; +} + +.project-nav { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + gap: 20px; + /* Extra small devices */ +} +.project-nav-wrap { + padding-top: 40px; + padding-bottom: 40px; + margin-top: 40px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + border-top: 1px solid; + border-bottom: 1px solid; + border-color: var(--th-border-color); + /* Extra small devices */ +} +@media (max-width: 575px) { + .project-nav-wrap { + padding-top: 30px; + padding-bottom: 30px; + } +} +.project-nav .icon-btn { + --btn-size: 60px; + font-size: 20px; + background-color: var(--title-color); + color: var(--white-color); + border: none; +} +.project-nav .icon-btn:hover { + background-color: var(--theme-color); +} +.project-nav .box-title { + margin-bottom: 4px; +} +@media (max-width: 575px) { + .project-nav .media-body { + display: none; + } +} + +/*------------------- 4.00. Process -------------------*/ +/* Process Card ---------------------------------- */ +.process-card { + position: relative; + z-index: 2; +} +.process-card .box-number { + font-size: 18px; + font-family: var(--title-font); + font-weight: 600; + color: var(--white-color); + width: 58px; + height: 52px; + line-height: 52px; + background-color: var(--white-color); + text-align: center; + -webkit-clip-path: path("M57.3334 22.0161C58.7743 24.4931 58.7743 27.545 57.3334 30.022L46.8665 48.0161C45.4256 50.4931 42.7628 52.019 39.881 52.019H18.9471C16.0654 52.019 13.4025 50.4931 11.9617 48.0161L1.49471 30.022C0.0538433 27.545 0.0538471 24.4931 1.49471 22.0161L11.9617 4.022C13.4025 1.54496 16.0654 0.0190428 18.9471 0.019043L39.881 0.0190439C42.7628 0.019044 45.4256 1.54496 46.8665 4.02201L57.3334 22.0161Z"); + clip-path: path("M57.3334 22.0161C58.7743 24.4931 58.7743 27.545 57.3334 30.022L46.8665 48.0161C45.4256 50.4931 42.7628 52.019 39.881 52.019H18.9471C16.0654 52.019 13.4025 50.4931 11.9617 48.0161L1.49471 30.022C0.0538433 27.545 0.0538471 24.4931 1.49471 22.0161L11.9617 4.022C13.4025 1.54496 16.0654 0.0190428 18.9471 0.019043L39.881 0.0190439C42.7628 0.019044 45.4256 1.54496 46.8665 4.02201L57.3334 22.0161Z"); + position: absolute; + left: 0; + top: calc(50% - 26px); + z-index: 3; + -webkit-transition: 0.6s ease-in-out; + transition: 0.6s ease-in-out; +} +.process-card .box-number:before { + content: ""; + position: absolute; + inset: 4px 6px 5px 6px; + background-color: var(--theme-color); + -webkit-clip-path: path("M45.0593 17.9739C46.4854 20.4453 46.4854 23.4902 45.0593 25.9617L37.551 38.9739C36.1249 41.4453 33.4894 42.9678 30.6373 42.9678L15.6206 42.9678C12.7684 42.9678 10.1329 41.4453 8.70681 38.9739L1.19847 25.9617C-0.227614 23.4902 -0.227614 20.4453 1.19847 17.9739L8.70681 4.96168C10.1329 2.49024 12.7684 0.967773 15.6206 0.967773L30.6373 0.967774C33.4894 0.967774 36.1249 2.49024 37.551 4.96168L45.0593 17.9739Z"); + clip-path: path("M45.0593 17.9739C46.4854 20.4453 46.4854 23.4902 45.0593 25.9617L37.551 38.9739C36.1249 41.4453 33.4894 42.9678 30.6373 42.9678L15.6206 42.9678C12.7684 42.9678 10.1329 41.4453 8.70681 38.9739L1.19847 25.9617C-0.227614 23.4902 -0.227614 20.4453 1.19847 17.9739L8.70681 4.96168C10.1329 2.49024 12.7684 0.967773 15.6206 0.967773L30.6373 0.967774C33.4894 0.967774 36.1249 2.49024 37.551 4.96168L45.0593 17.9739Z"); + z-index: -1; +} +.process-card .box-content { + -webkit-mask-image: url('data:image/svg+xml,'); + mask-image: url('data:image/svg+xml,'); + -webkit-mask-size: 100% 100%; + mask-size: 100% 100%; + padding: 24px 24px 24px 72px; + position: relative; + z-index: 2; + background-color: var(--white-color); +} +.process-card .box-title { + margin-bottom: 4px; +} +.process-card .box-text { + font-size: 14px; +} +.process-card .box-shape { + position: absolute; + inset: 0; + z-index: -1; +} +.process-card:hover .box-number { + -webkit-transform: rotateY(360deg); + transform: rotateY(360deg); +} + +/* Process Box ---------------------------------- */ +.process-box { + position: relative; + z-index: 2; + background-image: url('data:image/svg+xml,'); + background-size: 100% 100%; + padding: 24px 90px 24px 24px; + /* Medium Large devices */ + /* Large devices */ + /* Medium devices */ + /* Extra small devices */ +} +.process-box-wrap { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 24px; + /* Large devices */ + /* Small devices */ +} +@media (max-width: 1199px) { + .process-box-wrap { + grid-template-columns: repeat(2, 1fr); + } +} +@media (max-width: 767px) { + .process-box-wrap { + grid-template-columns: repeat(1, 1fr); + } +} +.process-box .box-number { + width: 60px; + height: 60px; + line-height: 60px; + font-size: 18px; + font-family: var(--title-font); + font-weight: 600; + color: var(--white-color); + background-color: var(--theme-color); + text-align: center; + position: absolute; + top: 0; + right: 0; + border-radius: 99px; + -webkit-transition: 0.6s ease-in-out; + transition: 0.6s ease-in-out; +} +.process-box .box-title { + color: var(--white-color); + margin-bottom: 4px; +} +.process-box .box-text { + font-size: 14px; + color: var(--white-color); +} +.process-box:nth-child(even) { + background-image: url('data:image/svg+xml,'); +} +.process-box:nth-child(even) .box-number { + position: absolute; + bottom: 0; + right: 0; + top: unset; +} +@media (max-width: 1299px) { + .process-box { + padding-right: 48px; + } + .process-box .box-text { + font-size: 13px; + } + .process-box .box-number { + width: 56px; + height: 56px; + line-height: 56px; + } +} +@media (max-width: 1199px) { + .process-box { + -webkit-box-flex: 50%; + -ms-flex: 50%; + flex: 50%; + padding-right: 100px; + background-image: url('data:image/svg+xml,') !important; + } + .process-box .box-number { + position: absolute; + bottom: 0; + right: 0; + top: unset; + } + .process-box .box-text { + font-size: 16px; + } +} +@media (max-width: 991px) { + .process-box { + padding-right: 60px; + } + .process-box .box-number { + width: 50px; + height: 50px; + line-height: 50px; + } + .process-box .box-text { + font-size: 14px; + max-width: 277px; + } +} +@media (max-width: 375px) { + .process-box { + padding-right: 40px; + } + .process-box .box-number { + font-size: 16px; + width: 40px; + height: 40px; + line-height: 40px; + } +} +.process-box:hover .box-number { + -webkit-transform: rotateY(360deg); + transform: rotateY(360deg); +} + +/*------------------- 4.00. Dark Theme -------------------*/ +.dark-theme { + --title-color: #fff; + --body-color: #838B9F; + --smoke-color: #0F0F0F; + --smoke-color2: #101018; + --th-border-color: #27282E; + --gray-color: #54595F; + --body-bg: #010101; +} +.dark-theme .th-btn:hover, +.dark-theme .th-btn.active { + color: #010101; +} +.dark-theme .main-menu ul.sub-menu, +.dark-theme .woocommerce-form-register, +.dark-theme .woocommerce-form-coupon, +.dark-theme .woocommerce-form-login { + -webkit-box-shadow: 0px 6px 30px rgba(255, 255, 255, 0.08); + box-shadow: 0px 6px 30px rgba(255, 255, 255, 0.08); +} +.dark-theme .main-menu ul.sub-menu li a:before { + color: var(--theme-color); +} +.dark-theme .th-mobile-menu ul li.th-active > a { + color: var(--theme-color); +} +.dark-theme .th-mobile-menu ul .menu-item-has-children > a .th-mean-expand { + background-color: #282525; +} +.dark-theme .th-menu-wrapper .mobile-logo { + background-color: #fff; +} +.dark-theme .slider-arrow { + background-color: var(--th-border-color); +} +.dark-theme .slider-arrow:before { + content: ""; + position: absolute; + inset: 0; + -webkit-transform: scale(0); + transform: scale(0); + background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-color)), to(var(--gr-color2))); + background-image: linear-gradient(to right, var(--theme-color) 0%, var(--gr-color2) 100%); + border-radius: inherit; + -webkit-transition: 0.4s ease-in-out; + transition: 0.4s ease-in-out; + z-index: -1; +} +.dark-theme .slider-arrow:hover:before { + -webkit-transform: scale(1); + transform: scale(1); +} +.dark-theme .copyright-wrap { + background-color: #27282E; +} +.dark-theme .play-btn:hover i { + color: var(--body-bg); +} +.dark-theme a:hover { + color: var(--theme-color); +} +.dark-theme .blog-card .blog-content { + background-color: var(--smoke-color); + -webkit-box-shadow: none; + box-shadow: none; +} +.dark-theme .blog-card .blog-meta span > i, +.dark-theme .blog-card .blog-meta a > i { + color: var(--theme-color); +} +.dark-theme .blog-card .box-title a { + background-image: -webkit-gradient(linear, right top, left top, from(var(--theme-color)), to(var(--theme-color))); + background-image: linear-gradient(to left, var(--theme-color), var(--theme-color)); +} +.dark-theme .blog-card .th-btn { + background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-color)), to(var(--gr-color2))); + background-image: linear-gradient(to right, var(--theme-color) 0%, var(--gr-color2) 100%); +} +.dark-theme .blog-card .th-btn:after { + content: ""; + position: absolute; + inset: 1px; + background-color: #010407; + border-radius: inherit; + z-index: -2; +} +.dark-theme .blog-card .th-btn:before { + background-image: -webkit-gradient(linear, left top, right top, from(var(--theme-color)), to(var(--gr-color2))); + background-image: linear-gradient(to right, var(--theme-color) 0%, var(--gr-color2) 100%); +} +.dark-theme .blog-card .th-btn:hover { + color: var(--white-color); +} + +/*================================= + 05. Spacing +==================================*/ +/*-- Padding Left And Right --*/ +.px-5 { + padding-right: 5px; + padding-left: 5px; +} + +.px-10 { + padding-right: 10px; + padding-left: 10px; +} + +.px-15 { + padding-right: 15px; + padding-left: 15px; +} + +.px-20 { + padding-right: 20px; + padding-left: 20px; +} + +.px-25 { + padding-right: 25px; + padding-left: 25px; +} + +.px-30 { + padding-right: 30px; + padding-left: 30px; +} + +.px-35 { + padding-right: 35px; + padding-left: 35px; +} + +.px-40 { + padding-right: 40px; + padding-left: 40px; +} + +.px-45 { + padding-right: 45px; + padding-left: 45px; +} + +.px-50 { + padding-right: 50px; + padding-left: 50px; +} + +/*-- Padding Top And Bottom --*/ +.py-5 { + padding-top: 5px; + padding-bottom: 5px; +} + +.py-10 { + padding-top: 10px; + padding-bottom: 10px; +} + +.py-15 { + padding-top: 15px; + padding-bottom: 15px; +} + +.py-20 { + padding-top: 20px; + padding-bottom: 20px; +} + +.py-25 { + padding-top: 25px; + padding-bottom: 25px; +} + +.py-30 { + padding-top: 30px; + padding-bottom: 30px; +} + +.py-35 { + padding-top: 35px; + padding-bottom: 35px; +} + +.py-40 { + padding-top: 40px; + padding-bottom: 40px; +} + +.py-45 { + padding-top: 45px; + padding-bottom: 45px; +} + +.py-50 { + padding-top: 50px; + padding-bottom: 50px; +} + +/*-- Padding Top --*/ +.pt-5 { + padding-top: 5px; +} + +.pt-10 { + padding-top: 10px; +} + +.pt-15 { + padding-top: 15px; +} + +.pt-20 { + padding-top: 20px; +} + +.pt-25 { + padding-top: 25px; +} + +.pt-30 { + padding-top: 30px; +} + +.pt-35 { + padding-top: 35px; +} + +.pt-40 { + padding-top: 40px; +} + +.pt-45 { + padding-top: 45px; +} + +.pt-50 { + padding-top: 50px; +} + +/*-- Padding Bottom --*/ +.pb-5 { + padding-bottom: 5px; +} + +.pb-10 { + padding-bottom: 10px; +} + +.pb-15 { + padding-bottom: 15px; +} + +.pb-20 { + padding-bottom: 20px; +} + +.pb-25 { + padding-bottom: 25px; +} + +.pb-30 { + padding-bottom: 30px; +} + +.pb-35 { + padding-bottom: 35px; +} + +.pb-40 { + padding-bottom: 40px; +} + +.pb-45 { + padding-bottom: 45px; +} + +.pb-50 { + padding-bottom: 50px; +} + +/*-- Padding Left --*/ +.pl-5 { + padding-left: 5px; +} + +.pl-10 { + padding-left: 10px; +} + +.pl-15 { + padding-left: 15px; +} + +.pl-20 { + padding-left: 20px; +} + +.pl-25 { + padding-left: 25px; +} + +.pl-30 { + padding-left: 30px; +} + +.pl-35 { + padding-left: 35px; +} + +.pl-40 { + padding-left: 40px; +} + +.pl-45 { + padding-left: 45px; +} + +.pl-50 { + padding-left: 50px; +} + +/*-- Padding Right --*/ +.pr-5 { + padding-right: 5px; +} + +.pr-10 { + padding-right: 10px; +} + +.pr-15 { + padding-right: 15px; +} + +.pr-20 { + padding-right: 20px; +} + +.pr-25 { + padding-right: 25px; +} + +.pr-30 { + padding-right: 30px; +} + +.pr-35 { + padding-right: 35px; +} + +.pr-40 { + padding-right: 40px; +} + +.pr-45 { + padding-right: 45px; +} + +.pr-50 { + padding-right: 50px; +} + +.pb-60 { + padding-bottom: 60px; +} + +/*-- margin Left And Right --*/ +.mx-5 { + margin-right: 5px; + margin-left: 5px; +} + +.mx-10 { + margin-right: 10px; + margin-left: 10px; +} + +.mx-15 { + margin-right: 15px; + margin-left: 15px; +} + +.mx-20 { + margin-right: 20px; + margin-left: 20px; +} + +.mx-25 { + margin-right: 25px; + margin-left: 25px; +} + +.mx-30 { + margin-right: 30px; + margin-left: 30px; +} + +.mx-35 { + margin-right: 35px; + margin-left: 35px; +} + +.mx-40 { + margin-right: 40px; + margin-left: 40px; +} + +.mx-45 { + margin-right: 45px; + margin-left: 45px; +} + +.mx-50 { + margin-right: 50px; + margin-left: 50px; +} + +/*-- margin Top And Bottom --*/ +.my-5 { + margin-top: 5px; + margin-bottom: 5px; +} + +.my-10 { + margin-top: 10px; + margin-bottom: 10px; +} + +.my-15 { + margin-top: 15px; + margin-bottom: 15px; +} + +.my-20 { + margin-top: 20px; + margin-bottom: 20px; +} + +.my-25 { + margin-top: 25px; + margin-bottom: 25px; +} + +.my-30 { + margin-top: 30px; + margin-bottom: 30px; +} + +.my-35 { + margin-top: 35px; + margin-bottom: 35px; +} + +.my-40 { + margin-top: 40px; + margin-bottom: 40px; +} + +.my-45 { + margin-top: 45px; + margin-bottom: 45px; +} + +.my-50 { + margin-top: 50px; + margin-bottom: 50px; +} + +/*-- margin Top --*/ +.mt-5 { + margin-top: 5px; +} + +.mt-10 { + margin-top: 10px; +} + +.mt-15 { + margin-top: 15px; +} + +.mt-20 { + margin-top: 20px; +} + +.mt-25 { + margin-top: 25px; +} + +.mt-30 { + margin-top: 30px; +} + +.mt-35 { + margin-top: 35px; +} + +.mt-40 { + margin-top: 40px; +} + +.mt-45 { + margin-top: 45px; +} + +.mt-50 { + margin-top: 50px; +} + +/*-- margin Bottom --*/ +.mb-5 { + margin-bottom: 5px; +} + +.mb-10 { + margin-bottom: 10px; +} + +.mb-15 { + margin-bottom: 15px; +} + +.mb-20 { + margin-bottom: 20px; +} + +.mb-25 { + margin-bottom: 25px; +} + +.mb-30 { + margin-bottom: 30px; +} + +.mb-35 { + margin-bottom: 35px; +} + +.mb-40 { + margin-bottom: 40px; +} + +.mb-45 { + margin-bottom: 45px; +} + +.mb-50 { + margin-bottom: 50px; +} + +/*-- margin Left --*/ +.ml-5 { + margin-left: 5px; +} + +.ml-10 { + margin-left: 10px; +} + +.ml-15 { + margin-left: 15px; +} + +.ml-20 { + margin-left: 20px; +} + +.ml-25 { + margin-left: 25px; +} + +.ml-30 { + margin-left: 30px; +} + +.ml-35 { + margin-left: 35px; +} + +.ml-40 { + margin-left: 40px; +} + +.ml-45 { + margin-left: 45px; +} + +.ml-50 { + margin-left: 50px; +} + +/*-- margin Right --*/ +.mr-5 { + margin-right: 5px; +} + +.mr-10 { + margin-right: 10px; +} + +.mr-15 { + margin-right: 15px; +} + +.mr-20 { + margin-right: 20px; +} + +.mr-25 { + margin-right: 25px; +} + +.mr-30 { + margin-right: 30px; +} + +.mr-35 { + margin-right: 35px; +} + +.mr-40 { + margin-right: 40px; +} + +.mr-45 { + margin-right: 45px; +} + +.mr-50 { + margin-right: 50px; +} + +.mb-60 { + margin-bottom: 60px; +} + +.mb-33 { + margin-bottom: 33px; +} + +.mb-28 { + margin-bottom: 28px; +} + +.mt-n1 { + margin-top: -0.25rem; +} + +.mt-n2 { + margin-top: -0.45rem; +} + +.mt-n3 { + margin-top: -0.8rem; +} + +.mt-n4 { + margin-top: -1.5rem; +} + +.mt-n5 { + margin-top: -3rem; +} + +.mb-n1 { + margin-bottom: -0.25rem; +} + +.mb-n2 { + margin-bottom: -0.45rem; +} + +.mb-n3 { + margin-bottom: -0.8rem; +} + +.mb-n4 { + margin-bottom: -1.5rem; +} + +.mb-n5 { + margin-bottom: -3rem; +} + +.space, +.space-top { + padding-top: var(--section-space); +} + +.space, +.space-bottom { + padding-bottom: var(--section-space); +} + +.space-extra, +.space-extra-top { + padding-top: calc(var(--section-space) - 30px); +} + +.space-extra, +.space-extra-bottom { + padding-bottom: calc(var(--section-space) - 30px); +} + +.space-extra2, +.space-extra2-top { + padding-top: calc(var(--section-space) - 40px); +} + +.space-extra2, +.space-extra2-bottom { + padding-bottom: calc(var(--section-space) - 40px); +} + +/* Medium devices */ +@media (max-width: 991px) { + .space, + .space-top { + padding-top: var(--section-space-mobile); + } + .space, + .space-bottom { + padding-bottom: var(--section-space-mobile); + } + .space-extra, + .space-extra-top { + padding-top: calc(var(--section-space-mobile) - 30px); + } + .space-extra, + .space-extra-bottom { + padding-bottom: calc(var(--section-space-mobile) - 30px); + } + .space-top-md-none { + padding-top: 0; + } + .space-extra2, + .space-extra2-top { + padding-top: 70px; + } + .space-extra2, + .space-extra2-bottom { + padding-bottom: 70px; + } +} \ No newline at end of file