@charset "UTF-8"; /* Template Name: TechBiz Template URL: https://wordpress.vecurosoft.com/techbiz/ Description: TechBiz - IT Solution & Service Wordpress Theme Author: vecuro Author URI: https://themeforest.net/user/vecuro_themes 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. Slick 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.10. Feature 4.11. About 4.12. Service 4.13. Counter 4.14. Team 4.15. Process 4.16. Accordion 4.17. Simple Sections 4.18. Testimonial 4.19. Popup Side Menu 4.20. Price Plan 4.21. Forms Style 4.22. Projects 4.23. Contact 4.24. Event 4.25. CTA 4.26. Popup Search Box 4.27. Gallery 4.28. Newsletter 4.29. Wocommerce 4.30. Products 4.31. Cart 4.32. Checkout 4.33. Wishlist 05. Spacing */ /*================================= CSS Index End ==================================*/ /*================================= 01. Theme Base ==================================*/ /*------------------- 1.1. Mixin -------------------*/ /*------------------- 1.2. Function -------------------*/ /*------------------- 1.3. Variable-------------------*/ :root { --theme-color: #0E5AF2; --title-color: #1A1A1A; --body-color: #55595d; --light-color: #d3d3d3; --smoke-color: #EFF1F5; --vs-secondary-color: #EEF2FB; --black-color: #000000; --white-color: #ffffff; --yellow-color: #fec624; --success-color: #28a745; --error-color: #dc3545; --border-color: #E0E0E0; --title-font: "Exo", sans-serif; --body-font: "Fira Sans", sans-serif; --icon-font: "Font Awesome 5 Pro"; --main-container: 1220px; --container-gutters: 30px; --section-space: 50px; --section-space-mobile: 20px; --section-title-space: 80px; --ripple-ani-duration: 5s; } /*------------------- 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); line-height: 26px; overflow-x: hidden; -webkit-font-smoothing: antialiased; /* Small devices */ } @media (max-width: 767px) { body { font-size: 14px; line-height: 24px; } } 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; 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(--border-color); } th { font-weight: 700; font-family: var(--title-font); color: var(--title-color); } td, th { border: 1px solid var(--border-color); padding: 9px 12px; } a { color: var(--theme-color); text-decoration: none; outline: 0; 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 { transition: all ease 0.4s; } img { border: none; max-width: 100%; } ins { text-decoration: none; } pre { 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 { margin: 0 0 18px 0; color: var(--body-color); line-height: 1.63; /* Small devices */ } @media (max-width: 767px) { p { line-height: 1.73; } } 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.5; margin: 0 0 15px 0; } .h1, h1 { font-size: 48px; } .h2, h2 { font-size: 40px; } .h3, h3 { font-size: 36px; } .h4, h4 { font-size: 30px; } .h5, h5 { font-size: 24px; } .h6, h6 { font-size: 20px; } /* Large devices */ @media (max-width: 1199px) { .h1, h1 { font-size: 40px; } .h2, h2 { font-size: 36px; } .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: 36px; } .h2, h2 { font-size: 30px; } .h3, h3 { font-size: 26px; } .h4, h4 { font-size: 22px; } .h5, h5 { font-size: 18px; } .h6, h6 { font-size: 16px; } } /*------------------- 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-latest-comments a:hover { color: var(--theme-color); } .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 { display: flex; flex-wrap: wrap; margin-bottom: 30px; } .wp-block-search .wp-block-search__input { width: 100%; max-width: calc(100% - 120px); border: 1px solid var(--border-color); height: 50px; padding-left: 20px; } .wp-block-search .wp-block-search__button { margin: 0; width: 120px; border: none; height: 50px; color: #fff; background-color: var(--theme-color); } .wp-block-search .wp-block-search__button:hover { background-color: var(--title-color); opacity: 0.8; } 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; } .logged-in .will-sticky .sticky-active.active, .logged-in .preloader .vs-btn { top: 32px; } @media (max-width: 782px) { .logged-in .will-sticky .sticky-active.active, .logged-in .preloader .vs-btn { top: 46px; } } @media (max-width: 600px) { .logged-in .will-sticky .sticky-active.active, .logged-in .preloader .vs-btn { top: 0; } } .post-password-form .theme-input-group { display: flex; flex-wrap: wrap; margin-bottom: 30px; margin-top: 20px; } .post-password-form .theme-input-group .theme-input-style { width: 100%; max-width: calc(100% - 120px); border: 1px solid rgba(0, 0, 0, 0.1); height: 50px; padding-left: 20px; } .post-password-form .theme-input-group .submit-btn { margin: 0; width: 120px; border: none; height: 50px; color: #fff; background-color: var(--theme-color); } .post-password-form .theme-input-group .submit-btn:hover { background-color: var(--title-color); opacity: 0.8; } .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 { background-color: var(--smoke-color); box-shadow: none; position: relative; } .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: "Font Awesome 5 Pro"; font-size: 5rem; opacity: 0.3; right: 15px; line-height: 1; top: 15px; color: var(--theme-color); z-index: 1; } .blog-single.tag-sticky-2::before, .blog-single.sticky::before { content: "Featured"; right: 0; top: 0; font-size: 18px; color: var(--white-color); background-color: var(--theme-color); font-family: var(--title-font); opacity: 1; text-transform: capitalize; padding: 10px 23px; font-weight: 400; } .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 { box-shadow: none; border: none; 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; } .vs-search { background-color: #f3f3f3; margin-bottom: 30px; border: 1px solid #f3f3f3; } .vs-search .search-grid-content { padding: 30px; /* Small devices */ } @media (max-width: 767px) { .vs-search .search-grid-content { padding: 20px; } } .vs-search .search-grid-title { font-size: 20px; margin-bottom: 5px; margin-top: -0.2em; } .vs-search .search-grid-title a { color: inherit; } .vs-search .search-grid-title a:hover { color: var(--theme-color); } .vs-search .search-grid-meta > * { display: inline-block; margin-right: 15px; font-size: 14px; } .vs-search .search-grid-meta > *:last-child { margin-right: 0; } .vs-search .search-grid-meta a, .vs-search .search-grid-meta span { color: var(--body-color); } .vs-search .search-grid-meta a i, .vs-search .search-grid-meta span i { color: var(--theme-color); margin-right: 10px; } .content-none-search .widget_search { margin-bottom: 0; } .content-none-search.row { --bs-gutter-x: 0 !important; } /* Large devices */ @media (max-width: 1199px) { .blog-single.format-quote:before, .blog-single.format-link:before, .blog-single.tag-sticky-2:before, .blog-single.sticky:before { font-size: 14px; padding: 8px 16px; } } /* 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; padding: 8px 16px; } } @media (max-width: 768px) { .wp-block-search .wp-block-search__input { max-width: 100%; margin-bottom: 20px; } .wp-block-latest-comments { padding-left: 10px; } .page--content.clearfix + .vs-comment-form { margin-top: 24px; } } /*================================= 02. Reset ==================================*/ /*------------------- 2.1. Container -------------------*/ @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); } } @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; } } @media (min-width: 1399px) { .container-style2 { max-width: 1920px; overflow: hidden; padding-left: 0; padding-right: 0; } } .container-style3 { --main-container: 1445px; } @media (min-width: 1500px) and (max-width: 1921px) { .container-style1 { max-width: 1576px; overflow: hidden; margin-right: 0; padding-right: 0; } } /*------------------- 2.2. Grid -------------------*/ .row > .slick-list { padding-left: 0; padding-right: 0; } .slick-track > [class*=col] { 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: 767px) { .row:not([class*=gx-]) { --bs-gutter-x: 30px; } } .gy-30 { --bs-gutter-y: 30px; } .gy-gx { --bs-gutter-y: var(--bs-gutter-x); } @media (min-width: 1199px) { .gx-60 { --bs-gutter-x: 60px; } .gx-70 { --bs-gutter-x: 70px; } } @media (min-width: 1399px) { .gx-30 { --bs-gutter-x: 30px; } .gx-20 { --bs-gutter-x: 20px; } .gx-40 { --bs-gutter-x: 40px; } } /*------------------- 2.3. Input -------------------*/ select, .form-control, .form-select, textarea, input { height: 50px; padding: 0 30px 0 28px; padding-right: 45px; border: 1px solid #e0e0e0; color: var(--body-color); background-color: var(--white-color); border-radius: 0; font-size: 14px; width: 100%; } select:focus, .form-control:focus, .form-select:focus, textarea:focus, input:focus { outline: 0; box-shadow: none; background-color: var(--white-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::placeholder, .form-control::placeholder, .form-select::placeholder, textarea::placeholder, input::placeholder { color: var(--body-color); } select.form-control-lg, .form-control.form-control-lg, .form-select.form-control-lg, textarea.form-control-lg, input.form-control-lg { height: 60px; } select.form-control-sm, .form-control.form-control-sm, .form-select.form-control-sm, textarea.form-control-sm, input.form-control-sm { height: 40px; font-size: 12px; } select[readonly], .form-control[readonly], .form-select[readonly], textarea[readonly], input[readonly] { color: var(--title-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; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; } textarea.form-control, textarea { min-height: 150px; padding-top: 16px; padding-bottom: 17px; border-radius: 0; } input[type=checkbox] { visibility: hidden; opacity: 0; 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(--border-color); height: 18px; width: 18px; line-height: 18px; text-align: center; font-size: 12px; } input[type=radio] { visibility: hidden; opacity: 0; 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.5px; 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; 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; } .form-group { margin-bottom: var(--bs-gutter-x); position: relative; } .form-group > i { position: absolute; right: calc(var(--bs-gutter-x) / 2 + 30px); top: 18px; font-size: 14px; color: #a0abb4; } .form-group.has-label > i { top: 45px; } 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; 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; } .fluentform .ff-el-form-check-label .ff-el-form-check-input { visibility: visible; opacity: 1; width: 15px; height: 15px; } /*------------------- 2.4. Slick Slider -------------------*/ .slick-track { min-width: 100%; } .slick-slide img { display: inline-block; } .slick-dots { list-style-type: none; padding: 2px 0; margin: 38px 0 38px 0; line-height: 0; text-align: center; height: max-content; } .slick-dots li { display: inline-block; margin-right: 25px; } .slick-dots li:last-child { margin-right: 0; } .slick-dots button { font-size: 0; padding: 0; background-color: transparent; width: 8px; height: 8px; line-height: 0; border-radius: 9999px; border: none; background-color: var(--dots-bg, #D8D8D8); transition: all ease 0.4s; position: relative; } .slick-dots button:hover { border-color: var(--theme-color); } .slick-dots button:before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border: 2px solid var(--theme-color); border-radius: 50%; transition: all ease 0.4s; opacity: 0; visibility: hidden; } .slick-dots .slick-active button { background-color: var(--theme-color); } .slick-dots .slick-active button::before { opacity: 1; visibility: visible; } .slick-arrow { display: inline-block; padding: 0; background-color: var(--white-color); position: absolute; top: 50%; border: 1px solid var(--smoke-color); left: var(--pos-x, -100px); width: var(--icon-size, 50px); height: var(--icon-size, 50px); font-size: var(--icon-font-size, 18px); margin-top: calc(var(--icon-size, 50px) / -2); z-index: 2; border-radius: 50%; } .slick-arrow.default { position: relative; --pos-x: 0; margin-top: 0; } .slick-arrow.slick-next { right: var(--pos-x, -100px); left: auto; } .slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .arrow-margin .slick-arrow { top: calc(50% - 30px); } .arrow-wrap .slick-arrow { opacity: 0; visibility: hidden; } .arrow-wrap:hover .slick-arrow { opacity: 1; visibility: visible; } .dot-style2 .slick-dots { margin-top: 10px; margin-bottom: 30px; } .dot-style2 .slick-dots button { width: 10px; height: 10px; border-radius: 9999px; background-color: var(--theme-color); } .dot-style2 .slick-dots button:before { display: none; } .dot-style2 .slick-dots button:hover { background-color: var(--title-color); } .dot-style2 .slick-dots li { margin: 0 5px; } .dot-style2 .slick-dots li.slick-active button { width: 40px; } /* Extra large devices */ @media (max-width: 1500px) { .slick-arrow { --arrow-horizontal: -20px; } } /* Medium Large devices */ @media (max-width: 1399px) { .slick-arrow { --arrow-horizontal: 40px; } } /* Medium devices */ @media (max-width: 991px) { .slick-arrow { --icon-size: 40px; margin-right: 40px; } .slick-arrow.slick-next { margin-right: 0; margin-left: 40px; } .slick-dots { margin: 8px 0 38px 0; } } /*------------------- 2.5. Mobile Menu -------------------*/ .vs-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%; transition: all ease 0.8s; opacity: 0; visibility: hidden; } .vs-menu-wrapper .mobile-logo { padding-bottom: 30px; padding-top: 40px; display: block; text-align: center; background-color: rgba(28, 185, 200, 0.1); } .vs-menu-wrapper .mobile-logo img, .vs-menu-wrapper .mobile-logo svg { max-width: 190px; } .vs-menu-wrapper .vs-menu-toggle { border: none; font-size: 22px; position: absolute; right: 10px; top: 10px; padding: 0; line-height: 1; width: 33px; height: 33px; line-height: 33px; font-size: 18px; z-index: 1; border-radius: 50%; } .vs-menu-wrapper .vs-menu-toggle:hover { background-color: var(--title-color); color: var(--white-color); } .vs-menu-wrapper .vs-menu-area { width: 100%; max-width: 310px; background-color: #fff; border-right: 3px solid var(--theme-color); height: 100%; position: relative; left: -110%; opacity: 0; visibility: hidden; transition: all ease 1s; z-index: 1; } .vs-menu-wrapper.vs-body-visible { opacity: 1; visibility: visible; } .vs-menu-wrapper.vs-body-visible .vs-menu-area { left: 0; opacity: 1; visibility: visible; } .vs-mobile-menu { overflow-y: scroll; max-height: calc(100vh - 200px); padding-bottom: 40px; margin-top: 33px; text-align: left; } .vs-mobile-menu ul { margin: 0; padding: 0 0; } .vs-mobile-menu ul li { border-bottom: 1px solid #fdedf1; list-style-type: none; } .vs-mobile-menu ul li li:first-child { border-top: 1px solid #fdedf1; } .vs-mobile-menu ul li a { display: block; position: relative; padding: 12px 0; line-height: 1; font-size: 16px; text-transform: capitalize; color: var(--title-color); } .vs-mobile-menu ul li a:before { content: "\f105"; font-family: var(--icon-font); position: relative; left: 0; top: 0; margin-right: 10px; display: inline-block; } .vs-mobile-menu ul li.vs-active > a { color: var(--theme-color); } .vs-mobile-menu ul li.vs-active > a:before { transform: rotate(90deg); } .vs-mobile-menu ul li ul li { padding-left: 20px; } .vs-mobile-menu ul li ul li:last-child { border-bottom: none; } .vs-mobile-menu ul .vs-item-has-children > a.vs-mean-expand:after { 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); box-shadow: 0 0 20px -8px rgba(173, 136, 88, 0.5); border-radius: 50%; content: "\f067"; font-family: var(--icon-font); } .vs-mobile-menu ul .vs-item-has-children.vs-active > a.vs-mean-expand:after { content: "\f068"; } .vs-mobile-menu > ul { padding: 0 40px; } .vs-mobile-menu > ul > li:last-child { border-bottom: none; } .vs-menu-toggle { width: 50px; height: 50px; padding: 0; font-size: 24px; border: none; display: inline-block; background-color: #F2F6FF; color: var(--theme-color); border-radius: 5px; } .vs-menu-toggle.style-text, .vs-menu-toggle.style-text-white { width: auto; height: auto; background-color: transparent; color: var(--title-color); font-size: 20px; } .vs-menu-toggle.style-text i, .vs-menu-toggle.style-text-white i { margin-right: 10px; } .vs-menu-toggle.style-text-white { color: var(--white-color); } .vs-menu-style2 .mobile-logo { background-color: var(--title-color); } @media (max-width: 400px) { .vs-menu-wrapper .vs-menu-area { width: 100%; max-width: 270px; } .vs-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(--white-color); } .preloader .vs-btn { padding: 15px 20px; border-radius: 0; font-size: 14px; } .preloader-inner { text-align: center; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .preloader-inner img { display: block; margin: 0 auto 10px auto; } .loader { animation: loaderspin 1.5s infinite; height: 50px; width: 50px; display: block; } .loader:before, .loader:after { border-radius: 50%; content: ""; display: block; height: 20px; width: 20px; } .loader:before { animation: ball1 1.5s infinite; background-color: var(--title-color); box-shadow: 30px 0 0 var(--theme-color); margin-bottom: 10px; } .loader:after { animation: ball2 1.5s infinite; background-color: var(--theme-color); box-shadow: 30px 0 0 var(--title-color); } @keyframes loaderspin { 0% { transform: rotate(0deg) scale(0.8); } 50% { transform: rotate(360deg) scale(1); } 100% { transform: rotate(720deg) scale(0.8); } } @keyframes ball1 { 0% { box-shadow: 30px 0 0 var(--theme-color); } 50% { box-shadow: 0 0 0 var(--theme-color); margin-bottom: 0; transform: translate(15px, 15px); } 100% { box-shadow: 30px 0 0 var(--theme-color); margin-bottom: 10px; } } @keyframes ball2 { 0% { box-shadow: 30px 0 0 var(--title-color); } 50% { box-shadow: 0 0 0 var(--title-color); margin-top: -20px; transform: translate(15px, 15px); } 100% { box-shadow: 30px 0 0 var(--title-color); margin-top: 0; } } /*------------------- 3.2. Buttons -------------------*/ .vs-btn { position: relative; display: inline-block; border: none; text-transform: uppercase; text-align: center; background-color: var(--theme-color); color: var(--white-color); font-family: var(--body-font); font-size: 16px; font-weight: 500; line-height: 1; padding: 19px 30.5px; border-radius: 5px; z-index: 1; overflow: hidden; } .vs-btn::after, .vs-btn::before { content: ""; margin: auto; position: absolute; top: -1px; left: -1px; width: calc(100% + 4px); height: calc(100% + 4px); background: var(--title-color); transition: all ease 0.5s; z-index: -1; border-radius: inherit; } .vs-btn:before { transform: rotateX(90deg); } .vs-btn:after { transform: rotateY(90deg); } .vs-btn > i { margin-left: 8px; } .vs-btn.style2 { background-color: var(--white-color); color: var(--theme-color); } .vs-btn.style4, .vs-btn.style3 { background-color: var(--smoke-color); color: var(--theme-color); } .vs-btn.style3 { padding: 14px 23.5px; } .vs-btn.style5 { background-color: #0844bc; color: var(--white-color); } .vs-btn.style6 { background-color: var(--title-color); color: var(--white-color); } .vs-btn.style6:after, .vs-btn.style6::before { background-color: var(--theme-color); } .vs-btn.style7 { border-radius: 9999px; text-transform: capitalize; } .vs-btn.style8 { border: 2px solid var(--theme-color); color: var(--theme-color); background-color: transparent; border-radius: 9999px; padding: 17px 28px; text-transform: capitalize; } .vs-btn.style8:after, .vs-btn.style8:before { display: none; } .vs-btn.style8:hover { background-color: var(--theme-color); color: var(--white-color); } .vs-btn.style9 { background-color: var(--white-color); color: var(--theme-color); border-radius: 9999px; text-transform: capitalize; } .vs-btn.style10 { border: 2px solid var(--white-color); color: var(--white-color); background-color: transparent; border-radius: 9999px; padding: 17px 28px; text-transform: capitalize; } .vs-btn.style10 i { margin-right: 10px; margin-left: 0; } .vs-btn.style10:hover { border-color: transparent; } .vs-btn.style11 { border-radius: 9999px; text-transform: capitalize; } .vs-btn.style12 { text-transform: capitalize; border-radius: 9999px; background-color: transparent; border: 2px solid var(--white-color); color: var(--white-color); } .vs-btn.style12:after, .vs-btn.style12:before { display: none; } .vs-btn.style12:hover { background-color: var(--title-color); color: var(--white-color); border-color: transparent; } .vs-btn:hover { color: var(--white-color); } .vs-btn:hover:before { transform: rotateX(0); } .vs-btn:hover:after { transform: rotateY(0); } .icon-btn, .hero-layout4 .slick-arrow { display: inline-block; width: var(--btn-size, 67px); height: var(--btn-size, 67px); line-height: var(--btn-size, 67px); font-size: var(--btn-font-size, 20px); background-color: var(--theme-color); color: var(--white-color); border: none; text-align: center; border-radius: 50%; padding: 0; } .icon-btn.style2, .hero-layout4 .style2.slick-arrow { border: 2px solid var(--white-color); color: var(--white-color); background-color: transparent; line-height: calc(var(--btn-size, 67px) - 2px); } .icon-btn.style2:hover, .hero-layout4 .style2.slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .icon-btn.style4, .hero-layout4 .style4.slick-arrow, .icon-btn.style3, .hero-layout4 .style3.slick-arrow { --btn-size: 55px; background-color: #f2f6ff; color: var(--theme-color); border-radius: 5px; } .icon-btn.style4, .hero-layout4 .style4.slick-arrow { background-color: var(--white-color); } .icon-btn.style5, .hero-layout4 .style5.slick-arrow { background-color: var(--white-color); color: var(--title-color); box-shadow: 0px 10px 24px rgba(0, 0, 0, 0.08); } .icon-btn.style5:hover, .hero-layout4 .style5.slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); box-shadow: none; } .icon-btn.style6, .hero-layout4 .style6.slick-arrow { background-color: var(--theme-color); color: var(--white-color); --btn-size: 55px; --btn-font-size: 17px; } .icon-btn.style7, .hero-layout4 .style7.slick-arrow { --btn-size: 50px; border: 1px solid #e0e0e0; background-color: transparent; color: var(--title-color); } .icon-btn.style7:hover, .hero-layout4 .style7.slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .icon-btn.style13, .hero-layout4 .style13.slick-arrow { background-color: transparent; color: #ffffff; border-radius: 0; --btn-size: 55px; } .icon-btn.style13:hover, .hero-layout4 .style13.slick-arrow:hover, .icon-btn.style13:focus, .hero-layout4 .style13.slick-arrow:focus { background-color: transparent; } .icon-btn.style13.searchBoxTggler::after, .hero-layout4 .style13.searchBoxTggler.slick-arrow::after { content: ""; width: 1px; height: 20px; position: absolute; top: 50%; transform: translate(-50%, -50%); background-color: rgb(217, 217, 217); right: -0.5px; left: auto; /* Medium devices */ } @media (max-width: 991px) { .icon-btn.style13.searchBoxTggler::after, .hero-layout4 .style13.searchBoxTggler.slick-arrow::after { display: none; } } .icon-btn:hover, .hero-layout4 .slick-arrow:hover { background-color: var(--title-color); color: var(--white-color); border-color: transparent; } .play-btn { display: inline-block; position: relative; z-index: 1; border: none; background-color: transparent; padding: 0; } .play-btn > i { display: inline-block; width: var(--icon-size, 124px); height: var(--icon-size, 124px); line-height: var(--icon-size, 124px); font-size: var(--icon-font-size, 1.5em); text-align: center; background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; z-index: 1; 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%; transition: all ease 0.4s; } .play-btn:after { animation-delay: 2s; } .play-btn.style3 i, .play-btn.style2 i { --icon-size: 60px; border-radius: 5px; --icon-font-size: 18px; } .play-btn.style2:after, .play-btn.style2:before { border-radius: 5px; } .play-btn.style3 i { background-color: rgba(14, 89, 242, 0.7); } .play-btn.style3:after, .play-btn.style3::before { display: none; } .play-btn.style4 { --icon-size: 120px; --icon-font-size: 30px; } .play-btn.style4:after, .play-btn.style4:before, .play-btn.style4 i { background-color: var(--white-color); color: var(--theme-color); } .play-btn.style5 i { border-radius: 0; --icon-size: 120px; --icon-font-size: 30px; } .play-btn.style5:after, .play-btn.style5:before { border: 2px solid var(--theme-color); background-color: transparent; border-radius: 0; } .play-btn.style7, .play-btn.style6 { --icon-size: 60px; --icon-font-size: 18px; } .play-btn.style7 { --icon-size: 60px; --icon-font-size: 18px; } .play-btn.style7:before, .play-btn.style7:after { border: 1px solid var(--white-color); background-color: transparent; opacity: 0; } .play-btn.style7 i { border: none; color: var(--white-color); background-color: transparent; } .play-btn.style7:hover i, .play-btn.style7:hover:before, .play-btn.style7:hover:after { border-color: transparent; background-color: var(--white-color); color: var(--theme-color); } .play-btn:hover:after, .play-btn:hover::before, .play-btn:hover i { background-color: var(--title-color); color: var(--white-color); } .link-btn { font-weight: 500; font-size: 16px; display: inline-block; line-height: 0.8; position: relative; padding-bottom: 2px; margin-bottom: -2px; text-transform: uppercase; } .link-btn i { margin-left: 7px; font-size: 0.9rem; } .link-btn:before { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: var(--theme-color); transition: all ease 0.4s; } .link-btn:hover { color: var(--theme-color); } .link-btn:hover::before { width: 100%; } .scroll-btn { position: fixed; bottom: 300px; right: 30px; z-index: 94; opacity: 0; visibility: hidden; display: inline-block; border-radius: 50%; /* Medium devices */ } .scroll-btn i { display: inline-block; background-color: var(--theme-color); color: var(--white-color); text-align: center; font-size: 16px; width: var(--btn-size, 50px); height: var(--btn-size, 50px); line-height: var(--btn-size, 50px); z-index: 2; border-radius: inherit; position: relative; transition: all ease 0.8s; } .scroll-btn:before { content: ""; position: absolute; left: var(--extra-shape, -6px); top: var(--extra-shape, -6px); right: var(--extra-shape, -6px); bottom: var(--extra-shape, -6px); background-color: transparent; border-radius: inherit; z-index: 1; border: 2px dashed var(--theme-color); animation: spin 13s infinite linear; } .scroll-btn:focus i, .scroll-btn:hover i { background-color: var(--title-color); color: var(--white-color); } .scroll-btn.show { bottom: 120px; opacity: 1; visibility: visible; } @media (max-width: 991px) { .scroll-btn { --btn-size: 40px; --extra-shape: -4px; right: 15px; bottom: 50px; } .scroll-btn.show { bottom: 15px; } } .scrollToTop { position: fixed; right: 60px; bottom: 500px; opacity: 0; visibility: hidden; transition: all ease 0.4s; z-index: 96; } .scrollToTop.show { bottom: 60px; opacity: 1; visibility: visible; } .view-big-btn { text-align: center; display: inline-block; } .view-big-btn i { display: inline-block; text-align: center; width: var(--icon-size, 130px); height: var(--icon-size, 130px); line-height: var(--icon-size, 130px); font-size: var(--icon-font-size, 36px); background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; transition: all ease 0.4s; } .view-big-btn .btn-text { display: block; color: var(--title-color); font-size: 14px; font-weight: 500; line-height: 1; margin: 15px 0 0 0; } .view-big-btn:hover i { background-color: var(--title-color); } /* Large devices */ @media (max-width: 1199px) { .play-btn.style4 { --icon-size: 80px; --icon-font-size: 20px; } .view-big-btn i { --icon-size: 80px; --icon-font-size: 24px; } } /* Medium devices */ @media (max-width: 991px) { .play-btn { --icon-size: 60px; } .scrollToTop { right: 20px; } .scrollToTop.show { bottom: 20px; } } /*------------------- 3.3. Titles -------------------*/ .sec-title3, .sec-title { text-transform: uppercase; line-height: 1.35; margin: -0.25em 0 18px 0; } .sec-title2 { font-size: 18px; font-weight: 700; text-transform: uppercase; margin: -0.3em 0 22px 0; } .sec-title3 { text-transform: capitalize; } .sec-title4 { font-size: 60px; line-height: 1.2; } .sec-title6, .sec-title5 { font-size: 48px; line-height: 1.3; margin: -0.2em 0 26px 0; display: block; } .sec-title6 + p, .sec-title5 + p { margin-top: -10px; } .sec-title6 { text-transform: uppercase; } .sec-subtitle2, .sec-subtitle { text-transform: uppercase; display: block; color: var(--theme-color); font-size: 16px; font-weight: 600; font-family: var(--title-font); margin: -0.25em 0 23px 0; display: block; } .sec-subtitle2 > i, .sec-subtitle > i { margin-right: 15px; } .sec-subtitle2 { text-transform: none; font-weight: 600; display: block; margin-bottom: 10px; } .sec-subtitle2 .fa-arrow-right { font-size: 1.1em; vertical-align: middle; transform: rotate(-30deg); } .sec-subtitle3, .sec-subtitle4, .sec-subtitle5 { font-size: 18px; font-weight: 500; color: var(--theme-color); display: block; text-transform: uppercase; margin: -0.2em 0 15px 0; } .sec-subtitle4 { font-size: 20px; margin-bottom: 15px; } .sec-subtitle3 { font-size: 18px; } .sec-innertitle { font-size: 40px; margin: 0 0 25px 0; } .title-area { margin-bottom: calc(var(--section-title-space) - 17px); } .sec-btns { padding: 13px 0 0 0; display: flex; flex-wrap: wrap; gap: 10px; } .sec-btns i.fa-arrow-left { margin-left: 0; margin-right: 10px; } .sec-btns2 { margin-bottom: calc(var(--section-title-space) - 5px); } .sec-line-wrap { display: flex; gap: 25px; align-items: center; margin: 0 0 80px 0; } .sec-line-wrap .sec-title2 { margin: -0.3em 0 -0.4em 0; } .sec-line { background-color: var(--theme-color); flex: 1; height: 2px; } .border-title { position: relative; padding: 0 0 5px 0; margin-bottom: 0; } .border-title-border { width: 48px; height: 2px; display: inline-block; background-color: var(--theme-color); margin-bottom: 25px; } .sec-big-text2, .sec-big-text { font-size: 160px; font-weight: 700; font-family: var(--title-font); line-height: 1; display: block; color: #f1f3f9; position: absolute; left: 0; right: 0; top: -37px; z-index: -1; } .sec-big-text2 { top: auto; left: auto; right: 120px; bottom: -26px; } /* Extra large devices */ @media (max-width: 1500px) { .sec-big-text2, .sec-big-text { font-size: 130px; } .sec-title6, .sec-title5 { font-size: 40px; line-height: 1.3; } } /* Medium Large devices */ @media (max-width: 1399px) { .sec-title4 { font-size: 42px; } } /* Large devices */ @media (max-width: 1199px) { .sec-title4 { font-size: 36px; line-height: 1.4; } .sec-title6, .sec-title5 { font-size: 36px; line-height: 1.3; } .sec-title6 + p, .sec-title5 + p { margin-top: 0; } .sec-innertitle { font-size: 30px; } } /* Medium devices */ @media (max-width: 991px) { .sec-title3.h1, .sec-title.h1 { font-size: 36px; } .sec-subtitle2 { margin-bottom: 15px; } .sec-line-wrap { margin: 0 0 60px 0; } .title-area { margin-bottom: 40px; } .sec-big-text2, .sec-big-text { font-size: 100px; } .sec-big-text { top: -4px; } .sec-big-text2 { right: 70px; bottom: -0.18em; } } /* Small devices */ @media (max-width: 767px) { .sec-title3.h1, .sec-title.h1 { font-size: 30px; } .sec-subtitle { font-size: 16px; } .sec-line-wrap { margin: 0 0 40px 0; gap: 10px; } .sec-title4 { font-size: 30px; line-height: 1.4; } } /* Small devices */ @media (max-width: 767px) { .sec-big-text2, .sec-big-text { font-size: 50px; } .sec-big-text2 { right: 0; bottom: -0.15em; left: 0; text-align: center; } .sec-subtitle4 { font-size: 16px; } .sec-title6, .sec-title5 { font-size: 30px; } .sec-innertitle { font-size: 26px; } } /*------------------- 3.4. Common -------------------*/ .home-two-bg img { width: 100%; } .image-scale-hover { overflow: hidden; } .image-scale-hover img { transition: all ease 0.4s; transform: scale(1.001); } .image-scale-hover:hover img { transform: scale(1.2); } .alert-dismissible .btn-close { font-size: 18px; line-height: 1; } .z-index-step1 { position: relative; z-index: 4 !important; } .z-index-common { position: relative; z-index: 3; } .z-index-n1 { z-index: -1; } .media-body { flex: 1; } .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.35em 0.55em; border-radius: 50%; } .hr-style1 { background-color: var(--white-color); margin: 20px 0 30px 0; } .new-label { font-size: 12px; background-color: var(--error-color); color: var(--white-color); line-height: 1; padding: 1px 5px; border-radius: 4px; text-transform: capitalize; position: relative; top: -1px; } .big-name { font-size: 450px; color: var(--white-color); -webkit-text-stroke: 2px #eef0ff; line-height: 1; letter-spacing: -0.08em; font-weight: 400; position: relative; z-index: 31; text-align: right; margin: -234px 30px -59px 0; } .home-five-shape1 { position: absolute; left: 0; top: 0; bottom: 0; background-color: #f6f7fc; width: 100%; max-width: 1255px; z-index: -3; } .home-five-shape2 { position: absolute; left: -428px; bottom: 250px; width: 1024px; height: 1024px; border: 50px solid var(--theme-color); border-radius: 50%; z-index: -2; } .home-five-shape3 { position: absolute; right: 60px; bottom: 325px; } .home-five-wrap1 { position: relative; border-bottom: 7px solid var(--theme-color); z-index: 1; } @media (max-width: 479px) { .elementor-image-gallery .gallery-columns-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; } } .elementor-image-gallery .gallery-item img { width: 100%; } .fal.fa-laptop-house:before { content: "яеж"; } .far { font-family: var(--icon-font) !important; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .ls-wrapper > .ls-layer.d-hd-none, .ls-wrapper > a > .ls-layer.d-hd-none, .d-hd-none { display: none !important; } } @media (min-width: 1500px) { .d-xxxl-block { display: block !important; } } /* Extra large devices */ @media (max-width: 1500px) { .big-name { font-size: 320px; margin: -168px 30px -59px 0; } .home-five-shape3 { right: 30px; bottom: 50px; max-width: 200px; } .home-five-shape2 { left: -18%; bottom: 34%; width: 500px; height: 500px; } .home-five-shape1 { max-width: 100%; right: 60px; width: auto; } } /* Medium Large devices */ @media (max-width: 1399px) { .big-name { font-size: 245px; margin: -128px 40px -42px 0; } .home-five-shape1 { right: 0; } } /* Large devices */ @media (max-width: 1199px) { .big-name { font-size: 190px; margin: -100px 40px -42px 0; } } /* Medium devices */ @media (max-width: 991px) { .big-name { font-size: 146px; margin: -78px 40px -25px 0; } } /* Small devices */ @media (max-width: 767px) { .big-name { font-size: 75px; margin: -20px 0 -12px 0; letter-spacing: 0; text-align: center; } } /*------------------- 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-light { font-weight: 300; } .fw-normal { font-weight: 400; } .fw-medium { font-weight: 500; } .fw-semibold { font-weight: 600; } .fw-bold { font-weight: 700; } .fw-extrabold { font-weight: 800; } .fs-md { font-size: 18px; } .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-white { background-color: var(--white-color) !important; } .bg-black { background-color: var(--black-color) !important; } .bg-title { background-color: var(--title-color) !important; } .bg-gray { background-color: #e5e5e5; } .background-image, [data-bg-src] { background-repeat: no-repeat; background-size: cover; background-position: center center; } .bg-fluid { background-repeat: no-repeat; background-size: 100% 100%; background-position: center center; } .bg-auto { background-size: auto auto; } /*------------------- 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-yellow { color: var(--yellow-color) !important; } .text-success { color: var(--success-color) !important; } .text-error { color: var(--error-color) !important; } .text-inherit, .footer-layout5 .copyright-text a, .footer-info-list .info a { color: inherit; } .text-inherit:hover, .footer-layout5 .copyright-text a:hover, .footer-info-list .info a:hover { color: var(--theme-color); } a.text-theme:hover, .text-reset:hover { text-decoration: underline; } .text-light2 { color: #919398; } /*------------------- 3.9. Overlay -------------------*/ .overlay { position: absolute; top: 0; left: 0; height: 100%; width: 100%; } .position-center, .cta-video .play-btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } [data-overlay] { position: relative; } [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=white]:before { background-color: var(--white-color); } [data-overlay=black]:before { background-color: var(--black-color); } [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 -------------------*/ .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } .wow-animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .fadein { --animation-name: fadein-custom; } .slideinup { --animation-name: slideinup; } .slideindown { --animation-name: slideindown; } .slideinleft { --animation-name: slideinleft; } .slideinright { --animation-name: slideinright; } .animated, .hero-layout5 .hero-info, .hero-layout5 .hero-shape5, .hero-layout5 .hero-shape4, .hero-layout5 .hero-shape3, .hero-layout5 .hero-shape2, .hero-layout5 .hero-list li, .hero-layout5 .hero-title, .hero-layout5 .hero-subtitle, .hero-layout4 .hero-title2, .hero-layout4 .hero-title, .hero-layout4 .hero-subtitle, .hero-layout3 .hero-text, .hero-layout3 .hero-title, .hero-layout3 .hero-subtitle, .hero-layout2 .hero-play, .hero-layout2 .hero-shape2, .hero-layout2 .hero-title, .hero-layout2 .hero-subtitle, .hero-layout2 .hero-bg-text, .hero-layout1 .hero-text, .hero-layout1 .hero-title, .hero-btns { animation-fill-mode: both; animation-iteration-count: 1; animation-duration: 1s; animation-delay: 0.3s; animation-name: var(--animation-name); } .ripple-animation, .play-btn:after, .play-btn:before { animation-duration: var(--ripple-ani-duration); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-name: ripple; } @keyframes ripple { 0% { transform: scale(1); opacity: 0; } 30% { opacity: 0.4; } 100% { transform: scale(1.5); opacity: 0; } } @keyframes slideinup { 0% { opacity: 0; transform: translateY(70px); } 100% { transform: translateY(0); } } @keyframes slideindown { 0% { opacity: 0; transform: translateY(-70px); } 100% { transform: translateY(0); } } @keyframes slideinleft { 0% { opacity: 0; transform: translateX(-70px); } 100% { transform: translateX(0); } } @keyframes slideinright { 0% { opacity: 0; transform: translateX(70px); } 100% { transform: translateX(0); } } @keyframes fadein-custom { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); -ms-transform: translateY(20px); transform: translateY(20px); } 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes spin { to { transform: rotate(360deg); } } /*================================= 04. Template Style ==================================*/ /*------------------- 4.1. Widget -------------------*/ .sidebar-area .wp-block-categories { margin: 0 0 -18px 0; } .widget_nav_menu ul, .widget_meta ul, .widget_pages ul, .widget_archive ul, .widget_categories ul { list-style: none; margin: 0; padding: 0; } .widget_nav_menu .menu-testing-menu-container > ul, .widget_nav_menu > ul, .widget_meta .menu-testing-menu-container > ul, .widget_meta > ul, .widget_pages .menu-testing-menu-container > ul, .widget_pages > ul, .widget_archive .menu-testing-menu-container > ul, .widget_archive > ul, .widget_categories .menu-testing-menu-container > ul, .widget_categories > ul { margin: 0 0 -18px 0; } .widget_nav_menu a, .widget_meta a, .widget_pages a, .widget_archive a, .widget_categories a { display: block; background-color: transparent; color: var(--body-color); margin: 0 0 18px 0; padding: 0 0 17px 0; font-size: 16px; font-weight: 400; line-height: 1; border-bottom: 1px solid #DADFEC; } .widget_nav_menu a:hover, .widget_meta a:hover, .widget_pages a:hover, .widget_archive a:hover, .widget_categories a:hover { color: var(--theme-color); } .widget_nav_menu li, .widget_meta li, .widget_pages li, .widget_archive li, .widget_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 { text-align: center; position: absolute; right: 0; top: -4px; font-size: 16px; transition: all ease 0.4s; color: var(--theme-color); } .widget_nav_menu li:hover > span, .widget_meta li:hover > span, .widget_pages li:hover > span, .widget_archive li:hover > span, .widget_categories li:hover > span { color: var(--theme-color); } .widget_nav_menu .children, .widget_meta .children, .widget_pages .children, .widget_archive .children, .widget_categories .children { margin-left: 10px; } .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; } .vs-blog ul.wp-block-archives li { margin: 5px 0; } /* Small devices */ @media (max-width: 767px) { .widget_nav_menu a, .widget_meta a, .widget_pages a, .widget_archive a, .widget_categories a { font-size: 14px; } } .widget { padding: var(--widget-padding-y, 40px) var(--widget-padding-x, 40px); background-color: var(--smoke-color); position: relative; margin-bottom: 40px; border: 6px; } .widget select, .widget input { height: 55px; border: none; background-color: #fff; padding-left: 20px; font-weight: 400; } .sidebar-area .wp-block-group__inner-container > h2, .widget_search .wp-block-search__label:not(.screen-reader-text), .widget_title { position: relative; font-size: 24px; font-weight: 700; line-height: 1em; margin: -0.07em 0 35px 0; font-family: var(--title-font); } .widget .search-form { position: relative; display: flex; } .widget .search-form input { flex: 1; } .widget .search-form button { border: none; background-color: var(--theme-color); color: var(--white-color); height: 55px; width: 55px; line-height: 55px; font-size: 17px; } .widget .search-form button:hover { background-color: var(--title-color); color: var(--white-color); } .wp-block-tag-cloud a, .tagcloud a { display: inline-block; border: none; font-size: 16px; font-weight: 400; line-height: 1; padding: 9.5px 16.5px; margin-right: 5px; margin-bottom: 10px; color: var(--title-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; } .sidebar-area .wp-block-tag-cloud, .tagcloud { margin-right: -5px; margin-bottom: -10px; } .sidebar-area .wp-block-tag-cloud a, .tagcloud a { background-color: var(--white-color); color: var(--title-color); } .recent-post { display: flex; align-items: center; margin-bottom: 18px; } .recent-post:last-child { margin-bottom: 0; } .recent-post .media-img { margin-right: 20px; width: 80px; overflow: hidden; } .recent-post .media-img img { width: 100%; border-radius: 4px; transition: all ease 0.4s; } .recent-post .post-title { font-weight: 600; font-size: 16px; line-height: 26px; margin: 0 0 5px 0; } .recent-post .recent-post-meta a { text-transform: capitalize; font-size: 14px; font-weight: 400; color: var(--body-color); } .recent-post .recent-post-meta a i { margin-right: 5px; color: var(--theme-color); } .recent-post:hover .media-img img { transform: scale(1.1); } .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: 8px; left: 20px; font-size: 14px; color: var(--title-color); font-weight: 500; z-index: 1; } .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(--title-color); background-color: #c6d9ff; } .wp-block-calendar th, .calendar_wrap th { font-size: 14px; padding: 5px 5px; border: none; text-align: center; border-right: 1px solid #fff; color: #01133c; font-weight: 500; } .wp-block-calendar th a, .calendar_wrap th a { color: inherit; } .wp-block-calendar td, .calendar_wrap td { font-size: 14px; padding: 5px; color: #01133c; border: 1px solid #ededed; text-align: center; background-color: transparent; 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: #f6f6f6; } .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; } .widget_recent_comments ul { margin: -0.2em 0 -0.2em 0; padding: 0; list-style: none; } .widget_recent_comments li:not(:last-child) { padding-bottom: 12px; } .widget_recent_comments a { color: var(--body-color); position: relative; } .widget_recent_comments a:hover { color: var(--theme-color); } .widget_recent_comments li { padding-left: 30px; position: relative; } .widget_recent_comments li:before { content: "\f086"; position: absolute; left: 0; top: 1px; color: var(--theme-color); font-family: var(--icon-font); } .widget_recent_entries ul { margin: -0.2em 0 0 0; padding: 0; list-style: none; } .widget_recent_entries ul li > a { color: var(--title-color); font-weight: 500; display: 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_rss ul { margin: -0.2em 0 -0.5em 0; padding: 0; list-style: none; } .widget_rss ul .rsswidget { color: var(--title-color); font-family: var(--theme-font); font-size: 18px; display: block; margin-bottom: 5px; } .widget_rss ul .rssSummary { font-size: 14px; margin-bottom: 4px; } .widget_rss ul a { display: block; font-weight: 600; color: inherit; } .widget_rss ul a:hover { color: var(--theme-color); } .widget_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 { content: "\f073"; font-family: var(--icon-font); margin-right: 10px; font-weight: 300; color: var(--theme-color); } .widget_rss ul cite { font-weight: 400; color: var(--title-color); font-family: var(--body-font); font-size: 14px; } .widget_rss ul cite:before { content: ""; position: relative; top: -2px; 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) { margin-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-bottom: 16px; } .sidebar-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sidebar-gallery .gallery-thumb { overflow: hidden; border-radius: 5px; } .sidebar-gallery .gallery-thumb img { width: 100%; transform: scale(1); transition: all ease 0.4s; } .sidebar-gallery .gallery-thumb:hover img { transform: scale(1.2); } .widget_shopping_cart { text-align: left; } .widget_shopping_cart ul { margin: 0; padding: 0; list-style-type: none; } .widget_shopping_cart .mini_cart_item { position: relative; border-bottom: 1px solid var(--border-color); padding: 0 0 32px 110px; margin: 0 0 27px 0; min-height: 90px; } .widget_shopping_cart .remove { position: absolute; right: 0; top: 0; color: var(--title-color); line-height: 1; font-size: 18px; } .widget_shopping_cart .remove:hover { color: var(--theme-color); } .widget_shopping_cart .img { position: absolute; left: 0; top: 3px; width: 90px; height: 90px; display: inline-block; border: 1px solid var(--border-color); } .widget_shopping_cart .product-title { font-size: 14px; color: var(--title-color); font-weight: 400; margin-bottom: 0; display: inline-block; } .widget_shopping_cart .amount { display: block; font-weight: 600; color: var(--title-color); font-size: 16px; } .widget_shopping_cart .quantity { display: inline-flex; margin-top: 12px; } .widget_shopping_cart .qut-btn { border: 1px solid var(--border-color); background-color: transparent; display: inline-block; background-color: transparent; width: 25px; height: 25px; padding: 0; font-size: 12px; z-index: 1; position: relative; } .widget_shopping_cart .qut-btn:hover { background-color: var(--title-color); border-color: transparent; color: var(--white-color); } .widget_shopping_cart .qty-input { border: 1px solid var(--border-color); text-align: center; width: max-content; min-width: 40px; font-size: 12px; padding: 0; height: 25px; margin: 0 -1px; } .widget_shopping_cart .subtotal { float: right; text-align: right; font-size: 12px; margin-top: 19px; } .widget_shopping_cart .subtotal > span:not(.amount) { color: var(--body-color); font-weight: 300; } .widget_shopping_cart .subtotal .amount { font-size: 12px; display: inline-block; } .widget_shopping_cart .total { color: var(--title-color); text-transform: uppercase; line-height: 1; margin-bottom: 25px; font-size: 18px; } .widget_shopping_cart .total .amount { font-size: inherit; display: inline-block; color: var(--theme-color); } .widget_shopping_cart .vs-btn { border: 1px solid var(--title-color); color: var(--title-color); margin-right: 10px; text-transform: capitalize; height: 50px; line-height: 47px; padding: 0 35px; background-color: var(--title-color); color: var(--white-color); font-weight: 400; } .widget_shopping_cart .vs-btn:hover { background-color: transparent; color: var(--title-color); } .widget_shopping_cart .buttons { margin: 0; } .sidebar-area { margin-bottom: -10px; } .sidebar-area .wp-block-search .wp-block-search__input { border: none; } .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 .newsletter-form button { width: 100%; text-transform: capitalize; font-size: 16px; font-weight: 400; height: 60px; margin-top: 10px; } .sidebar-area .widget .wp-block-search { margin-bottom: 0; } .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; } .recent-product { display: flex; } .recent-product .product-title { font-size: 16px; } .widget-workhours ul { margin: 0; padding: 0; list-style-type: none; } .widget-workhours li { background-color: var(--white-color); padding: 14.5px 20px; margin: 0 0 15px 0; font-family: var(--title-font); font-weight: 500; } .widget-workhours li:last-child { margin-bottom: 0; } .widget-workhours li i { margin-right: 10px; } .quote-box { position: relative; text-align: center; padding: 80px 30px; margin: 0 0 30px 0; } .quote-box:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(7, 26, 62, 0.7); } .quote-box__title { color: var(--white-color); position: relative; z-index: 1; max-width: 200px; margin: -0.3em auto 25px auto; } /* Large devices */ @media (max-width: 1199px) { .widget { --widget-padding-y: 30px; --widget-padding-x: 30px; } .sidebar-area .wp-block-group__inner-container > h2, .widget_search .wp-block-search__label, .widget_title { font-size: 20px; margin-bottom: 25px; } .recent-post .post-title { font-size: 14px; line-height: 22px; } .recent-post .recent-post-meta a { font-size: 12px; } .widget-workhours li { padding: 14.5px 20px; font-size: 14px; } } @media (min-width: 991px) and (max-width: 1399px) { .sidebar-area .wp-block-search__inside-wrapper { display: block; } .sidebar-area .wp-block-search .wp-block-search__input { margin-bottom: 10px; max-width: 100%; } } @media (max-width: 767px) { .sidebar-area .wp-block-search__inside-wrapper { display: block; } .sidebar-area .wp-block-search .wp-block-search__input { margin-bottom: 10px; max-width: 100%; } } /* Medium devices */ @media (max-width: 991px) { .sidebar-area { padding-top: 30px; } .wp-block-tag-cloud a, .tagcloud a { padding: 10.5px 18px; } } /* Small devices */ @media (max-width: 767px) { .contact-widget .icon { --icon-size: 30px; --icon-font-size: 12px; top: 5px; } .contact-widget .contact { padding: 0 0 0 45px; margin: 0 0 20px 0; border-bottom: none; } .sidebar-gallery { gap: 10px; } } /* Extra small devices */ @media (max-width: 575px) { .widget { padding: 30px 20px; } } .footer-widget { margin-bottom: 40px; } .footer-widget, .footer-widget .widget { padding: 0; border: none; padding-bottom: 0; background-color: transparent; } .footer-widget .widget_title { margin: 0 0 27px 0; } .footer-widget.widget_meta, .footer-widget.widget_pages, .footer-widget.widget_archive, .footer-widget.widget_categories, .footer-widget.widget_nav_menu { margin-bottom: 40px; } .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 { width: max-content; display: block; border: none; font-size: 16px; font-weight: 400; margin-bottom: 16px; max-width: 100%; padding: 0; } .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: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 { display: none; } .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 .footer-links > ul { display: grid; grid-template-columns: repeat(2, 1fr); } .footer-widget .footer-links a { margin-bottom: 21px; } .two-column .menu, .footer-widget .footer-links > ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 20px; } .two-column .menu a, .footer-widget .footer-links > ul a { margin-bottom: 21px; } .footer-logo { margin-bottom: 15px; } .footer-logo img { max-width: 220px; } .footer-text { margin: -0.3em 0 25px 0; max-width: 285px; } .footer-info { display: flex; } .footer-info_group { display: flex; justify-content: center; border-right: 1px solid #152B54; padding: 60px 0 60px 0; } .footer-info_group:last-child { border-right: none; } .footer-info_group.style2 { border: none; } .footer-info_group.style2 .footer-info_icon { background-color: transparent; border: 1px solid #35496F; } .footer-info_icon { width: 85px; height: 85px; line-height: 85px; text-align: center; background-color: #152B54; color: var(--white-color); font-size: 30px; margin: 0 25px 0 0; display: inline-block; border-radius: 5px; } .footer-info_label { color: var(--white-color); font-size: 16px; font-weight: 600; font-family: var(--title-font); text-transform: uppercase; display: block; margin: 0 0 5px 0; } .footer-info_link { max-width: 190px; color: #8A99B4; margin: 0 0 -0.15em 0; } .footer-info_link a { color: inherit; } .footer-info_link a:hover { color: var(--theme-color); } .footer-number { border-top: 1px solid #14284F; padding: 43px 0 0 0; margin: 34px 0 0 0; position: relative; } .footer-number:before { content: ""; position: absolute; top: -1px; left: -60px; width: 9999px; height: 1px; border: inherit; } .footer-number .info { color: var(--body-color); margin: 0; line-height: 1; display: inline-block; } .footer-number .info:hover { color: var(--theme-color); } .footer-number .title { margin: 0 0 7px 0; } .footer-map { max-width: 400px; width: 100%; } .footer-map frame { max-width: 100%; } .footer-social .social-title { font-family: var(--title-font); color: var(--title-color); font-size: 20px; display: inline-block; margin-right: 20px; font-weight: 700; } .footer-social a { display: inline-block; width: 45px; height: 45px; line-height: 45px; font-size: 16px; margin: 0 5px 0 0; color: var(--white-color); background-color: #15284C; text-align: center; border-radius: 5px; } .footer-social a:last-child { margin-right: 0; } .footer-social a:hover { background-color: var(--theme-color); color: var(--white-color); } .footer-social.style2 a { background-color: var(--white-color); outline: 2px solid #e7e8ec; outline-offset: -2px; color: var(--body-color); box-shadow: 8px 13.856px 30px 0px rgba(132, 137, 154, 0.1); } .footer-social.style2 a:hover { background-color: var(--theme-color); color: var(--white-color); outline-color: transparent; } .footer-newsletter { display: flex; } .footer-newsletter input { background-color: transparent; border-radius: 5px 0 0 5px; border: 1px solid #14284F; height: 55px; color: var(--white-color); flex: 1; } .footer-newsletter input::-moz-placeholder { color: var(--white-color); } .footer-newsletter input::-webkit-input-placeholder { color: var(--white-color); } .footer-newsletter input:-ms-input-placeholder { color: var(--white-color); } .footer-newsletter input::placeholder { color: var(--white-color); } .footer-newsletter .vs-btn { border-radius: 0 5px 5px 0; } .footer-newsletter .vs-btn:hover { background-color: var(--theme-color); color: var(--white-color); } .footer-newsletter .vs-btn:after, .footer-newsletter .vs-btn::before { display: none; } .footer-schedule table { border: none; margin: -0.3em 0 0 0; } .footer-schedule th, .footer-schedule td { padding: 0 0 10px 0; color: var(--body-color); border: none; font-weight: 400; } .footer-number1 { font-size: 30px; font-weight: 700; color: var(--body-color); font-family: var(--title-font); margin-bottom: 25px; display: block; width: max-content; } .footer-mail1, .footer-address1 { padding-left: 25px; position: relative; } .footer-mail1 > i:first-child, .footer-address1 > i:first-child { position: absolute; left: 0; top: 4px; } .footer-address1 { max-width: 250px; } .footer-mail1 { color: var(--body-color); text-decoration: underline; } .footer-mail1 i:first-child { top: 2px; } .footer-info-list { margin: 35px 0 22px 0; } .footer-info-list .info { position: relative; margin-bottom: 21px; padding-left: 30px; max-width: 250px; } .footer-info-list .info i:first-child { position: absolute; left: 0; top: 4px; color: var(--theme-color); } .newsletter-form2 .form_text { margin: -0.3em 0 22px 0; display: block; max-width: 300px; } .newsletter-form2 input { background-color: #ebecf1; margin-bottom: 15px; border-radius: 7px; border: none; padding-left: 20px; padding-right: 20px; height: 55px; } .info-style1 { position: relative; display: flex; flex: 1; align-items: center; margin: 0 0 23px 0; padding: 0 0 0 65px; height: 44px; max-width: 330px; color: var(--white-color); } .info-style1:last-child { margin-bottom: 0; } .info-style1 a { color: inherit !important; } .info-style1 a:hover { color: var(--theme-color) !important; } .info-style1 i { display: inline-block; width: 46px; height: 46px; line-height: 46px; text-align: center; background-color: var(--theme-color); color: var(--white-color); position: absolute; left: 0; top: 50%; border-radius: 50%; transform: translateY(-50%); } .copyright-text2 { color: #fff; margin: 0; font-size: 14px; } .copyright-text2 a { color: inherit; text-decoration: underline; } .copyright-text2 a:hover { color: var(--theme-color); } .copyright-text3 { margin: 0; font-size: 16px; } .footer-layout7 .footer-number2, .footer-layout7 .footer-number, .footer-layout6 .footer-number2, .footer-layout6 .footer-number { font-size: 30px; font-weight: 500; display: inline-block; margin: 15px 0 0 0; } .footer-layout7 .footer-number2 i, .footer-layout7 .footer-number i, .footer-layout6 .footer-number2 i, .footer-layout6 .footer-number i { margin-right: 10px; } .footer-layout7 .footer-number2, .footer-layout6 .footer-number2 { margin: 5px 0 1px 0; margin: -0.05em 0 20px 0; font-size: 26px; } .footer-layout7 .footer-address, .footer-layout6 .footer-address { max-width: 300px; position: relative; padding: 0 0 0 0; margin-top: 0; margin-bottom: 15px; color: #65666d; font-weight: 500; letter-spacing: 0.02em; } .footer-layout7 .footer-address i, .footer-layout6 .footer-address i { position: relative; top: 1px; font-size: 18px; width: 23px; text-align: center; display: inline-block; } .footer-layout7 .footer-location, .footer-layout7 .footer-mail, .footer-layout6 .footer-location, .footer-layout6 .footer-mail { font-size: 16px; color: var(--body-color); display: block; margin-bottom: 14px; color: var(--title-color); position: relative; padding-left: 35px; } .footer-layout7 .footer-location i, .footer-layout7 .footer-mail i, .footer-layout6 .footer-location i, .footer-layout6 .footer-mail i { position: absolute; left: 0; top: 3px; width: 23px; text-align: center; display: inline-block; font-size: 18px; margin-right: 10px; } .footer-layout7 .elementor a.footer-mail, .footer-layout7 .footer-mail, .footer-layout6 .elementor a.footer-mail, .footer-layout6 .footer-mail { padding-left: 0; color: var(--title-color); font-size: 18px; font-weight: 500; text-decoration: underline; width: max-content; } .footer-layout7 .elementor a.footer-mail:hover, .footer-layout7 .footer-mail:hover, .footer-layout6 .elementor a.footer-mail:hover, .footer-layout6 .footer-mail:hover { color: var(--theme-color); } .footer-layout7 .elementor a.footer-mail i, .footer-layout7 .footer-mail i, .footer-layout6 .elementor a.footer-mail i, .footer-layout6 .footer-mail i { position: relative; top: 1px; } .footer-layout7 .footer-number { padding-top: 0; margin-top: 0; border: none; } .footer-layout7 .footer-number:before { display: none; } /* Medium Large devices */ @media (max-width: 1399px) { .menu-all-pages-container.footer-links { width: 330px; max-width: 100%; } .footer-number:before { display: none; } } /* Large devices */ @media (max-width: 1199px) { .info-style1 { max-width: 250px; } .footer-widget { margin-bottom: 40px; } .footer-widget .widget_title { font-size: 26px; } .footer-number { padding: 27px 0 0 0; margin: 17px 0 0 0; } .footer-info { display: block; text-align: center; } .footer-info_icon { margin: 0 0 20px 0; } .footer-info_group { padding: 0; border: none; } } @media (min-width: 991px) and (max-width: 1399px) { .footer-newsletter { display: block; } .footer-newsletter input { border-radius: 5px; margin-bottom: 20px; } .footer-newsletter .vs-btn { border-radius: 5px; } } /* Medium devices */ @media (max-width: 991px) { .footer-widget .widget_title { font-size: 22px; } } /* Small devices */ @media (max-width: 767px) { .info-style1 { max-width: 100%; } .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: 14px; } .footer-newsletter { display: block; } .footer-newsletter input { border-radius: 5px; margin-bottom: 20px; } .footer-newsletter .vs-btn { border-radius: 5px; } .footer-layout7 .footer-number2, .footer-layout7 .footer-number, .footer-layout6 .footer-number2, .footer-layout6 .footer-number { font-size: 20px; } } /*------------------- 4.2. Header -------------------*/ .vs-header { position: relative; z-index: 41; } .header8btn .vs-btn { display: block; width: max-content; margin-left: auto; border-radius: 0; background-color: var(--theme-color); } .header8btn .vs-btn::before, .header8btn .vs-btn::after { background-color: var(--title-color); } .vs-logo img { max-width: 170px; width: 170px !important; /* Extra small devices */ } @media (max-width: 575px) { .vs-logo img { width: 130px !important; } } .vs-logo.logo-style-1 img { width: 170px !important; /* Extra small devices */ } @media (max-width: 575px) { .vs-logo.logo-style-1 img { width: 130px !important; } } .header-logo svg, .header-logo img { max-width: 180px; width: 180px; /* Extra small devices */ } @media (max-width: 575px) { .header-logo svg, .header-logo img { width: 130px; } } .will-sticky .sticky-active { position: fixed; top: -100%; right: 0; left: 0; background-color: var(--white-color); transition: all ease 0.8s; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.07); } .will-sticky .sticky-active.active { top: 0; } .main-menu a { display: block; position: relative; font-family: var(--title-font); font-weight: 600; font-size: 16px; color: var(--title-color); } .main-menu a:hover { color: var(--theme-color); } .main-menu > ul > li { margin: 0 14px; } .main-menu > ul > li > a .new-label { position: absolute; top: -10px; right: -27px; font-size: 11px; border-radius: 3px; } .main-menu > ul > li > a .has-new-lable { position: relative; } .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"; position: relative; font-family: var(--icon-font); margin-left: 5px; font-size: 0.8rem; } .main-menu ul li:last-child { margin-right: 0; } .main-menu ul li:first-child { margin-left: 0; } .main-menu ul li:hover > ul.sub-menu, .main-menu ul li:hover ul.mega-menu { visibility: visible; opacity: 1; margin-top: 0; z-index: 9; } .main-menu ul.sub-menu, .main-menu ul.mega-menu { position: absolute; text-align: left; top: 100%; left: 0; background-color: var(--white-color); box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); visibility: hidden; min-width: 190px; width: max-content; padding: 7px; left: -14px; margin-top: 50px; opacity: 0; z-index: -1; border-bottom: 3px solid var(--theme-color); box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.09), 0px 3px 0px 0px rgba(231, 13, 60, 0.004); transform-origin: top center; transition: margin-top 0.4s ease-in-out 0s, visibility 0.4s ease-in-out 0s, opacity 0.4s ease-in-out 0s, z-index 0s; } .main-menu ul.sub-menu a, .main-menu ul.mega-menu a { font-size: 16px; line-height: 30px; } .main-menu ul.sub-menu { padding: 18px 20px; left: -27px; } .main-menu ul.sub-menu:before { content: ""; position: absolute; left: 34.5px; top: 30px; width: 1px; background-color: #ededed; height: calc(100% - 60px); } .main-menu ul.sub-menu li { display: block; margin: 0 0; padding: 3px 9px; } .main-menu ul.sub-menu li.menu-item-has-children > a:after { content: "\f105"; float: right; top: 0; } .main-menu ul.sub-menu li a { position: relative; padding-left: 21px; } .main-menu ul.sub-menu li a:before { content: "\f111"; position: absolute; top: 2.5em; left: 0; font-family: var(--icon-font); width: 11px; height: 11px; text-align: center; border-radius: 50%; display: inline-block; font-size: 0.2em; line-height: 11.5px; color: var(--theme-color); font-weight: 700; background-color: var(--white-color); box-shadow: inset 0px 2px 4px 0px rgba(173, 136, 88, 0.4); } .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; } .main-menu .mega-menu-wrap { position: static; } .main-menu ul.mega-menu { display: flex; justify-content: space-between; text-align: left; width: 100%; max-width: var(--main-container); padding: 20px 15px 23px 15px; left: 50%; transform: translateX(-50%); } .main-menu ul.mega-menu .main-menu ul.mega-menu > li > ul > li > a { position: relative; } .main-menu ul.mega-menu li { display: block; width: 100%; padding: 0 15px; } .main-menu ul.mega-menu li li { padding: 4px 0; } .main-menu ul.mega-menu li a { display: inline-block; } .main-menu ul.mega-menu > li > a { display: block; padding: 0; padding-bottom: 15px; margin-bottom: 10px; text-transform: capitalize; letter-spacing: 1px; font-weight: 700; color: var(--title-color); border-color: var(--theme-color); } .main-menu ul.mega-menu > li > a::after, .main-menu ul.mega-menu > li > a::before { content: ""; position: absolute; bottom: 0; left: 0; width: 15px; height: 1px; background-color: var(--theme-color); } .main-menu ul.mega-menu > li > a::after { width: calc(100% - 20px); left: 20px; } .main-menu ul.mega-menu > li > a:hover { padding-left: 0; } .main-menu ul.mega-menu > li > ul > li > a:before { content: "\f105"; font-family: var(--icon-font); font-weight: 400; margin: 0 10px 0 0; } .menu-style1 > ul > li > a { padding: 16.5px 0; } .menu-style2 > ul > li > a { padding: 41.5px 0; } .menu-style3 > ul > li > a { padding: 45px 0; } .menu-style4 > ul > li > a { padding: 49.5px 0; position: relative; } .menu-style4 > ul > li > a:before { content: ""; position: absolute; bottom: 0; left: 0; background-color: var(--theme-color); width: 100%; height: 2px; transition: all ease 0.4s; transform: scale(0); opacity: 0; visibility: hidden; } .menu-style4 > ul > li > a:hover:before { transform: scale(1); opacity: 1; visibility: visible; } .menu-style5 > ul > li { margin: 0 13px; } .menu-style5 > ul > li > a { padding: 51.5px 0; } .menu-style5 > ul > li:hover ul.mega-menu, .menu-style5 > ul > li:hover ul.sub-menu { margin-top: -1px; } .menu-style6 > ul > li > a { padding: 41px 0; color: var(--white-color); } .menu-style7 > ul > li > a { text-transform: uppercase; font-weight: 700; color: var(--white-color); padding: 21.5px 0; } .menu-style7 > ul > li > a .new-label { background-color: var(--error-color); top: -15px; padding: 3px 5px; } .menu-style7 > ul > li > a:before { content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 6px; border-radius: 4px 4px 0 0; background-color: var(--white-color); transition: all ease 0.4s; transform: scaleX(0); opacity: 0; visibility: hidden; } .menu-style7 > ul > li > a:hover { color: var(--white-color); } .menu-style7 > ul > li > a:hover:before { transform: scale(1); opacity: 1; visibility: visible; } .menu-style7 ul.mega-menu { left: 0; margin-left: 0; } .header-text { margin: 0; } .header-text i { margin-right: 10px; } .header-info { display: flex; align-items: center; padding-top: 28px; padding-bottom: 28px; margin-left: 40px; padding-left: 40px; border-left: 1px solid #e7ebf3; } .header-info:nth-child(2) { margin-left: 0; padding-left: 0; border-left: none; } .header-info_icon { color: var(--theme-color); font-size: 24px; margin-right: 20px; } .header-info_label { font-size: 14px; color: var(--body-color); display: block; margin-bottom: 2px; } .header-info_link { color: var(--title-color); font-size: 20px; font-weight: 600; margin: 0; } .header-info_link a { color: inherit; } .header-info_link a:hover { color: var(--theme-color); } .header-info.style2 { padding: 0; border: none; margin: 0; } .header-info.style2 .header-info_icon { width: 60px; height: 60px; line-height: 56px; background-color: var(--theme-color); text-align: center; border-radius: 50%; margin-right: 15px; } .header-info.style2 .header-info_label { color: var(--title-color); text-transform: capitalize; font-weight: 500; } .header-info.style2 .header-info_link { color: var(--theme-color); font-weight: 400; font-size: 24px; } .header-info.style2 .header-info_link a:hover { color: var(--title-color); } .header-search { display: flex; width: 240px; max-width: 100%; } .header-search input { flex: 1; border: none; padding: 0 20px 0 20px; height: 40px; width: 100%; border-radius: 4px 0 0 4px; transition: all ease 0.4s; background-color: var(--smoke-color); } .header-search button { border: none; background-color: var(--theme-color); color: var(--white-color); font-size: 16px; width: 40px; height: 40px; border-radius: 0 4px 4px 0; } .header-search button:hover { background-color: var(--title-color); color: var(--white-color); } .header-links ul { margin: 0; padding: 0; list-style-type: none; } .header-links li { display: inline-block; font-size: 14px; font-weight: 500; color: var(--title-color); font-family: var(--title-font); padding: 0 30px 0 0; margin: 0 26px 0 0; border-right: 1px solid #cad4f1; line-height: 23px; } .header-links li:last-child { margin-right: 0; padding-right: 0; border-right: none; } .header-links i { color: var(--theme-color); margin: 0 10px 0 0; } .header-links a { color: inherit; } .header-links a:hover { color: var(--theme-color); } .header-links.style-white i, .header-links.style-white li { color: var(--white-color); border-color: #558eff; } .header-links.style-white a:hover { color: var(--white-color); text-decoration: underline; } .links-style1 ul { margin: 0; padding: 0; list-style-type: none; } .links-style1 li { color: var(--title-color); display: inline-block; margin: 0 25px 0 0; } .links-style1 li:last-child { margin-right: 0; } .links-style1 li > i { color: var(--theme-color); margin: 0 10px 0 0; } .links-style1 li a { color: inherit; } .links-style1 li a:hover { color: var(--theme-color); } .header-social { font-size: 14px; } .header-social .social-title { color: var(--title-color); display: inline-block; } .header-social a { display: inline-block; color: var(--title-color); margin-left: 16px; } .header-social a:hover { color: var(--theme-color); } .header-social.style-white .social-title, .header-social.style-white a { color: var(--white-color); } .header-social.style-white a:hover { color: var(--title-color); } .social-style1 .social-label { color: var(--title-color); margin: 0 10px 0 0; display: inline-block; } .social-style1 a { display: inline-block; width: 38px; height: 38px; line-height: 37px; font-size: 14px; border: 1px solid #808080; color: var(--title-color); text-align: center; border-radius: 50%; margin: 0 5px 0 0; } .social-style1 a:last-child { margin-right: 0; } .social-style1 a:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .logo-style1 { background: linear-gradient(278.46deg, #00bcfa 0.91%, #0e59f2 71.89%, #0e59f2 100%); padding: 30px 35px 30px 35px; border-radius: 5px 0px 0px 5px; line-height: 0; margin: -1px 0; } .header-btns { display: flex; flex-wrap: wrap; gap: 20px; } .header-box { border: 10px solid var(--theme-color); background-color: var(--white-color); padding: 20px; } .header-box__icon { border-radius: 5px; margin: 0 15px 0 0; font-size: 18px; width: 43px; height: 43px; line-height: 43px; text-align: center; display: inline-block; background-color: var(--theme-color); color: var(--white-color); } .header-box__title { display: inline-block; color: var(--title-color); font-weight: 600; font-family: var(--title-font); } .header-box__number { display: block; width: fit-content; font-family: var(--title-font); font-size: 22px; font-weight: 700; color: var(--theme-color); margin: 15px 0 0 0; } .header-dropdown > .dropdown-toggle { color: var(--title-color); } .header-dropdown > .dropdown-toggle i { margin: 0 10px 0 0; } .header-dropdown > .dropdown-toggle:after { content: "\f107"; font-family: var(--icon-font); border: none; vertical-align: middle; position: relative; top: -1px; margin-left: 5px; } .header-dropdown > .dropdown-toggle:hover { color: var(--theme-color); } .header-dropdown ul.dropdown-menu { padding: 10px 15px; border: none; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.07); margin: 0; margin-left: -15px !important; margin-top: 15px !important; width: max-content; min-width: auto; position: relative; z-index: 99; border: none; } .header-dropdown ul.dropdown-menu li { margin-bottom: 10px; } .header-dropdown ul.dropdown-menu li:last-child { margin-bottom: 0; } .header-dropdown ul.dropdown-menu a { display: block; margin: 0 0; width: max-content; padding: 2px 10px; color: var(--title-color); font-weight: 400; font-size: 14px; } .header-dropdown ul.dropdown-menu a:hover { color: var(--theme-color); } .header-dropdown ul.dropdown-menu a:first-child { margin-top: 0; padding-top: 0; } .header-dropdown ul.dropdown-menu a:last-of-type, .header-dropdown ul.dropdown-menu a:last-child { padding-bottom: 0; margin-bottom: 0; } .header-dropdown ul.dropdown-menu:before { content: ""; position: absolute; left: 47px; top: -7px; width: 14px; height: 14px; background-color: var(--white-color); z-index: -1; transform: rotate(45deg); border-top: 1px solid #ededed; border-left: 1px solid #ededed; } .header-dropdown.style-white > .dropdown-toggle { color: var(--white-color); } .header-dropdown.style-white > .dropdown-toggle:hover { text-decoration: underline; color: rgba(255, 255, 255, 0.7); } .login-tab:not(.nav-tabs) { display: flex; border-radius: 9999px; position: relative; z-index: 1; margin-bottom: 0; } .login-tab:not(.nav-tabs):before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: 0; border-radius: inherit; border: 2px solid var(--theme-color); z-index: -1; } .login-tab:not(.nav-tabs) a { display: inline-block; color: var(--theme-color); background-color: transparent; font-family: var(--title-font); text-transform: capitalize; font-weight: 600; font-size: 18px; padding: 18.5px 37px; line-height: 1; border-radius: inherit; } .login-tab:not(.nav-tabs) a:hover, .login-tab:not(.nav-tabs) a.active { color: var(--white-color); } .login-tab:not(.nav-tabs) .indicator { position: absolute; display: inline-block; left: 0; top: 0; background-color: var(--theme-color); z-index: -1; transition: all ease 0.4s; border-radius: inherit; } .header-number { color: var(--title-color); font-size: 18px; display: inline-block; } .header-number:hover { color: var(--theme-color); } .header-number img { margin: 0 10px 0 0; vertical-align: middle; display: inline-block; position: relative; top: -3px; } .header-layout3 .header-top, .header-layout1 .header-top { background-color: var(--theme-color); padding: 9.5px 0; } .header-layout1 .menu-top { border-bottom: 1px solid #e7ebf3; } .header-layout1 .header-text { color: var(--white-color); } .header-layout2 { position: relative; margin-bottom: -55px; } .header-layout2 .header-shape { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 55px); z-index: -1; background-color: #f6f7fa; } .header-layout2 .header-top { padding: 27px 0; } .header-layout2 .menu-area { background-color: var(--white-color); padding: 0 30px 0 0; border-radius: 5px; box-shadow: 0px 17px 29px rgba(32, 56, 105, 0.18); } .header-layout2 .vs-menu-toggle { border-radius: 5px; } .header-layout2 .will-sticky .sticky-active { box-shadow: none; background-color: transparent; } .header-layout3 { position: relative; } @media (min-width: 1199px) { .header-layout3 .header-box-wrap, .header-layout3 .header-top, .header-layout3 .sticky-wrapper:not(.will-sticky) { --box-width: 290px; --main-container: 1680px; } .header-layout3 .header-box-wrap .container, .header-layout3 .header-top .container, .header-layout3 .sticky-wrapper:not(.will-sticky) .container { padding-right: var(--box-width); } .header-layout3 .header-box { width: calc(var(--box-width) - 40px); position: absolute; right: 0; top: 0; } } @media (max-width: 1500px) and (min-width: 1199px) { .header-layout3 { --main-container: 1320px; } .header-layout3 .main-menu > ul > li { margin: 0 12px; } } .header-layout5 { position: relative; } @media (min-width: 1500px) { .header-layout5 { --main-container: 1430px; } } .header-layout5 .header-shape1 { position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 63px); background-color: var(--theme-color); z-index: -1; } .header-layout5 .menu-area { background-color: var(--white-color); z-index: 1; } @media (min-width: 1500px) { .header-layout5 .menu-area { max-width: 1518px; margin: 0 auto; padding: 0 20px; } } .header-layout5 .header-top { padding: 12.5px 0; position: relative; z-index: 2; } @media (min-width: 767px) { .header-layout5 .header-social { border-left: 1px solid #558eff; padding-left: 4px; } } .header-layout5 .header-social a:hover { color: rgba(255, 255, 255, 0.7); } .header-layout5 .header-links a:hover { color: rgba(255, 255, 255, 0.7); } .header-layout6 { position: absolute; left: 0; right: 0; top: 0; max-width: 1390px; margin-left: auto; margin-right: auto; --clip-total: 80px; --shape-gap: 17px; } .header-layout6 .shape1 { position: absolute; left: var(--pos, 0); right: var(--pos, 0); top: var(--pos, 0); bottom: var(--pos, 0); background-color: var(--white-color); z-index: -1; clip-path: polygon(0 0, 100% 0, calc(100% - 80px) 99%, 80px 100%); } .header-layout6 .shape2 { position: absolute; border-bottom: 2px solid var(--white-color); left: calc(var(--clip-total) - var(--shape-gap)); right: calc(var(--clip-total) - var(--shape-gap)); bottom: calc(var(--shape-gap) / -1); } .header-layout6 .shape3:after, .header-layout6 .shape3:before { content: ""; position: absolute; right: calc((var(--shape-gap) + 11px) / -1); top: 0; width: 2px; height: calc(100% + 43px); background-color: var(--white-color); transform: rotate(32deg); transform-origin: top left; } .header-layout6 .shape3::before { right: auto; left: calc((var(--shape-gap) + 11px) / -1); transform: rotate(-32deg); transform-origin: top right; } @media (min-width: 1500px) { .header-layout6 .container { padding-left: 50px; padding-right: 50px; } } .header-layout10 .header-top, .header-layout8 .header-top, .header-layout7 .header-top { padding: 9px 0; } .header-layout10 .will-sticky .sticky-active, .header-layout8 .will-sticky .sticky-active, .header-layout7 .will-sticky .sticky-active { background-color: var(--title-color); } .header-layout10 .social-style1 .social-label, .header-layout10 .header-dropdown > .dropdown-toggle, .header-layout10 .links-style1 li, .header-layout8 .social-style1 .social-label, .header-layout8 .header-dropdown > .dropdown-toggle, .header-layout8 .links-style1 li, .header-layout7 .social-style1 .social-label, .header-layout7 .header-dropdown > .dropdown-toggle, .header-layout7 .links-style1 li { color: var(--light-color); } .header-layout10 .links-style1 li i, .header-layout10 .social-style1 a, .header-layout10 .header-number, .header-layout10 .links-style1 li a:hover, .header-layout10 .header-dropdown > .dropdown-toggle:hover, .header-layout8 .links-style1 li i, .header-layout8 .social-style1 a, .header-layout8 .header-number, .header-layout8 .links-style1 li a:hover, .header-layout8 .header-dropdown > .dropdown-toggle:hover, .header-layout7 .links-style1 li i, .header-layout7 .social-style1 a, .header-layout7 .header-number, .header-layout7 .links-style1 li a:hover, .header-layout7 .header-dropdown > .dropdown-toggle:hover { color: var(--white-color); } .header-layout10 .header-number, .header-layout10 .links-style1 li a:hover, .header-layout10 .header-dropdown > .dropdown-toggle:hover, .header-layout8 .header-number, .header-layout8 .links-style1 li a:hover, .header-layout8 .header-dropdown > .dropdown-toggle:hover, .header-layout7 .header-number, .header-layout7 .links-style1 li a:hover, .header-layout7 .header-dropdown > .dropdown-toggle:hover { color: var(--white-color); } .header-layout10 .header-number:hover, .header-layout10 .links-style1 li a:hover:hover, .header-layout10 .header-dropdown > .dropdown-toggle:hover:hover, .header-layout8 .header-number:hover, .header-layout8 .links-style1 li a:hover:hover, .header-layout8 .header-dropdown > .dropdown-toggle:hover:hover, .header-layout7 .header-number:hover, .header-layout7 .links-style1 li a:hover:hover, .header-layout7 .header-dropdown > .dropdown-toggle:hover:hover { color: var(--theme-color); } .header-layout10 a.text-reset:hover, .header-layout8 a.text-reset:hover, .header-layout7 a.text-reset:hover { color: var(--theme-color) !important; } .header-layout7, .header-layout10, .header-layout8 { position: absolute; left: 0; right: 0; top: 0; } .header-layout8 { --main-container: 1380px; } .header-layout8 .header-top { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .header-layout10 .header-top, .header-layout9 .header-top { padding: 11px 0; } .header-layout9 .menu-area { background-color: var(--white-color); max-width: 1380px; margin: 0 auto; } .header-layout10 { --main-container: 1300px; } .header-layout10 .menu-area { background-color: var(--white-color); } .header-layout10 .social-style1 .social-label, .header-layout10 .header-dropdown > .dropdown-toggle, .header-layout10 .links-style1 li, .header-layout10 .social-style1 a { color: var(--white-color); } .header-layout10 .links-style1 li a:hover, .header-layout10 .header-dropdown > .dropdown-toggle:hover { color: var(--theme-color); } @media (min-width: 1399px) { .header-layout11 { --main-container: 1380px; } } .header-layout11 .header-top { background-color: #f3f1f1; } .header-layout11 .header-middle { padding: 22px 0; } .header-layout11 .menu-area { margin-bottom: -35px; } .header-layout11 .inner-wrap { position: relative; z-index: 1; padding-right: 15px; border-right: 5px solid var(--white-color); } .header-layout11 .inner-wrap:before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 999999px; background-color: var(--theme-color); z-index: -1; } .header-layout11 .icon-btn, .header-layout11 .hero-layout4 .slick-arrow, .hero-layout4 .header-layout11 .slick-arrow { --btn-size: 50px; } .header-layout11 .icon-btn:hover, .header-layout11 .hero-layout4 .slick-arrow:hover, .hero-layout4 .header-layout11 .slick-arrow:hover { background-color: var(--title-color); color: var(--white-color); } .header-layout10 .header-number { color: var(--title-color); } .header-layout10 .header-number:hover { color: var(--theme-color); } /* Hight Resoulation devices */ @media (min-width: 1921px) { .logo-style1 { margin-bottom: -1px; } } /* Extra large devices */ @media (max-width: 1500px) { .header-links li { padding: 0px 16px 0 0; margin: 0px 16px 0 0; } .header-layout6 { position: relative; } .header-layout6 .shape3, .header-layout6 .shape2, .header-layout6 .shape1 { display: none; } } /* Medium Large devices */ @media (max-width: 1399px) { .vs-logo.logo-style-1 img { width: 150px !important; } .header-layout3 .main-menu > ul > li { margin: 0 13px; } .header-default .col-auto:last-child { display: none; } .header-layout7, .header-layout10, .header-layout8 { top: 0; position: relative; background-color: var(--black-color); } .header-layout7 .header-top, .header-layout10 .header-top, .header-layout8 .header-top { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } } /* Large devices */ @media (max-width: 1199px) { .header-search { width: 200px; } .main-menu > ul > li { margin: 0 14px; } .header-layout2 { margin: 0; } .header-layout2 .header-shape { height: 100%; } .header-layout8 .header-top { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .header-layout9 { margin-bottom: 30px; } .header-layout11 .inner-wrap { padding: 0 10px 0 25px; } .header-layout11 .inner-wrap:before { border-radius: 7px 0 0 7px; width: 100%; } } /* Medium devices */ @media (max-width: 991px) { .header-links li { padding-right: 15px; margin-right: 10px; } .header-layout11 .header-middle { padding: 0; } .header-logo { padding: 15px 0; } .logo-style1 { padding: 20px 20px 20px 20px; } .header-layout1 .vs-menu-toggle { margin: 10px 0; } .header-layout2 .menu-area { padding: 0 20px 0 0; } } /* Small devices */ @media (max-width: 767px) { .social-style1 .social-label { display: none; } } /* Extra small devices */ @media (max-width: 575px) { .header-info:nth-child(2) { padding-left: 10px; } .header-info_label { font-size: 12px; } .header-info_link { font-size: 14px; } .header-info_icon { font-size: 20px; margin-right: 10px; } .header-links li { padding-right: 10px; margin-right: 0; border-right: none; font-size: 12px; } .header-links li i { margin-right: 5px; } .logo-style1 { padding: 15px 15px 15px 15px; max-width: 200px; } .header-layout2 .header-top { padding: 13px 0; } } /*------------------- 4.3. Footer -------------------*/ .widget-area { padding-top: 48px; padding-bottom: 10px; } .copyright-wrap { text-align: center; padding: 29px 0; background-color: #0b2048; } .copyright-text { margin: 0; font-size: 14px; } .copyright-text .text-white:hover { color: var(--theme-color) !important; } .footer-layout3, .footer-layout2, .footer-layout1 { --body-color: #8a99b4; --title-color: #fff; } .footer-layout1 { background-color: #071a3e; } .footer-layout1 .footer-top { border-bottom: 1px solid #152b54; } .footer-layout2 { background-color: #051634; overflow: hidden; } .footer-layout2 .footer-top { border-bottom: 1px solid #14284f; padding: 50px 0; } .footer-layout2 .footer-text { max-width: 390px; margin-bottom: 33px; } .footer-layout2 .widget-area { padding: 50px 0 0px 0; } @media (min-width: 1399px) { .footer-layout2 .footer-widget { padding: 0; margin: 0; height: 100%; } .footer-layout2 .widget-area { padding: 0; } .footer-layout2 .widget-area .row > div { padding-top: 50px; padding-bottom: 44px; } .footer-layout2 .widget-area .row > div:nth-child(2) { text-align: center; border-left: 1px solid #14284f; border-right: 1px solid #14284f; padding-left: 60px; padding-right: 60px; } .footer-layout2 .widget-area .row > div:nth-child(3) { padding-left: 60px; } } .footer-layout3 { background-color: #071a3e; } .footer-layout3 .footer-top { background-color: #0b2048; } .footer-layout3 .copyright-wrap { background-color: #0b1f44; } .footer-layout4 { padding-bottom: 60px; position: relative; --title-color: #fff; --body-color: #e6ebff; } .footer-layout4 a:hover { color: #fff; } .footer-layout4 .shape1 { position: absolute; right: 0; top: 0; max-width: 550px; } .footer-layout4 .footer-top { padding-top: var(--section-space); padding-bottom: var(--section-space); border-bottom: 1px solid #436af7; } .footer-layout4 .widget-area { padding-top: 0; padding-bottom: 0; } .footer-layout4 .copyright-wrap { background-color: #1648ff; padding: 20.5px 40px; } .footer-layout4 .copyright-wrap .copyright-text { color: var(--white-color); } .footer-layout4 .widget_title { font-weight: 600; margin-bottom: 35px; } .footer-layout4 .post-title a { font-size: 14px; line-height: 24px; margin-bottom: 0; background-image: linear-gradient(white, white); background-size: 0 1px; background-repeat: no-repeat; background-position: left bottom; } .footer-layout4 .post-title a:hover { color: var(--white-color); background-size: 100% 1px; } .footer-layout4 .recent-post-meta a { font-size: 12px; } .footer-layout4 .recent-post-meta a i { color: inherit; margin-right: 10px; } .footer-layout4 .footer-widget.widget_nav_menu a { padding-left: 15px; margin-bottom: 23px; } .footer-layout4 .footer-widget.widget_nav_menu a:before { content: "\f105"; display: block; right: auto; left: 0; top: -1px; color: var(--white-color); position: absolute; display: inline-block; font-family: var(--icon-font); } .footer-layout4 .recent-post .post-title { max-width: 200px; } .footer-layout4 .gallery-thumb, .footer-layout4 .gallery-thumb img, .footer-layout4 .recent-post .media-img img { border-radius: 0; } .footer-layout5 { border-top: 2px solid var(--theme-color); background-color: #fafafb; --body-color: #878d97; } @media (min-width: 1199px) { .footer-layout5 { padding-top: 192px; } } .footer-layout5 .widget-area { padding-top: 88px; padding-bottom: 50px; } .footer-layout5 .widget_title { margin-bottom: 55px; margin-top: 10px; font-weight: 600; } .footer-layout5 .copyright-wrap { background-color: #fafafb; border-top: 1px solid #e6e8f2; padding: 24px 0; } .footer-layout5 .copyright-text { color: var(--body-color); } .footer-layout6 { margin-top: 50px; } .footer-layout6 .elementor-image-gallery .gallery-columns-3 { display: grid; grid-template-columns: repeat(3, 1fr); } .footer-layout6 .elementor-image-gallery .gallery-columns-3 .gallery-item { width: 100%; max-width: 100%; } .footer-layout6 .elementor-image-gallery .gallery-item > div { overflow: hidden; border-radius: 10px; } .footer-layout6 .elementor-image-gallery .gallery-item > div img { transition: all ease 0.4s; transform: scale(1.03); } .footer-layout6 .elementor-image-gallery .gallery-item > div:hover img { transform: scale(1.2); } .footer-layout6 .widget-area { padding: 70px 0 30px 0; position: relative; z-index: 1; } .footer-layout6 .widget-area:after, .footer-layout6 .widget-area:before { content: ""; position: absolute; left: -28px; top: 0; width: 60%; height: 100%; background-color: var(--white-color); transform: rotateX(-20deg); border-radius: 10px; transform: rotateY(10deg) skewX(5deg); z-index: -1; } .footer-layout6 .widget-area:after { transform: rotateY(-10deg) skewX(-5deg); left: auto; right: -28px; } .footer-layout6 .footer-top { padding-bottom: 395px; margin-bottom: -305px; } .footer-layout6 .copyright-wrap { margin-top: -45px; padding-top: 65px; padding-bottom: 20px; background-color: var(--theme-color); } .footer-layout6 .copyright-text a:hover { color: var(--smoke-color); } .footer-layout6 .sidebar-gallery { max-width: 100%; } .footer-layout6 .elementor-heading-title { font-size: 22px; } /* Extra large devices */ @media (max-width: 1500px) { .footer-layout4 .shape1 { max-width: 380px; } } /* Medium Large devices */ @media (max-width: 1399px) { .footer-layout6 .widget-area { padding: 50px 20px 10px 20px; } .footer-layout6 .widget-area:after, .footer-layout6 .widget-area:before { left: -10px; transform: none; } .footer-layout6 .widget-area:after { left: auto; right: -10px; } } /* Large devices */ @media (max-width: 1199px) { .footer-layout6 .sidebar-gallery { grid-template-columns: repeat(6, 1fr); } .footer-layout6 .widget-area:after, .footer-layout6 .widget-area::before { left: 0; border-radius: 0; } .footer-layout6 .widget-area:after { right: 0; left: auto; } .footer-layout3 .footer-top, .footer-layout1 .footer-top { padding: 50px 0; } .footer-layout3 .footer-top .row, .footer-layout1 .footer-top .row { --bs-gutter-y: 40px; } .footer-layout5 .widget_title { margin-bottom: 30px; } .footer-layout4 .shape1 { max-width: 230px; } } /* Medium devices */ @media (max-width: 991px) { .footer-layout1 { text-align: center; } .footer-layout1 .footer-text { margin-left: auto; margin-right: auto; } .footer-layout6 .footer-top { padding-bottom: 80px; margin-bottom: 0; } .footer-layout6 .widget-area { padding: 50px 0 10px 0; } .footer-layout6 .copyright-wrap { margin-top: 0; padding-top: 20px; padding-bottom: 20px; } .footer-layout2 .footer-text { max-width: 100%; } .footer-layout2 .footer-top-logo { text-align: center; } .footer-layout2 .widget-area { padding: 50px 0 10px 0; } .footer-layout2 .footer-widget { margin-bottom: 40px; } .footer-layout4 .shape1 { display: none; } .footer-layout4 .footer-top { padding-top: var(--section-space-mobile); padding-bottom: var(--section-space-mobile); } } /* Small devices */ @media (max-width: 767px) { .footer-layout2 .footer-social { text-align: center; } .footer-layout2 .footer-social .social-title { display: block; margin: 0 0 20px 0; } .footer-layout6 .sidebar-gallery { grid-template-columns: repeat(3, 1fr); } .footer-layout4 .copyright-wrap { padding: 20.5px 10px; } } .footer-layout7 .footer-menu ul { margin-bottom: 0; /* Small devices */ } @media (max-width: 767px) { .footer-layout7 .footer-menu ul { padding-left: 0; } } .footer-layout7 .footer-menu .menu-item { display: inline-block; margin-right: 50px; /* Small devices */ } @media (max-width: 767px) { .footer-layout7 .footer-menu .menu-item { margin-right: 5px; } } .footer-layout7 .footer-menu .menu-item:last-child { margin-right: 0; } .footer-layout7 .footer-menu .menu-item a { color: var(--white-color); } .footer-layout7 .footer-menu .menu-item a:hover { color: var(--theme-color); } /*------------------- 4.4. Breadcumb -------------------*/ .breadcumb-menu { max-width: 100%; margin: -0.35em 0 -0.35em 0; padding: 0; list-style-type: none; } .breadcumb-menu li { display: inline-block; list-style: none; position: relative; } .breadcumb-menu li:after { content: "/"; position: relative; margin: 0 5px 0 10px; } .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: 500; font-size: 16px; font-family: var(--title-font); color: var(--white-color); } .breadcumb-title { color: var(--white-color); margin: -0.3em 0 -0.35em 0; max-width: 100%; width: 100%; text-transform: capitalize; } .breadcumb-title:empty { display: none; } .breadcumb-content { display: flex; align-items: center; justify-content: space-between; gap: 30px 40px; flex-wrap: wrap; } .breadcumb-wrapper { padding-top: 140px; padding-bottom: 135px; background-color: var(--title-color); /* Medium devices */ } @media (max-width: 991px) { .breadcumb-wrapper { padding-top: 100px; padding-bottom: 100px; } } /* Medium devices */ @media (max-width: 991px) { .breadcumb-content { display: block; } .breadcumb-title { max-width: 100%; } .breadcumb-menu { margin-top: 15px; } } /* Small devices */ @media (max-width: 767px) { .breadcumb-title { font-size: 30px; } } /*------------------- 4.5. Pagination -------------------*/ .vs-pagination { margin-bottom: 30px; } .vs-pagination ul { margin: 0; padding: 0; } .vs-pagination li { display: inline-block; margin: 0 3px; list-style-type: none; } .vs-pagination li:last-child { margin-right: 0; } .vs-pagination li:first-child { margin-left: 0; } .vs-pagination span, .vs-pagination a { display: inline-block; font-family: var(--body-font); color: var(--title-color); text-align: center; position: relative; border: none; width: 56px; height: 56px; line-height: 56px; font-weight: 400; font-size: 20px; z-index: 1; background-color: #F5F9FF; border-radius: 5px; } .vs-pagination span.active, .vs-pagination span:hover, .vs-pagination a.active, .vs-pagination a:hover { color: var(--white-color); background-color: var(--theme-color); box-shadow: none; } .post-pagination { border-top: 1px solid #F0F0F0; border-bottom: 1px solid #F0F0F0; padding: 30px 0; margin: 30px 0; } .post-pagi-box { display: flex; align-items: center; } .post-pagi-box > a { color: var(--title-color); font-weight: 600; font-size: 16px; font-family: var(--title-font); } .post-pagi-box > a:hover { color: var(--theme-color); } .post-pagi-box img { width: 80px; margin-right: 25px; } .post-pagi-box.next { flex-direction: row-reverse; } .post-pagi-box.next img { margin-right: 0; margin-left: 25px; } .pagi-icon { color: #F0F0F0; font-size: 40px; } /* Small devices */ @media (max-width: 767px) { .vs-pagination span, .vs-pagination a { width: 35px; height: 35px; line-height: 35px; font-size: 14px; padding: 0 10px; } .post-pagi-box > a { font-size: 12px; } .post-pagi-box img { width: 40px; margin-right: 15px; } .post-pagi-box.next img { margin-right: 0; margin-left: 15px; } } /*------------------- 4.6. Blog -------------------*/ blockquote.wp-block-quote, blockquote.wp-block-quote.is-style-large, blockquote { font-size: 24px; line-height: 34px; padding: 50px 60px 50px 60px; display: block; position: relative; background-color: var(--smoke-color); overflow: hidden; margin: 35px 0; color: var(--title-color); border-color: var(--theme-color); } blockquote.wp-block-quote p, blockquote.wp-block-quote.is-style-large p, blockquote p { font-family: inherit; margin-bottom: 0 !important; line-height: 1.6; color: inherit; width: 100%; position: relative; z-index: 3; font-style: normal; } blockquote.wp-block-quote:before, blockquote.wp-block-quote.is-style-large:before, blockquote:before { content: "\f10e"; font-family: var(--icon-font); position: absolute; right: 40px; bottom: 40px; font-size: 7rem; font-weight: 300; opacity: 0.1; line-height: 1; color: var(--theme-color); } blockquote.wp-block-quote p, blockquote.wp-block-quote.is-style-large p, blockquote p { margin-bottom: 0; } blockquote.wp-block-quote p a, blockquote.wp-block-quote.is-style-large p a, blockquote p a { color: inherit; } blockquote.wp-block-quote cite, blockquote.wp-block-quote.is-style-large cite, blockquote cite { display: inline-block; font-size: 18px; position: relative; padding-left: 45px; border-color: inherit; line-height: 1; font-weight: 400; margin-top: 2px; font-style: normal; color: var(--theme-color); } blockquote.wp-block-quote cite:before, blockquote.wp-block-quote.is-style-large cite:before, blockquote cite:before { content: ""; position: absolute; left: 0; bottom: 7px; width: 30px; height: 2px; border-top: 2px solid; border-color: inherit; } .wp-block-pullquote blockquote:after { display: none; } .wp-block-pullquote blockquote { text-align: center; border-left: none; } blockquote.wp-block-quote.is-style-large:not(.is-style-plain) { padding-top: 30px; padding-bottom: 30px; } .wp-block-pullquote blockquote cite { text-align: center; width: fit-content; display: block; margin-left: auto; margin-right: auto; } .wp-block-pullquote.is-style-solid-color cite { margin-left: auto; margin-right: auto; } figure.wp-block-pullquote { border-width: 0; padding-top: 0; padding-bottom: 0; margin: 30px 0; } blockquote.wp-block-quote.has-text-align-right { border-right-color: var(--theme-color); padding: 50px 60px 50px 60px; } blockquote.wp-block-quote.has-text-align-right::before { left: 40px; right: auto; transform: rotate(180deg); } blockquote.wp-block-quote.has-text-align-right cite { padding-left: 0; padding-right: 40px; text-align: right; font-weight: 600; } blockquote.wp-block-quote.has-text-align-right cite:before { left: auto; right: 0; bottom: 5px; } blockquote.vs-quote { text-align: center; padding: 40px 50px; border-left: 2px solid var(--theme-color); } blockquote.vs-quote:before { position: relative; bottom: 0; right: 0; font-weight: 300; opacity: 1; width: 80px; height: 80px; line-height: 80px; text-align: center; background-color: var(--theme-color); color: var(--white-color); font-size: 34px; display: inline-block; margin: 0 0 28px 0; border-radius: 50%; } blockquote.vs-quote cite { padding: 0; margin-top: 23px; } blockquote.vs-quote cite::before { display: none; } blockquote.vs-quote .quote-author { display: block; font-size: 14px; color: #74787C; font-family: var(--title-font); display: block; font-weight: 400; } .blog-meta span, .blog-meta a { display: inline-block; margin-right: 16px; font-size: 16px; color: #55585f; } .blog-meta span:last-child, .blog-meta a:last-child { margin-right: 0; } .blog-meta span i, .blog-meta a i { margin-right: 10px; color: var(--theme-color); } .blog-meta a:hover { color: var(--theme-color); } .blog-category { margin-bottom: -10px; } .blog-category a { display: inline-block; color: var(--white-color); padding: 4.5px 24.5px; margin-right: 5px; margin-bottom: 10px; border: 1px solid transparent; background-color: var(--theme-color); } .blog-category a:hover { background-color: var(--white-color); color: var(--body-color); border-color: var(--theme-color); } .blog-title a { color: inherit; } .blog-title a:hover { color: var(--theme-color); } .vs-blog { margin-bottom: 30px; } .blog-inner-title { font-size: 30px; margin-top: -0.2em; margin-bottom: 8px; } .blog-single { position: relative; margin-bottom: 40px; background: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; padding: 0.1px 0 0.1px 0; } .blog-single .blog-meta { margin: -0.2em 0 10px 0; } .blog-single .blog-title { font-size: 30px; margin-bottom: 17px; } .blog-single .link-btn { width: fit-content; display: block; margin-top: 26px; } .blog-single .blog-date { color: var(--body-color); } .blog-single .blog-date i { color: var(--theme-color); margin: 0 10px 0 0; } .blog-single .share-links-title { font-size: 16px; font-weight: 600; color: var(--title-color); font-family: var(--title-font); margin: 0 15px 0 0; display: inline-block; } .blog-single .share-links { margin: 16px 0 0 0; } .blog-single .share-links .row { align-items: center; --bs-gutter-y: 15px; } .blog-single .share-links .tagcloud { display: inline-block; } .blog-single .share-links .tagcloud a { padding: 0; border-radius: 0; color: var(--body-color); vertical-align: middle; } .blog-single .share-links .tagcloud a:not(:last-child):after { content: ","; } .blog-single .share-links .tagcloud a:hover { color: var(--theme-color) !important; background-color: transparent; } .blog-single .social-links { padding: 0; margin: 0; list-style-type: none; display: inline-block; } .blog-single .social-links li { display: inline-block; margin-right: 13px; } .blog-single .social-links li:last-child { margin-right: 0; } .blog-single .social-links a { line-height: 1; font-size: 16px; color: var(--body-color); text-align: center; display: block; } .blog-single .social-links a:hover { color: var(--theme-color); } .blog-single .blog-content { margin: var(--blog-space-y, 40px) var(--blog-space-x, 40px) var(--blog-space-y, 40px) var(--blog-space-x, 40px); padding: 0; position: relative; border-radius: 0 0 5px 5px; } .blog-single .blog-audio { line-height: 1; } .blog-single .blog-audio, .blog-single .blog-img { position: relative; background-color: var(--smoke-color); } .blog-single .blog-audio img, .blog-single .blog-audio > *, .blog-single .blog-img img, .blog-single .blog-img > * { border-radius: 5px 5px 0 0; } .blog-single .blog-img .slick-arrow { --pos-x: 30px; border: none; width: 40px; height: 40px; line-height: 40px; background-color: var(--theme-color); color: var(--white-color); border-radius: 5px; } .blog-single .blog-img .slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .blog-single .blog-img .play-btn { --icon-size: 80px; --icon-font-size: 24px; position: absolute; left: 50%; top: 50%; margin: calc(var(--icon-size) / -2) 0 0 calc(var(--icon-size) / -2); } .blog-single:hover .blog-img .slick-arrow { opacity: 1; visibility: visible; } .blog-author { background-color: var(--smoke-color); padding: 30px; display: flex; align-items: center; margin: var(--blog-space-y, 60px) 0; } .blog-author .media-img { width: 189px; margin: 0 30px 0 0; } .blog-author .author-name { font-size: 24px; font-weight: 700; margin: -0.3em 0 0px 0; } .blog-author .author-degi { color: var(--theme-color); } .blog-author .author-text { margin: 0 0 -0.1em 0; } .blog-details .blog-single { background: transparent; box-shadow: none; padding: 0; } .blog-details .blog-img { margin: 0 0 40px 0; } .blog-details .blog-img img { border-radius: 0; } .blog-details .blog-content { margin: 0; } .blog-style1 { background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.07); border-radius: 5px; } .blog-style1 .blog-meta { margin: 0 0 10px 0; } .blog-style1 .blog-content { padding: 35px 40px 33px 40px; } .blog-style1 .blog-title { font-size: 24px; } .blog-style2 { background-color: var(--white-color); box-shadow: none; } .blog-style2 .blog-meta { margin: 0 0 15px; } .blog-style2 .blog-text { margin: 0 0 20px 0; } .blog-style2 .blog-content { border: 2px solid #ECF2FD; border-top: none; padding: 35px 40px 40px 40px; } .blog-style2 .blog-title { font-size: 20px; line-height: 1.5em; } .blog-style3 .blog-img { overflow: hidden; margin: -2px; } .blog-style3 .blog-img img { transform: scale(1); transition: all ease 0.4s; } .blog-style3 .blog-body { border: 2px solid #f4f5f8; } .blog-style3:nth-child(odd) .blog-body { display: flex; flex-direction: column-reverse; } .blog-style3 .blog-content { padding: 35px 40px 30px 40px; } .blog-style3 .blog-meta { margin-bottom: 15px; } .blog-style3 .blog-meta i { color: var(--body-color); } .blog-style3 .blog-meta a { position: relative; line-height: 1; border-right: 1px solid #c8c8c8; margin-right: 12px; padding: 0 15px 0 0; } .blog-style3 .blog-meta a:last-child { margin-right: 0; padding-right: 0; border-right: none; } .blog-style3 .blog-title { font-size: 20px; font-weight: 600; line-height: 30px; } .blog-style3 .link-btn { text-transform: capitalize; } .blog-style3:hover .blog-img img { transform: scale(1.1); } .blog-style4 { box-shadow: 8.5px 0 60px 0px rgba(166, 170, 184, 0.05); border-radius: 20px; padding: 20px; border: 2px solid #eff2fb; } .blog-style4 .blog-content { padding: 0 20px 10px 20px; } .blog-style4 .blog-img { overflow: hidden; border-radius: 20px; margin: 0 0 32px 0; } .blog-style4 .blog-img img { transform: scale(1); transition: all ease 0.4s; } .blog-style4 .blog-meta { margin-bottom: 4px; } .blog-style4 .blog-meta i { color: var(--body-color); } .blog-style4 .blog-meta a { font-size: 14px; } .blog-style4 .blog-title { font-weight: 600; margin-bottom: 20px; font-size: 22px; } .blog-style4:hover .blog-img img { transform: scale(1.2); } .blog-style5 { background-color: var(--white-color); border-radius: 12px; transition: all ease 0.4s; } .blog-style5 .blog-img img { width: 100%; border-radius: 12px; } .blog-style5 .blog-category { margin-bottom: -8px; } .blog-style5 .blog-category a { padding: 0; font-size: 14px; color: var(--title-color); background-color: transparent; text-decoration: underline; text-transform: uppercase; border: none; } .blog-style5 .blog-category a:hover { color: var(--theme-color); } .blog-style5 .blog-title { font-weight: 600; margin: 0 0 20px 0; font-size: 22px; } .blog-style5 .blog-avater { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin: 0 10px 0 0; } .blog-style5 .blog-avater img { width: 100%; } .blog-style5 .blog-date { background-color: var(--theme-color); color: var(--white-color); text-transform: uppercase; line-height: 1; font-size: 14px; font-weight: 500; padding: 2.5px 10px; border-radius: 9999px; } .blog-style5 .blog-date:hover { background-color: var(--title-color); color: var(--white-color); } .blog-style5 .blog-bottom { display: flex; align-items: center; } .blog-style5 .blog-writter { color: #74777c; font-size: 14px; font-weight: 500; margin: 3px 0 -0.4em 0; } .blog-style5 .blog-content { padding: 30px 40px 40px 40px; } .blog-style5:hover { box-shadow: 0px 21px 10px 0px rgba(4, 4, 4, 0.05); } .blog-style6 { background-color: var(--white-color); padding: 25px 25px 27px 25px; border-radius: 20px; box-shadow: 1.5px 2.598px 16.74px 1.26px rgba(71, 70, 70, 0.04); } .blog-style6 .blog-img { overflow: hidden; border-radius: 20px; box-shadow: 1.5px 2.598px 16.74px 1.26px rgba(167, 166, 166, 0.1); position: relative; } .blog-style6 .blog-img:before { content: ""; top: -60%; position: absolute; background-color: rgba(255, 255, 255, 0.1); height: 100px; width: calc(100% + 200px); transition: all ease 0.6s; z-index: 1; } .blog-style6 .blog-img img { transform: scale(1.001); transition: all ease 0.6s; } .blog-style6 .blog-meta { border-bottom: 1px solid #d5d5d5; padding-bottom: 13px; margin: 13px 0 20px 0; } .blog-style6 .blog-meta a { font-size: 15px; font-weight: 500; color: #65666d; margin-right: 14px; } .blog-style6 .blog-meta a:hover { color: var(--theme-color); } .blog-style6 .blog-meta a:not(:last-child):after { content: "~"; margin-left: 18px; } .blog-style6 .blog-meta a:last-child { margin-right: 0; } .blog-style6 .blog-content { text-align: center; padding: 0 20px; } .blog-style6 .blog-title { font-size: 20px; font-weight: 600; margin-bottom: 17px; } .blog-style6:hover .blog-img:before { top: 160%; } .blog-style6:hover .blog-img img { transform: scale(1.1); } .blog-style7 .blog-img { overflow: hidden; border-radius: 12px; } .blog-style7 .blog-img img { width: 100%; } .blog-style7 .blog-date { margin: -17.5px 0 24px 0; } .blog-style7 .blog-date a { display: inline-block; font-size: 14px; padding: 10.5px 20px; font-weight: 500; line-height: 1; background-color: var(--theme-color); color: var(--white-color); border-radius: 7px; text-transform: uppercase; transition: all ease 0.4s; } .blog-style7 .blog-date a:hover { background-color: var(--white-color); color: var(--theme-color); } .blog-style7 .blog-meta { margin: 0 0 12px 0; } .blog-style7 .blog-meta a { color: #555555; display: inline-block; font-size: 14px; margin-right: 10px; } .blog-style7 .blog-meta a i { color: var(--theme-color); transition: all ease 0.4s; } .blog-style7 .blog-title { font-weight: 700; font-size: 22px; margin: 0; } .blog-style7 .icon-btn, .blog-style7 .hero-layout4 .slick-arrow, .hero-layout4 .blog-style7 .slick-arrow { position: absolute; left: 0; bottom: 0; transform: translateX(60px); opacity: 0; visibility: hidden; } .blog-style7 .blog-body { background-color: var(--white-color); padding: 0.1px 35px 30px 35px; margin: -35px 20px 0 20px; position: relative; z-index: 1; border-radius: 12px; transition: all ease 0.4s; } .blog-style7 .blog-content { overflow: hidden; position: relative; transition: all ease 0.4s; padding-bottom: 0; } .blog-style7.layout2 .blog-body { border: 1px solid #e0e0e0; } .blog-style7:hover .icon-btn, .blog-style7:hover .hero-layout4 .slick-arrow, .hero-layout4 .blog-style7:hover .slick-arrow { transform: translateX(0); opacity: 1; visibility: visible; } .blog-style7:hover .blog-body { margin-top: -104px; background-color: var(--theme-color); border-color: transparent; } .blog-style7:hover .blog-content { padding-bottom: 70px; } .blog-style7:hover .blog-meta a, .blog-style7:hover .blog-meta a i { color: #e3e3e3; } .blog-style7:hover .blog-meta a:hover { color: var(--title-color); } .blog-style7:hover .blog-title a { color: var(--white-color); } .blog-style7:hover .blog-title a:hover { color: var(--title-color); } .blog-style7:hover .blog-date a { background-color: var(--white-color); color: var(--theme-color); } .blog-style7:hover .blog-date a:hover { background-color: var(--title-color); color: var(--white-color); } @media (min-width: 1199px) { .blog-style4-slider { max-width: 775px; } } /* Medium Large devices */ @media (max-width: 1399px) { .blog-style2 .blog-content { padding: 30px 25px 35px 25px; } .blog-style7 .blog-body { padding: 0.1px 25px 30px 25px; margin: -35px 15px 0 15px; } .blog-style7 .blog-title { font-size: 20px; } .blog-style1 .blog-content { padding: 35px 25px 33px 25px; } .blog-style1 .blog-title { font-size: 18px; } .blog-style5 .blog-content { padding: 30px 25px 40px 25px; } .blog-style5 .blog-title { font-size: 22px; } .blog-style6 { padding: 20px 20px 20px 20px; } .blog-style6 .blog-content { padding: 0; } .blog-style6 .blog-meta { margin: 8px 0 18px 0; } .blog-style6 .blog-meta a { font-size: 14px; margin-right: 8px; } .blog-style6 .blog-meta a:not(:last-child):after { margin-left: 10px; } .blog-style6 .blog-title { font-size: 18px; margin-bottom: 10px; } } /* Large devices */ @media (max-width: 1199px) { blockquote { font-size: 20px; padding: 23px 30px 26px 30px; } blockquote cite { font-size: 16px; } .blog-style3 .blog-meta a { font-size: 12px; } .blog-style3 .blog-meta i { margin-right: 5px; } .blog-style3 .blog-content { padding: 25px 25px 30px 25px; } .blog-single { --blog-space-y: 40px; --blog-space-x: 30px; } .blog-single .blog-title { font-size: 24px; } .blog-meta span, .blog-meta a { font-size: 14px; } .blog-style4 { padding: 10px; } .blog-style4 .blog-content { padding: 0 15px 20px 15px; } .blog-style4 .blog-title { margin-bottom: 15px; font-size: 20px; } .blog-style6 { padding: 20px 15px 20px 15px; } .blog-style6 .blog-meta a { font-size: 12px; } } /* Medium devices */ @media (max-width: 991px) { .blog-style1 .blog-title { font-size: 20px; } .blog-style7 .blog-body { padding: 0.1px 20px 30px 20px; margin: -35px 15px 0 15px; } .blog-style7 .blog-title { font-size: 20px; } .blog-style7 .blog-meta a { font-size: 13px; } .blog-style7 .blog-date { margin: -17.5px 0 15px 0; } } /* Small devices */ @media (max-width: 767px) { blockquote.vs-quote { padding: 40px 15px; } blockquote.vs-quote p { line-height: 1.8; } blockquote.vs-quote cite { padding: 0; margin-top: 10px; } .blog-inner-title { font-size: 26px; } .blog-single { --blog-space-y: 40px; --blog-space-x: 20px; } .blog-single .blog-title { font-size: 20px; } .blog-single .blog-img .play-btn { --icon-size: 60px; --icon-font-size: 20px; } .blog-author { display: block; padding: 30px 15px; } .blog-author .media-img { margin: 0 0 30px 0; width: 100%; } .blog-author .media-img img { width: 100%; } .blog-author .author-name { font-size: 18px; } .blog-author .author-degi { margin-bottom: 10px; } .blog-style5 .blog-title { font-size: 18px; } .blog-style5 .blog-category { margin-bottom: 0px; } .blog-style7 .blog-body { margin: -20px 10px 0 10px; } } /*------------------- 4.7. Comments -------------------*/ .comment-respond { margin: var(--blog-space-y, 60px) 0 30px 0; position: relative; } .comment-respond .form-title a#cancel-comment-reply-link { font-size: 0.7em; text-decoration: underline; } .comment-respond .custom-checkbox.notice { margin-top: 10px; margin-bottom: 25px; } .comment-respond .row { --bs-gutter-x: 20px; } .comment-respond .form-control { background-color: var(--white-color); border: none; height: 55px; } .comment-respond .form-group > i { top: 20.5px; } .comment-respond input[type=checkbox] ~ label:before { background-color: var(--white-color); border: 1px solid var(--white-color); border-radius: 3px; } .comment-respond input[type=checkbox]:checked ~ label:before { background-color: var(--theme-color); border-color: transparent; } .comment-respond .blog-inner-title { margin-bottom: 0px; } .comment-respond .form-text { margin-bottom: 25px; } .comment-respond .form-inner { background-color: var(--smoke-color); padding: 30px; } .comment-respond .vs-btn { width: 100%; } .question-form .comment-respond, .review-form .comment-respond { margin: 0 0 20px 0; padding: 40px; background-color: var(--smoke-color); } .question-form .comment-respond .vs-btn, .review-form .comment-respond .vs-btn { width: max-content; } .question-form input[type=checkbox] ~ label, .review-form input[type=checkbox] ~ label { margin-top: 10px; margin-bottom: 25px; } .vs-comments-wrap { margin: var(--blog-space-y, 60px) 0 var(--blog-space-y, 60px) 0; } .vs-comments-wrap .description p:last-child { margin-bottom: 0; } .vs-comments-wrap .comment-respond { margin: 30px 0; } .vs-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; } .vs-comments-wrap blockquote { background-color: #eaf8f9; } .vs-comments-wrap li { margin: 0; } .vs-comments-wrap .vs-post-comment { border-bottom: 1px solid #F0F0F0; position: relative; display: flex; position: relative; padding: 0 0 30px 0; margin: 30px 0 30px 0; } .vs-comments-wrap ul.comment-list { list-style: none; margin: -10px 0 0 0; padding: 0; } .vs-comments-wrap ul.comment-list ul ul, .vs-comments-wrap ul.comment-list ul ol, .vs-comments-wrap ul.comment-list ol ul, .vs-comments-wrap ul.comment-list ol ol { margin-bottom: 0; } .vs-comments-wrap .comment-avater { width: 110px; height: 110px; margin-right: 25px; overflow: hidden; background-color: var(--white-color); } .vs-comments-wrap .comment-avater img { width: 100%; } .vs-comments-wrap .comment-content { flex: 1; position: relative; } .vs-comments-wrap .comment-content p:last-of-type { margin-bottom: 0; } .vs-comments-wrap .commented-on { font-size: 13px; display: block; margin-bottom: 3px; margin-top: -0.25em; font-weight: 500; text-transform: uppercase; color: var(--theme-color); font-family: var(--title-font); } .vs-comments-wrap .commented-on i { margin-right: 7px; font-size: 0.9rem; } .vs-comments-wrap .name { margin-bottom: 7px; font-size: 20px; font-weight: 600; } .vs-comments-wrap .comment-top { display: flex; justify-content: space-between; } .vs-comments-wrap .text:last-of-type { margin-bottom: 0; } .vs-comments-wrap .children { margin: 0; padding: 0; list-style-type: none; margin-left: 70px; } .vs-comments-wrap .reply_and_edit { position: absolute; right: 0; top: 0; line-height: 1; } .vs-comments-wrap .replay-btn { font-weight: 600; font-size: 16px; display: inline-block; font-family: var(--title-font); color: var(--theme-color); } .vs-comments-wrap .replay-btn i { margin-right: 7px; font-size: 0.8em; } .vs-comments-wrap .replay-btn:hover { color: var(--title-color); } .vs-comments-wrap .star-rating { font-size: 12px; margin-bottom: 10px; position: absolute; top: 5px; right: 0; width: 80px; } .vs-comments-wrap .woocommerce-review__awaiting-approval { margin-bottom: 10px; display: block; color: var(--theme-color); } .vs-comments-wrap.vs-comment-form { margin: 0; } /* Large devices */ @media (max-width: 1199px) { .vs-comments-wrap .vs-post-comment { display: block; } .vs-comments-wrap .star-rating { position: relative; top: 0; right: 0; } .vs-comments-wrap .comment-top { display: block; } .vs-comments-wrap .comment-avater { margin-right: 0; margin-bottom: 20px; } .vs-comments-wrap .children { margin-left: 40px; } .vs-comments-wrap .reply_and_edit { position: relative; top: 0; margin: 15px 0 0 0; } } .woocommerce-Reviews .vs-comments-wrap { padding: 0; background-color: transparent; margin: 0 0 50px 0; } .woocommerce-Reviews .woocommerce-Reviews-title { margin-bottom: 40px; } .woocommerce-Reviews .rating-select { margin-bottom: 20px; } .woocommerce-Reviews .form-title { position: relative; font-weight: 700; text-transform: uppercase; font-family: var(--title-font); color: var(--title-color); font-size: 24px; padding: 0 0 12px 0; margin: -0.25em 0 25px 0; } .woocommerce-Reviews .form-title:before { content: ""; width: 46px; height: 3px; position: absolute; left: 0; bottom: 0; background-color: var(--theme-color); display: inline-block; } .woocommerce-Reviews .form-group:last-of-type { margin-bottom: 0; } /* Small devices */ @media (max-width: 767px) { .vs-comments-wrap .children { margin-left: 20px; } .vs-comments-wrap .name { font-size: 18px; } .comment-respond .form-inner { padding: 30px 15px; } .question-form .comment-respond, .review-form .comment-respond { padding: 30px 15px; } .question-form input[type=checkbox] ~ label, .review-form input[type=checkbox] ~ label { margin-top: 20px; } } /*------------------- 4.8. Hero Area -------------------*/ .ls-btn-group { display: flex; gap: 20px; min-width: max-content; } .ls-arrow-vertical .icon-btn, .ls-arrow-vertical .hero-layout4 .slick-arrow, .hero-layout4 .ls-arrow-vertical .slick-arrow { display: block; margin-bottom: 20px; } .ls-arrow-vertical .icon-btn:last-child, .ls-arrow-vertical .hero-layout4 .slick-arrow:last-child, .hero-layout4 .ls-arrow-vertical .slick-arrow:last-child { margin-bottom: 0; } .vs-btn.ls-vs-btn2 { margin-right: 40px; vertical-align: middle; } .ls-custom-arrow:not(:last-child) { margin-right: 10px; } .ls-arrow2, .ls-custom-arrow2.ls-arrow2 { display: block; margin-right: 0; margin-bottom: 10px; } .ls-arrow2:last-child, .ls-custom-arrow.ls-arrow2:last-child { margin-bottom: 0; } .ls-play-btn .play-btn { --icon-size: 100%; width: 100%; height: 100%; } .ls-play-btn .play-btn i { line-height: 1; } .ls-play-btn .play-btn i:before { position: absolute; left: 52%; top: 49%; transform: translate(-50%, -50%); } .hero-style3 .ls-inner { background-size: cover !important; } .ls-custom-dot { display: block; background-color: transparent; width: var(--icon-size, 55px); height: var(--icon-size, 55px); line-height: var(--icon-size, 52px); border: 2px solid var(--white-color); color: var(--white-color); font-size: 18px; font-weight: 700; font-family: var(--title-font); border-radius: 50%; margin: 20px 0; } .ls-custom-dot:first-child { margin-top: 0; } .ls-custom-dot:last-child { margin-bottom: 0; } .ls-custom-dot:focus { outline: none; } .ls-custom-dot:hover, .ls-custom-dot.active { background-color: var(--white-color); color: var(--theme-color); border-color: transparent; } .ls-custom-dot.active { transform: scale(1.1); } .ls-custom-dot.style3, .ls-custom-dot.style2 { display: inline-block; --icon-size: 17px; background-color: transparent; border: 1px solid #808080; border-radius: 50%; margin: 0 11px 0 0; } .ls-custom-dot.style3:last-child, .ls-custom-dot.style2:last-child { margin-right: 0; } .ls-custom-dot.style3:hover, .ls-custom-dot.style3.active, .ls-custom-dot.style2:hover, .ls-custom-dot.style2.active { background-color: var(--white-color); border-color: transparent; } .ls-custom-dot.style3 { display: block; margin: 10px 0; } .ls-custom-dot.style3:hover, .ls-custom-dot.style3.active { background-color: var(--theme-color); border-color: var(--theme-color); } .hero-btns { display: flex; flex-wrap: wrap; gap: 20px; } .hero-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; z-index: 1; } .hero-ripple-img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform: rotate(45deg) scale(0.94); border-radius: 40% 40% 40% 40%/40% 40% 40% 40%; z-index: 2; } .hero-ripple-img img { transform: rotate(-45deg) scale(1.09); width: 100%; } @media (min-width: 1500px) { .ls-hero-layout4 { margin-top: -63px; } } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev, #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next { width: 80px; height: 80px; line-height: 80px; background-color: rgba(255, 255, 255, 0.2); color: var(--white-color); text-align: center; font-size: 24px; border-radius: 50%; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev:after, #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next:after { display: none; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev::before, #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next::before { content: "\f061"; font-family: var(--icon-font); } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev:hover, #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next:hover { transform: none; background-color: var(--theme-color); color: var(--white-color); } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev { left: 150px; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev:before { content: "\f060"; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next { right: 150px; } .hero-layout1 .slick-arrow { --pos-x: 150px; --icon-font-size: 24px; --icon-size: 67px; background-color: transparent; line-height: 65px; color: var(--white-color); border: 2px solid var(--white-color); top: calc(50% - 37.5px); } .hero-layout1 .hero-inner { position: relative; min-height: 850px; display: flex; align-items: center; background-color: var(--title-color); padding-bottom: 75px; overflow: hidden; } .hero-layout1 .hero-content { position: relative; z-index: 4; padding: 80px 0; } .hero-layout1 .hero-title { color: var(--white-color); text-transform: uppercase; margin: -0.2em 0 20px 0; font-size: 60px; line-height: 1.3; animation-delay: 0s; } .hero-layout1 .hero-text { color: var(--white-color); max-width: 690px; line-height: 28px; margin: 0 0 30px 0; animation-delay: 0.2s; } .hero-layout1 .hero-btns { animation-delay: 0.4s; } .hero-layout1 .hero-innertext { font-size: 18px; text-align: left; font-weight: 600; border: 2px solid var(--white-color); font-family: var(--title-font); color: var(--white-color); border-radius: 5px; padding: 9px 23.5px; vertical-align: middle; position: relative; top: -4px; margin-left: 15px; display: inline-block; } .hero-layout1 .hero-shape1 { position: absolute; top: -473px; left: 51px; z-index: 2; width: 300px; height: 1558px; background-color: rgba(14, 84, 245, 0.5); transform: rotate(43.46deg); } .hero-layout1 .hero-shape2 { position: absolute; transform: rotate(43.46deg); top: -485px; left: 406px; z-index: 2; width: 589px; height: 1819.7px; background: linear-gradient(172deg, rgba(5, 26, 79, 0.35) 21%, rgba(0, 0, 0, 0) 54%); background-position: 0% 0%; background-repeat: no-repeat; } .hero-layout1 .slick-current { --animation-name: slideinup; } .hero-layout2 { position: relative; } .hero-layout2 .hero-inner { min-height: 980px; display: flex; align-items: center; justify-content: center; } .hero-layout2 .hero-bg-text { text-align: center; text-transform: uppercase; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 600; font-size: 300px; z-index: 1; font-family: var(--title-font); color: rgba(255, 255, 255, 0.05); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); display: inline-block; animation-delay: 1s; } .hero-layout2 .hero-subtitle { color: var(--white-color); font-family: var(--title-font); font-size: 20px; font-weight: 600; display: block; text-align: center; text-transform: uppercase; margin-bottom: 30px; position: relative; z-index: 5; } .hero-layout2 .hero-title { color: var(--white-color); text-align: center; font-weight: 700; font-size: 72px; line-height: 1.2; max-width: 810px; margin: 0 auto 40px auto; animation-delay: 0.5s; position: relative; z-index: 5; } .hero-layout2 .hero-btns { justify-content: center; animation-delay: 0.8s; position: relative; z-index: 5; } .hero-layout2 .hero-shape2, .hero-layout2 .hero-shape1 { position: absolute; left: 0; bottom: -1px; width: 100%; z-index: 3; line-height: 1; } .hero-layout2 .hero-shape1 img { width: 100%; } .hero-layout2 .hero-shape2 { z-index: 2; animation-delay: 1.5s; } .hero-layout2 .hero-play { position: absolute; left: 16.5%; bottom: 18.6%; z-index: 4; display: flex; align-items: center; animation-delay: 1s; } .hero-layout2 .hero-play .play-btn { margin-right: 30px; } .hero-layout2 .hero-play__title { color: var(--white-color); text-transform: capitalize; font-size: 24px; font-weight: 700; font-family: var(--title-font); display: block; margin: 3px 0 3px 0; } .hero-layout2 .hero-play__label { color: var(--white-color); font-size: 16px; font-family: var(--title-font); margin: 0; } .hero-layout2 .slick-current { --animation-name: slideinup; } .hero-layout2 .slick-current .hero-bg-text { --animation-name: fadein-custom; } .hero-layout2 .slick-current .hero-shape2 { --animation-name: slideinleft; } .hero-layout2 .slick-current .hero-play { --animation-name: slideinright; } .hero-layout3 .hero-img img { border-radius: 22px; } .hero-layout3 .hero-inner { min-height: 850px; padding: 100px 0; display: flex; align-items: center; flex-wrap: wrap; } .hero-layout3 .hero-subtitle { color: var(--white-color); font-size: 18px; font-weight: 600; font-family: var(--title-font); display: block; margin: -0.2em 0 15px 0; } .hero-layout3 .hero-title { color: var(--white-color); font-size: 60px; font-weight: 700; line-height: 1.27; margin: 0 0 25px 0; animation-delay: 0.5s; } .hero-layout3 .inner-text { font-weight: 300; } .hero-layout3 .hero-btns { animation-delay: 1s; } .hero-layout3 .hero-text { color: var(--white-color); font-family: var(--title-font); line-height: 28px; margin: 0 0 30px 0; animation-delay: 0.8s; } .hero-layout3 .slick-dots { position: absolute; top: 50%; left: 225px; margin: 0; transform: translateY(-50%); } .hero-layout3 .slick-dots button { font-size: 30px; width: 55px; height: 55px; border-radius: 50%; background-color: transparent; color: var(--white-color); border: 2px solid var(--white-color); font-family: var(--title-font); font-size: 20px; font-weight: 700; } .hero-layout3 .slick-dots button::before { display: none; } .hero-layout3 .slick-dots li { display: block; margin: 0 0 20px 0; } .hero-layout3 .slick-dots li.slick-active button { transform: scale(1.1); background-color: var(--white-color); color: var(--theme-color); } .hero-layout3 .slick-dots li:last-child { margin-bottom: 0; } .hero-layout3 .slick-current { --animation-name: slideinup; } .hero-layout4 { margin-top: -65px; } .hero-layout4 .hero-content { position: relative; z-index: 4; } .hero-layout4 .hero-inner { min-height: 950px; max-width: 1518px; padding: 87px 0 100px 0; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; position: relative; } .hero-layout4 .hero-shape2 { position: absolute; right: 0; top: 0; z-index: 1; } .hero-layout4 .hero-shape1 { position: absolute; width: var(--shape-size, 540px); height: var(--shape-size, 540px); right: calc(var(--shape-size, 540px) / -2); bottom: calc((var(--shape-size, 540px) - 460px) / -1); z-index: 1; background-color: var(--theme-color); border-radius: 65% 0% 65% 0%/65% 0% 65% 0%; } .hero-layout4 .hero-subtitle { font-size: 24px; font-weight: 500; font-family: var(--title-color); color: var(--white-color); display: block; margin: 0 0 30px 0; } .hero-layout4 .hero-title { font-size: 110px; color: var(--white-color); margin: 0 0 12px 0; line-height: 1; animation-delay: 0.5s; } .hero-layout4 .hero-title2 { font-size: 72px; color: var(--white-color); line-height: 1; margin: 0 0 50px 0; animation-delay: 0.8s; } .hero-layout4 .hero-img { position: absolute; right: 8%; bottom: 0; z-index: 2; max-width: 920px; } .hero-layout4 .hero-btns { animation-delay: 1.2s; } .hero-layout4 .slick-arrow { --btn-size: 60px; --icon-gap: 20px; top: calc(50% - (var(--btn-size) + var(--icon-gap)) / 2); left: 180px; border: 2px solid var(--white-color); color: var(--white-color); background-color: transparent; } .hero-layout4 .slick-arrow.slick-next { top: calc(50% + (var(--btn-size) + var(--icon-gap)) / 2); } @media (max-width: 1800px) { .hero-layout4 .slick-arrow { left: 60px; } } .hero-layout4 .slick-current { --animation-name: slideinup; } .hero-info { display: flex; align-items: center; } .hero-info .media-icon { margin-right: 25px; } .hero-info .media-label { font-size: 22px; font-family: var(--title-font); color: #7190ff; display: block; margin-bottom: 20px; } .hero-info .media-link { font-size: 36px; font-weight: 700; color: var(--white-color); font-family: var(--title-font); } .hero-info .media-link a { color: inherit; } .hero-info .media-link a:hover { color: var(--theme-color); } .hero-layout5 .hero-inner { padding: 250px 0 100px 0; min-height: 950px; display: flex; flex-wrap: wrap; align-items: center; } .hero-layout5 .hero-content { position: relative; z-index: 4; } .hero-layout5 .hero-subtitle { font-size: 40px; font-weight: 700; color: var(--white-color); font-family: var(--title-font); letter-spacing: -0.2px; display: block; margin-bottom: 17px; } .hero-layout5 .hero-title { font-size: 100px; color: var(--white-color); letter-spacing: -0.5px; font-weight: 700; margin: 0 0 7px 0; animation-delay: 0.4s; } .hero-layout5 .hero-list ul { margin: 0 0 43px 0; padding: 0; list-style-type: none; } .hero-layout5 .hero-list li { font-size: 20px; font-weight: 500; font-family: var(--title-font); color: var(--white-color); margin-bottom: 20px; animation-delay: 0.8s; } .hero-layout5 .hero-list li:nth-child(2) { animation-delay: 1.2s; } .hero-layout5 .hero-list li > i:first-child { margin-right: 15px; } .hero-layout5 .hero-shape1 { position: absolute; left: 0; top: 0; width: 1210px; height: 1030px; z-index: 1; opacity: 0.7; background-color: #001c82; clip-path: polygon(0px 0px, 100% 0px, 63.5% 100%, 0% 100%); } .hero-layout5 .hero-shape2 { position: absolute; z-index: 2; top: -11px; right: 0; animation-delay: 1.4s; max-width: 30%; } .hero-layout5 .hero-shape3 { position: absolute; z-index: 2; top: 248px; left: -15px; animation-delay: 1.6s; } .hero-layout5 .hero-shape4 { position: absolute; z-index: 2; top: 166px; left: 40%; animation-delay: 1.8s; } .hero-layout5 .hero-shape5 { position: absolute; z-index: 2; top: 430px; left: -13px; animation-delay: 2s; } .hero-layout5 .hero-info { position: absolute; right: 80px; bottom: 95px; z-index: 3; animation-delay: 1.2s; } .hero-layout5 .slick-arrow { width: 80px; height: 80px; line-height: 80px; background-color: rgba(255, 255, 255, 0.2); color: var(--white-color); text-align: center; font-size: 24px; border-radius: 50%; --pos-x: 150px; border: none; } @media (max-width: 1800px) { .hero-layout5 .slick-arrow { --pos-x: 70px; } } .hero-layout5 .slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .hero-layout5 .hero-btns { animation-delay: 1.6s; } .hero-layout5 .slick-current { --animation-name: slideinup; } .hero-layout5 .slick-current .hero-info { --animation-name: slideinright; } .hero-layout5 .slick-current .hero-shape5, .hero-layout5 .slick-current .hero-shape4, .hero-layout5 .slick-current .hero-shape3, .hero-layout5 .slick-current .hero-shape2 { --animation-name: fadein-custom; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .hero-layout4 .hero-img { right: 16%; } } /* Extra large devices */ @media (max-width: 1500px) { .ls-wrapper .icon-btn.style2, .ls-wrapper .hero-layout4 .style2.slick-arrow, .hero-layout4 .ls-wrapper .style2.slick-arrow { --btn-size: 40px; --btn-font-size: 14px; } .ls-custom-dot { --icon-size: 40px; font-size: 14px; line-height: 36px; margin: 10px 0; } .hero-layout2 .hero-shape2 { max-width: 450px; } .hero-layout2 .hero-play { left: 14.5%; bottom: 13.6%; } .hero-layout2 .hero-bg-text { font-size: 220px; } .hero-layout2 .hero-title { font-size: 60px; max-width: 700px; } .hero-layout2 .hero-subtitle { font-size: 18px; } .hero-layout2 .hero-inner { min-height: 800px; } .hero-layout2 .hero-play .play-btn { --icon-size: 100px; --icon-font-size: 24px; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next { right: 60px; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev { left: 60px; } .hero-layout3 .slick-dots { top: auto; bottom: 40px; left: 50%; transform: translateX(-50%); } .hero-layout3 .slick-dots button { width: 40px; height: 40px; line-height: 38px; font-size: 16px; } .hero-layout3 .slick-dots li { display: inline-block; margin: 0 10px 0 0; } .hero-layout3 .slick-dots li:last-child { margin-right: 0; } .hero-layout3 .slick-dots li.slick-active button { transform: none; } .hero-layout4 { margin-top: 0; } .hero-layout4 .hero-img { right: 0; max-width: 850px; } .hero-layout4 .hero-shape2 { right: 2%; max-width: 450px; } .hero-layout4 .hero-inner { min-height: 850px; max-width: 100%; padding: 100px 0 100px 0; } .hero-layout4 .hero-title { font-size: 90px; } .hero-layout4 .hero-title2 { font-size: 60px; } .hero-layout4 .hero-subtitle { font-size: 20px; } .hero-layout5 .hero-inner { padding: 100px 0 100px 0; min-height: 750px; } .hero-layout5 .hero-subtitle { font-size: 30px; margin-bottom: 6px; } .hero-layout5 .hero-title { font-size: 72px; } .hero-layout5 .hero-shape1 { max-width: 770px; } .hero-layout5 .hero-list li { font-size: 16px; margin-bottom: 10px; } .hero-layout5 .hero-list ul { margin: 0 0 33px 0; } .hero-layout5 .hero-subtitle { font-size: 24px; } .hero-layout5 .hero-info { right: 40px; bottom: 40px; } } /* Medium Large devices */ @media (max-width: 1399px) { .hero-layout2 .hero-inner { min-height: 700px; } .hero-layout2 .hero-shape2 { max-width: 350px; } .hero-layout2 .hero-play { left: 10.5%; bottom: 10.6%; } .hero-layout2 .hero-play .play-btn { margin-right: 20px; } .hero-layout2 .hero-play__title { font-size: 18px; } .hero-layout2 .hero-play__label { font-size: 14px; } .hero-layout2 .hero-title { font-size: 48px; max-width: 635px; } .hero-layout2 .hero-subtitle { font-size: 16px; margin-bottom: 15px; } .hero-layout2 .hero-bg-text { font-size: 190px; } .hero-layout3 .hero-title { font-size: 48px; } .hero-layout3 .hero-inner { min-height: 750px; } .hero-layout4 .hero-img { max-width: 700px; } .hero-layout4 .hero-shape2 { max-width: 380px; } .hero-layout4 .hero-shape1 { --shape-size: 400px; bottom: -100px; } .hero-layout4 .hero-title { font-size: 66px; } .hero-layout4 .hero-title2 { font-size: 48px; } .hero-layout4 .hero-inner { min-height: 700px; padding: 100px 0 100px 0; } } /* Large devices */ @media (max-width: 1199px) { .ls-btn-group .vs-btn { padding: 15px 25px; font-size: 14px; } .ls-layer .icon-btn.style4, .ls-layer .hero-layout4 .style4.slick-arrow, .hero-layout4 .ls-layer .style4.slick-arrow, .ls-layer .icon-btn.style3, .ls-layer .hero-layout4 .style3.slick-arrow, .hero-layout4 .ls-layer .style3.slick-arrow { --btn-size: 45px; } #ls-global .ls-hero-layout5.ls-v6 .ls-nav-next, #ls-global .ls-hero-layout5.ls-v6 .ls-nav-prev { display: none; } .hero-layout1 .hero-inner { min-height: 600px; padding-bottom: 0; } .hero-layout1 .hero-title { font-size: 46px; } .hero-layout1 .hero-innertext { font-size: 14px; padding: 7px 18px; } .hero-layout1 .hero-shape1 { top: -645px; left: 10px; width: 200px; height: 1490px; } .hero-layout1 .hero-shape2 { display: none; } .hero-layout3 .hero-inner { min-height: initial; } .hero-layout3 .hero-title { font-size: 42px; } .hero-layout4 .hero-img { max-width: 510px; } .hero-layout4 .hero-inner { min-height: 550px; padding: 80px 0 80px 0; } .hero-layout4 .hero-title { font-size: 60px; } .hero-layout4 .hero-title2 { font-size: 46px; margin: 0 0 30px 0; } .hero-layout4 .hero-subtitle { margin: 0 0 18px 0; } .hero-layout4 .hero-shape1 { --shape-size: 330px; } .hero-layout4 .hero-shape2 { max-width: 280px; } .hero-layout5 .hero-inner { min-height: auto; } .hero-layout5 .hero-title { font-size: 60px; } .hero-layout5 .hero-subtitle { font-size: 20px; } .hero-layout5 .hero-shape1 { max-width: 600px; } .hero-layout5 .hero-info .media-link { font-size: 24px; } .hero-layout5 .hero-info .media-label { font-size: 18px; margin-bottom: 15px; } .hero-layout5 .hero-info .media-icon { margin-right: 15px; max-width: 50px; } .hero-layout5 .hero-shape4 { top: 20%; left: 40%; max-width: 30%; } .hero-layout5 .hero-shape5 { top: 40%; max-width: 12%; } .hero-layout5 .hero-shape3 { top: 10%; max-width: 10%; } } /* Medium devices */ @media (max-width: 991px) { .hero-layout1 { text-align: center; } .hero-layout1 .hero-inner { min-height: auto; } .hero-layout1 .hero-title { font-size: 36px; margin-bottom: 15px; } .hero-layout1 .hero-innertext { font-size: 12px; padding: 5px 15px; top: 0; } .hero-layout1 .hero-btns { justify-content: center; } .hero-layout2 .hero-inner { padding: 70px 0 100px 0; min-height: initial; } .hero-layout2 .hero-shape2 { max-width: 200px; } .hero-layout2 .hero-bg-text { font-size: 130px; } .hero-layout2 .hero-play { position: relative; bottom: 0; left: 0; width: max-content; margin: 30px auto 0 auto; display: flex; flex-direction: column-reverse; text-align: center; } .hero-layout2 .hero-play .play-btn { --icon-font-size: 18px; --icon-size: 60px; margin: 0 0 20px 0; } .hero-layout2 .hero-play__label, .hero-layout2 .hero-play__title { display: none; } .hero-layout2 .hero-title { font-size: 40px; max-width: 530px; } .hero-layout3 .hero-img { margin-bottom: 40px; } .hero-layout3 .hero-img img { width: 100%; } .hero-layout3 .hero-content { text-align: center; } .hero-layout3 .hero-btns { justify-content: center; } .hero-layout4 .hero-img { max-width: 360px; } .hero-layout4 .hero-inner { min-height: 400px; } .hero-layout4 .hero-shape2 { max-width: 200px; } .hero-layout4 .hero-title { font-size: 48px; } .hero-layout4 .hero-title2 { font-size: 36px; } .hero-layout4 .hero-shape1 { --shape-size: 260px; } .hero-layout5 .hero-title { font-size: 46px; } .hero-layout5 .hero-subtitle { font-size: 18px; } .hero-layout5 .hero-list li { font-size: 14px; } .hero-layout5 .hero-shape1 { max-width: 450px; } } /* Small devices */ @media (max-width: 767px) { .ls-btn-group { justify-content: center; gap: 10px; } .ls-btn-group .vs-btn { padding: 11.5px 14px; font-size: 12px; } .vs-btn.style10.mobile-white { background-color: var(--white-color); border-color: transparent; color: var(--title-color); } .hero-layout1 .hero-title { font-size: 30px; } .hero-layout1 .hero-innertext { border: none; padding: 0; display: inline; font-size: inherit; margin: 0; vertical-align: top; text-decoration: underline; } .hero-layout2 .hero-title { font-size: 34px; margin-bottom: 30px; } .hero-layout2 .hero-subtitle { font-size: 14px; } .hero-layout2 .hero-bg-text { font-size: 70px; } .hero-layout2 .hero-shape2 { max-width: 150px; } .hero-layout3 .hero-subtitle { font-size: 16px; } .hero-layout3 .hero-title { font-size: 30px; margin-bottom: 20px; } .hero-layout4 .hero-content { text-align: center; } .hero-layout4 .hero-img, .hero-layout4 .hero-shape2 { display: none; } .hero-layout4 .hero-btns { justify-content: center; } .hero-layout4 .hero-subtitle { font-size: 16px; } .hero-layout4 .hero-title { font-size: 36px; } .hero-layout4 .hero-title2 { font-size: 30px; } .hero-layout4 .hero-shape1 { --shape-size: 200px; } .hero-layout5 .hero-title { font-size: 34px; } .hero-layout5 .hero-info { display: none; } .hero-layout5 .hero-shape1 { max-width: 100%; height: 100%; clip-path: none; } .hero-layout5 .hero-list li > i:first-child { margin-right: 10px; } } @media (max-width: 1500px) { .ls-layer .ls-vs-btn2 { padding: 18px 25px; margin-right: 20px; } } @media (max-width: 1024px) { .ls-layer .ls-vs-btn2 { padding: 14px 26px; margin-right: 20px; font-size: 14px; } } @media (max-width: 767px) { .ls-layer .ls-vs-btn2 { padding: 9px 19px; margin-right: 10px; font-size: 11px; } } a.vs-btn.style11.ls-vs-btn2::before, a.vs-btn.style11.ls-vs-btn2::after { display: none; } a.vs-btn.style11.ls-vs-btn2:hover { background-color: #fff; color: #0E5AF2; } /*------------------- 4.9. Error -------------------*/ .error-number { font-size: 274px; font-weight: 700; line-height: 1; margin-bottom: 3px; margin-top: -0.1em; } .error-title { font-size: 36px; margin-bottom: 8px; } .error-text { max-width: 600px; margin: 0 auto 32px auto; } /* Medium devices */ @media (max-width: 991px) { .error-number { font-size: 200px; } .error-title { font-size: 20px; } } /* Small devices */ @media (max-width: 767px) { .error-number { font-size: 110px; } } /*------------------- 4.10. Feature -------------------*/ .feature-style1 { background-color: var(--white-color); padding: 50px 40px; box-shadow: 0px 18px 13px rgba(234, 240, 250, 0.5); border-radius: 5px; position: relative; margin-bottom: 30px; } .feature-style1:before { content: ""; position: absolute; left: 40px; bottom: 0; height: 3px; width: calc(100% - 80px); background-color: var(--theme-color); } .feature-style1 .feature-icon { margin: 0 0 15px 0; } .feature-style1 .feature-title { margin: 0 0 13px 0; } .feature-style1 .feature-text { margin: 0 0 20px 0; } .feature-style1:hover .vs-btn { background-color: var(--theme-color); color: var(--white-color); } .feature-style2, .feature-style4 { background-color: var(--white-color); padding: 40px 40px 32px 40px; border-radius: 5px; box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.05); margin: 0 0 30px 0; } .feature-style2 .feature-icon, .feature-style4 .feature-icon { background-color: var(--smoke-color); width: 110px; height: 90px; line-height: 90px; text-align: center; border-radius: 5px; margin: 0 0 22px 0; transition: all ease 0.4s; display: inline-block; } .feature-style2 .feature-icon img, .feature-style4 .feature-icon img { transition: all ease 0.4s; filter: none; } .feature-style2 .feature-title, .feature-style4 .feature-title { margin: 0 0 10px 0; } .feature-style2:hover .feature-icon, .feature-style4:hover .feature-icon { background-color: var(--theme-color); } .feature-style2:hover .feature-icon img, .feature-style4:hover .feature-icon img { -webkit-filter: brightness(0) invert(1); /* Safari 6.0 - 9.0 */ filter: brightness(0) invert(1); } .feature-slide2 { margin-top: -30px; margin-bottom: -30px; } .feature-slide2 .feature-style2 { box-shadow: 0px 10px 21px rgba(169, 177, 193, 0.15); margin: 30px 0 30px 0; } .feature-style3 { background-color: var(--white-color); border: 2px solid transparent; transition: all ease 0.4s; margin: 0 0 30px 0; border-radius: 12px; box-shadow: none; } .feature-style3 .feature-icon { width: var(--icon-size, 110px); height: var(--icon-size, 110px); display: flex; align-items: center; justify-content: center; border: 10px solid var(--white-color); background-color: var(--theme-color); border-radius: 30% 30% 30% 30%/30% 30% 30% 30%; transform: rotate(45deg); margin: calc(var(--icon-size, 110px) / -2 - 15px) 0 25px 0; } .feature-style3 .feature-icon img { transform: rotate(-45deg); } .feature-style3 .feature-title { font-weight: 600; } .feature-style3 .feature-text { margin: 0 0 27px 0; } .feature-style3 .feature-content { padding: 0 35px 40px 35px; } .feature-style3 .icon-btn, .feature-style3 .hero-layout4 .slick-arrow, .hero-layout4 .feature-style3 .slick-arrow { --btn-size: 60px; } .feature-style3 .feature-img { padding: 15px; border-radius: 12px; } .feature-style3 .feature-img img { border-radius: inherit; width: 100%; } .slick-center .feature-style3, .feature-style3:hover { border-color: var(--theme-color); box-shadow: 0px 18px 10px 0px rgba(4, 4, 4, 0.05); } .feature-multi:nth-child(2n+2) { --theme-color: #f42121; } .feature-multi:nth-child(3n+3) { --theme-color: #f9b401; } .feature-multi:nth-child(4n+4) { --theme-color: #435cc8; } .feature-multi:nth-child(5n+5) { --theme-color: #43c84f; } @media (min-width: 1199px) { .feature-wrap1.space-top { padding-top: 1px; } .feature-wrap1 > .container { position: relative; z-index: 36; margin-top: -75px; } } /* Large devices */ @media (max-width: 1199px) { .feature-slide2 .feature-style2 { box-shadow: 0px 10px 21px rgba(169, 177, 193, 0.15); } } /* Medium devices */ @media (max-width: 991px) { .feature-style1 { padding: 40px 30px; } .feature-style3 { border-color: var(--theme-color); box-shadow: 0px 18px 10px 0px rgba(4, 4, 4, 0.05); } .feature-style3 .feature-icon { --icon-size: 80px; border-width: 5px; margin-bottom: 20px; } .feature-style3 .feature-icon img { max-width: 40px; } .feature-style3 .feature-content { padding: 0 20px 40px 20px; } .feature-style3 .feature-text { margin: 0 0 27px 0; font-size: 14px; } .feature-multi2 { justify-content: center; } } /* Small devices */ @media (max-width: 767px) { .feature-style1 { padding: 40px 20px; } .feature-style2 { padding: 40px 25px 32px 25px; } } .feature-style4 { position: relative; padding: 30px; border: 1px solid var(--theme-color); } .feature-style4 .feature-icon { width: 100px; height: 100px; line-height: 100px; text-align: center; border-radius: 50%; } .feature-style4 .feature-icon img { max-width: 50px; max-height: 50px; } .feature-style4 .feature-number { font-family: var(--title-font); color: #eef2fb; position: absolute; display: inline-block; font-weight: 700; font-size: 48px; top: 10%; right: 7%; } /*------------------- 4.11. About -------------------*/ .img-box1 .img-1 img { filter: drop-shadow(0px 5px 32px rgba(21, 40, 76, 0.08)); } .img-box1 .img-2 { z-index: 1; margin: -200px 0 0 auto; max-width: 100%; width: fit-content; position: relative; } .img-box1 img { border-radius: 5px; } .img-box2 { position: relative; margin: 0 0 30px 0; } .img-box2 .img-1 { position: relative; margin-left: -200px; } .img-box2 .img-2 { position: absolute; right: 0; bottom: 0; background-color: var(--white-color); border-radius: 10px 0 0 0; padding: 10px 0 0 10px; } .img-box3 { position: relative; } .img-box3 img { border-radius: 5px; } .img-box3 .img-1 { text-align: right; } .img-box3 .img-2 { margin: -300px 0 0 0; } .img-box3 .award-box { position: absolute; left: 0; right: 80px; bottom: 30px; margin: 0 0 0 auto; width: fit-content; } .img-box4 { position: relative; } .img-box4 .img-1 { margin: -120px 0 0 0; } .img-box4 .img-2 { margin: -178px 0 0 auto; width: fit-content; max-width: 100%; } .img-box5 { width: max-content; margin-left: auto; position: relative; max-width: 100%; padding: 40px 40px 0 0; } .img-box5 img { border-radius: 5px; position: relative; z-index: 1; } .img-box5 .img-1 { text-align: right; margin-bottom: 20px; } .img-box5 .img-bottom { display: flex; align-items: flex-start; } .img-box5 .img-3 { margin: -47px 0 0 20px; box-shadow: 0px 4px 32px rgba(61, 79, 115, 0.19); } .img-box5 .shape1 { position: absolute; top: 0; right: 0; width: 350px; max-width: 100%; height: 470px; max-height: 100%; border: 5px solid rgba(14, 89, 242, 0.1); border-radius: 50px 5px 5px 5px; } .img-box6 { margin-bottom: 30px; } .img-box6 img { border-radius: 15px; } .img-box7 img { border-radius: 7px; } .img-box8 { position: relative; } .img-box8 .play-btn { left: -30px; top: 90px; position: absolute; } .img-box9 { display: grid; grid-template-columns: repeat(2, auto); position: relative; margin-right: -120px; padding-bottom: 55px; } .img-box9 img { width: 100%; } .img-box9 .img-1 { display: inline-block; margin: 65px 30px 0 0; } .img-box9 .img-2 { position: relative; display: inline-block; z-index: 1; } .img-box9 .img-2:before { content: ""; position: absolute; right: -40px; top: 40px; bottom: 40px; width: 45px; background-color: #e9ebf5; z-index: -1; } .img-box9 .img-3 { position: absolute; left: 85px; bottom: 0; z-index: 2; } .img-box10 { position: relative; padding-right: 30px; } .img-box10 .icon-btn, .img-box10 .hero-layout4 .slick-arrow, .hero-layout4 .img-box10 .slick-arrow { border-radius: 0; position: absolute; top: 50%; right: 0; transform: translateY(-50%); } .img-box11 { position: relative; z-index: 1; margin-bottom: -1px; } .img-box11 .img-2 { position: absolute; right: -25%; top: 30%; z-index: -1; } .img-box12 { display: flex; gap: 30px; padding-right: 55px; } .img-box12 .img-2 { position: relative; } .about-tab { margin: 0 auto 50px auto; width: max-content; max-width: 100%; border: 1px solid #e0e0e0; padding: 20px; border-radius: 9999px; } .about-tab button { padding: 24px 39px; border: none; background-color: transparent; text-transform: capitalize; position: relative; font-size: 20px; font-weight: 500; line-height: 1; border-radius: 9999px; transition: all ease 0.4s; } .about-tab button:before { content: ""; position: absolute; top: 50%; left: 0; width: 2px; height: 28px; margin-top: -14px; background-color: #d8d8d8; transition: all ease 0.4s; } .about-tab button:hover { color: var(--theme-color); } .about-tab button.active { background-color: var(--theme-color); color: var(--white-color); } .about-tab button.active::before, .about-tab button.active + button::before, .about-tab button:first-child::before { opacity: 0; visibility: hidden; } .progress-style1 { display: flex; align-items: center; margin: 0 0 25px 0; } .progress-style1 .progress-amount, .progress-style1 .progress-title { font-size: 16px; font-weight: 500; color: var(--title-color); margin: 0 25px 0 0; } .progress-style1 .progress-title { min-width: 110px; } .progress-style1 .progress-amount { font-weight: 500; margin: 0 0 0 25px; } .progress-style1 .progress { flex: 1; height: 50px; background-color: #f5f5f5; border-radius: 9999px; } .progress-style1 .progress-bar { background-color: var(--theme-color); } .exp-media { display: flex; margin: 0 0 15px 0; } .exp-media__total { display: inline-block; text-align: center; background-color: var(--white-color); color: var(--theme-color); font-family: var(--title-font); font-weight: 700; font-size: 36px; width: 80px; height: 100px; line-height: 100px; border-radius: 5px; box-shadow: 0px 8px 15px rgba(91, 118, 175, 0.15); margin: 0 20px 0 0; } .exp-media__title { font-size: 18px; font-weight: 600; line-height: 1; color: var(--theme-color); margin: -0.1em 0 10px 0; } .list-style1 ul { margin: 20px 0 27px 0; padding: 42px 0 0 0; list-style-type: none; border-top: 1px solid #e9effb; display: grid; grid-template-columns: repeat(2, 1fr); } .list-style1 li { position: relative; color: var(--title-color); color: var(--black-color); margin: 0 0 10px 0; padding: 0 0 0 33px; } .list-style1 li > i:first-child { position: absolute; left: 0; color: var(--theme-color); top: 3px; } .list-style2 ul { margin: 0 0 40px 0; padding: 0; list-style-type: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .list-style2 li { position: relative; border: 1px solid #eaeef4; color: var(--title-color); font-family: var(--title-font); font-weight: 500; padding: 16px 25px; } .list-style2 li > i:first-child { color: var(--theme-color); margin-right: 10px; } .list-style3 ul { margin: 0; padding: 0; list-style-type: none; } .list-style3 li { margin: 0 0 7px 0; } .list-style3 i { color: var(--theme-color); margin: 0 10px 0 0; } .list-style4 ul { margin: 0; padding: 43px 40px 46px 39px; list-style-type: none; background-color: var(--theme-color); color: var(--white-color); } .list-style4 li { font-size: 18px; font-weight: 500; padding: 0 0 0 50px; position: relative; margin: 0 0 27px 0; } .list-style4 li:last-child { margin-bottom: 0; } .list-style4 li i:first-child { display: inline-block; width: 35px; height: 35px; line-height: 35px; background-color: var(--white-color); color: var(--theme-color); border-radius: 50%; text-align: center; z-index: 1; position: absolute; top: -3px; left: 0; } .list-style5 ul { display: grid; grid-template-columns: repeat(2, 1fr); margin: 37px 0 0 0; gap: 25px; } .list-style5 li { background-color: var(--white-color); color: var(--title-color); font-weight: 500; border: 2px solid #f0f2fa; box-shadow: 7.5px 12.99px 60px 0px rgba(9, 34, 126, 0.07); padding: 20px 20px; text-align: center; } .list-style5 li i { color: var(--theme-color); margin-right: 10px; } .list-style6 ul { margin: 0 0 37px 0; } .list-style6 li { font-weight: 500; font-size: 18px; color: var(--title-color); position: relative; padding-left: 27px; margin-bottom: 12px; } .list-style6 li i:first-child { color: var(--theme-color); position: absolute; left: 0; top: 3.3px; } .list-style7 ul { margin: 0 0 43px 0; padding: 0; list-style: none; } .list-style7 li { position: relative; padding-left: 45px; margin: 0 0 20px 0; } .list-style7 li > i:first-child { position: absolute; top: -2px; left: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; display: inline-block; background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; } .quote-media { display: flex; align-items: center; position: relative; z-index: 1; border-top: 1px solid #e9ebf3; margin-top: 40px; padding-top: 40px; } .quote-media .media-icon { margin-right: 40px; position: relative; } .quote-media .media-icon::before { content: ""; position: absolute; top: -20px; left: 20px; width: 67px; height: 67px; background-color: var(--theme-color); opacity: 0.05; border-radius: 50%; z-index: -1; } .quote-media .media-title { font-weight: 400; font-size: 18px; } .award-box { background-color: #f4f7fc; position: relative; padding: 60px 60px 57px 60px; display: flex; border-radius: 5px; } .award-box > * { position: relative; z-index: 2; } .award-box__shape { position: absolute; left: 20px; right: 20px; top: 20px; bottom: 20px; background-color: var(--theme-color); box-shadow: 0px 4px 20px rgba(14, 89, 242, 0.33); border-radius: 5px; z-index: 1; } .award-box__icon { position: relative; color: var(--white-color); font-size: 42px; line-height: 1; margin: 0 20px 0 0; } .award-box__number { line-height: 1; margin: 0 0 8px 0; font-size: 40px; font-weight: 700; font-family: var(--title-font); color: var(--white-color); } .award-box__text { font-weight: 700; font-size: 16px; font-family: var(--title-font); text-transform: uppercase; margin: 0; color: var(--white-color); line-height: 1; } .about-media { display: flex; } .about-media__icon { margin: 0 20px 0 0; } .call-media { display: flex; align-items: center; padding: 10px 40px 10px 10px; box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; width: fit-content; max-width: 100%; margin: 0 0 40px 0; background-color: var(--white-color); } .call-media__icon { background-color: var(--smoke-color); box-shadow: 0px 7px 37px rgba(96, 125, 185, 0.11); border-radius: 5px; width: 95px; height: 95px; line-height: 95px; border-radius: 5px; text-align: center; margin: 0 20px 0 0; } .call-media__label { text-transform: uppercase; font-family: var(--title-font); font-size: 14px; font-weight: 400; line-height: 1; display: block; margin: 0 0 12px 0; } .call-media__info { color: var(--title-color); font-family: var(--title-font); font-weight: 700; line-height: 1; display: block; margin: 0; } .call-media__info a { color: inherit; } .call-media__info a:hover { color: var(--theme-color); } .media-order { display: flex; margin: 0 0 5px 0; } .media-order__number { width: 60px; height: 60px; line-height: 60px; font-size: 20px; font-weight: 700; font-family: var(--title-font); background-color: var(--theme-color); color: var(--white-color); text-align: center; display: inline-block; margin: 0 30px 0 0; border-radius: 5px; } .media-order__title { margin: -0.25em 0 10px 0; } .progress-box { margin: 0 0 25px 0; } .progress-box__number, .progress-box__title { font-size: 16px; font-weight: 600; line-height: 1; text-transform: uppercase; font-family: var(--title-font); color: var(--title-color); display: inline-block; margin: 0 0 17px 0; } .progress-box__number { float: right; margin: 5px 0 0 0; } .progress-box__progress { box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border: 1px solid #d5e0f5; height: 16px; padding: 4px; border-radius: 5px; background-color: var(--white-color); } .progress-box__bar { height: 100%; background-color: var(--theme-color); border-radius: inherit; box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; } .about-wrap1 { border-top: 1px solid #e8ebf6; position: relative; } .about-shape1 { font-size: 150px; font-weight: 400; font-family: var(--title-font); line-height: 1; display: inline-block; writing-mode: tb-rl; text-transform: uppercase; transform: rotate(180deg); position: absolute; right: 95px; bottom: 120px; color: rgba(14, 89, 242, 0.07); } .about-shape2 { position: absolute; right: 0; top: 0; width: 100%; height: 100%; max-width: 1567px; max-height: 620px; z-index: -1; /* Hight Resoulation devices */ } @media (min-width: 1921px) { .about-shape2 { max-width: 80%; } } .about-shape3 { background-color: #f6f7fc; position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 620px; /* Hight Resoulation devices */ } @media (min-width: 1921px) { .about-shape3 { max-width: 34%; } } .contact-media { display: flex; align-items: center; } .contact-media__icon { width: 60px; height: 60px; line-height: 60px; background-color: var(--theme-color); color: var(--white-color); display: inline-block; text-align: center; font-size: 26px; border-radius: 7px; position: relative; z-index: 1; } .contact-media__label { text-transform: uppercase; font-family: var(--title-font); font-size: 13px; font-weight: 400; line-height: 1; display: block; margin: 0 0 9px 0; } .contact-media__info { color: var(--title-color); font-family: var(--title-font); font-weight: 700; display: block; margin: 0 0 -0.25em 0; font-size: 15px; line-height: 24px; } .contact-media__info a { color: inherit; } .contact-media .media-body { background-color: var(--white-color); height: 100px; display: flex; flex-direction: column; justify-content: center; padding: 10px 10px 10px 50px; margin-left: -30px; border-radius: 5px; } .about-call { display: flex; align-items: center; border-right: 2px solid var(--theme-color); padding: 0 40px 0 0; margin: 0 40px 0 0; } .about-call__icon { background-color: var(--white-color); color: var(--theme-color); text-align: center; width: 60px; height: 60px; line-height: 60px; margin-right: 20px; font-size: 20px; border-radius: 50%; } .about-call__label { font-size: 14px; color: var(--black-color); display: block; } .about-call__number { margin: 0; font-size: 20px; font-weight: 600; font-family: var(--title-font); color: var(--theme-color); } .about-box1 .about-subtitle { font-weight: 500; line-height: 1; display: block; font-family: var(--title-font); color: var(--theme-color); display: flex; align-items: center; max-width: 280px; margin: 0 0 33px 0; } .about-box1 .about-subtitle:after { content: ""; position: relative; right: 0; height: 1px; width: 100%; flex: 1; background-color: var(--theme-color); display: inline-block; margin: 0 0 0 10px; } .about-box1 .about-text { margin: 0 0 33px 0; } .about-box1 .about-title { margin-top: -0.3em; } .about-box2 { padding: var(--section-space, 120px) 0; max-width: 560px; } .about-box2 .author-degi { font-family: var(--title-font); font-size: 14px; margin-bottom: 0; font-weight: 500; } .about-box2 .author-name { margin-bottom: 0; } .about-box3 { max-width: 620px; padding-left: 50px; position: relative; } .about-box3 .sec-title4 { margin-bottom: 44px; } .about-box3 .vs-btn { margin-top: 40px; } @media (min-width: 1800px) { .about-box3 .vs-btn { position: absolute; right: -59%; bottom: 71px; margin: 0; } } .about-box3-btn { padding-left: 100px; padding-bottom: 140px; } .about-box4 { padding-left: 70px; padding-right: 70px; } .skill-about { margin-bottom: 22px; } .skill-about .skill-percentage { font-size: 60px; font-weight: 700; color: var(--title-color); line-height: 1; margin-bottom: 6px; } .skill-about .skill-title { font-size: 18px; font-weight: 300; margin-bottom: 27px; } .skill-about .progress { border-radius: 0; height: 10px; background-color: #363940; margin-bottom: 20px; } .skill-about .progress .progress-bar { background-color: var(--theme-color); } .skill-about .skill-text { margin-bottom: 0; } .media-style1 { display: flex; align-items: center; position: relative; z-index: 1; } @media (min-width: 991px) { .media-style1.has-bg { background-color: rgba(14, 90, 242, 0.08); padding: 15px 20px 15px 20px; border-radius: 5px; } } .media-style1 .media-icon { color: var(--theme-color); font-size: 36px; margin-right: 15px; } .media-style1 .media-label { font-size: 15px; font-weight: 500; color: var(--title-color); text-transform: uppercase; display: block; } .media-style1 .media-info { margin: 0; font-size: 14px; font-weight: 500; color: #6a738b; } .media-style1.layout2 { background-color: var(--theme-color); padding: 10px 40px 10px 20px; border-radius: 0 9999px 9999px 0; } .media-style1.layout2:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; background-color: inherit; z-index: -1; width: 0; opacity: 0; visibility: hidden; } .media-style1.layout2 .text-inherit:hover, .media-style1.layout2 .footer-info-list .info a:hover, .footer-info-list .info .media-style1.layout2 a:hover, .media-style1.layout2 .footer-layout5 .copyright-text a:hover, .footer-layout5 .copyright-text .media-style1.layout2 a:hover { color: var(--title-color); } .media-style1.layout2 .media-label { font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--white-color); line-height: 1; margin-bottom: 7px; } .media-style1.layout2 .media-info { font-size: 18px; font-weight: 500; letter-spacing: 0.02em; color: var(--white-color); line-height: 1; } .media-style1.layout2 .media-icon { font-size: 22px; position: relative; width: 50px; height: 50px; line-height: 50px; text-align: center; color: var(--white-color); } .media-style1.layout2 .media-icon:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -1; background-color: rgba(0, 0, 0, 0.3); border-radius: 40% 40% 40% 40%/40% 40% 40% 40%; transform: rotate(45deg); } .media-style2 { display: flex; align-items: center; } .media-style2 .media-label { font-size: 32px; font-weight: 600; display: block; line-height: 1; color: var(--title-color); margin: 0 0 9px 0; } .media-style2 .media-info { color: #65666d; font-weight: 500; margin: 0; line-height: 1; } .media-style2 .media-icon { font-size: 40px; color: var(--theme-color); margin-right: 20px; padding-left: 25px; position: relative; line-height: 1; } .media-style2 .media-icon:before { content: ""; position: absolute; left: 0; top: -4px; width: 50px; height: 50px; background-color: #eef2fb; z-index: -1; border-radius: 40% 40% 40% 40%/40% 40% 40% 40%; transform: rotate(45deg); } .media-style3 { display: flex; align-items: center; padding-left: 20px; border-left: 4px solid #eef2fb; } .media-style3 .media-icon { margin-right: 15px; } .media-style3 .media-label { font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.01em; line-height: 1; display: block; margin: 0 0 7px 0; } .media-style3 .media-info { color: var(--title-color); margin: 0; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; line-height: 1; } .media-style4 .media-icon { margin: 0 20px 0 0; } .media-style4 .media-label { font-size: 50px; font-weight: 500; line-height: 1; display: block; margin: 0 0 10px 0; text-transform: uppercase; color: var(--white-color); } .media-style4 .media-info { margin: 0; font-size: 18px; font-weight: 600; color: #56575d; letter-spacing: -0.02em; line-height: 1; color: var(--white-color); } .media-style4 .media-body { margin: 0 0 0 20px; } .media-style4.layout2 { background-color: var(--smoke-color); } .info-ruler { border: 1px solid rgb(224, 224, 224); box-shadow: 10.5px 18.187px 10px 0px rgba(4, 4, 4, 0.05); background-color: var(--white-color); padding: 24px 70px; width: max-content; margin: -40px 0 0 auto; position: relative; z-index: 3; border-radius: 9999px; } .info-ruler ul { margin: 0; padding: 0; list-style-type: none; } .info-ruler li { display: inline-block; color: var(--title-color); font-size: 18px; margin-right: 45px; } .info-ruler li:last-child { margin-right: 0; } .info-ruler li img { margin-right: 10px; } .info-ruler a { color: inherit; } .info-ruler a:hover { color: var(--theme-color); } /* Hight Resoulation devices */ @media (min-width: 1921px) { .img-box12 { justify-content: flex-end; } } /* Extra large devices */ @media (max-width: 1500px) { .img-box12 { padding-right: 0; } .about-shape1 { font-size: 80px; right: 50px; bottom: 70px; } .img-box2 .img-1 { margin-left: 0; } .img-box2 .img-2 { position: relative; width: fit-content; margin: -100px 30px 0 auto; padding: 10px; border-radius: 10px; } .img-box9 { margin-right: 0; } .about-box2 { max-width: 500px; } .img-box11 .img-2 { right: 0; } } /* Medium Large devices */ @media (max-width: 1399px) { .img-box8 .play-btn { left: 0; top: 0; position: absolute; } .img-box8 .play-btn:after, .img-box8 .play-btn:before { display: none; } .img-box8 .img-1 img { width: 100%; } .about-box4 { padding-left: 0; padding-right: 0; } .about-shape3 { max-width: 29%; } .media-style2 .media-icon { font-size: 30px; margin-right: 15px; padding-left: 20px; } .media-style2 .media-icon:before { width: 40px; height: 40px; } .media-style2 .media-label { font-size: 26px; } .media-style2 .media-info { font-size: 14px; } .list-style6 ul { margin: 0 0 27px 0; } .list-style6 li { font-size: 16px; padding-left: 27px; margin-bottom: 5px; } .list-style6 li i:first-child { top: 4px; } .play-btn.style5 i { --icon-size: 70px; --icon-font-size: 22px; } .about-box3 { max-width: 100%; padding-left: 0; } .list-style4 ul { padding: 30px 40px 36px 32px; } .list-style4 ul li { font-size: 16px; } .about-shape2 { max-width: 100%; max-height: 100%; } .about-wrap2 { padding-bottom: var(--section-space); } } /* Large devices */ @media (max-width: 1199px) { .img-box1 .img-1 img { width: 100%; } .about-box4 { margin-top: 40px; } .media-style1.layout2 { padding: 10px 20px 10px 20px; border-radius: 0 7px 7px 0; } .progress-style1 .progress-title { margin-right: 10px; } .progress-style1 .progress { height: 30px; } .img-box9 .img-2:before { display: none; } .img-box3 { width: 100%; max-width: 700px; margin: 0 auto; } .img-box4 .img-1 { margin: 0; } .img-box4 .img-1 img { width: 100%; } .img-box4 .img-2 { margin: -100px 0 0 auto; max-width: 70%; } .img-box5 { width: 100%; } .img-box5 .img-1 img { width: 100%; } .img-box5 .img-bottom { justify-content: center; } .list-style2 li { padding: 14px 20px; font-size: 14px; } .about-box3 .sec-title4 { margin-bottom: 30px; } .list-style2 li { padding: 14px 20px; font-size: 14px; } .list-style4 ul { background-color: transparent; padding: 0; } .list-style4 li { color: var(--title-color); } .media-style4 { width: 100% !important; } .media-style4 .media-icon { margin: 0 15px 0 0; max-width: 40px; } .media-style4 .media-label { font-size: 36px; margin: 0 0 5px 0; } .media-style4 .media-info { font-size: 15px; letter-spacing: 0; } .media-style4 .media-body { margin: 15px 10px 0 10px; } } /* Medium devices */ @media (max-width: 991px) { .about-box2 { padding: 40px 0 var(--section-space-mobile, 80px) 0; } .about-tab { padding: 8px; } .about-tab button { padding: 16px 27px; font-size: 14px; } .info-ruler { margin: 40px 0 0 0; width: 100%; text-align: center; } .about-wrap2 { padding-bottom: var(--section-space-mobile); } .img-box1 .img-1 img { width: 100%; } .skill-about .skill-percentage { font-size: 48px; } .media-style4 { display: block; text-align: center; } .media-style4 .media-icon { margin: 0 auto 15px auto; max-width: 100%; } } /* Small devices */ @media (max-width: 767px) { .img-box12 { display: block; } .img-box12 .img-1 { margin-bottom: 30px; } .about-tab { border: none; justify-content: center; gap: 10px; } .about-tab button { background-color: var(--smoke-color); } .about-tab button:before { display: none; } .img-box10 { padding-right: 0; } .img-box2 .img-2, .img-box1 .img-2 { margin: 20px 0 0 0; width: 100%; } .img-box2 .img-2 img, .img-box1 .img-2 img { width: 100%; } .img-box5 { padding: 0; } .img-box5 .shape1 { display: none; } .img-box9 { display: block; margin-bottom: 0; padding-bottom: 0; } .img-box9 img { width: 100%; } .img-box9 .img-1 { display: block; margin: 0 0 30px 0; } .img-box9 .img-3 { display: block; position: relative; left: 0; bottom: 0; margin: 30px 0 0 0; } .list-style2 ul { display: block; } .list-style2 ul li:not(:last-child) { margin: 0 0 20px 0; } .info-ruler { padding: 25px 30px; border-radius: 12px; } .info-ruler li { display: block; margin: 0 0 20px 0; } .info-ruler li:last-child { margin-bottom: 0; } .list-style5 ul { display: block; } .list-style5 ul li:not(:last-child) { margin-bottom: 20px; } .progress-style1 { display: block; position: relative; } .progress-style1 .progress { margin: 15px 0 0 0; } .progress-style1 .progress-amount { position: absolute; top: 0; right: 0; } .quote-media .media-icon { margin-right: 20px; } .media-order { display: block; } .media-order__number { margin: 0 0 20px 0; } .img-box3 img { width: 100%; } .img-box3 .img-2 { margin: 30px 0 0 0; } .call-media__icon { width: 60px; height: 60px; line-height: 60px; margin: 0 10px 0 0; } .call-media__icon img { max-width: 25px; } .call-media__label { font-size: 12px; } .award-box { padding: 30px; } .award-box__shape { top: 0; right: 0; bottom: 0; left: 0; } .img-box3 .award-box { position: relative; bottom: 0; right: 0; margin: 30px 0 0 0; width: 100%; box-shadow: none; } .exp-media { margin-top: 30px; } .list-style1 ul { display: block; margin: 0 0 30px 0; padding: 30px 0 0 0; } .list-style4 ul li { font-size: 14px; padding-left: 35px; margin-bottom: 15px; } .list-style4 ul li i:first-child { width: 25px; height: 25px; line-height: 26px; font-size: 12px; top: -1px; } .list-style7 ul { margin: 0 0 28px 0; } } /* Extra small devices */ @media (max-width: 575px) { .about-call { padding: 0; border-right: none; margin-top: 20px; } } .img-box13 { position: relative; } .img-box13 .img-1 { margin-bottom: 30px; } .img-box13 .img-3 { z-index: 1; margin: -100% -15px 0 auto; max-width: 100%; width: fit-content; position: relative; } .img-box13 .media-body { position: absolute; top: 50%; left: 50%; transform: translateX(-50%); background-color: var(--theme-color); border: 12px solid var(--white-color); text-align: center; width: 190px; height: 190px; line-height: 190px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 1; } .img-box13 .media-body .counter-media__number { color: var(--white-color); } .img-box13 .media-body .counter-media__title { color: var(--white-color); text-transform: capitalize; } .about-counter { box-shadow: 0px 10px 31px 0px rgba(0, 0, 0, 0.1); margin-top: 60px; border-radius: 10px; margin-right: -26px; } .about-counter .counter-media { border-right: 1px solid rgb(213, 224, 245); margin-top: 0; } .about-counter .counter-media:last-child { border: none; } .about-counter .counter-media .media-body { text-align: center; display: block; padding: 45px 56px; } .about-counter .counter-media__number { font-size: 40px; margin-bottom: 15px; } /* Medium devices */ @media (max-width: 991px) { .about-counter { margin-right: 0; } .about-counter .counter-media:nth-child(2) { border: none; } .img-box13 .img-1 { margin-bottom: 30px; display: flex; justify-content: space-evenly; } .about-style1 .counter-media__title { font-size: 14px; } .img-box13 { margin-bottom: 0; } } /* Small devices */ @media (max-width: 767px) { .img-box13 .img-2 { margin-left: 10px; } .img-box13 .media-body { width: 150px; height: 150px; line-height: 150px; transform: translate(-50%, -20%); } } /*------------------- 4.12. Service -------------------*/ .service-style1 { padding: 40px; background-color: var(--white-color); box-shadow: 0px 16px 47px rgba(78, 111, 178, 0.07); border-radius: 5px; position: relative; transition: all ease 0.4s; overflow: hidden; margin: 0 0 30px 0; } .service-style1 .service-icon { display: inline-block; width: 70px; height: 70px; line-height: 70px; text-align: center; background-color: var(--smoke-color); border-radius: 50%; margin: 0 0 28px 0; } .service-style1 .service-text { margin: 0 0 20px 0; } .service-style1 .service-title a { color: var(--title-color); transition: all ease 0.3s; position: relative; z-index: 3; } .service-style1 .service-number, .service-style1 .link-btn, .service-style1 .service-icon, .service-style1 .service-text { position: relative; z-index: 3; transition: all ease 0.4s; } .service-style1 .service-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: inherit; opacity: 0; visibility: hidden; transition: all ease 0.4s; transform: scale(1.15); } .service-style1 .service-number { line-height: 1; color: rgba(14, 89, 242, 0.1); font-size: 60px; font-weight: 700; font-family: var(--title-font); margin-top: 4px; opacity: 1; visibility: visible; } .service-style1 .service-top { display: flex; justify-content: space-between; align-items: center; margin: 0 0 27px 0; } .service-style1 .service-top .service-icon { margin: 0; } .service-style1:hover { box-shadow: 0px 16px 47px rgba(14, 89, 242, 0.2); background-color: var(--theme-color); } .service-style1:hover .service-number { opacity: 0; visibility: hidden; } .service-style1:hover .service-icon { background-color: var(--white-color); } .service-style1:hover .link-btn, .service-style1:hover .service-title a, .service-style1:hover .service-text { color: var(--white-color); } .service-style1:hover .vs-btn { background-color: var(--white-color); } .service-style1:hover .service-bg { opacity: 1; visibility: visible; transform: scale(1); } .service-style1.layout2 { box-shadow: none; border: 1px solid #eaf2fe; } .service-style1.layout2:hover { box-shadow: 0px 16px 47px rgba(14, 89, 242, 0.2); } .service-style1.layout3 { box-shadow: none; border: 1px solid #ecf0f6; padding: 50px; border-radius: 0; } .service-style1.layout3 .service-icon { width: 80px; height: 80px; line-height: 80px; } .service-style2 { display: flex; align-items: center; margin: 0 0 30px 0; } .service-style2 .service-img { width: 160px; position: relative; background-color: var(--smoke-color); z-index: 1; border-radius: 5px; overflow: hidden; } .service-style2 .service-img img { border-radius: 5px; } .service-style2 .service-number { display: inline-block; width: 40px; height: 40px; line-height: 40px; font-size: 18px; font-weight: 500; font-family: var(--title-font); color: var(--theme-color); background-color: var(--white-color); text-align: center; border-radius: 5px 0; position: absolute; left: 0; top: 0; } .service-style2 .service-title { margin: 0 0 10px 0; } .service-style2 .service-title a { color: var(--title-color); transition: all ease 0.4s; } .service-style2 .service-text { margin: 0 0 12px 0; } .service-style2 .service-content { flex: 1; position: relative; border-radius: 5px; padding: 31px 40px 30px 130px; margin: 0 0 0 -105px; transition: all ease 0.4s; overflow: hidden; background-color: var(--white-color); } .service-style2 .service-content > * { position: relative; z-index: 1; transition: all ease 0.4s; } .service-style2 .service-shape { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 5px; transition: all ease 0.4s; transform: scale(1.1); background-color: var(--theme-color); opacity: 0; visibility: hidden; z-index: 0; } .service-style2:hover .service-text, .service-style2:hover .service-title a, .service-style2:hover .link-btn { color: var(--white-color); } .service-style2:hover .service-content { border-color: transparent; } .service-style2:hover .service-shape { opacity: 1; visibility: visible; transform: scale(1); } .service-style3, .service-tb8 { text-align: center; margin: 0 0 30px 0; position: relative; } .service-style3 .service-img img, .service-tb8 .service-img img { width: 100%; } .service-style3 .service-icon, .service-tb8 .service-icon { display: block; width: var(--icon-size, 120px); height: var(--icon-size, 120px); line-height: calc(var(--icon-size, 120px) - var(--icon-shape, 10px) * 2); text-align: center; background-color: var(--smoke-color); border: 10px solid var(--white-color); margin: 0 auto 15px auto; border-radius: 50%; z-index: 1; position: relative; } .service-style3 .service-title, .service-tb8 .service-title { margin: 0; } .service-style3 .service-title a, .service-tb8 .service-title a { color: inherit; } .service-style3 .service-text, .service-tb8 .service-text { margin: 0 0 15px 0; color: #bed4ff; } .service-style3 .service-content, .service-tb8 .service-content { padding: 0 30px 37px 30px; } .service-style3 .service-front, .service-tb8 .service-front { transform: rotateX(0deg) rotateY(0deg); transform-style: preserve-3d; backface-visibility: hidden; transition: all 0.4s ease-in-out; z-index: 900; position: absolute; top: 0; height: 100%; width: 100%; overflow: hidden; background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; } .service-style3 .service-front .service-icon, .service-tb8 .service-front .service-icon { margin-top: calc(var(--icon-size, 120px) / -2); } .service-style3 .service-back, .service-tb8 .service-back { z-index: 1000; transform: rotateY(-180deg); transform-style: preserve-3d; backface-visibility: hidden; transition: all 0.4s ease-in-out; background-color: var(--theme-color); border-radius: 5px; overflow: hidden; } .service-style3 .service-back .service-content, .service-tb8 .service-back .service-content { padding: 40px 30px 37px 30px; } .service-style3 .service-back .service-icon, .service-tb8 .service-back .service-icon { background-color: var(--theme-color); } .service-style3 .service-back .service-icon img, .service-tb8 .service-back .service-icon img { filter: brightness(0) invert(1); } .service-style3 .service-back .service-title, .service-tb8 .service-back .service-title { color: var(--white-color); margin: 0 0 10px 0; } .service-style3 .service-back .link-btn, .service-tb8 .service-back .link-btn { color: var(--white-color); } .service-style3:hover .service-front, .service-tb8:hover .service-front { z-index: 900; transform: rotateY(180deg); box-shadow: none; } .service-style3:hover .service-back, .service-tb8:hover .service-back { z-index: 1000; transform: rotateX(0deg) rotateY(0deg); } .service-style4 { background-color: var(--theme-color); padding: 40px 45px 45px 45px; margin-bottom: 30px; } .service-style4 .service-top { display: flex; justify-content: space-between; border-bottom: 1px solid #6486ff; margin-bottom: 25px; } .service-style4 .service-title { color: var(--white-color); font-weight: 600; text-transform: uppercase; font-size: 20px; } .service-style4 .service-title a { color: inherit; } .service-style4 .service-title a:hover { color: rgba(255, 255, 255, 0.7); } .service-style4 .service-btn { font-size: 24px; color: var(--white-color); } .service-style4 .service-btn:hover { color: rgba(255, 255, 255, 0.7); } .service-style4 .service-text { color: #beccff; margin-bottom: 28px; } .service-style4 .service-img { overflow: hidden; } .service-style4 .service-img img { width: 100%; transition: all ease 0.4s; transform: scale(1); } .service-style4:hover .service-img img { transform: scale(1.16); } .service-style5 { margin-bottom: 30px; } .service-style5 .service-img { margin-bottom: 28px; border-bottom: 7px solid var(--theme-color); overflow: hidden; } .service-style5 .service-img img { width: 100%; transition: all ease 0.4s; transform: scale(1); } .service-style5 .service-text { margin-bottom: 25px; } .service-style5 .service-title { margin-bottom: 15px; } .service-style5 .icon-btn, .service-style5 .hero-layout4 .slick-arrow, .hero-layout4 .service-style5 .slick-arrow { background-color: #dbe2fc; border-radius: 50%; } .service-style5 .icon-btn:hover, .service-style5 .hero-layout4 .slick-arrow:hover, .hero-layout4 .service-style5 .slick-arrow:hover { background-color: var(--theme-color); color: var(--white-color); } .service-style5:hover .service-img img { transform: scale(1.1); } .service-style6 { background-color: var(--white-color); padding: 40px 45px 45px 45px; margin-bottom: 30px; border-radius: 13px; box-shadow: 1.5px 2.598px 16.74px 1.26px rgba(200, 200, 200, 0.1); position: relative; transition: all ease 0.4s; border-bottom: 3px solid transparent; } .service-style6 .service-icon { margin: 0 0 55px 0; } .service-style6 .service-title { font-size: 22px; font-weight: 600; max-width: 200px; margin: 0; } .service-style6:hover { border-color: var(--theme-color); } .service-style7 { padding: 60px 60px 55px 60px; background-color: var(--white-color); border: 1px solid #cacaca; margin: -1px; } .service-style7 .service-icon { margin: 0 0 45px 0; } .service-style7 .service-title { font-weight: 600; } .service-style7 .service-text { font-weight: 300; color: var(--title-color); margin: 0; } .service-style7, .service-style7 .service-title a, .service-style7 .service-text, .service-style7 .service-icon img { transition: all ease 0.4s; } .service-style7:hover { background-color: var(--theme-color); border-color: transparent; } .service-style7:hover .service-title a, .service-style7:hover .service-text { color: var(--white-color); } .service-style7:hover .service-icon img { filter: brightness(0) invert(1); } .service-style7:hover .service-title a:hover { color: var(--title-color); } .service-style8 { text-align: center; max-width: 320px; margin: 0 auto 30px auto; } .service-style8 .service-icon { width: var(--icon-size, 135px); height: var(--icon-size, 135px); line-height: var(--icon-size, 135px); margin: 23px auto 53px auto; text-align: center; border-radius: 38% 38% 38% 38%/38% 38% 38% 38%; transform: rotate(45deg); position: relative; } .service-style8 .service-icon img { transform: rotate(-45deg); } .service-style8 .icon-bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: var(--white-color); border-radius: inherit; } .service-style8 .icon-shape { position: absolute; top: var(--shape-extra, -15px); right: var(--shape-extra, -15px); bottom: var(--shape-extra, -15px); left: var(--shape-extra, -15px); background-image: repeating-linear-gradient(90deg, var(--theme-color), var(--theme-color) 6px, #eff1f5 6px, #eff1f5 12px); z-index: -1; border-radius: inherit; } .service-style8 .service-title { margin: 0 0 10px 0; } .service-style8 .service-text { margin: 0 0 30px 0; color: #74787c; } .service-list-box { background-color: var(--smoke-color); min-height: 261px; display: flex; flex-direction: column; justify-content: center; padding: 35px 40px; } .service-list-box .title { margin: 0 0 27px 0; } .service-list-box .list-style3 li:last-child { margin-bottom: 2.5px; } .service-tab-menu { display: flex; margin: 0 0 60px 0; justify-content: center; gap: 30px; flex-wrap: wrap; } .service-tab-menu .btn-img { display: block; width: 120px; height: 120px; line-height: 100px; background-color: var(--smoke-color); border: 10px solid var(--white-color); border-radius: 50%; margin: -60px auto 30px auto; transition: all ease 0.4s; } .service-tab-menu .btn-img img { filter: none; transition: all ease 0.3s; } .service-tab-menu .btn-title { display: block; margin: 0 0 6px 0; color: var(--title-color); transition: all ease 0.4s; } .service-tab-menu .btn-text { color: var(--body-color); transition: all ease 0.4s; display: block; } .service-tab-menu .nav-link { border: none; flex: 1; max-width: 300px; display: inline-block; text-align: center; margin: 60px 0 0 0; padding: 0 10px 38px 10px; background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; min-width: 210px; transition: all ease 0.4s; } .service-tab-menu .nav-link.active, .service-tab-menu .nav-link:hover { background-color: var(--theme-color); box-shadow: 0px 6px 15px rgba(14, 90, 242, 0.18); } .service-tab-menu .nav-link.active .btn-title, .service-tab-menu .nav-link:hover .btn-title { color: var(--white-color); } .service-tab-menu .nav-link.active .btn-text, .service-tab-menu .nav-link:hover .btn-text { color: #bed4ff; } .service-tab-menu .nav-link.active .btn-img, .service-tab-menu .nav-link:hover .btn-img { border-color: #f6f7fa; background-color: var(--theme-color); } .service-tab-menu .nav-link.active .btn-img img, .service-tab-menu .nav-link:hover .btn-img img { filter: brightness(0) invert(1); } .service-shape1 { position: absolute; left: 120px; right: 120px; top: 0; height: 100%; max-height: 454px; background-color: #f6f7fa; z-index: -1; } .service-sidebar .widget_nav_menu a::before, .service-sidebar .widget_meta a::before, .service-sidebar .widget_pages a::before, .service-sidebar .widget_archive a::before, .service-sidebar .widget_categories a::before { content: "\f061"; color: var(--body-color); } .service-sidebar .widget_nav_menu a:hover:before, .service-sidebar .widget_meta a:hover:before, .service-sidebar .widget_pages a:hover:before, .service-sidebar .widget_archive a:hover:before, .service-sidebar .widget_categories a:hover:before { color: var(--theme-color); } /* Extra large devices */ @media (max-width: 1500px) { .service-shape1 { left: 0; right: 0; } } /* Medium Large devices */ @media (max-width: 1399px) { .service-style3 .service-back .service-content, .service-tb8 .service-back .service-content { padding: 45px 20px 42px 20px; } .service-style7 { padding: 50px 40px 50px 40px; } .service-style6 { padding: 30px 30px 20px 30px; } .service-style6 .service-icon { margin: 0 0 30px 0; } .service-style6 .service-title { font-size: 20px; } } /* Large devices */ @media (max-width: 1199px) { .service-style1 { padding: 40px 20px; } .service-style1 .service-icon { margin: 0 0 18px 0; } .service-style1.layout3 { padding: 40px 30px; } .service-list-box .title { margin: 0 0 17px 0; } .service-style5 .service-title { margin-bottom: 15px; font-size: 26px; } .service-style4 { padding: 30px 30px 40px 30px; } .service-style4 .service-title { font-size: 17px; } .service-style7 { padding: 45px 30px 40px 30px; } .service-style7 .service-title { font-size: 20px; } .service-style7 .service-icon { margin: 0px 0 20px 0; } } /* Medium devices */ @media (max-width: 991px) { .service-sidebar { margin-top: 30px; } .service-style8 { --shape-extra: -10px; --icon-size: 100px; } .service-style8 .service-icon { margin: 23px auto 40px auto; } .service-style8 .service-icon img { max-width: 50px; } .service-list-box { padding: 35px 20px; } .service-style3 .service-img, .service-tb8 .service-img { max-height: 205px; overflow: hidden; } .service-shape1 { max-height: 800px; } .service-tab-menu .nav-link { min-width: 45%; } .service-style4 { padding: 40px 30px 45px 30px; } .service-style4 .service-title { font-size: 18px; } .service-style4 .service-text { font-size: 14px; } } /* Small devices */ @media (max-width: 767px) { .service-style2 { display: block; text-align: center; } .service-style2 .service-img { margin: 0 auto; } .service-style2 .service-content { padding: 99px 30px 30px 30px; margin: -69px 0 0 0; } .service-style4 { padding: 30px 20px 35px 20px; } .service-style4 .service-title { font-size: 18px; } .service-style4 .service-text { font-size: 14px; } .service-style6 { text-align: center; } .service-style6 .service-title { margin-left: auto; margin-right: auto; } } .service-style9 { text-align: center; margin: 0 0 30px 0; position: relative; background-color: var(--white-color); box-shadow: 0px 15px 15px 0px rgba(78, 111, 178, 0.07); padding: 40px; border-radius: 5px; transition: all 0.5s ease; } .service-style9 .service-img img { width: 100%; } .service-style9 .service-icon-box { width: 100px; height: 100px; line-height: 100px; border-radius: 50%; margin: 0 auto 24px auto; position: relative; } .service-style9 .service-icon { display: block; width: var(--icon-size, 80px); height: var(--icon-size, 80px); line-height: calc(var(--icon-size, 90px) - var(--icon-shape, 10px) * 2); text-align: center; background-color: var(--smoke-color); border-radius: 50%; z-index: 1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .service-style9 .service-icon:before { content: ""; position: absolute; left: var(--extra-shape, -10px); top: var(--extra-shape, -10px); right: var(--extra-shape, -10px); bottom: var(--extra-shape, -10px); background-color: transparent; border-radius: inherit; z-index: 1; border: 2px dashed var(--theme-color); animation: spin 13s infinite linear; } .service-style9 .service-title { margin-bottom: 10px; } .service-style9 .service-title a { color: inherit; } .service-style9 .service-text { margin: 0 0 20px 0; color: rgb(135, 141, 151); } .service-style9 .service-content { padding: 0 30px 37px 30px; } .service-style9 .box-shep { position: absolute; right: 0; bottom: 0; z-index: 0; transition: all 0.4s ease; } .service-style9:hover { background-color: #0e59f2; } .service-style9:hover .service-title { color: var(--white-color); } .service-style9:hover .service-text { color: rgb(190, 212, 255); } .service-style9:hover .service-icon::before { border-color: var(--white-color); } .service-style9:hover .box-shep { opacity: 0; visibility: hidden; transition: all 0.4s ease; } /*------------------- 4.13. Counter -------------------*/ .counter-media { display: flex; align-items: center; } .counter-media__icon { display: inline-block; width: 90px; height: 90px; line-height: 90px; text-align: center; margin: 0 25px 0 0; background-color: var(--theme-color); border-radius: 5px; } .counter-media__number { line-height: 1; margin: -0.04em 0 7px 0; display: block; } .counter-media__title { font-family: var(--title-font); font-size: 16px; font-weight: 600; margin: 0; line-height: 1; text-transform: uppercase; } .counter-style2 { display: flex; } .counter-style2 .media-icon { color: var(--theme-color); font-size: 40px; line-height: 1; margin-right: 20px; } .counter-style2 .media-label { font-size: 60px; line-height: 1; display: block; font-family: var(--title-font); color: var(--title-color); font-weight: 700; margin: -0.03em 0 0 0; } .counter-style2 .media-link { color: var(--theme-color); font-size: 20px; } .counter-shape1 { background-color: rgba(17, 33, 62, 0.07); position: absolute; left: 0; right: 0; bottom: -60px; top: -60px; clip-path: polygon(0 0, 100% 120px, 100% 100%, 0 calc(100% - 120px)); } .counter-wrap1 { background-color: var(--white-color); box-shadow: 0px 13px 29px rgba(131, 150, 188, 0.1); border-radius: 5px; } /* Large devices */ @media (max-width: 1199px) { .counter-media { display: block; text-align: center; } .counter-media__icon { margin: 0 0 20px 0; } .counter-style2 { display: block; text-align: center; } .counter-style2 .media-icon { margin-right: 0; margin-bottom: 20px; } .counter-style2 .media-label { font-size: 46px; } .counter-style2 .media-icon { font-size: 30px; } .counter-style2 .media-link { font-size: 16px; } } /* Small devices */ @media (max-width: 767px) { .counter-media__icon { width: 70px; height: 70px; line-height: 70px; } .counter-media__icon img { max-width: 40px; } .counter-media__title { font-size: 12px; } .counter-media__number { font-size: 30px; } } /*------------------- 4.14. Team -------------------*/ .team-style2 .team-social, .team-style1 .team-social { position: absolute; left: 30px; right: 30px; bottom: 0; background-color: var(--theme-color); text-align: center; padding: 16.5px 10px; line-height: 1; opacity: 0; visibility: hidden; transition: all ease 0.6s; } .team-style2 .team-social a, .team-style1 .team-social a { display: inline-block; color: #bbd1ff; margin: 0 18px 0 0; opacity: 0; visibility: hidden; transition: all ease 0.4s; transform: translateY(-15px); } .team-style2 .team-social a:last-child, .team-style1 .team-social a:last-child { margin-right: 0; } .team-style2 .team-social a:hover, .team-style1 .team-social a:hover { color: var(--white-color); } .team-style2:hover .team-social, .team-style1:hover .team-social { opacity: 1; visibility: visible; } .team-style2:hover .team-social a, .team-style1:hover .team-social a { opacity: 1; visibility: visible; transform: translateY(0); } .team-style2:hover .team-social a:nth-of-type(1), .team-style1:hover .team-social a:nth-of-type(1) { transition-delay: 0s; } .team-style2:hover .team-social a:nth-of-type(2), .team-style1:hover .team-social a:nth-of-type(2) { transition-delay: 0.1s; } .team-style2:hover .team-social a:nth-of-type(3), .team-style1:hover .team-social a:nth-of-type(3) { transition-delay: 0.2s; } .team-style2:hover .team-social a:nth-of-type(4), .team-style1:hover .team-social a:nth-of-type(4) { transition-delay: 0.3s; } .team-style2:hover .team-social a:nth-of-type(5), .team-style1:hover .team-social a:nth-of-type(5) { transition-delay: 0.4s; } .team-style1 { overflow: hidden; background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; margin: 0 0 30px 0; transition: all ease 0.4s; } .team-style1 .team-img { overflow: hidden; position: relative; } .team-style1 .team-img img { width: 100%; transition: all ease 0.4s; transform: scale(1); } .team-style1 .team-content { padding: 30px 0 23px 0; text-align: center; } .team-style1 .team-title { font-size: 20px; line-height: 1; margin: 0 0 10px 0; } .team-style1 .team-degi { color: var(--theme-color); margin: 0; font-size: 14px; } .team-style1:hover { background-color: #f6f7fa; box-shadow: none; } .team-style1:hover .team-img img { transform: scale(1.1); } .team-style1.layout2 { padding: 30px; background-color: var(--white-color); margin: 0 0 30px 0; } .team-style1.layout2 .team-content { padding: 38px 0 4px 0; box-shadow: none; } .team-style1.layout2 .team-img { overflow: hidden; border-radius: 5px; } .team-style1.layout2 .team-title { text-transform: uppercase; font-size: 24px; } .team-style1.layout2 .team-degi { font-size: 16px; font-weight: 500; font-family: var(--title-font); } .team-style2 { margin: 0 0 30px 0; } .team-style2 .team-img { overflow: hidden; position: relative; z-index: 1; margin: 0 30px -60px 30px; border-radius: 5px; } .team-style2 .team-img img { width: 100%; border-radius: 5px; transition: all ease 0.4s; filter: none; } .team-style2 .team-shape2, .team-style2 .team-shape1 { position: absolute; left: 15%; top: -55%; width: 373.37px; height: 549.99px; background: rgba(21, 30, 50, 0.41); transform: rotate(-34.46deg) translateX(110%); transition: all ease 0.4s; z-index: 1; opacity: 0; visibility: hidden; } .team-style2 .team-shape2 { width: 206.12px; height: 391px; background: rgba(14, 89, 242, 0.41); left: 74%; top: -29%; } .team-style2 .team-social { left: 50px; right: 50px; bottom: 50px; border-radius: 5px; z-index: 4; } .team-style2 .team-social a { color: #abc7fd; } .team-style2 .team-social a:hover { color: var(--white-color); } .team-style2 .team-title { text-transform: uppercase; margin: 0 0 8px 0; } .team-style2 .team-degi { color: var(--theme-color); margin: 0; line-height: 1; } .team-style2 .team-content { background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; padding: 97px 0 42px 0; text-align: center; transition: all ease 0.4s; } .team-style2:hover .team-content { background-color: #f6f7fa; box-shadow: none; } .team-style2:hover .team-shape1, .team-style2:hover .team-shape2 { transform: rotate(-34.46deg) translateX(0); opacity: 1; visibility: visible; } .team-style2:hover .team-img img { filter: grayscale(100%); } .team-style3 { margin-bottom: 30px; } .team-style3 .team-img { border-radius: 20px; overflow: hidden; } .team-style3 .team-img img { width: 100%; transition: all ease 0.4s; transform: scale(1); } .team-style3 .team-content { background-color: var(--white-color); text-align: center; padding: 30px 0 40px 0; margin: -105px 40px 0 40px; position: relative; z-index: 1; box-shadow: 5px 8.66px 60px 0px rgba(149, 163, 213, 0.18); border-radius: 30px; } .team-style3 .team-title { font-size: 20px; font-weight: 600; margin: 0 0 5px 0; } .team-style3 .team-degi { font-size: 14px; color: var(--theme-color); font-weight: 400; display: block; } .team-style3 .team-social a i { display: inline-block; width: 38px; height: 38px; line-height: 38px; text-align: center; background-color: var(--theme-color); color: var(--white-color); font-size: 14px; border-radius: 50%; margin: 0 1.5px; transition: all ease 0.4s; } .team-style3 .team-social a i.fa-facebook-f { background-color: #d0e5ff; color: #2c6bc0; } .team-style3 .team-social a i.fa-facebook-f:hover { color: #fff; background-color: #2c6bc0; } .team-style3 .team-social a i.fa-youtube { background-color: #ffd6dc; color: #ff0024; } .team-style3 .team-social a i.fa-youtube:hover { color: #fff; background-color: #ff0024; } .team-style3 .team-social a i.fa-twitter { background-color: #c4e9ff; color: #1da1f2; } .team-style3 .team-social a i.fa-twitter:hover { color: #fff; background-color: #1da1f2; } .team-style3 .team-social a i.fa-basketball-ball { background-color: #ffdbe9; color: #ea4c89; } .team-style3 .team-social a i.fa-basketball-ball:hover { color: #fff; background-color: #ea4c89; } .team-style3:hover .team-img img { transform: scale(1.1); } .slick-slide .team-style2 .team-content, .slick-slide .team-style1 { box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.07); } .team-about .team-name { margin: -0.3em 0 0 0; } .team-about .team-degi { color: var(--theme-color); display: block; margin: 0 0 27px 0; } .team-about .team-text { margin: 0 0 35px 0; } .team-about .vs-btn { margin: 23px 0 0 0; } .team-inner { padding: 110px 0 93px 0; margin: 90px auto 120px auto; max-width: 1680px; width: 100%; } .team-media { display: flex; align-items: center; margin: 0 0 18px 0; } .team-media__icon { display: inline-block; width: var(--icon-size, 50px); height: var(--icon-size, 50px); line-height: var(--icon-size, 50px); border: 1px solid #e8eefc; text-align: center; color: var(--theme-color); margin: 0 20px 0 0; font-size: 18px; border-radius: 50%; } .team-media__label { font-size: 14px; } .team-media__info { font-size: 18px; font-weight: 500; font-family: var(--body-font); margin: 0; } .team-media__info a { color: inherit; } .team-media__info a:hover { color: var(--theme-color); } .team-zigzag .team-style3:nth-child(even) { margin-top: 50px; } .team-style4 { text-align: center; padding: 40px 10px 30px 10px; margin: 0 0 30px 0; border: 1px solid transparent; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); border-radius: 10px; transition: all ease 0.4s; } .team-style4 .team-img { width: 200px; max-width: 100%; overflow: hidden; border-radius: 50%; margin: 0 auto 28px auto; } .team-style4 .team-img img { transform: scale(1.001) rotate(0); transition: all ease 0.4s; border-radius: inherit; } .team-style4 .team-degi { color: var(--theme-color); text-transform: uppercase; font-weight: 500; display: block; margin: 0 0 3px 0; font-size: 12px; } .team-style4 .team-name { padding: 0 0 10px 0; margin: 0 0 15px 0; position: relative; font-weight: 600; } .team-style4 .team-name:before { content: ""; position: absolute; left: 50%; bottom: 0; height: 2px; width: 80px; margin-left: -40px; background-color: var(--theme-color); opacity: 0.1; transition: all ease 0.4s; } .team-style4 .team-number, .team-style4 .team-email { display: block; width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; color: var(--body-color); font-size: 14px; font-weight: 400; } .team-style4 .team-number:hover, .team-style4 .team-email:hover { color: var(--theme-color); } .team-style4 .team-number { color: var(--title-color); margin: 6px auto 22px auto; } .team-style4 .team-btn { display: inline-block; padding: 10px 34px; background-color: var(--smoke-color); color: var(--title-color); font-size: 22px; line-height: 1; border-radius: 8px; transition: all ease 0.4s; } .team-style4 .team-btn:hover { background-color: var(--title-color); } .team-style4:hover { box-shadow: none; border-color: var(--theme-color); } .team-style4:hover .team-img img { transform: scale(1.15) rotate(5deg); } .team-style4:hover .team-name::before { opacity: 1; } .team-style4:hover .team-btn { background-color: var(--theme-color); color: var(--white-color); } .team-style4:hover .team-btn:hover { background-color: var(--title-color); } .team-style5 { text-align: center; margin: 16px 0 30px 0; } .team-style5 .team-img { width: 327px; height: 327px; border-radius: 38% 38% 38% 38%/38% 38% 38% 38%; overflow: hidden; transform: rotate(45deg); margin: 0 auto -190px auto; } .team-style5 .team-img img { transform: rotate(-45deg) scale(1.1); } .team-style5 .team-content { padding: 230px 0 30px 0; background-color: var(--white-color); border: 1px solid transparent; border-radius: 12px; transition: all ease 0.4s; } .team-style5 .team-degi { color: #055555; font-weight: 300; margin: 0 0 0 0; } .team-style5 .team-name { font-size: 28px; margin: 0 0 15px 0; } .team-style5 .team-number { display: inline-block; border-top: 1px solid #eaeaea; padding: 20px 0 0 0; color: var(--title-color); } .team-style5 .team-number img { margin-right: 10px; } .team-style5 .team-number a { margin-left: 5px; color: inherit; } .team-style5 .team-number a:hover { color: var(--theme-color); } .team-style5:hover .team-content { border-color: rgb(224, 224, 224); box-shadow: 0px 21px 10px 0px rgba(4, 4, 4, 0.05); } .team-style5.layout2 .team-content { border-color: rgb(224, 224, 224); } /* Medium Large devices */ @media (max-width: 1399px) { .team-style3 .team-content { padding: 30px 0 40px 0; margin: -70px 20px 0 20px; } .team-style5 .team-img { width: 210px; height: 210px; margin: 0 auto -105px auto; } .team-style5 .team-content { padding: 140px 0 30px 0; } .team-style5 .team-name { font-size: 24px; margin: 5px 0 15px 0; } } /* Large devices */ @media (max-width: 1199px) { .team-style2 .team-social { left: 10px; right: 10px; bottom: 0; } .team-zigzag .team-style3:nth-child(even) { margin-top: 0; } .team-style1.layout2 { padding: 15px 15px 25px 15px; } .team-style1.layout2 .team-title { font-size: 20px; } .team-style1.layout2 .team-degi { font-size: 14px; } } /* Medium devices */ @media (max-width: 991px) { .team-about .team-degi { margin: 0 0 17px 0; } .team-about .team-text { margin: 0 0 25px 0; } .team-about .vs-btn { margin: 13px 0 0 0; } .team-inner { padding: 70px 0 53px 0; margin: 50px auto 80px auto; } } .team-style6 { display: flex; align-items: center; border: 1px solid transparent; border-radius: 30px 0 30px 0; padding: 18px 35px 18px 20px; box-shadow: 0px 8px 47px 0px rgba(78, 111, 178, 0.12); margin-bottom: 20px; transition: all 0.4s ease; cursor: pointer; } .team-style6:last-child { margin-bottom: 0; } .team-style6 .team-title { font-size: 20px; text-transform: uppercase; margin-bottom: 0; } .team-style6 .team-degi { margin-bottom: 0; color: var(--theme-color); } .team-style6 .team-img { margin-right: 20px; max-width: 70px; max-height: 70px; overflow: hidden; border-radius: 20px 0 20px 0; } .team-style6:hover { border: 1px solid var(--theme-color); } .team-style6.active { border: 1px solid var(--theme-color); } .team-layout6 { position: relative; } .team-layout6 .team-box { padding: 30px; box-shadow: 0px 0px 47px 0px rgba(78, 111, 178, 0.25); border-radius: 0 150px 0 150px; display: none; transition: all 0.4s ease; } .team-layout6 .team-box.active { display: block; } .team-layout6 .team-box .team-img img { border-radius: 0 120px 0 120px; } .team-layout6 .team-box .team-title { margin-bottom: 0; } .team-layout6 .team-box .team-degi { font-family: var(--title-font); color: var(--theme-color); font-weight: 500; } .team-layout6 .team-box .team-text { border-bottom: 1px solid #d5e0f5; padding-bottom: 18px; margin-bottom: 18px; } .team-layout6 .team-contact { display: flex; justify-content: space-between; } .team-layout6 .team-contact .title { color: var(--title-color); font-family: var(--title-font); font-weight: 600; text-transform: uppercase; border-bottom: 1px solid #d5e0f5; display: inline-block; padding-bottom: 3px; margin-bottom: 20px; } .team-layout6 .team-social { margin-bottom: 30px; } .team-layout6 .team-social a { width: 40px; height: 40px; line-height: 44px; display: inline-block; color: var(--theme-color); margin: 0 5px 0 0; text-align: center; background-color: #eef2fb; border-radius: 50%; transition: all 0.4s ease; } .team-layout6 .team-social a:hover { color: var(--white-color); background-color: var(--theme-color); } .team-layout6 .team-shape2 { position: absolute; left: 0; bottom: 0; } .team-layout6 .about-shape4 { position: absolute; top: -30%; text-align: right; } .team-layout6 .contact-email .info { border-radius: 20px; background-color: #eef2fb; padding: 2px 20px 2px 2px; } .team-layout6 .contact-email .info i { width: 38px; height: 38px; line-height: 38px; background-color: var(--white-color); border-radius: 50%; text-align: center; color: var(--theme-color); margin-right: 15px; } .team-layout6 .team-style6 .team-title { text-transform: capitalize; } .new-arrow-position .slick-arrow { position: absolute; display: inline-block; border: none; text-transform: uppercase; text-align: center; background-color: var(--smoke-color); color: var(--theme-color); font-family: var(--body-font); font-size: 16px; font-weight: 500; line-height: 1; padding: 15px; border-radius: 5px; z-index: 1; overflow: hidden; top: -15%; right: 15px; left: auto; } .new-arrow-position .slick-arrow.slick-prev { right: 75px; } .new-arrow-position .slick-arrow::after, .new-arrow-position .slick-arrow::before { width: 100%; height: 100%; content: ""; margin: auto; position: absolute; top: 0%; left: 0%; background: var(--title-color); transition: all ease 0.5s; z-index: -1; border-radius: inherit; } .new-arrow-position .slick-arrow:before { transform: rotateX(90deg); } .new-arrow-position .slick-arrow:after { transform: rotateY(90deg); } .new-arrow-position .slick-arrow:hover { color: var(--white-color); } .new-arrow-position .slick-arrow:hover:before { transform: rotateX(0); } .new-arrow-position .slick-arrow:hover:after { transform: rotateY(0); } /* Medium devices */ @media (max-width: 991px) { .team-layout6 .team-box { border-radius: 0; } .team-layout6 .team-box .team-img { margin-bottom: 30px; } .team-layout6 .team-contact { display: block; } } /*------------------- 4.15. Process -------------------*/ .process-style1 { text-align: center; margin: 0 0 5px 0; position: relative; } .process-style1 .process-arrow { position: absolute; right: -53px; top: 0; } .process-style1:nth-child(even) { margin-top: 60px; } .process-style1:nth-child(even) .process-arrow { transform: rotateX(190deg); } .process-style1:last-child .process-arrow { display: none; } .process-style1 .process-icon { position: relative; text-align: center; width: var(--icon-size, 130px); height: var(--icon-size, 130px); line-height: var(--icon-size, 130px); box-shadow: 0px 0px 77px 10px rgba(170, 170, 170, 0.13); background-color: var(--white-color); border-radius: 50%; margin: 0 auto 30px auto; } .process-style1 .process-number { text-align: center; display: inline-block; width: 35px; height: 35px; line-height: 26px; background-color: var(--theme-color); color: var(--white-color); border-radius: 50%; position: relative; border: 5px solid var(--white-color); position: absolute; top: 0; right: 0; font-size: 12px; font-weight: 700; font-family: var(--title-font); } .process-style1 .process-title { margin: 0 0 10px 0; } .process-style2 { text-align: center; max-width: 290px; position: relative; margin: 0 0 5px 0; } .process-style2 .process-icon { width: 100px; height: 100px; line-height: 100px; text-align: center; position: relative; display: inline-block; background-color: var(--white-color); margin: 22.5px 0 25px 0; box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; } .process-style2 .process-number { display: inline-block; width: 45px; height: 45px; line-height: 45px; font-size: 16px; font-weight: 700; font-family: var(--title-font); position: absolute; right: 0; top: 0; background-color: var(--theme-color); color: var(--white-color); margin: -22.5px -22.5px 0 0; border-radius: 50%; } .process-style2 .process-arrow { position: absolute; right: -55%; top: 10%; } .process-style2:last-child .process-arrow { display: none; } @media (min-width: 1500px) { .process-wrap1 { margin-left: 120px; margin-right: 120px; } } /* Large devices */ @media (max-width: 1199px) { .process-style1, .process-style1:nth-child(even) { margin-top: 0; } .process-style1 .process-arrow { right: -45px; top: 25px; max-width: 80px; } .process-style2 .process-arrow { right: -23%; top: 15%; max-width: 90px; } } /* Medium devices */ @media (max-width: 991px) { .process-style1 .process-arrow { display: none; } .process-style1 .process-icon { --icon-size: 100px; margin: 0 auto 20px auto; } .process-style1 .process-icon img { max-width: 40px; } .process-style2 { max-width: 100%; } .process-style2 .process-arrow { display: none; } } /*------------------- 4.16. Accordion -------------------*/ .accordion-style1 { margin: 0 0 30px 0; } .accordion-style1 .accordion-item { margin: 0 0 20px 0; padding: 0 25px 0 25px; background-color: var(--white-color); box-shadow: 0px 13px 17px rgba(0, 0, 0, 0.13); border-radius: 5px; } .accordion-style1 .accordion-button { background-color: transparent; border: none; padding: 14.5px 0; font-size: 18px; font-weight: 600; font-family: var(--title-font); color: var(--title-color); text-align: left; } .accordion-style1 .accordion-button:after { content: "\f061"; font-family: var(--icon-font); font-weight: 400; color: var(--title-color); border: none; width: auto; height: auto; background-image: none; } .accordion-style1 .accordion-button:focus { box-shadow: none; } .accordion-style1 .accordion-button:not(.collapsed):after { transform: rotate(0); } .accordion-style1 .accordion-body { border-top: 1px solid #EBEBEB; padding: 17px 0 20px 0; } .accordion-style1 .accordion-body p:last-child { margin-bottom: 0; } .accordion-style1 .accordion-collapse { border: none; } .accordion-style1.layout2 .accordion-item { padding: 0; box-shadow: none; } .accordion-style1.layout2 .accordion-button { padding: 14.5px 25px; font-size: 16px; background-color: var(--theme-color); color: var(--white-color); border-radius: 0; } .accordion-style1.layout2 .accordion-button:after { color: var(--white-color); } .accordion-style1.layout2 .accordion-button.collapsed { background-color: var(--smoke-color); color: var(--title-color); } .accordion-style1.layout2 .accordion-button.collapsed:after { color: var(--theme-color); } .accordion-style1.layout2 .accordion-body { border: none; background-color: var(--smoke-color); padding: 25px 25px 23px 25px; } .accordion-style2 .accordion-item { margin: 0 0 20px 0; padding: 0 35px 6.5px 35px; background-color: var(--white-color); box-shadow: 7.5px 12.99px 30px 0px rgba(148, 171, 255, 0.05); border-radius: 30px; } .accordion-style2 .accordion-button { background-color: transparent; border: none; padding: 24.5px 0 18px 0; font-size: 17px; font-weight: 600; font-family: var(--title-font); color: var(--title-color); text-align: left; } .accordion-style2 .accordion-button:after { content: "\f35a"; font-family: var(--icon-font); font-weight: 400; color: var(--title-color); border: none; width: auto; height: auto; background-image: none; transform: rotate(0); } .accordion-style2 .accordion-button:focus { box-shadow: none; } .accordion-style2 .accordion-button:not(.collapsed):after { transform: rotate(90deg); } .accordion-style2 .accordion-button:hover { color: var(--theme-color); } .accordion-style2 .accordion-body { padding: 0 0 20px 0; } .accordion-style2 .accordion-body p { font-size: 14px; } .accordion-style2 .accordion-body p:last-child { margin-bottom: 0; } .accordion-style2 .accordion-collapse { border: none; } .accordion-style3 { margin: 0 0 30px 0; text-align: left; } .accordion-style3 .accordion-collapse { border: none; } .accordion-style3 .accordion-item { border: 1px solid transparent; border-radius: 12px; margin: 0 0 20px 0; box-shadow: none; transition: all ease 0.4s; } .accordion-style3 .accordion-item:first-of-type .accordion-button { border-radius: 12px; } .accordion-style3 .accordion-item.active { border-color: #e0e0e0; box-shadow: 10px 10px 10px 0px rgba(4, 4, 4, 0.05); } .accordion-style3 .accordion-button { border: none; background-color: var(--smoke-color); color: var(--title-color); font-size: 18px; font-weight: 500; padding: 19px 35px; text-align: left; border-radius: 12px; margin: -1px; width: calc(100% + 2px); transition: all ease 0.4s; } .accordion-style3 .accordion-button:after { content: "\f0d7"; position: absolute; right: 20px; font-family: var(--icon-font); background-image: none; width: 40px; height: 40px; line-height: 38px; text-align: center; background-color: var(--white-color); border: 2px solid #e0e0e0; border-radius: 50%; transition: all ease 0.4s; font-weight: 700; } .accordion-style3 .accordion-button:hover, .accordion-style3 .accordion-button:not(.collapsed) { background-color: var(--theme-color); color: var(--white-color); } .accordion-style3 .accordion-button:hover:after, .accordion-style3 .accordion-button:not(.collapsed):after { background-color: var(--white-color); color: var(--theme-color); border-color: transparent; } .accordion-style3 .accordion-button:focus { box-shadow: none; } .accordion-style3 .accordion-item:last-of-type .accordion-button.collapsed, .accordion-style3 .accordion-item:last-of-type .accordion-collapse { border-radius: 12px; } .accordion-style3 .accordion-body { padding: 25px 35px 8px 35px; } .accordion-style3 .accordion-body p { line-height: 28px; } .faq-wrap1 { padding-top: 240px; padding-bottom: 90px; position: relative; } .faq-shape1 { position: absolute; right: 0; top: 120px; bottom: 0; width: 100%; max-width: 1120px; border-radius: 5px 0 0 5px; z-index: -1; } .faq-shape2 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: 945px; max-height: 570px; z-index: -2; border-radius: 0 5px 5px 0; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .faq-shape1 { max-width: 60%; } .faq-shape2 { max-width: 49%; } } /* Extra large devices */ @media (max-width: 1500px) { .faq-wrap1 { padding-top: var(--section-space, 120px); padding-bottom: calc(var(--section-space, 120px) - 30px); } .faq-shape2 { max-height: initial; bottom: 0; display: none; } .faq-shape1 { max-width: 70%; top: 0; } } /* Medium Large devices */ @media (max-width: 1399px) { .faq-wrap1 { padding-top: var(--section-space, 120px); } .faq-shape2 { max-height: initial; bottom: 0; display: none; } .faq-shape1 { max-width: 70%; top: 0; } .accordion-style1 .accordion-button { font-size: 16px; } .accordion-style1 .accordion-body { font-size: 14px; } } /* Medium devices */ @media (max-width: 991px) { .faq-wrap1 { padding-top: var(--section-space-mobile, 80px); padding-bottom: calc(var(--section-space-mobile, 80px) - 30px); } .faq-shape1 { max-width: 100%; } } /* Small devices */ @media (max-width: 767px) { .accordion-style1 .accordion-item { padding: 0 20px 0px 20px; } .accordion-style1.layout2 .accordion-button { padding: 14.5px 20px; font-size: 16px; } .accordion-style1.layout2 .accordion-body { padding: 25px 20px 23px 20px; } .accordion-style2 .accordion-item { padding: 0 30px 6.5px 30px; } .accordion-style3 .accordion-button { font-size: 16px; padding: 15px 50px 15px 20px; } .accordion-style3 .accordion-body { padding: 25px 20px 8px 20px; } } /*------------------- 4.17. Simple Sections -------------------*/ .brand-slide-nav { display: flex; justify-content: space-between; margin-top: 50px; } .brand-slide-nav button { position: relative; border: none; text-transform: uppercase; background-color: var(--theme-color); color: var(--white-color); width: 50%; padding: 12px 20px; } .brand-slide-nav button .fa-long-arrow-left { margin-right: 10px; } .brand-slide-nav button .fa-long-arrow-right { margin-left: 10px; } .brand-slide-nav button:after { content: ""; position: absolute; right: 0; top: 50%; height: 20px; width: 1px; background-color: rgba(255, 255, 255, 0.5); margin-top: -10px; } .brand-slide-nav button:last-child:after { display: none; } .brand-slide-nav button:hover { background-color: var(--title-color); color: var(--white-color); } .vs-brand1 img { transition: all ease 0.4s; filter: grayscale(100%) invert(0.8); } .vs-brand1 img:hover, .vs-brand1.slick-current img { filter: grayscale(0) invert(0); } .brand-wrap1 { padding: 80px 60px; background-color: var(--theme-color); text-align: center; background-size: auto; background-position: center center; } /* Small devices */ @media (max-width: 767px) { .brand-wrap1 { padding: 60px 25px; } } /*------------------- 4.18. Testimonial -------------------*/ .test-wrap1 { position: relative; border-bottom: 2px solid #f4f6fc; } .testi-style1 { background-color: #f8f8f9; padding: 1px 40px 35px 40px; margin: 15px 0 30px 0; border-radius: 5px; transition: all ease 0.4s; } .testi-style1:hover { background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); } .testi-style1 .testi-icon { padding: 10px; width: fit-content; background-color: var(--white-color); border-radius: 5px; margin: -25px 0 20px 0; } .testi-style1 .testi-icon i { width: var(--icon-size, 60px); height: var(--icon-size, 60px); line-height: var(--icon-size, 60px); color: var(--white-color); font-size: 24px; border-radius: inherit; background-color: var(--theme-color); text-align: center; display: inline-block; } .testi-style1 .testi-text { margin: 0 0 22px 0; } .testi-style1 .testi-name { margin: 0; } .testi-style1 .testi-degi { font-size: 14px; display: block; color: var(--theme-color); } .testi-style2 { background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; padding: 50px 50px 40px 50px; margin: 0 0 30px 0; } .testi-style2 .testi-body { display: flex; margin: 0 0 12px 0; } .testi-style2 .author-img { width: 80px; height: 80px; overflow: hidden; margin: 0 30px 0 0; border-radius: 5px; } .testi-style2 .testi-text { font-family: var(--title-font); line-height: 30px; font-size: 16px; font-style: italic; margin-top: -0.4em; } .testi-style2 .testi-name { font-size: 18px; font-weight: 600; margin: 0 0 2px 0; } .testi-style2 .testi-degi { font-size: 14px; font-family: var(--title-font); color: var(--theme-color); } .testi-style2-slide { margin-top: -30px; } .testi-style2-slide .testi-style2 { box-shadow: 0px 10px 21px rgba(169, 177, 193, 0.15); margin-top: 30px; } .author-style1 { display: flex; border-radius: 15px; position: relative; padding: 25px; margin: 0 0 30px 0; transition: all ease 0.4s; box-shadow: none; background-color: transparent; cursor: pointer; } .author-style1:before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 20px; background-color: var(--theme-color); border-radius: 9999px; margin: -10px 0 0 0; transition: all ease 0.4s; opacity: 0; visibility: hidden; } .author-style1 .author-name { margin: 0; } .author-style1 .author-degi { color: var(--theme-color); font-size: 14px; } .author-style1 .author-img { margin: 0 15px 0 0; width: 60px; border-radius: 50%; overflow: hidden; } .slick-current .author-style1, .author-style1:hover { background-color: var(--white-color); box-shadow: 0px 17px 20px #eeeff1; } .slick-current .author-style1::before { opacity: 1; visibility: visible; } .testi-text-slide .testi-text { font-size: 18px; margin: 10px 0 30px 0; } .testimonial-arrow { position: absolute; right: -126px; top: 50%; transform: translateY(-50%); } .testimonial-arrow .icon-btn, .testimonial-arrow .hero-layout4 .slick-arrow, .hero-layout4 .testimonial-arrow .slick-arrow { display: block; margin: 0 0 20px 0; } .testimonial-arrow .icon-btn:last-child, .testimonial-arrow .hero-layout4 .slick-arrow:last-child, .hero-layout4 .testimonial-arrow .slick-arrow:last-child { margin-bottom: 0; } .testi-shape1 { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: -2; max-width: 1567px; max-height: 684px; } .testi-shape2 { position: absolute; right: 0; bottom: 0; top: var(--section-space); width: 100%; background-color: var(--white-color); max-width: 1670px; z-index: -1; } .test-wrap1 { padding-top: calc(var(--section-space) * 2); padding-bottom: calc(var(--section-space) - 30px); position: relative; } .testi-inner1 { width: 750px; } .testi-style3 { background-color: var(--white-color); padding: 40px 40px 32px 40px; border-radius: 50px; box-shadow: 5px 8.66px 60px 0px rgba(187, 191, 204, 0.18); margin-bottom: 30px; } .testi-style3 .testi-author { display: flex; align-items: center; margin: 0 0 20px 0; } .testi-style3 .author-img { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-right: 15px; } .testi-style3 .author-img img { width: 100%; } .testi-style3 .testi-name { font-size: 18px; font-weight: 600; margin: 0; } .testi-style3 .testi-degi { color: var(--theme-color); font-size: 14px; } .testi-style3 .testi-rating { font-weight: 600; font-family: var(--title-font); color: var(--title-color); border-top: 1px solid #e3e9ff; padding-top: 20px; margin-top: 22px; } .testi-style3 .testi-rating i { color: #feb519; margin-left: 5px; font-size: 14px; } .testi-style3 .testi-rating i:first-child { margin-left: 15px; } .testi-style4 { background-color: var(--white-color); padding: 50px 50px 40px 50px; transform: skewY(-5deg); border-radius: 30px; margin: 26px 0 56px 0; box-shadow: 4px 5px 60px 0px rgba(178, 180, 187, 0.05); } .testi-style4 .testi-body { transform: skewY(5deg); } .testi-style4 .author-img { width: 100px; height: 100px; position: relative; margin-bottom: 30px; } .testi-style4 .author-img img { border-radius: 50%; width: 100%; } .testi-style4 .quote { background-color: var(--white-color); display: inline-block; color: var(--theme-color); line-height: 1; width: 30px; height: 30px; line-height: 32px; text-align: center; position: absolute; right: 0; bottom: 0; font-size: 14px; transform: skewY(-10deg); border-radius: 5px; box-shadow: 3.5px 6.062px 40px 0px rgba(0, 0, 0, 0.21); } .testi-style4 .quote i::before { transform: skewY(10deg); display: block; } .testi-style4 .testi-name { font-weight: 600; margin: 0 0 0px 0; } .testi-style4 .testi-degi { font-size: 14px; color: var(--theme-color); margin: 0; } .testi-style5 { text-align: center; margin-bottom: 22px; } .testi-style5 .testi-avater { width: 125px; height: 125px; overflow: hidden; position: relative; margin: 0 auto 37px auto; box-shadow: 1.5px 2.598px 7px 0px rgba(0, 0, 0, 0.21); border-radius: 50%; } .testi-style5 .testi-avater img { width: 100%; } .testi-style5 .testi-text { font-size: 24px; line-height: 35px; margin: 0 0 20px 0; } .testi-style5 .testi-name { font-size: 24px; font-weight: 600; line-height: 1; margin: 0 0 4px 0; } .testi-style5 .testi-degi { font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; } .testi-style5 .testi-shape { line-height: 1; margin: 0 0 14px 0; } .testi-style5 .testi-shape .arrow { display: inline-block; width: 11px; height: 12px; background-color: currentColor; clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 55%); margin: 0 2px 0 0; } .testi-slide2 .slick-arrow { background-color: transparent; color: var(--white-color); font-size: 36px; border: none; border-radius: 0; --pos-x: -120px; } .testi-slide2 .slick-arrow:hover { color: var(--title-color); } /* Hight Resoulation devices */ @media (min-width: 1921px) { .testi-shape1 { max-width: 85%; } .testi-shape2 { max-width: 90%; } } @media (max-width: 1800px) { .test-wrap1 .offset-xxl-1 { margin-left: 0; } .testi-inner1 { width: auto; margin-right: -150px; } } /* Extra large devices */ @media (max-width: 1500px) { .testi-shape1 { max-width: initial; width: auto; right: 50px; } .testi-shape2 { max-width: 100%; width: auto; left: 50px; } .testimonial-arrow { display: none !important; } } /* Medium Large devices */ @media (max-width: 1399px) { .author-style1 { padding: 20px; } .author-style1 .author-name { margin: 0; font-size: 18px; } .testi-inner1 { margin-right: -100px; } .testi-style3 { padding: 40px 30px 32px 30px; } .testi-shape2, .testi-shape1 { display: none; } .test-wrap1 { padding-top: 0; } .testi-style4 { padding: 35px 30px 30px 30px; } } /* Large devices */ @media (max-width: 1199px) { .testi-style1 { padding: 1px 25px 35px 25px; } .testi-style2 { padding: 40px 40px 30px 40px; text-align: center; } .testi-style2 .author-img { margin: 0 auto 15px auto; } .testi-style2 .testi-body { display: flex; margin: 0 0 0 0; flex-direction: column-reverse; } .testi-inner1 { margin-right: 0; } .testi-style5 .testi-text { font-size: 20px; line-height: 30px; margin: 0 0 20px 0; } .testi-style5 .testi-name { font-size: 22px; margin: 0 0 4px 0; } .testi-style5 .testi-degi { letter-spacing: 0; font-size: 14px; } } /* Medium devices */ @media (max-width: 991px) { .testi-style2 { padding: 30px; } .testi-style1 { text-align: center; } .testi-style1 .testi-icon { margin-left: auto; margin-right: auto; } .test-wrap1 { padding-bottom: calc(var(--section-space-mobile) - 30px); } } /* Small devices */ @media (max-width: 767px) { .testi-style4 { transform: none; } .testi-style4 .testi-body { transform: none; } .testi-style4 .author-img { width: 70px; height: 70px; margin-bottom: 20px; } } .testi-style6 { position: relative; } .testi-style6 .testi-body { background-color: var(--white-color); display: flex; position: relative; border: 1px solid #eef2fb; box-shadow: 0px 0px 30px 0px rgba(78, 111, 178, 0.15); } .testi-style6 .media-body { align-self: center; padding-right: 30px; text-align: left; } .testi-style6 .testi-img { margin-right: 45px; } .testi-style6 .testi-rating { color: var(--theme-color); font-size: 18px; margin: 0 0 20px 0; } .testi-style6 .testi-rating i { margin-right: 3px; } .testi-style6 .testi-text { font-size: 16px; font-weight: 400; color: var(--title-color); line-height: 32px; margin-bottom: 5px; } .testi-style6 .testi-name { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.5; } .testi-style6 .testi-degi { color: var(--theme-color); font-size: 14px; font-weight: 400; text-transform: capitalize; } .testi-style6 .quote-icon { position: absolute; right: 5%; top: 10%; } .testi-style6 .quote-icon2 { background-color: #eef2fb; padding: 20px; border-radius: 5px; display: inline-block; margin-bottom: 15px; } .testi-style6 .shape-dotted { position: absolute; right: -30px; bottom: 20px; z-index: -1; } .testi-style6 .slick-dots { margin-top: 48px; margin-bottom: 0; } .testi-nav { position: relative; overflow: hidden; } .testi-nav ::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(27, 43, 74, 0.7); z-index: 1; } .testi-nav ::after { content: ""; position: absolute; width: 96%; height: 143%; top: -37%; left: 61%; background-color: rgba(14, 89, 242, 0.41); transform: rotate(-28deg); z-index: 2; } .testi-nav { position: relative; margin-bottom: 48px; width: max-content; height: max-content; max-width: 100%; max-height: 100%; } .testi-nav .tab-btn { border: none; padding: 0; background-color: transparent; opacity: 0; visibility: hidden; z-index: 1; transition: all ease 0.8s; overflow: hidden; } .testi-nav .tab-btn:not(:first-child) { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .testi-nav .tab-btn img { width: 100%; transition: all ease 0.4s; transform: scale(1); position: relative; } .testi-nav .tab-btn:hover img { transform: scale(1.08); } .testi-nav.nav-prev .prev { opacity: 1; visibility: visible; z-index: 2; } .testi-nav.nav-prev .tab-btn.active:first-child { opacity: 0.5; visibility: visible; cursor: not-allowed; } .testi-nav.nav-next .next { opacity: 1; visibility: visible; z-index: 2; } .testi-nav.nav-next .tab-btn.active:last-child { opacity: 0.5; visibility: visible; cursor: not-allowed; } /* Medium devices */ @media (max-width: 991px) { .order-1 { display: none; } .order-2 { display: none; } } /* Small devices */ @media (max-width: 767px) { .testi-style6 .testi-body { display: block; text-align: center; border: none; box-shadow: none; } .testi-style6 .testi-body .quote-icon { display: none; } .testi-style6 .testi-body .testi-img { margin-bottom: 30px; margin-right: 0; } .testi-style6 .media-body { padding: 0 20px; } } /*------------------- 4.19. 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; transition: all ease 0.8s; } .sidemenu-wrapper .closeButton { display: inline-block; border: none; color: var(--white-color); background-color: var(--theme-color); width: 40px; height: 40px; line-height: 40px; font-size: 18px; padding: 0; position: absolute; top: 15px; right: 15px; border-radius: 50%; transform: rotate(0); transition: all ease 0.4s; } .sidemenu-wrapper .closeButton:hover { background-color: var(--title-color); color: var(--white-color); transform: rotate(90deg); } .sidemenu-wrapper .sidemenu-content { background-color: var(--white-color); width: 450px; margin-left: auto; padding: 40px; height: 100%; overflow: scroll; position: relative; right: -500px; cursor: auto; transition-delay: 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 .widget { padding: 0; border: none; margin: 0 0 40px 0; background-color: transparent; } .sidemenu-wrapper .widget_title { border-bottom: 1px solid var(--border-color); padding: 0 0 20px 0; margin: 0 0 25px 0; } .sidemenu-wrapper .footer-logo img { margin-bottom: 15px; } .sidemenu-wrapper .footer-schedule th { color: var(--title-color); font-weight: 500; } .sidemenu-wrapper .footer-schedule th, .sidemenu-wrapper .footer-schedule td { border-bottom: 1px solid var(--border-color); padding: 10px 0; } .sidemenu-wrapper.show { opacity: 1; visibility: visible; width: 100%; transition: all ease 0.8s; } .sidemenu-wrapper.show .sidemenu-content { right: 0; opacity: 1; visibility: visible; } /*------------------- 4.20. Price Plan -------------------*/ .price-style1 { position: relative; background-color: #F6F7FA; padding: 50px 60px 60px 60px; overflow: hidden; border-radius: 5px; margin: 0 0 30px 0; } .price-style1 .price-shape { background-color: var(--theme-color); position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 5px; transition: all ease 0.4s; opacity: 0; visibility: hidden; z-index: 1; transform: scale(1.1); } .price-style1 .price-package { margin: 0 0 3px 0; } .price-style1 .price-amount { color: var(--theme-color); } .price-style1 .price-duration { font-size: 16px; color: var(--title-color); font-weight: 500; margin-left: 5px; } .price-style1 .price-features { background-color: var(--white-color); padding: 28px 30px 22px 30px; margin: 0 0 30px 0; border-radius: 5px; } .price-style1 .price-features ul { margin: 0; padding: 0; list-style-type: none; } .price-style1 .price-features li { margin: 0 0 5px 0; } .price-style1 .price-features i { color: var(--theme-color); margin: 0 10px 0 0; } .price-style1 .vs-btn { width: 100%; } .price-style1 .vs-btn, .price-style1 .price-features, .price-style1 .price-duration, .price-style1 .price-amount, .price-style1 .price-package { transition: all ease 0.4s; position: relative; z-index: 2; } .slick-center .price-style1 .price-shape, .price-style1:hover .price-shape { opacity: 1; visibility: visible; transform: scale(1); } .slick-center .price-style1 .price-duration, .slick-center .price-style1 .price-amount, .slick-center .price-style1 .price-package, .price-style1:hover .price-duration, .price-style1:hover .price-amount, .price-style1:hover .price-package { color: var(--white-color); } .slick-center .price-style1 .vs-btn, .price-style1:hover .vs-btn { background-color: var(--white-color); color: var(--theme-color); } .slick-center .price-style1 .vs-btn:hover, .price-style1:hover .vs-btn:hover { color: var(--white-color); } .package-style2 .package-inner { position: relative; display: flex; background-color: var(--white-color); padding: 48px 60px 42px 60px; border-radius: 25px; margin-top: 20px; margin-bottom: 50px; } .package-style2:last-child .package-inner { margin-bottom: 30px; } .package-style2 .package-head { flex: 1; } .package-style2 .package-body { display: flex; flex-direction: column; justify-content: center; flex-wrap: wrap; align-items: center; padding-left: 50px; } .package-style2 .package-discount { line-height: 1; display: inline-block; position: absolute; left: 65px; top: -15px; color: var(--white-color); background-color: var(--theme-color); padding: 8px 18px; font-size: 14px; border-radius: 9999px; box-shadow: 0 0 0 5px white; } .package-style2 .package-amount { font-size: 60px; font-weight: 700; font-family: var(--title-font); color: var(--title-color); line-height: 1; margin: -0.2em 0 24px 0; } .package-style2 .package-amount .duration { font-size: 18px; color: var(--body-color); vertical-align: middle; font-weight: 400; margin: 23px 0 0 5px; display: inline-block; } .package-style2 .package-list ul { margin: 0; padding: 0; list-style-type: none; } .package-style2 .package-list li { font-size: 16px; color: var(--title-color); position: relative; border-bottom: 1px solid #f1f2f7; padding-bottom: 18px; margin-bottom: 18px; padding-right: 30px; } .package-style2 .package-list li i:first-child { position: absolute; right: 0; top: 3.5px; color: var(--theme-color); } .package-style2 .package-list li i.fa-times-circle { color: var(--title-color); } .package-style2 .package-list li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; } .price-wrap1 { position: relative; padding-top: calc(var(--section-space) * 2); padding-bottom: calc(var(--section-space) - 30px); } .package-tab { border: 2px solid var(--white-color); border-radius: 9999px; max-width: 100%; width: max-content; margin-bottom: 30px; } .package-tab button { background-color: transparent; padding: 0; border: none; color: var(--white-color); font-size: 16px; font-weight: 500; padding: 19.5px 56px; margin: -2px; border-radius: 9999px; } .package-tab button:hover { color: var(--theme-color); } .package-tab button.active { color: var(--white-color); background-color: var(--theme-color); } .price-shape1 { position: absolute; right: 0; left: 230px; top: var(--section-space); bottom: 0; } .package-shape1 { position: absolute; right: 0; top: 0; bottom: 0; width: 100%; max-width: 1623px; border-radius: 10px 0 0 10px; } .shape-1 { width: 1690px; height: 882px; } .package-style1 { background-color: var(--white-color); display: flex; position: relative; padding: 12px; margin: 20px 0 50px 0; width: 100%; border-radius: 12px; } .package-style1 .package-head { flex: 1; padding: 40px 30px 30px 30px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .package-style1 .package-discount { font-size: 14px; font-weight: 500; text-transform: capitalize; color: var(--white-color); background-color: #00c620; border: 5px solid var(--white-color); padding: 8px 13px; position: absolute; left: 40px; top: -20px; line-height: 1; border-radius: 9999px; } .package-style1 .package-label { font-size: 18px; font-weight: 500; display: block; color: #74787c; color: var(--theme-color); margin: -0.2em 0 10px 0; } .package-style1 .currency { font-size: 40px; font-weight: 500; color: var(--title-color); vertical-align: top; top: 3px; position: relative; } .package-style1 .price { font-size: 70px; font-weight: 700; color: var(--title-color); } .package-style1 .duration { font-size: 18px; font-weight: 500; color: #74787c; margin-left: 5px; } .package-style1 .package-amount { line-height: 1; margin: 0 0 40px 0; } .package-style1 .package-body { background-color: var(--smoke-color); border-radius: 12px; padding: 25px 40px 23px 25px; display: flex; align-items: center; align-self: stretch; } .package-style1 .package-list { flex: 1; } .package-style1 .package-list ul { margin: 0; padding: 0; list-style-type: none; } .package-style1 .package-list li { font-size: 16px; color: #1a1a1a; padding: 0 0 14px 45px; margin: 0 0 15px 0; position: relative; border-bottom: 1px solid #cecece; } .package-style1 .package-list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .package-style1 .package-list i { color: var(--theme-color); font-size: 18px; position: absolute; left: 15px; top: 2.5px; } .package-style1 .package-list i.fa-check-circle { color: var(--success-color); } .package-style1 .package-list i.fa-times-circle { color: var(--error-color); } @media (min-width: 1199px) { .package-style1:nth-child(even) { margin-left: -50px; } } .package-style1:last-child { margin-bottom: 30px; } .package-style3 { background-color: var(--white-color); box-shadow: 1.5px 2.598px 16.74px 1.26px rgba(200, 200, 200, 0.1); padding: 40px; border-radius: 13px; margin-bottom: 37px; position: relative; } .package-style3:after, .package-style3:before { content: ""; position: absolute; left: 1px; top: 0; width: calc(100% - 2px); height: 100%; border-radius: inherit; z-index: -2; transition: all ease 0.4s; opacity: 1; visibility: visible; transform: translateY(7px); background-color: transparent; } .package-style3:before { opacity: 0; visibility: hidden; transform: translateY(0); background-color: var(--theme-color); z-index: -1; } .package-style3 .package-head { display: flex; align-items: center; margin: 0 0 14px 0; } .package-style3 .package-title { margin: 0; font-size: 22px; line-height: 1; } .package-style3 .package-icon { margin-right: 15px; } .package-style3 .package-price, .package-style3 .package-text { font-size: 15px; text-transform: uppercase; font-weight: 500; color: #9c9ca0; margin: 0 0 32px 0; } .package-style3 .package-price { font-size: 16px; line-height: 1; margin: 0 0 22px 0; } .package-style3 .amount { font-size: 50px; color: var(--title-color); display: inline-block; } .package-style3 .vs-btn { background-color: var(--title-color); color: var(--white-color); text-transform: uppercase; text-align: center; line-height: 1; font-size: 15px; font-weight: 500; margin: 0 0 32px 0; padding: 23px 15px; border-radius: 8px; width: 100%; } .package-style3 .vs-btn:before { display: none; } .package-style3 .vs-btn:hover { background-color: var(--smoke-color); } .package-style3 .package-subtitle { color: var(--title-color); font-size: 16px; font-weight: 600; display: block; margin: 0 0 10px 0; } .package-style3 .package-features ul { margin: 0; } .package-style3 .package-features li { position: relative; padding-left: 25px; font-size: 15px; font-weight: 500; letter-spacing: 0.03em; color: #65666d; margin-bottom: 15px; } .package-style3 .package-features li:last-child { margin-bottom: 0; } .package-style3 .package-features li i:first-child { position: absolute; left: 0; top: 5px; color: var(--theme-color); transition: all ease 0.4s; } .package-style3.active:before, .package-style3:hover:before { transform: translateY(7px); opacity: 1; visibility: visible; } .package-style3.active:after, .package-style3:hover:after { opacity: 0; visibility: hidden; transform: translateY(0); } .package-style3.active .vs-btn, .package-style3:hover .vs-btn { background-color: var(--theme-color); } .package-style3.active .package-features li i:first-child, .package-style3:hover .package-features li i:first-child { color: var(--theme-color); } .package-style3:hover .vs-btn { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .package-shape1 { max-width: 90%; } } /* Extra large devices */ @media (max-width: 1500px) { .price-shape1 { left: 50px; } .package-shape1 { border-radius: 0; } } /* Medium Large devices */ @media (max-width: 1399px) { .price-style1 { padding: 30px 20px 40px 20px; } .price-style1 .price-features { padding: 28px 20px 22px 20px; } .price-style1 .price-features li { font-size: 14px; } .price-style1 .price-amount.h1 { font-size: 30px; } .package-style2 .package-inner { padding: 38px 30px 32px 30px; } .package-style2 .package-amount { font-size: 48px; } .package-style2 .package-amount .duration { font-size: 16px; } } /* Large devices */ @media (max-width: 1199px) { .package-style1 .package-head { padding: 40px 15px 30px 15px; } .package-style1 .price { font-size: 42px; } .package-style1 .duration { font-size: 14px; } .package-style1 .vs-btn.style3 { padding: 12px 13px; font-size: 14px; } .package-style1 .currency { font-size: 18px; } .package-style1 .package-label { font-size: 14px; margin: -0.2em 0 8px 0; } .package-style1 .package-amount { margin: 0 0 20px 0; } .package-style1 .package-body { padding: 20px 20px 18px 20px; } .package-style1 .package-list li { padding-left: 30px; } .package-style1 .package-list i { left: 0; } .package-style2 .package-inner { padding: 38px 25px 32px 25px; } .package-style2 .package-list li { padding-bottom: 10px; margin-bottom: 10px; padding-right: 25px; font-size: 14px; } .package-style2 .package-body { padding-left: 30px; } .package-style2 .package-amount { font-size: 36px; margin-bottom: 20px; } .package-style2 .package-amount .duration { font-size: 14px; margin-top: 8px; } .package-style2 .vs-btn { padding: 14px 19px; font-size: 14px; } .package-style3 { padding: 30px 20px 30px 20px; } .package-style3 .package-price, .package-style3 .package-text { font-size: 13px; margin: 0 0 20px 0; } .package-style3 .amount { font-size: 36px; } .package-style3 .vs-btn { font-size: 14px; margin: 0 0 22px 0; padding: 18px 13px; } .package-style3 .package-features li { padding-left: 25px; font-size: 14px; letter-spacing: 0; margin-bottom: 7px; } .package-style3 .package-features li i:first-child { left: 0; top: 6px; } .package-tab button { font-size: 14px; padding: 13px 28px; } } /* Medium devices */ @media (max-width: 991px) { .package-style1 { max-width: 80%; margin-left: auto; } .package-style1:nth-child(even) { margin-left: 0; margin-right: auto; } .package-style2 .package-inner { display: block; } .package-style2 .package-body { flex: 1; padding-left: 0; padding-top: 30px; } .package-style2 .package-discount { left: 50%; transform: translateX(-50%); } .package-tab { text-align: center; margin-left: auto; margin-right: auto; } .price-wrap1 { padding-top: var(--section-space-mobile); padding-bottom: calc(var(--section-space-mobile) - 30px); } } /* Small devices */ @media (max-width: 767px) { .package-style1 { display: block; max-width: 100%; } .package-style1 .package-list li { font-size: 14px; } .package-style1 .package-list i { top: 3px; } .package-tab { border: none; } .package-tab button { margin: 0 3px 5px 3px; color: var(--title-color); background-color: var(--smoke-color); padding: 10px 20px; } .package-tab button.active { color: var(--white-color); } } /*------------------- 4.21. Forms Style -------------------*/ .form-style1 { background-color: var(--theme-color); --bs-gutter-x: 20px; padding: 70px 80px 80px 80px; } .form-style1 .form-title { color: var(--white-color); text-align: center; margin: 0 0 27px 0; padding: 0 0 17px 0; position: relative; } .form-style1 .form-title:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; border-radius: 5px; background-color: #0844BC; background-color: var(--white-color); opacity: 0.3; } .form-style1 .wpcf7-not-valid-tip { margin-top: 5px; color: #ff3a3a; } .form-style1 .vs-btn { width: 100%; padding-left: 10px; padding-right: 10px; } .form-style1 textarea, .form-style1 input { height: 55px; background-color: var(--white-color); font-size: 16px; font-family: var(--body-font); color: var(--title-color); border-radius: 5px; } .form-style1 textarea::-moz-placeholder, .form-style1 input::-moz-placeholder { color: var(--body-color); } .form-style1 textarea::-webkit-input-placeholder, .form-style1 input::-webkit-input-placeholder { color: var(--body-color); } .form-style1 textarea:-ms-input-placeholder, .form-style1 input:-ms-input-placeholder { color: var(--body-color); } .form-style1 textarea::placeholder, .form-style1 input::placeholder { color: var(--body-color); } .form-style1 textarea { min-height: 180px; resize: none; } .form-style2 { margin-bottom: 30px; } .form-style2 textarea, .form-style2 select, .form-style2 input { background-color: var(--smoke-color); border: none; font-size: 16px; padding-left: 25px; } .wpcf7-not-valid-tip { margin-top: 10px; } .form-style3 .form-title { margin: 0 0 40px 0; } .form-style3 .form-group { display: flex; background-color: var(--white-color); padding: 12.5px; flex-wrap: wrap; align-items: center; border-radius: 9999px; margin: 0; } .form-style3 .form-group input { flex: 1; border: none; border-left: 2px solid #d8e0ff; background-color: transparent; height: 30px; font-size: 16px; color: var(--title-color); font-weight: 500; } .form-style3 .form-group input::-moz-placeholder { color: var(--title-color); } .form-style3 .form-group input::-webkit-input-placeholder { color: var(--title-color); } .form-style3 .form-group input:-ms-input-placeholder { color: var(--title-color); } .form-style3 .form-group input::placeholder { color: var(--title-color); } .form-style3 .form-group input:first-child { border-left: none; } .form-style4 { z-index: 1; position: relative; } .form-style4 .form-title { margin: -0.3em 0 22px 0; } .form-style4 .form-inner { background-color: var(--white-color); box-shadow: 5px 8.66px 25px 0px rgba(196, 201, 228, 0.2); border-radius: 10px; padding: 32.5px 60px; position: relative; margin-bottom: 20px; } .form-style4 .form-inner:before { content: ""; position: absolute; left: 20px; right: 20px; bottom: -20px; top: 20px; background-color: var(--white-color); opacity: 0.6; z-index: -1; box-shadow: 5px 8.66px 25px 0px rgba(206, 211, 234, 0.1); border-radius: inherit; } .form-style4 .form-select, .form-style4 .form-control { height: 30px; border: none; font-size: 16px; background-color: transparent; background-image: none; padding-left: 60px; } .form-style4 .form-group { margin-bottom: 0; border-left: 1px solid #dfdfdf; } .form-style4 .form-group i { position: absolute; right: auto; left: 30px; top: 50%; transform: translateY(-50%); font-size: 16px; } .form-style4 .form-group i.fa-angle-down { font-size: 18px; } .form-style4 .form-group:first-child { border-left: none; } .form-style4 .form-group:first-child .form-control, .form-style4 .form-group:first-child .form-select { padding-left: 35px; } .form-style4 .form-group:first-child i { left: 0; } .form-style5 { --body-color: #555555; } .form-style5 input { color: var(--body-color); font-weight: 500; border-radius: 7px; margin: 0 0 15px 0; padding: 0 30px; height: 55px; } .form-style5 input::-moz-placeholder { color: var(--body-color); } .form-style5 input::-webkit-input-placeholder { color: var(--body-color); } .form-style5 input:-ms-input-placeholder { color: var(--body-color); } .form-style5 input::placeholder { color: var(--body-color); } .form-style5 .vs-btn { border-radius: 7px; height: 55px; line-height: 55px; padding-top: 0; padding-bottom: 0; } .form-style6 { background-color: rgba(14, 90, 242, 0.8); --theme-color: var(--title-color); padding: 40px 35px 40px 35px; margin-bottom: 30px; border-radius: 7px; } .form-style6 .form-title { font-size: 28px; text-transform: uppercase; position: relative; letter-spacing: -0.02em; color: var(--white-color); text-align: center; padding: 0 0 13px 0; margin: -0.4em 0 30px 0; } .form-style6 .form-title:before { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--shape-size, 70px) / -2); width: var(--shape-size, 70px); height: 2px; background-color: var(--white-color); } .form-style6 input, .form-style6 textarea { border: none; border-radius: 5px; height: 58px; padding: 0 20px 0 20px; color: #999ba1; font-weight: 14px; } .form-style6 input::-moz-placeholder, .form-style6 textarea::-moz-placeholder { text-transform: uppercase; color: #999ba1; } .form-style6 input::-webkit-input-placeholder, .form-style6 textarea::-webkit-input-placeholder { text-transform: uppercase; color: #999ba1; } .form-style6 input:-ms-input-placeholder, .form-style6 textarea:-ms-input-placeholder { text-transform: uppercase; color: #999ba1; } .form-style6 input::placeholder, .form-style6 textarea::placeholder { text-transform: uppercase; color: #999ba1; } .form-style6 textarea { padding-top: 12px; min-height: 102px; } .form-style6 .form-group { margin-bottom: 12px; } .form-style6 .form-group:last-child { margin-bottom: 0; text-align: center; } .form-style6 .vs-btn:after, .form-style6 .vs-btn:before { background-color: #fff; } .form-style6 .vs-btn:hover { color: #0E5AF2; } /* Large devices */ @media (max-width: 1199px) { .form-style4 .form-select, .form-style4 .form-control { height: 55px; border: 1px solid #E0E0E0; font-size: 16px; padding-left: 45px; border-radius: 9999px; } .form-style4 .form-group { border-left: none; } .form-style4 .form-group i { left: 30px; } .form-style4 .form-group:first-child .form-control, .form-style4 .form-group:first-child .form-select { padding-left: 45px; } .form-style4 .form-group:first-child i { left: 30px; } } /* Small devices */ @media (max-width: 767px) { .form-style1 { padding: 40px 20px 40px 20px; } .form-style1 select, .form-style1 .form-control, .form-style1 .form-select, .form-style1 textarea, .form-style1 input { padding-left: 20px; font-size: 14px; } .form-style3 .form-title { margin: 0 0 20px 0; font-size: 30px; line-height: 1.3; } .form-style3 .form-group { display: block; border-radius: 0; background-color: transparent; } .form-style3 .form-group input { border: none; background-color: var(--white-color); height: 50px; margin-bottom: 12px; border-radius: 6px; font-size: 14px; } .form-style3 .form-group .vs-btn { background-color: var(--title-color); } .form-style3 .form-group .vs-btn:after, .form-style3 .form-group .vs-btn:before { background-color: var(--white-color); } .form-style3 .form-group .vs-btn:hover { color: var(--title-color); } .form-style4 .form-inner { padding: 32.5px 20px; } .form-style6 { padding: 40px 20px 40px 20px; } .form-style6 .form-title { font-size: 22px; letter-spacing: 0; } } /*------------------- 4.22. Projects -------------------*/ .filter-menu1 { background-color: var(--white-color); position: relative; width: max-content; margin: 0 auto 50px auto; max-width: 100%; border-radius: 9999px; text-align: center; padding: 15px 60px; box-shadow: 7.5px 12.99px 60px 0px rgba(9, 34, 126, 0.07); } .filter-menu1 button { border: none; background-color: transparent; font-size: 16px; line-height: 1; font-weight: 500; display: inline-block; position: relative; padding: 17px 31px; border-radius: 9999px; } .filter-menu1 button:hover { color: var(--theme-color); } .filter-menu1 button.active { background-color: var(--theme-color); color: var(--white-color); } .project-style1 { background-color: var(--white-color); box-shadow: 0px 10px 31px rgba(169, 177, 193, 0.17); border-radius: 5px; margin: 0 0 30px 0; } .project-style1 .project-img { position: relative; overflow: hidden; border-radius: 5px 5px 0 0; } .project-style1 .project-img:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform: scale(1.1); background-color: var(--theme-color); opacity: 0; visibility: hidden; transition: all ease 0.4s; z-index: 1; } .project-style1 .project-img img { transition: all ease 0.4s; transform: scale(1); } .project-style1 .project-content { padding: 25px 30px 30px 30px; } .project-style1:hover .vs-btn.style3 { background-color: var(--theme-color); color: var(--white-color); } .project-style1:hover .project-img:before { transform: scale(1); opacity: 0.5; visibility: visible; } .project-style1:hover .project-img img { transform: scale(1.1); } .slick-slide .project-style1 { box-shadow: 0px 10px 21px rgba(169, 177, 193, 0.15); } .project-style2 { position: relative; margin: 0 0 30px 0; } .project-style2 .project-img { overflow: hidden; position: relative; } .project-style2 .project-img img { transition: all ease 0.4s; transform: scale(1); width: 100%; } .project-style2 .project-shape { position: absolute; top: 30px; right: 30px; bottom: 30px; left: 30px; background-color: var(--theme-color); z-index: 1; opacity: 0; visibility: hidden; transition: all ease 0.4s; } .project-style2 .icon-btn, .project-style2 .hero-layout4 .slick-arrow, .hero-layout4 .project-style2 .slick-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; background-color: var(--white-color); color: var(--theme-color); opacity: 0; visibility: hidden; } .project-style2 .icon-btn:hover, .project-style2 .hero-layout4 .slick-arrow:hover, .hero-layout4 .project-style2 .slick-arrow:hover { background-color: var(--title-color); color: var(--white-color); } .project-style2 .project-title { color: var(--white-color); margin: 0; } .project-style2 .project-label { font-size: 16px; font-weight: 600; font-family: var(--title-font); color: var(--white-color); display: block; margin: 0 0 5px 0; } .project-style2 .project-label, .project-style2 .project-title { opacity: 0; visibility: hidden; transform: translateY(-50px); transition: all ease 0.4s; } .project-style2 .project-content { position: absolute; left: 70px; bottom: 60px; z-index: 3; } .project-style2:hover .project-shape { opacity: 0.8; visibility: visible; } .project-style2:hover .project-img img { transform: scale(1.1); } .project-style2:hover .icon-btn, .project-style2:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-style2:hover .slick-arrow { opacity: 1; visibility: visible; transition-delay: 0.2s; } .project-style2:hover .project-title, .project-style2:hover .project-label { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.1s; } .project-style2:hover .icon-btn, .project-style2:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-style2:hover .slick-arrow, .project-style2:hover .project-label { transition-delay: 0.2s; } .project-box { background-color: var(--smoke-color); padding: 45px 40px; margin: 0 0 30px 0; } .project-box__title { margin: -0.3em 0 25px 0; } .project-box__icon { width: 50px; height: 50px; line-height: 50px; text-align: center; background-color: var(--white-color); text-align: center; color: var(--theme-color); margin: 0 20px 0 0; font-size: 18px; border-radius: 50%; } .project-box__label { font-size: 14px; display: block; margin: 0 0 10px 0; line-height: 1; } .project-box__info { font-size: 16px; font-weight: 600; color: var(--theme-color); margin: 0; } .project-box__item { display: flex; align-items: center; } .project-box__item:not(:last-child) { border-bottom: 1px solid #dadfec; margin: 0 0 30px 0; padding: 0 0 30px 0; } .project-contact { background-color: var(--theme-color); padding: 32px 40px 20px 40px; } .project-contact__title { color: var(--white-color); margin: 0 0 10px 0; } .project-contact__text { color: var(--white-color); margin: 0 0 22px 0; } .project-contact__info { color: var(--white-color); font-size: 18px; font-weight: 500; position: relative; margin: 0 0 10px 0; padding: 0 0 0 33px; } .project-contact__info a { color: inherit; } .project-contact__info i { margin: 0 15px 0 0; position: absolute; left: 0; top: 3.5px; } .project-style3 { position: relative; margin-bottom: 30px; } .project-style3 .project-img { overflow: hidden; border-radius: 10px; } .project-style3 .project-img img { transform: scale(1); transition: all ease 0.4s; width: 100%; } .project-style3 .project-bottom { position: absolute; left: 30px; right: 30px; bottom: 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; background-color: var(--theme-color); border-radius: 10px; transition: all ease 0.4s; padding: 30px 35px 28px 35px; opacity: 0; visibility: hidden; } .project-style3 .icon-btn, .project-style3 .hero-layout4 .slick-arrow, .hero-layout4 .project-style3 .slick-arrow, .project-style3 .project-category, .project-style3 .project-title { transform: translateY(10px); transition: all ease 0.4s; opacity: 0; visibility: hidden; } .project-style3 .project-title { font-size: 20px; font-weight: 600; color: var(--white-color); margin: 0 0 2px 0; } .project-style3 .project-category { font-size: 16px; color: #7c98ff; margin: 0; } .project-style3 .icon-btn, .project-style3 .hero-layout4 .slick-arrow, .hero-layout4 .project-style3 .slick-arrow { --btn-size: 40px; --btn-font-size: 16px; transform: translateX(10px); } .project-style3:hover .project-bottom { opacity: 1; visibility: visible; } .project-style3:hover .icon-btn, .project-style3:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-style3:hover .slick-arrow, .project-style3:hover .project-title, .project-style3:hover .project-category { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.1s; } .project-style3:hover .icon-btn, .project-style3:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-style3:hover .slick-arrow { transition-delay: 0.15s; } .project-style3:hover .project-category { transition-delay: 0.2s; } .project-style3:hover .project-img img { transform: scale(1.1); } /* Extra large devices */ @media (max-width: 1500px) { .project-style2 .icon-btn, .project-style2 .hero-layout4 .slick-arrow, .hero-layout4 .project-style2 .slick-arrow { top: 60px; right: 60px; left: auto; transform: none; --btn-size: 40px; --btn-font-size: 18px; } } /* Medium Large devices */ @media (max-width: 1399px) { .project-box { padding: 35px 25px; } .project-contact { padding: 32px 25px 20px 25px; } .project-style1 .project-img img { width: 100%; } .project-style1 .project-content { padding-left: 25px; padding-right: 25px; } } /* Medium devices */ @media (max-width: 991px) { .project-style2 .project-shape { right: 0; top: 0; bottom: 0; left: 0; } .project-style2 .project-content { left: 20px; bottom: 20px; } .project-style2 .icon-btn, .project-style2 .hero-layout4 .slick-arrow, .hero-layout4 .project-style2 .slick-arrow { top: 20px; right: 20px; } .project-style3 .project-bottom { left: 15px; right: 15px; bottom: 15px; padding: 20px 20px 20px 20px; gap: 15px; } .project-style3 .project-title { font-size: 18px; } } /* Small devices */ @media (max-width: 767px) { .project-contact__info { font-size: 14px; } .filter-menu1 { padding: 15px 15px; border-radius: 10px; } .filter-menu1 button { font-size: 14px; padding: 15px 22px; } } /* Extra small devices */ @media (max-width: 575px) { .project-style1 .project-content { padding: 25px 20px 30px 20px; } } .filter-menu2 { position: relative; width: max-content; margin: 0 auto 50px auto; max-width: 100%; text-align: center; } .filter-menu2 button { border: none; background-color: rgb(238, 242, 251); font-size: 16px; line-height: 1; font-weight: 500; display: inline-block; position: relative; padding: 18px 20px; border-radius: 5px; margin-right: 5px; } .filter-menu2 button:last-child { margin-right: 0; } .filter-menu2 button:hover { color: var(--theme-color); } .filter-menu2 button.active { background-color: var(--theme-color); color: var(--white-color); } .project-style4 { position: relative; overflow: hidden; text-align: center; padding: 215px 40px 40px 40px; margin-bottom: 30px; z-index: 1; } .project-style4::before, .project-style4::after { content: ""; width: 100%; height: 100%; top: 0; left: 0; position: absolute; transition: all 0.5s ease; z-index: -1; } .project-style4::before { background: linear-gradient(rgba(14, 89, 242, 0), rgb(14, 89, 242)); opacity: 0; visibility: hidden; } .project-style4::after { background-color: rgba(5, 18, 44, 0.6); opacity: 1; visibility: visible; } .project-style4 .project-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } .project-style4 .project-category { color: var(--white-color); margin-bottom: 5px; } .project-style4 .project-title { color: var(--white-color); } .project-style4 .project-title .text-reset { color: var(--white-color); text-decoration: none; } .project-style4 .project-bottom { position: relative; } .project-style4:hover::before { background: linear-gradient(rgba(14, 89, 242, 0), rgb(14, 89, 242)); opacity: 1; visibility: visible; transition: all 0.5s ease; } .project-style4:hover::after { opacity: 0; visibility: hidden; transition: all 0.5s ease; } /* Medium devices */ @media (max-width: 991px) { .filter-menu2 button { margin-bottom: 10px; } } /*------------------- 4.23. Contact -------------------*/ .contact-tab-menu { display: flex; flex-wrap: wrap; gap: 30px; margin: 0 0 60px 0; } .contact-tab-menu .btn-img { width: 120px; float: left; margin: 0 20px 0 0; } .contact-tab-menu .btn-title { display: inline-block; font-size: 18px; font-weight: 600; font-family: var(--title-font); margin: 4px 0 0 0; transition: all ease 0.4s; } .contact-tab-menu .btn-text { display: inline-block; color: var(--body-color); font-size: 14px; font-family: var(--title-font); margin: 2px 0 0 0; transition: all ease 0.4s; } .contact-tab-menu button { padding: 20px; position: relative; width: 100%; flex: 1; text-align: left; background-color: transparent; border: 1px solid #F0F0F0; } .contact-tab-menu button.active, .contact-tab-menu button:hover { background-color: var(--theme-color); border-color: transparent; } .contact-tab-menu button.active .btn-text, .contact-tab-menu button.active .btn-title, .contact-tab-menu button:hover .btn-text, .contact-tab-menu button:hover .btn-title { color: var(--white-color); } .contact-box { background-color: var(--smoke-color); padding: 60px; height: 100%; } .contact-box__title { margin: -0.4em 0 10px 0; } .contact-box__text { margin: 0 0 37px 0; } .contact-box__item { display: flex; } .contact-box__item:not(:last-child) { padding: 0 0 30px 0; margin: 0 0 30px 0; border-bottom: 1px solid #DADFEC; } .contact-box__icon { font-size: 30px; line-height: 1; color: var(--theme-color); align-self: flex-start; margin: 0 15px 0 0; } .contact-box__label { font-size: 18px; margin: -0.3em 0 8px 0; } .contact-box__info { max-width: 235px; margin: 0 0 -0.5em 0; } .contact-box__info a { display: inline-block; color: inherit; } .contact-box__form .form-group { line-height: 1; } .contact-box__form textarea, .contact-box__form select, .contact-box__form input { height: 55px; font-size: 16px; border-radius: 5px; border: none; background-position: right 21px center; } .contact-box__form i { top: 19px; right: calc(var(--bs-gutter-x) / 2 + 24px); font-size: 16px; } /* Medium Large devices */ @media (max-width: 1399px) { .contact-box { padding: 40px; } .contact-box__title { margin: -0.3em 0 10px 0; } .contact-box__form textarea, .contact-box__form select, .contact-box__form input { font-size: 14px; } .contact-tab-menu button { text-align: center; } .contact-tab-menu .btn-title { display: block; } .contact-tab-menu .btn-img { float: none; margin: 0 auto 10px auto; display: block; } } /* Medium devices */ @media (max-width: 991px) { .contact-tab-menu .btn-title { font-size: 16px; } } /* Extra small devices */ @media (max-width: 575px) { .contact-box { padding: 40px 20px; } .contact-box__label { font-size: 16px; } .contact-box__icon { font-size: 20px; } } /*------------------- 4.24. Event -------------------*/ .event-table__head { background-color: var(--theme-color); width: 100%; display: flex; flex-wrap: wrap; padding: 29px 60px; } .event-table__item { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid #eaeaf0; background-color: #f8f8f9; padding: 35px 60px 32px 60px; } .event-table__item:last-child { padding-bottom: 52px; border-bottom: none; } .event-table__col { width: 100%; } .event-table__col:nth-child(1) { max-width: 20%; } .event-table__col:nth-child(2) { max-width: 40%; } .event-table__col:nth-child(3) { max-width: 25%; } .event-table__col:nth-child(4) { max-width: 15%; } .event-table__coltitle { color: var(--white-color); font-size: 16px; font-weight: 400; margin: 0; } .event-table__date { font-size: 20px; font-weight: 500; color: var(--title-color); } .event-table__media { display: flex; align-items: center; } .event-table__img { width: 100px; border-radius: 50%; margin-right: 25px; overflow: hidden; } .event-table__img img { width: 100%; } .event-table__title { font-size: 20px; font-weight: 600; margin: 0 0 3px 0; } .event-table__title a { color: inherit; } .event-table__title a:hover { color: var(--theme-color); } .event-table__text { font-size: 14px; margin: 0; } .event-table__author { display: flex; align-items: center; } .event-table__avater { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-right: 15px; } .event-table__avater img { width: 100%; } .event-table__name { font-weight: 600; font-size: 18px; margin: 0; } .event-table__degi { font-size: 14px; margin: 0; display: block; } /* Large devices */ @media (max-width: 1199px) { .event-table__head { padding: 16px 40px; } .event-table__item { padding-left: 40px; padding-right: 40px; } .event-table__date { font-size: 14px; } .event-table__img { width: 80px; margin-right: 20px; } .event-table__title { font-size: 18px; } .event-table__name { font-size: 16px; } .event-table__avater { width: 50px; height: 50px; } .event-table__btn.vs-btn { padding: 0; width: 130px; height: 50px; line-height: 47px; } } /* Medium devices */ @media (max-width: 991px) { .event-table__item { position: relative; padding-left: 0; padding-right: 0; } .event-table__head { padding: 20px 0; } .event-table__coltitle { font-size: 14px; } .event-table__col:nth-child(1) { max-width: 10%; padding-left: 15px; } .event-table__col:nth-child(2) { max-width: 50%; } .event-table__col:nth-child(3) { max-width: 20%; text-align: center; } .event-table__col:nth-child(4) { max-width: 20%; text-align: center; padding-right: 15px; } .event-table__author { display: block; text-align: center; } .event-table__avater { margin: 0 auto 10px auto; } .event-table__date { writing-mode: tb-rl; transform: rotate(-180deg) translateY(50%); background-color: var(--theme-color); color: var(--white-color); padding: 10px 3px; position: absolute; left: 0; top: 50%; border-radius: 9px 0 0 9px; height: max-content; display: block; } .event-table__btn.vs-btn { width: max-content; height: auto; line-height: 1; font-size: 14px; border: none; } .event-table__btn.vs-btn:hover { background-color: transparent; } } /* Small devices */ @media (max-width: 767px) { .event-table__head { display: none; } .event-table__item { padding: 0 30px 20px 30px; border: none; margin-bottom: 20px; } .event-table__date { writing-mode: lr-tb; left: 50%; top: 0; transform: translateX(-50%); border-radius: 0 0 10px 10px; padding: 5px 10px; } .event-table__media { text-align: center; display: block; border-bottom: 1px solid #eaeaf0; margin-bottom: 25px; padding-bottom: 20px; } .event-table__img { width: 100%; height: 100%; border-radius: 0; margin-bottom: 15px; margin-right: 0; } .event-table__author { display: flex; text-align: left; } .event-table__avater { margin-right: 15px; } .event-table__btn.vs-btn { border: 1px solid var(--theme-color); width: 100px; height: 40px; line-height: 38px; } .event-table__col:nth-child(1) { max-width: 0; } .event-table__col:nth-child(2) { max-width: 100%; } .event-table__col:nth-child(3) { max-width: 50%; } .event-table__col:nth-child(4) { max-width: 50%; text-align: right; padding: 0; } } /* Extra small devices */ @media (max-width: 575px) { .event-table__author { display: block; text-align: left; } .event-table__avater { margin-left: 0; } } /*------------------- 4.25. CTA -------------------*/ @media (min-width: 1500px) { .cta-wrap1 { margin-left: 110px; margin-right: 110px; } } .cta-wrap2 { background-color: var(--theme-color); padding: 80px; } .cta-title1 { margin-bottom: -1rem; color: var(--white-color); } .cta-title1 { margin-bottom: -1rem; color: var(--white-color); } .cta-style1 { background-color: var(--theme-color); padding: 94px 0 90px 0; text-align: center; } .cta-style1 .vs-btn, .cta-style1 .cta-title, .cta-style1 .cta-title2 { position: relative; z-index: 2; } .cta-style1 .cta-title { color: var(--white-color); font-size: 60px; line-height: 1; margin: 0 0 8px 0; } .cta-style1 .cta-title2 { color: var(--white-color); } .cta-style1.bg-center { background-position: center center; background-size: auto; } .cta-wrap3 { padding-bottom: var(--section-space); } @media (min-width: 1199px) { .cta-wrap3 { margin-bottom: -192px; padding-bottom: 0; } } .cat-layout1 { width: 100%; margin-top: -112px; max-width: 1362px; margin-left: auto; z-index: 34; position: relative; filter: drop-shadow(0px 15px 20px rgba(0, 0, 0, 0.05)); } .cta-inner { position: relative; padding: 53px 0 55px 180px; clip-path: polygon(calc(0% + 148px) 0%, 100% 0%, 100% 100%, 0% 100%); background-color: var(--white-color); } .cta-title { letter-spacing: -0.03em; } .cta-call-icon { position: absolute; left: 45px; bottom: 17px; display: inline-block; z-index: 1; font-size: 26px; transform: rotate(-45deg); color: var(--white-color); } .cta-call-icon:before { content: ""; position: absolute; right: -20px; bottom: -70px; width: 160px; height: 160px; z-index: -1; display: inline-block; transform: rotate(20deg); background-color: var(--theme-color); } .cta-box1 { background-color: var(--white-color); text-align: center; position: relative; padding: 40px 40px 45px 40px; box-shadow: 1.5px 2.598px 10px 0px rgba(139, 140, 144, 0.2); margin-bottom: 30px; border-radius: 7px; } .cta-box1:not(.style-2) { --theme-color: var(--title-color); } .cta-box1:not(.style-2) a:hover { color: #0E5AF2; } .cta-box1:not(.style-2) .vs-btn { background-color: var(--title-color); color: var(--white-color); } .cta-box1:not(.style-2) .vs-btn:after, .cta-box1:not(.style-2) .vs-btn:before { background-color: #0E5AF2; } .cta-box1:not(.style-2) .vs-btn:hover { color: var(--white-color); } .cta-box1 .cta-icon, .cta-box1 .cta-img { width: var(--img-size, 140px); height: var(--img-size, 140px); line-height: var(--img-size, 140px); overflow: hidden; margin: 5px auto 27px auto; border-radius: 40% 40% 40% 40%/40% 40% 40% 40%; transform: rotate(45deg); box-shadow: 1.5px 2.598px 10px 0px rgba(139, 140, 144, 0.2); } .cta-box1 .cta-icon img, .cta-box1 .cta-img img { width: 100%; transform: rotate(-45deg) scale(1.1); } .cta-box1 .cta-icon { box-shadow: none; background-color: var(--theme-color); } .cta-box1 .cta-icon img { width: auto; transform: rotate(-45deg) scale(1); } .cta-box1 .cta-title { font-size: 28px; position: relative; padding: 0 0 12px 0; margin-bottom: 20px; } .cta-box1 .cta-title:before { content: ""; position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--shape-size, 70px) / -2); width: var(--shape-size, 70px); height: 2px; background-color: var(--theme-color); } .cta-box1 .cta-text { font-size: 16px; line-height: 30px; margin-bottom: 25px; } .cta-box1.style-2:before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 5px; background-color: var(--theme-color); border-radius: 10px 10px 0 0; } .cta-box1.style-2 .vs-btn { background-color: var(--theme-color); } .cta-bg2, .cta-bg1 { position: absolute; top: 0; right: 0; bottom: -137px; left: 0; background-size: 100% 100%; } .cta-bg2 { bottom: 0; display: none; } .cta-video { position: relative; margin-top: 80px; } .cta-video .play-btn { z-index: 5; } .cta-shape1 { position: absolute; left: 0; bottom: 0; z-index: 4; } .cta-shape2 { position: absolute; left: 0; bottom: 0; width: 100%; max-width: 1596px; height: 815px; border-radius: 0 10px 10px 0; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .cta-shape2 { max-width: 80%; } } /* Extra large devices */ @media (max-width: 1500px) { .cat-layout1 { margin-top: -75px; } .cta-wrap2 { padding: 60px; } .cta-shape1 { max-width: 600px; } .cta-shape2 { border-radius: 0; height: 100%; } .cta-bg2 { display: block; } .cta-bg1 { display: none; } } /* Medium Large devices */ @media (max-width: 1399px) { .cat-layout1 { margin-top: 0; } .cta-wrap2 { padding: 45px; } .cta-inner { clip-path: none; padding: 53px 40px 55px 40px; } .cta-call-icon { display: none; } } /* Large devices */ @media (max-width: 1199px) { .cta-inner { padding: 53px 15px 55px 15px; } .cta-title1 { margin-bottom: -0.7rem; } } /* Medium devices */ @media (max-width: 991px) { .cta-title1 { margin: -0.5em 0 30px 0; } .cta-wrap3 { padding-bottom: var(--section-space-mobile); } .cta-box1 { padding: 40px 20px 45px 20px; } .cta-box1 .cta-title { font-size: 24px; } .cta-video { margin-top: 60px; } } /* Small devices */ @media (max-width: 767px) { .cta-wrap2 { padding: 45px 20px; } .cta-box1 .cta-title { font-size: 22px; } } /*------------------- 4.26. Popup Search Box -------------------*/ .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%; transform: translateX(-50%); transition: all ease 0.4s; } .popup-search-box button.searchClose { width: 60px; height: 60px; line-height: 60px; position: absolute; top: 40px; right: 40px; border: none; background-color: var(--theme-color); color: var(--white-color); font-size: 30px; border-radius: 50%; transition: all ease 0.4s; } .popup-search-box button.searchClose i { line-height: inherit; } .popup-search-box button.searchClose:hover { color: var(--white-color); background-color: var(--theme-color); } .popup-search-box form { position: absolute; top: 50%; left: 50%; display: inline-block; padding-bottom: 40px; cursor: auto; width: 100%; max-width: 700px; transform: translate(-50%, -50%) scale(0); transition: transform ease 0.4s; /* Large devices */ } @media (max-width: 1199px) { .popup-search-box form { max-width: 600px; } } .popup-search-box form input { font-size: 14px; 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::placeholder { color: #fff; } .popup-search-box form button { position: absolute; top: 0px; background-color: transparent; border: none; color: #fff; font-size: 20px; right: 13px; color: var(--white-color); cursor: pointer; width: 70px; height: 70px; transition: all ease 0.4s; transform: scale(1.001); } .popup-search-box form button:hover { transform: scale(1.1); } .popup-search-box.show { opacity: 1; visibility: visible; width: 100.1%; height: 100%; transition: all ease 0.4s; border-radius: 0; } .popup-search-box.show form { transition-delay: 0.5s; transform: translate(-50%, -50%) scale(1); } /*------------------- 4.27. Gallery -------------------*/ .gallery-style1, .gallery-style1 .gallery-img { margin: 0 0 25px 0; } .gallery-style1 .gallery-title { font-weight: 600; margin: 0 0 5px 0; } .gallery-style1 .gallery-category a { color: #888888; font-size: 14px; font-weight: 500; text-transform: uppercase; display: inline-block; } .gallery-style1 .gallery-category a:not(:last-child):after { content: ","; margin-right: 3px; } .gallery-style1 .gallery-category a:hover { color: var(--theme-color); } .gallery-style3 .gallery-img, .gallery-style2 .gallery-img { position: relative; overflow: hidden; } .gallery-style3 .gallery-img img, .gallery-style2 .gallery-img img { width: 100%; transform: scale(1); transition: all ease 0.4s; } .gallery-style3 .gallery-overlay, .gallery-style2 .gallery-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: var(--theme-color); opacity: 0; visibility: hidden; transition: all ease 0.4s; z-index: 1; } .gallery-style3:hover .gallery-overlay, .gallery-style2:hover .gallery-overlay { opacity: 0.8; visibility: visible; } .gallery-style3:hover .gallery-img img, .gallery-style2:hover .gallery-img img { transform: scale(1.1); } .gallery-style2 .gallery-icon { color: var(--white-color); font-size: 50px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; } .gallery-style2 .gallery-icon:hover { color: var(--title-color); } .gallery-style2 .gallery-icon { opacity: 0; visibility: hidden; transition: all ease 0.4s; } .gallery-style2:hover .gallery-icon { opacity: 1; visibility: visible; } .gallery-style3 { position: relative; margin-bottom: 24px; } .gallery-style3 .gallery-bottom { position: absolute; left: 0; bottom: 0; right: 0; z-index: 3; display: flex; align-items: center; padding: 0 20px 22px 30px; } .gallery-style3 .gallery-title { color: var(--white-color); font-weight: 600; margin: 0 0 6px 0; } .gallery-style3 .gallery-title a { color: inherit; } .gallery-style3 .gallery-title a:hover { color: var(--title-color); } .gallery-style3 .gallery-category { font-weight: 500; font-size: 14px; color: var(--white-color); } .gallery-style3 .icon-btn, .gallery-style3 .hero-layout4 .slick-arrow, .hero-layout4 .gallery-style3 .slick-arrow, .gallery-style3 .gallery-category, .gallery-style3 .gallery-title { transform: translateY(-20px); opacity: 0; visibility: hidden; transition: all ease 0.4s; } .gallery-style3 .icon-btn, .gallery-style3 .hero-layout4 .slick-arrow, .hero-layout4 .gallery-style3 .slick-arrow { transform: translateX(-30px); } .gallery-style3 .icon-btn:hover, .gallery-style3 .hero-layout4 .slick-arrow:hover, .hero-layout4 .gallery-style3 .slick-arrow:hover { background-color: var(--title-color); } .gallery-style3:hover .icon-btn, .gallery-style3:hover .hero-layout4 .slick-arrow, .hero-layout4 .gallery-style3:hover .slick-arrow, .gallery-style3:hover .gallery-category, .gallery-style3:hover .gallery-title { transform: translateY(0); opacity: 1; visibility: visible; transition-delay: 0.1s; } .gallery-style3:hover .icon-btn, .gallery-style3:hover .hero-layout4 .slick-arrow, .hero-layout4 .gallery-style3:hover .slick-arrow { transform: translateX(0); } .gallery-style3:hover .gallery-title { transition-delay: 0.2s; } .gallery-style4 { position: relative; } .gallery-style4 .gallery-img { overflow: hidden; } .gallery-style4 .gallery-img img { transform: scale(1); width: 100%; transition: all ease 0.4s; } .gallery-style4 .gallery-title { font-size: 20px; font-weight: 700; text-transform: uppercase; color: var(--white-color); margin: 0 0 4px 0; } .gallery-style4 .gallery-title a:hover { color: var(--title-color); } .gallery-style4 .gallery-degi { font-size: 15px; font-weight: 500; text-transform: uppercase; margin: 0; line-height: 1; color: var(--white-color); display: block; } .gallery-style4 .gallery-title, .gallery-style4 .gallery-degi { opacity: 0; visibility: hidden; transition: all ease 0.4s; transform: translateY(50px); } .gallery-style4 .gallery-content { position: absolute; left: 0; bottom: 0; right: 0; background-color: rgba(14, 90, 242, 0.95); padding: 28px 60px 32px 30px; overflow: hidden; transition: all ease 0.4s; opacity: 0; visibility: hidden; } .gallery-style4 .gallery-btn { position: absolute; right: 16px; right: -45px; top: 52%; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: all ease 0.4s; } .gallery-style4:hover .gallery-title, .gallery-style4:hover .gallery-degi { opacity: 1; visibility: visible; transition: all ease 0.4s; transform: translateY(0); transition-delay: 0.1s; } .gallery-style4:hover .gallery-degi { transition-delay: 0.2s; } .gallery-style4:hover .gallery-btn { right: 16px; opacity: 1; visibility: visible; } .gallery-style4:hover .gallery-img img { transform: scale(1.07); } .gallery-style4:hover .gallery-content { opacity: 1; visibility: visible; } .gallery-menu1 { background-color: var(--smoke-color); position: relative; width: max-content; margin: 0 auto 60px auto; max-width: 100%; border-radius: 9999px; text-align: center; } .gallery-menu1 button { border: none; background-color: transparent; font-size: 18px; line-height: 1; font-weight: 500; display: inline-block; position: relative; padding: 31px 51px; border-radius: 9999px; } .gallery-menu1 button:before { content: ""; position: absolute; top: 50%; left: 0; width: 1px; height: 24px; margin-top: -12px; background-color: #929292; transition: all ease 0.4s; } .gallery-menu1 button:hover { color: var(--theme-color); } .gallery-menu1 button.active::before, .gallery-menu1 button.active + button::before, .gallery-menu1 button:first-child::before { opacity: 0; visibility: hidden; } .gallery-menu1 button.active { background-color: var(--theme-color); color: var(--white-color); } @media (min-width: 1500px) { .gallery-zigzag .slick-slide:nth-child(even) { margin-top: 80px; } } .gallery-details-degi { font-size: 18px; line-height: 1; color: var(--theme-color); text-transform: uppercase; margin: 0 0 47px 0; } .gallery-details-title { margin: 68px 0 4px 0; } .gallery-box { background-color: var(--white-color); border: 1px solid rgb(228, 228, 228); margin: -65px auto 60px auto; max-width: 410px; padding: 48px 50px 20px 50px; box-shadow: 10px 17.321px 60px 0px rgba(0, 35, 160, 0.06); } .gallery-box__item { padding: 0 0 0 10px; } .gallery-box__item:not(:last-child) { border-bottom: 1px solid #dedede; margin: 0 0 28px 0; } .gallery-box__label { font-size: 16px; font-weight: 600; color: #74787c; line-height: 1; margin-bottom: 4px; display: block; } .gallery-box__title { font-size: 24px; font-weight: 600; color: var(--theme-color); } .gallery-quote { text-align: center; padding: 80px 40px 70px 40px; margin: 50px 0 50px 0; } .gallery-quote p { color: var(--white-color); font-size: 24px; line-height: 38px; margin: 27px auto 0 auto; max-width: 980px; } /* Large devices */ @media (max-width: 1199px) { .gallery-style3 { --btn-size: 40px; } .gallery-style3 .gallery-title { font-size: 20px; margin-bottom: 3px; } .gallery-style3 .gallery-category { font-size: 14px; } .gallery-style3 .gallery-bottom { padding: 0 15px 15px 20px; } .gallery-box { padding: 29px 30px 5px 30px; } .gallery-menu1 button { font-size: 16px; padding: 20px 30px; } .gallery-quote { padding: 55px 30px 50px 30px; margin: 50px 0 50px 0; } .gallery-quote p { font-size: 22px; line-height: 34px; } } /* Medium devices */ @media (max-width: 991px) { .gallery-menu1 { background-color: transparent; margin-bottom: 25px; } .gallery-menu1:before { display: none; } .gallery-menu1 button { background-color: var(--smoke-color); margin: 0 3px 10px 3px; } .gallery-menu1 button::before { display: none; } .gallery-details-title { margin: 0 0 4px 0; } .gallery-box { padding: 35px 20px 8px 20px; margin: 30px auto 38px auto; max-width: 100%; } } /* Small devices */ @media (max-width: 767px) { .gallery-quote p { font-size: 16px; line-height: 26px; } .gallery-box__title { font-size: 20px; } .gallery-box__label { font-size: 14px; margin-bottom: 6px; } .gallery-style4 .gallery-content { padding: 20px 50px 24px 20px; } .gallery-style4 .gallery-btn { right: 16px; max-width: 40px; } } /* Extra small devices */ @media (max-width: 575px) { .gallery-menu1 button { font-size: 12px; padding: 15px 24px; } } /*------------------- 4.28. Newsletter -------------------*/ .newsletter-style1 .newsletter-icon { width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; margin: -40px auto 12px auto; background-color: #001a71; color: var(--white-color); font-size: 60px; border-radius: 37% 37% 37% 37%/37% 37% 37% 37%; transform: rotate(45deg); } .newsletter-style1 .newsletter-icon i { transform: rotate(-45deg); } .newsletter-style1 .newsletter-title { color: var(--white-color); margin: 0 0 5px 0; } @media (min-width: 1399px) { .newsletter-style1 .newsletter-title { font-size: 48px; } } .newsletter-style1 .newsletter-text { color: var(--white-color); font-size: 18px; margin: 0 0 36px 0; } .newsletter-style1 .form-group { margin: 0; } .newsletter-style1 input { border: 2px solid var(--white-color); background-color: transparent; color: var(--white-color); height: 86px; padding: 0 50px 0 40px; border-radius: 9999px; font-size: 18px; } .newsletter-style1 input::-moz-placeholder { color: var(--white-color); padding: 0; } .newsletter-style1 input::-webkit-input-placeholder { color: var(--white-color); padding: 0; } .newsletter-style1 input:-ms-input-placeholder { color: var(--white-color); padding: 0; } .newsletter-style1 input::placeholder { color: var(--white-color); padding: 0; } .newsletter-style1 .vs-btn { width: 190px; height: 60px; padding: 0; position: absolute; right: 15px; top: 13px; text-transform: uppercase; border-radius: 9999px; } .newsletter-style1 + .alert { margin-bottom: 0; border-radius: 9999px; padding: 11px 31px; /* Small devices */ } @media (max-width: 767px) { .newsletter-style1 + .alert { padding: 10px 20px; } } .newsletter-bg1 { position: absolute; right: 0; bottom: 0; width: 100%; max-width: 1650px; height: 434px; } .newsletter-style2 .form-group { display: flex; margin: 0; } .newsletter-style2 .vs-btn:hover { color: var(--theme-color); } .newsletter-style2 .vs-btn::after, .newsletter-style2 .vs-btn::before { background-color: var(--white-color); } .newsletter-style2 .form-control { flex: 1; height: 80px; color: var(--title-color); font-size: 16px; color: #070707; border: none; padding: 0 40px 0 40px; border-radius: 9999px; margin-right: 15px; } .newsletter-style2 .form-control::-moz-placeholder { color: var(--title-color); } .newsletter-style2 .form-control::-webkit-input-placeholder { color: var(--title-color); } .newsletter-style2 .form-control:-ms-input-placeholder { color: var(--title-color); } .newsletter-style2 .form-control::placeholder { color: var(--title-color); } .newsletter-inner1 { padding: 100px 0 0 43px; } .newsletter-inner1 .form_title { color: var(--white-color); font-size: 48px; margin: -0.07em 0 11px 0; line-height: 1; } .newsletter-inner1 .form_text { color: var(--white-color); margin: 0 0 32px 0; font-size: 18px; } /* Hight Resoulation devices */ @media (min-width: 1921px) { .newsletter-bg1 { max-width: 90%; } } /* Large devices */ @media (max-width: 1199px) { .newsletter-inner1 { padding: 100px 0 60px 0; } .newsletter-inner1 .form-group { display: block; } .newsletter-inner1 .form-group input { height: 67px; margin-bottom: 15px; } .newsletter-bg1 { height: calc(100% - 40px); } } /* Medium devices */ @media (max-width: 991px) { .newsletter-inner1 { padding: 40px 0 60px 0; } } /* Small devices */ @media (max-width: 767px) { .newsletter-style1 input { height: 50px; } .newsletter-style1 .vs-btn { position: relative; top: 0; right: 0; margin: 20px 0 0 0; } .newsletter-style1 .newsletter-title { font-size: 26px; } .newsletter-style1 .newsletter-text { font-size: 16px; margin: 0 0 30px 0; } .newsletter-style1 .newsletter-icon { width: 140px; height: 140px; font-size: 50px; } } /*------------------- 4.29. Wocommerce -------------------*/ .woocommerce-message, .woocommerce-info { position: relative; border: 1px solid var(--border-color); padding: 11px 20px; background-color: var(--smoke-color); color: var(--title-color); font-size: 14px; font-weight: 700; margin-bottom: 30px; border-radius: 0; } .woocommerce-message a, .woocommerce-info a { color: inherit; text-decoration: underline; } .woocommerce-message a:hover, .woocommerce-info a:hover { text-decoration: underline; } .woocommerce-message:before, .woocommerce-info:before { content: "\f06a"; font-family: var(--icon-font); font-weight: 900; margin-right: 10px; } .stock-product { margin: 0 0 22px 0; } .stock-product .stock-title { margin-right: 10px; color: var(--title-color); } .stock-product i { margin-right: 5px; } .woocommerce-notices-wrapper .woocommerce-message { background-color: var(--light-color); color: var(--white-color); border-color: transparent; } .woocommerce-notices-wrapper .woocommerce-message:before { content: "\f14a"; font-weight: 300; } .woocommerce-form-login-toggle .woocommerce-info { background-color: var(--smoke-color); } .woocommerce-form-register, .woocommerce-form-coupon, .woocommerce-form-login { padding: 40px; background-color: var(--smoke-color); margin-bottom: 30px; /* 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-register p:last-child, .woocommerce-form-coupon p:last-child, .woocommerce-form-login p:last-child { margin-bottom: 0; } .woocommerce-error { background-color: var(--error-color); color: #fff; list-style: none; padding: 10px 26px; margin: 0 0 30px 0; border-radius: 5px; font-weight: 700; font-size: 14px; } nav.woocommerce-MyAccount-navigation li { border: 1px solid var(--border-color); margin: 0; border-top: none; } nav.woocommerce-MyAccount-navigation li:first-child { border-top: 1px solid var(--border-color); } 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; 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); } .woocommerce-product-attributes th, .woocommerce-product-attributes td { border: 1px solid var(--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-top: 25px; margin-bottom: 15px; border: none; } .woocommerce-grouped-product-list.group_table .woocommerce-Price-amount { font-size: 16px; color: var(--theme-color); position: relative; top: 2px; font-weight: 500; } .woocommerce-grouped-product-list.group_table del .woocommerce-Price-amount { margin-left: 5px; color: var(--body-color); font-size: 0.8em; opacity: 0.7; } .woocommerce-grouped-product-list.group_table .quantity { width: max-content; } .woocommerce-grouped-product-list.group_table .quantity label { margin: 0 0 0 10px; font-weight: 500; font-family: var(--title-font); font-size: 20px; } .woocommerce-grouped-product-list.group_table .woocommerce-grouped-product-list-item__quantity { width: 110px; } .woocommerce-grouped-product-list.group_table .qty-input { border-color: #e3e6e9; } .woocommerce-grouped-product-list.group_table tr { margin-bottom: 20px; } .woocommerce-grouped-product-list.group_table tr:last-child { border-bottom: none; } .woocommerce-grouped-product-list.group_table td { padding: 0 0; margin: 0; } .woocommerce-grouped-product-list.group_table label { margin-right: 0; } table.variations { width: max-content; position: relative; } table.variations th { border: none; text-align: left; padding: 0 15px 0 0; } table.variations td { padding: 0; } table.variations td.label { padding-right: 10px; width: max-content; } table.variations select { width: max-content; font-weight: 400; line-height: 1.5; vertical-align: middle; margin: 0; padding-right: 54px; padding-left: 20px; height: 50px; background-position: right 20px center; } table.variations .reset_variations { margin-left: 16px; display: inline-block; position: absolute; left: 100%; bottom: 25px; color: var(--title-color); text-transform: uppercase; } .woocommerce-variation.single_variation { margin-bottom: 30px; } .woocommerce-variation.single_variation .price { color: var(--title-color); font-weight: 700; font-size: 26px; } .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; } .woosq-product > .product .thumbnails { border: 1px solid var(--border-color); } .woosq-product > .product .thumbnails, .woosq-product > .product .summary { background-color: var(--white-color); } #woosq-popup .product_meta { margin-top: 20px; font-size: 16px; } #woosq-popup .product_meta > span { color: var(--title-color); } #woosq-popup .product_meta > span > a { color: var(--body-color); font-weight: 400; } #woosq-popup .product_meta > span > a:hover { color: var(--theme-color); } #woosq-popup .mfp-close { top: 10px; right: 10px; } #woosq-popup .product_title { font-size: 30px; margin-bottom: 10px; } #woosq-popup .star-rating { width: 75px; font-size: 11px; margin-right: 8px; display: inline-block; top: 2px; } #woosq-popup .woocommerce-product-rating { margin: 0 0 10px 0; } #woosq-popup .woocommerce-product-rating .woocommerce-review-link { color: var(--body-color); } #woosq-popup .price { font-size: 22px; font-weight: 500; margin-bottom: 10px; } #woosq-popup .price del { color: var(--body-color); } #woosq-popup .single-product .product .actions { align-items: center; display: flex; gap: 20px; flex-wrap: wrap; } #woosq-popup .single-product .product .actions .vs-btn { padding: 17px 30px; } #woosq-popup .single-product .product .actions > div { height: auto; overflow: visible; width: max-content; line-height: 1; } #woosq-popup .single-product .product .actions > div .quantity.style2.woocommerce-grouped-product-list-item__quantity { width: max-content; } .login-tab { margin-bottom: 30px; justify-content: center; border-bottom-color: var(--border-color); } .login-tab button.nav-link { background-color: var(--title-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(--title-color); color: var(--white-color); border-color: var(--border-color); } .wcboost-variation-swatches__wrapper { margin: 0; padding: 0; list-style: none; line-height: 1; } .wcboost-variation-swatches__item { display: inline-block; margin-right: 3px; } .wcboost-variation-swatches__item:last-child { margin-right: 0; } .wcboost-variation-swatches__name { width: var(--swatches-size, 22px); height: var(--swatches-size, 22px); line-height: var(--swatches-size, 22px); font-size: 0; display: inline-block; border-radius: 50%; } .woocommerce-noreviews { font-size: 18px; color: var(--title-color); margin: 0; font-weight: 500; background-color: var(--smoke-color); padding: 10px 20px; } .star-rating { overflow: hidden; position: relative; width: 90px; height: 1.2em; line-height: 1.2em; display: block; font-family: var(--icon-font); font-weight: 700; font-size: 14px; } .star-rating:before { content: "\f005\f005\f005\f005\f005"; color: var(--theme-color); float: left; top: 0; left: 0; position: absolute; letter-spacing: 3px; font-weight: 400; } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; } .star-rating span:before { content: "\f005\f005\f005\f005\f005"; top: 0; position: absolute; left: 0; color: var(--theme-color); letter-spacing: 3px; font-weight: 700; } .quantity { position: relative; } .quantity input { padding: 0 26px 0 26px; font-size: 20px; color: var(--title-color); border: 3px solid var(--border-color); } .quantity .qty-btn { position: absolute; right: 5px; top: 0; border: none; background-color: transparent; padding: 0; line-height: 1; width: 33px; height: 33px; color: var(--title-color); } .quantity .qty-btn:hover { color: var(--theme-color); } .quantity .quantity-minus { top: auto; bottom: 0; } .rating-select { margin-top: -0.4em; } .rating-select label { margin: 0 10px 0 0; display: inline-block; } .rating-select p.stars { margin-bottom: 0; line-height: 1; display: inline-block; } .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: "\f005"; font-weight: 400; text-indent: 0; color: var(--theme-color); } .rating-select p.stars a:hover ~ a::before { content: "\f005"; font-weight: 400; } .rating-select p.stars:hover a::before { content: "\f005"; font-weight: 700; } .rating-select p.stars.selected a.active::before { content: "\f005"; font-weight: 700; } .rating-select p.stars.selected a.active ~ a::before { content: "\f005"; font-weight: 400; } .rating-select p.stars.selected a:not(.active)::before { content: "\f005"; font-weight: 700; } .cart-notification { position: fixed; bottom: 50px; left: 50px; z-index: 999; background-color: #fff; transition: all ease 0.4s; box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.1); } .cart-notification .notification-content { display: flex; align-items: center; padding: 20px 20px; } .cart-notification h6 { margin: 0 0 5px 0; } .cart-notification p { margin: 0 0 -0.2em 0; font-size: 14px; } .cart-notification img { background-color: #f6f6f6; border: 1px solid #f6f6f6; margin: 0 20px 0 0; } /* Small devices */ @media (max-width: 767px) { .woocommerce-message, .woocommerce-info { font-size: 12px; padding: 5px 10px; } .woocommerce-message a, .woocommerce-info a { font-size: 11px; } .woocommerce-message:before, .woocommerce-info:before { margin-right: 5px; } .woocommerce-grouped-product-list.group_table .quantity label { font-size: 16px; margin: 0; } .woocommerce-grouped-product-list.group_table .woocommerce-Price-amount { font-size: 12px; } .cart-notification { left: 20px; bottom: 20px; } .cart-notification .notification-content { display: block; } .cart-notification img { margin-bottom: 15px; width: 100%; } } /* Small devices */ @media (max-width: 767px) { #woosq-popup .single-product .product .summary .summary-content { padding: 30px 15px; } #woosq-popup .single-product .product .summary .summary-content table.variations select { max-width: 160px; } .woocommerce-grouped-product-list.group_table .quantity { gap: 0 10px; } .woocommerce-grouped-product-list.group_table .woocommerce-grouped-product-list-item__quantity { width: 90px; } } /*------------------- 4.30. Products -------------------*/ .product-tag1 { position: absolute; left: 20px; top: 20px; background-color: var(--theme-color); color: var(--white-color); font-weight: 500; display: inline-block; padding: 5px 10px; line-height: 1; z-index: 2; font-size: 14px; font-family: var(--title-font); } .product-style1 { display: flex; flex-direction: row-reverse; background-color: var(--smoke-color); border: 3px solid transparent; padding: 7px; transition: all ease 0.4s; margin-bottom: 30px; } .product-style1 .product-img { background-color: var(--white-color); max-width: 165px; } .product-style1 .product-category { margin-bottom: 3px; } .product-style1 .product-category a { color: var(--body-color); text-transform: uppercase; font-weight: 500; font-size: 12px; text-decoration: underline; transition: all ease 0.4s; } .product-style1 .product-category a:not(:last-child):after { content: ","; margin-right: 5px; } .product-style1 .product-content { flex: 1; align-self: center; padding: 0 0 0 30px; } .product-style1 .product-name { font-size: 20px; margin-bottom: 7px; } .product-style1 .product-name a { color: var(--white-color); } .product-style1 .product-price { font-size: 16px; font-weight: 500; color: var(--theme-color); display: block; margin: 5px 0 12px 0; line-height: 1; transition: all ease 0.4s; } .product-style1 .product-price del { margin-left: 5px; color: var(--body-color); font-size: 0.7em; opacity: 0.7; transition: all ease 0.4s; position: relative; top: -1px; } .product-style1 .star-rating { width: 86px; font-size: 12px; } .slick-current .product-style1, .product-style1:hover { background-color: #0f0c2b; border-color: transparent; } .slick-current .product-style1 .product-category a, .product-style1:hover .product-category a { color: #c1c1c1; } .product-style1:hover { border-color: var(--theme-color); } .product-wrap1 { margin-bottom: -142px; } @media (min-width: 991px) { .product-scale-wrap .slick-slide { position: relative; z-index: 1; } .product-scale-wrap .vs-product { margin: 50px 0; } .product-scale-wrap .slick-center { z-index: 2; } .product-scale-wrap .slick-center .vs-product { transform: scale(1.5); } } .product-style2 { border: 3px solid #f2f7ff; background-color: var(--white-color); transition: all ease 0.4s; margin-bottom: 30px; } .product-style2 .product-name { font-size: 20px; margin-bottom: 2px; } .product-style2 .product-category { margin-bottom: 10px; font-size: 14px; text-transform: uppercase; transition: all ease 0.4s; } .product-style2 .product-category a { color: var(--body-color); } .product-style2 .product-price { font-size: 18px; font-weight: 500; color: var(--theme-color); display: block; line-height: 1; transition: all ease 0.4s; } .product-style2 .product-price del { margin-left: 5px; color: var(--body-color); font-size: 14px; font-weight: 500; transition: all ease 0.4s; position: relative; top: -1px; } .product-style2 .product-img { background-color: #f2f7ff; position: relative; } .product-style2 .product-img img { width: 100%; } .product-style2 .actions { position: absolute; left: 0; right: 0; text-align: center; bottom: 50%; transform: translateY(0); opacity: 0; visibility: hidden; transition: all ease 0.4s; } .product-style2 .vs-btn { padding: 15px 17.5px; font-size: 14px; text-transform: capitalize; } .product-style2 .vs-btn i { font-size: 12px; margin-left: 0; margin-right: 7px; } .product-style2 .product-content { padding: 15px 35px 25px 35px; text-align: center; } .product-style2:hover { background-color: var(--theme-color); border-color: transparent; } .product-style2:hover .actions { transform: translateY(50%); opacity: 1; visibility: visible; } .product-style2:hover .product-category a, .product-style2:hover .price del { color: #c7c7c7; } .product-style2:hover .product-price, .product-style2:hover .product-name a { color: var(--white-color); } .product-style2:hover .product-category a:hover, .product-style2:hover .product-name a:hover { color: var(--title-color); } .product-big-img { border: 3px solid #f2f7ff; margin-bottom: 30px; } .product-big-img img { background-color: #f2f7ff; } .product-img-slide .slick-dots { position: absolute; left: 0; right: 0; bottom: 30px; margin: 0; z-index: 2; } .product-img-slide .slick-dots li { margin: 0 5px; } .product-img-slide .slick-dots button { width: 10px; height: 10px; border-radius: 50%; background-color: var(--title-color); } .product-img-slide .slick-dots button:before { display: none; } .product-img-slide .slick-dots button:hover, .product-img-slide .slick-dots li.slick-active button { background-color: var(--theme-color); } .product-rating { display: flex; align-items: center; color: var(--title-color); font-weight: 500; line-height: 1; margin-bottom: 8px; } .product-rating .star-rating { margin-right: 7px; } .product_meta { font-weight: 400; font-size: 18px; text-transform: capitalize; color: var(--body-color); } .product_meta > span { display: block; margin-bottom: 5px; } .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; margin-right: 3px; font-weight: 500; color: var(--title-color); } .product_meta > span > a:not(:last-child):after, .product_meta > span > span:not(:last-child):after { content: ","; } .product_meta > span > a:first-child, .product_meta > span > span:first-child { margin-left: 5px; } .product_meta > span > a:last-child, .product_meta > span > span:last-child { margin-right: 0; } .product-about { margin-bottom: 30px; } .product-about .product-title { margin-bottom: 7px; } @media (min-width: 1399px) { .product-about .product-title { font-size: 48px; } } .product-about .text { font-size: 18px; } .product-about .price { font-size: 40px; font-weight: 700; line-height: 1; color: var(--theme-color); margin-top: 22px; margin-bottom: 16px; } .product-about .price del { margin-left: 15px; color: var(--body-color); font-weight: 500; font-size: 24px; } .product-about .text2 { font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 33px; } .product-about .screen-reader-text { display: none; } .product-about .actions { display: flex; flex-wrap: wrap; gap: 0 15px; margin-bottom: 33px; } .product-about .actions .vs-btn { height: 50px; line-height: 50px; padding-top: 0; padding-bottom: 0; border-radius: 0; } .product-about .quantity { width: 100%; margin-bottom: 20px; } .product-about .quantity > span.label { display: none; } .product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt::before { font-size: 23px; margin-top: -13px; margin-left: -12px; } .product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt, .product-about .woosq-btn { display: inline-block; width: 50px; height: 50px; line-height: 45px; font-size: 16px; background-color: transparent; color: var(--title-color); border: 2px solid var(--border-color); text-align: center; padding: 0; transition: all ease 0.4s; } .product-about .tinv-wishlist .tinvwl_add_to_wishlist_button.no-txt:hover, .product-about .woosq-btn:hover { background-color: var(--theme-color); color: var(--white-color); border-color: transparent; } .product-description { margin-top: 48px; } .product-description > .description { margin-bottom: 50px; } .product-description > .description:last-child { margin-bottom: 30px; } .related-products-title, .product-description .sec-subtitle3 { font-size: 28px; padding: 0 0 12px 0; margin: -0.1em 0 33px 0; letter-spacing: 0; color: var(--title-color); position: relative; font-weight: 600; text-transform: uppercase; font-family: var(--title-font); } .related-products-title:before, .product-description .sec-subtitle3:before { content: ""; width: 46px; height: 3px; position: absolute; left: 0; bottom: 0; background-color: var(--theme-color); display: inline-block; } .related-products-wrap { margin-top: 46px; } .product-table { margin-bottom: 53px; } .product-table th { background-color: var(--smoke-color); border-color: var(--smoke-color); border-bottom-color: var(--border-color); border-top-color: var(--border-color); width: 15%; padding: 15px 25px; } .product-table td { padding: 15px 25px; } .vs-product { position: relative; } .vs-product .added_to_cart { position: relative; 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); padding: 14.5px 24px; font-size: 14px; font-weight: 500; line-height: 1; z-index: 1; border-radius: 5px; } .vs-product .added_to_cart:before { content: "\f07a"; position: relative; font-family: var(--icon-font); margin-right: 7px; font-weight: 700; font-size: 12px; } .vs-product .added_to_cart:hover { background-color: var(--title-color); color: var(--white-color); } .vs-product .added_to_cart:hover:after { background-color: var(--white-color); } .vs-product .vs-btn.added { display: none; } .vs-product .vs-btn .fa-shopping-cart { vertical-align: top; } /* Medium Large devices */ @media (max-width: 1399px) { .product-scale-wrap .product-style1 { margin: 30px 0 30px 0; } .product-style1 .product-img { max-width: 130px; } .product-style1 .product-content { padding: 0 0 0 20px; } .product-style1 .product-name { font-size: 18px; } .product-style1 .product-price { font-size: 18px; } .product-style1 .product-price del { font-size: 12px; } .product-wrap1 { margin-bottom: 0; padding-bottom: calc(var(--section-space) - 30px); } .product-style2 .product-content { padding: 15px 25px 25px 25px; } } /* Large devices */ @media (max-width: 1199px) { .product-wrap1 { padding-bottom: calc(var(--section-space-mobile) - 30px); } .product-about .actions { margin-bottom: 23px; } .product-about .product-title { margin-bottom: 7px; font-size: 30px; } .product-about .price { font-size: 30px; margin-top: 10px; } .product-about .price del { font-size: 18px; } } /* Medium devices */ @media (max-width: 991px) { .product-scale-wrap .product-style1 { margin: 0 0 30px 0; } .related-products-title, .product-description .sec-subtitle3 { font-size: 24px; } .product-style1 .product-content { padding: 0 0 0 10px; } .product-description { margin-top: 28px; } .product-description > .description { margin-bottom: 40px; } .related-products-wrap { margin-top: 16px; } } /* Small devices */ @media (max-width: 767px) { .product-table th { width: 10%; padding: 6px 15px; } .product-table td { padding: 10px 15px; } table.variations select { max-width: 170px; } .product-about .product-title { font-size: 26px; } .product-about .text { font-size: 16px; } .product-about .text2 { font-size: 14px; letter-spacing: 0; margin-bottom: 33px; } .product-about .actions .vs-btn { width: 100%; margin-bottom: 15px; } .product-about .price { font-size: 24px; } .product-about .price del { font-size: 16px; margin-left: 8px; } .product-style1 .product-img { max-width: 100px; } .product-style1 .product-name { font-size: 16px; } .product-style1 .product-price { font-size: 14px; } } /*------------------- 4.31. Cart -------------------*/ .woocommerce-cart-form { text-align: center; } .cart_table { border: 1px solid var(--border-color); margin-bottom: 45px; } .cart_table thead { background-color: var(--theme-color); } .cart_table thead th { border: none !important; color: var(--white-color); font-size: 18px; } .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; transform: translateY(-50%); display: none; } .cart_table td { border: none; border-bottom: 1px solid var(--border-color); color: var(--body-color); padding: 20px 10px; position: relative; vertical-align: middle; line-height: 1; } .cart_table .cart-productname { font-weight: 400; font-family: var(--body-font); color: var(--body-color); } .cart_table .cart-productimage { display: inline-block; border: 2px solid var(--border-color); overflow: hidden; } .cart_table .cart-productimage img { transform: scale(1); transition: all ease 0.4s; } .cart_table .cart-productimage:hover img { transform: scale(1.1); } .cart_table .amount { font-size: 18px; font-weight: 500; color: var(--title-color); } .cart_table .cart-productname { font-size: 18px; font-weight: 500; color: var(--title-color); } .cart_table .cart-productname:hover { color: var(--theme-color); } .cart_table .remove { color: var(--theme-color); font-size: 18px; } .cart_table .remove:hover { color: var(--title-color); } .cart_table .quantity { width: max-content; display: inline-block; } .cart_table .qty-input { width: 70px; height: 30px; padding: 0 20px 0 15px; font-size: 16px; border: 1px solid var(--smoke-color); padding: 0 20px; text-align: center; font-weight: 500; color: var(--title-color); vertical-align: middle; margin: 0 -4px; } .cart_table .qty-btn { font-size: 14px; border: none; width: 30px; height: 30px; background-color: var(--smoke-color); color: var(--title-color); text-align: center; padding: 0; vertical-align: middle; } .cart_table .actions { text-align: right; vertical-align: middle; } .cart_table .actions > .vs-btn { font-size: 16px; padding: 17px 28px; margin-right: 15px; vertical-align: middle; } .cart_table .actions > .vs-btn:last-child { margin-right: 0; } .cart_table .vs-cart-coupon { float: left; margin: 0; width: 455px; max-width: 100%; display: flex; } .cart_table .vs-cart-coupon input { height: 50px; margin-right: 10px; color: var(--title-color); flex: 1; } .cart_table .vs-cart-coupon .vs-btn { font-size: 16px; padding: 17px 22px; width: max-content; } .cart_totals { border: 1px solid var(--border-color); } .cart_totals th, .cart_totals td { vertical-align: top; padding: 20px 20px; border: none; border-bottom: 1px solid var(--border-color); font-size: 14px; color: var(--title-color); width: 55%; } .cart_totals th:first-child, .cart_totals td:first-child { width: 45%; background-color: var(--smoke-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 .shipping-calculator-form .vs-btn { padding: 13px 30px; } .cart_totals .amount { font-weight: 700; font-size: 18px; } .cart_totals .order-total .amount { color: var(--theme-color); } .cart_totals input, .cart_totals select { height: 50px; padding-left: 20px; padding-right: 20px; background-position: right 20px center; font-size: 14px; } /* Medium devices */ @media (max-width: 991px) { .cart_table th { padding: 15px 4px; font-size: 14px; } .cart_table td { padding: 10px 4px; } .cart_table .amount, .cart_table .cart-productname { font-size: 14px; } .cart_table .vs-cart-coupon { width: 100%; margin-bottom: 20px; } .cart_table .actions { text-align: center; } .cart_table .cart-productimage { width: 60px; } } /* 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 var(--border-color); border-bottom: none; } .cart_table td::before { display: block; } .cart_table td:last-child { border-bottom: 1px solid var(--border-color); } .cart_table td.actions { padding-left: 15px; text-align: center; } .cart_table td.actions > .vs-btn { margin-top: 10px; margin-right: 0; display: block; width: max-content; margin-left: auto; margin-right: auto; } .cart_table td.actions > .vs-btn:last-child { margin-right: auto; } .cart_table .vs-cart-coupon { width: 100%; text-align: center; float: none; justify-content: center; display: block; padding-bottom: 10px; } .cart_table .vs-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; } } /*------------------- 4.32. Checkout -------------------*/ .woocommerce-form-coupon, .woocommerce-form-login { padding: 40px; background-color: var(--smoke-color); --bs-gutter-x: 20px; margin-bottom: 40px; } .woocommerce-form-coupon .form-group:last-child, .woocommerce-form-login .form-group:last-child { margin-bottom: 0; } .woocommerce-checkout p.form-row { margin-bottom: 0; } .woocommerce-checkout .form-select, .woocommerce-checkout .select2-container, .woocommerce-checkout .form-control { margin-bottom: var(--bs-gutter-x); } .woocommerce-checkout .form-group .form-select, .woocommerce-checkout .form-group .select2-container, .woocommerce-checkout .form-group .form-control { margin-bottom: 0; } .woocommerce-checkout .select2-container--open .select2-dropdown--above { position: relative; bottom: -30px; } .woocommerce-checkout .select2-dropdown { border: 1px solid var(--border-color); border-top: none; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered, .woocommerce-checkout .form-control:focus { color: var(--body-color); } .select2-container--default .select2-selection--single { height: 50px; border: 1px solid var(--border-color); background-color: var(--white-color); border-radius: 0; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 50px; padding-left: 30px; padding-right: 25px; color: var(--body-color); font-size: 14px; } .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); font-size: 16px; } .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: 50px; line-height: 50px; margin-right: 20px; } span.select2-selection.select2-selection--single:focus { outline: none; } .select2-container--default .select2-search--dropdown .select2-search__field { color: #000; background-color: transparent; padding-left: 20px; height: 45px; border-color: #eee; } .select2-container--default .select2-results > .select2-results__options { color: #000; } .select2-dropdown { border-color: var(--border-color); } .shipping-calculator-form .form-select, .shipping-calculator-form .form-control { height: 50px; padding-left: 20px; font-size: 14px; border-radius: 0; background-position: right 13px center; } .shipping-calculator-form .vs-btn { font-size: 14px; padding: 0 20px; width: max-content; height: 40px; } .shipping-calculator-form .select2-container--default .select2-selection--single { height: 50px; border-radius: 0; } .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 49px; padding-left: 20px; padding-right: 28px; } .shipping-calculator-form .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; line-height: 50px; margin-right: 20px; } .checkout-ordertable th, .checkout-ordertable td { border: none; vertical-align: top; padding: 7px 0; font-size: 14px; font-weight: 700; color: var(--title-color); vertical-align: middle; line-height: 1.4; } .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); } .checkout-ordertable th, .checkout-ordertable td { border: 1px solid var(--border-color); text-align: right; padding: 5px 20px; } .checkout-ordertable th { text-align: left; } .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: 10px; border-bottom: 1px solid var(--border-color); border-radius: 4px; font-size: 16px; } .woocommerce-checkout-payment ul input[type=radio] ~ label { margin-bottom: 19px; 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: var(--title-color); background-color: var(--light-color); border: 1px solid var(--border-color); border-bottom: none; font-size: 14px; padding: 10px 20px; border-radius: 4px; display: none; } .woocommerce-checkout-payment .payment_box p { margin: 0; } .vs-checkout-wrapper form.woocommerce-form { margin-bottom: 25px; } /* 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; } .woocommerce-form-coupon, .woocommerce-form-login { padding: 40px 20px; } .woocommerce-checkout select, .woocommerce-checkout .form-control, .woocommerce-checkout .form-select, .woocommerce-checkout textarea, .woocommerce-checkout input { padding: 0 25px 0 20px; } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 20px; } } /* Extra small devices */ @media (max-width: 575px) { .woocommerce-message, .woocommerce-info { font-size: 12px; padding: 11px 15px; } } /*------------------- 4.33. Wishlist -------------------*/ .tinv-wishlist input[type=checkbox] { display: inline-block; opacity: 1; visibility: visible; width: auto; height: auto; } .tinv-wishlist td { text-align: center; padding: 5px; } .tinv-wishlist .cart-empty { padding: 12px 25px; background-color: var(--smoke-color); color: var(--title-color); border-radius: 5px; font-weight: 400; font-size: 14px; } .tinv-wishlist p.return-to-shop .button { display: inline-block; background-color: var(--theme-color); color: var(--white-color); font-size: 14px; padding: 10px 25px; border-radius: 4px; 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.tinvwl-table-manage-list { font-size: 14px; } .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: 700; background-color: var(--theme-color); color: var(--white-color); padding: 0; padding: 0 20px; } .tinv-wishlist button.button:hover { background-color: var(--title-color); color: var(--white-color); } .tinv-wishlist button.button i { font-size: 1rem !important; margin-right: 3px !important; } .tinv-wishlist .product-action button { border-radius: 0; padding: 0; font-size: 13px; } .tinv-wishlist th, .tinv-wishlist td.product-name { font-size: 16px; font-weight: 700; font-family: var(--title-font); text-align: center; color: var(--title-color); } .tinv-wishlist td.product-name a { color: var(--title-color); } .tinv-wishlist td.product-name a:hover { color: var(--theme-color); } .tinv-wishlist td.product-price del { 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 a.social { background-color: var(--theme-color); color: var(--white-color); width: 30px; height: 30px; font-size: 14px; line-height: 30px; } .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); } /* Small devices */ @media (max-width: 767px) { .tinv-wishlist table { table-layout: fixed; } } /*================================= 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } /*-- 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; } .mt-n1 { margin-top: -0.25rem; } .mt-n2 { margin-top: -0.5rem; } .mt-n3 { margin-top: -1rem; } .mt-n4 { margin-top: -1.5rem; } .mt-n5 { margin-top: -3rem; } .mb-n1 { margin-bottom: -0.25rem; } .mb-n2 { margin-bottom: -0.5rem; } .mb-n3 { margin-bottom: -1rem; } .mb-n4 { margin-bottom: -1.5rem; } .mb-n5 { margin-bottom: -3rem; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .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-md-bottom, .space-extra, .space-extra-bottom { padding-bottom: calc(var(--section-space) - 30px); } /* 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; } } /*================================= 06. Pages ==================================*/ /* custom css for WordPress */ .vc-header-shape-home-11 img { width: 1600px; } @media (max-width: 1199px) { .vc-header-shape-home-11 { display: none; } } .elementor .skills-divider { height: 1.75px; background-color: var(--tb-color4); margin-bottom: 25px; } .circle_percent { flex-shrink: 0; } .blog-tlbstyle8 { flex-direction: row-reverse; justify-content: space-between; } .project-tbstyle8 .icon-btn.style4, .project-tbstyle8 .hero-layout4 .style4.slick-arrow, .hero-layout4 .project-tbstyle8 .style4.slick-arrow { --btn-size: 60px; background-color: transparent; } .counter-img .play-btn-two { right: 15px; } :root { --tb-color1: #071a3e; --tb-color2: #55595d; --tb-color3: #eeeeee; --tb-color4: #dddddd; --tb-color5: #f5f5f5; } .body-text2, .body-text3 { color: var(--tb-color2); line-height: 30px; } .body-text3 { font-size: 20px; line-height: 36px; } .header-ltb7 { position: absolute; right: 0; left: 0; top: 60px; /* Large devices */ /* Medium devices */ } .header-ltb7 .vs-menu-toggle { background-color: var(--theme-color); color: var(--white-color); } @media (max-width: 1199px) { .header-ltb7 { top: 40px; } } @media (max-width: 991px) { .header-ltb7 { top: 0; } } .header-ltb7 .container { max-width: calc(1600px + var(--container-gutters)); } .header-ltb7 .header-logo { padding-bottom: 16.5px; /* Large devices */ /* Medium devices */ } @media (max-width: 1199px) { .header-ltb7 .header-logo { padding-bottom: 0; } } @media (max-width: 991px) { .header-ltb7 .header-logo { padding: 30px 0; max-width: 170px; } } .header-ltb7 .header-shape { position: absolute; right: 0; left: 0; max-width: calc(1600px + var(--container-gutters)); margin: 0 auto; padding: 0 15px; z-index: -1; height: 100%; /* Large devices */ } .header-ltb7 .header-shape .shape { width: 1600px; } @media (max-width: 1199px) { .header-ltb7 .header-shape { display: none; } } .header-ltb7 .will-sticky .sticky-active.active { padding-bottom: 10px; } .header-ltb7 .will-sticky .sticky-active.active .header-logo { padding-bottom: 10px; padding-top: 10px; } .header-ltb7 .will-sticky .sticky-active.active .header-logo img { filter: brightness(1) invert(1); } .header-ltb7 .will-sticky .sticky-active.active .menu-styletb7 > ul > li > a { color: #0e0d0d; } .header-ltb7 .will-sticky .sticky-active.active .menu-styletb7 > ul > li > a:hover { color: var(--theme-color); } .header-ltb7 .will-sticky .sticky-active.active .media-label { color: var(--tb-color1); } .header-ltb7 .will-sticky .sticky-active.active .media-link { color: var(--tb-color1); } .menu-styletb7 { margin-left: 120px; /* Extra large devices */ /* Large devices */ } @media (max-width: 1500px) { .menu-styletb7 { margin-left: 30px; } } @media (max-width: 1199px) { .menu-styletb7 { text-align: right; } } .menu-styletb7 a { color: var(--white-color); } .menu-styletb7 > ul > li { /* Extra large devices */ } @media (max-width: 1500px) { .menu-styletb7 > ul > li { margin: 0 10px; } } .menu-styletb7 > ul > li > a { padding: 14px 0; } .menu-styletb7 ul.sub-menu li a, .menu-styletb7 ul.mega-menu li a { color: var(--title-color); } .menu-styletb7 ul.sub-menu li a:hover, .menu-styletb7 ul.mega-menu li a:hover { color: var(--theme-color); } .hero-ltb7 { background-color: var(--tb-color1); min-height: 900px; } .hero-ltb7 .container { max-width: calc(1600px + var(--container-gutters)); } .hero-ltb7 .hero-inner { min-height: 900px; padding: 314px 0 260px 0; position: relative; z-index: 1; /* Medium devices */ } @media (max-width: 991px) { .hero-ltb7 .hero-inner { padding: 150px 0 260px 0; } } .hero-ltb7 .hero-shape1, .hero-ltb7 .hero-shape2 { position: absolute; z-index: -1; } .hero-ltb7 .hero-shape1 { top: 0; bottom: 0; left: 0; } .hero-ltb7 .hero-shape2 { bottom: 0; left: auto; right: 0; } .hero-content.tb7 { position: relative; /* Small devices */ } @media (max-width: 767px) { .hero-content.tb7 { text-align: center; } } .hero-content.tb7 .hero-title { font-size: 120px; font-weight: 700; color: var(--white-color); text-transform: uppercase; max-width: 66%; margin-bottom: 0px; line-height: 1.3; /* Extra large devices */ /* Small devices */ } @media (max-width: 1500px) { .hero-content.tb7 .hero-title { font-size: 90px; } } @media (max-width: 767px) { .hero-content.tb7 .hero-title { font-size: 50px; max-width: 100%; margin-bottom: 20px; } } .hero-content.tb7 .hero-title .text { font-size: 20px; line-height: 36px; display: inline-block; text-transform: initial; font-weight: 400; max-width: 425px; /* Small devices */ } @media (max-width: 767px) { .hero-content.tb7 .hero-title .text { font-size: 17px; line-height: 34px; } } .hero-content.tb7 .hero-title .span1 { display: inline-block; } .hero-content.tb7 .tb-play-btn { position: absolute; right: 50px; top: 50%; min-width: 228px; min-height: 228px; display: inline-flex; align-items: center; justify-content: center; transform: translateY(-50%); /* Small devices */ } @media (max-width: 767px) { .hero-content.tb7 .tb-play-btn { position: static; transform: translateY(0%); } } .hero-content.tb7 .tb-play-btn .play-icon svg path { transition: all ease 0.4s; } .hero-content.tb7 .tb-play-btn .text1, .hero-content.tb7 .tb-play-btn .text2 { position: absolute; opacity: 0; visibility: hidden; transition: all ease 0.4s; animation: spin 10s linear infinite; } .hero-content.tb7 .tb-play-btn .text1 { opacity: 1; visibility: visible; } .hero-content.tb7 .tb-play-btn:hover .text1 { opacity: 0; visibility: hidden; } .hero-content.tb7 .tb-play-btn:hover .text2 { opacity: 1; visibility: visible; } .hero-content.tb7 .tb-play-btn:hover .play-icon svg path { fill: var(--white-color); transition: all ease 0.4s; } .hero-info.tb7, .hero-info.tb8 { display: flex; align-items: center; } .hero-info.tb7 .media-label, .hero-info.tb8 .media-label { font-family: var(--body-font); font-size: 16px; color: var(--white-color); margin-bottom: 0; line-height: 30px; font-weight: 400; } .hero-info.tb7 .media-link, .hero-info.tb8 .media-link { font-size: 20px; font-weight: 700; } .hero-info.tb7 .media-link a:hover, .hero-info.tb8 .media-link a:hover { color: var(--white-color); } .hero-info.tb7 .media-icon, .hero-info.tb8 .media-icon { margin-right: 20px; } .hero-info.tb8 .media-label { color: var(--tb-color2); font-weight: 700; } .hero-info.tb8 .media-link { color: var(--title-color); } .tb-area { margin-top: -213px; } .tb-area .container { max-width: calc(1600px + var(--container-gutters)); } .tb-image { position: relative; overflow: hidden; } .tb-image .sp-1, .tb-image .sp-2 { position: absolute; /* Medium devices */ } @media (max-width: 991px) { .tb-image .sp-1, .tb-image .sp-2 { display: none; } } .tb-image .sp-1 { top: -17px; left: 56px; } .tb-image .sp-2 { left: auto; right: 96px; bottom: 0; } .img-box3.tb7::before { position: absolute; content: ""; width: 148px; height: 365px; border: 5px dashed var(--tb-color1); border-radius: 21px; top: 74px; left: -35px; z-index: -1; /* Small devices */ } @media (max-width: 767px) { .img-box3.tb7::before { display: none; } } .img-box3.tb7 img { border-radius: 10px; } .img-box3.tb7 .img-1 { text-align: center; } .img-box3.tb7 .img-2 { margin: -300px 0 0 -155px; /* Medium devices */ /* Small devices */ } @media (max-width: 991px) { .img-box3.tb7 .img-2 { margin: -200px 0 0 -100px; } } @media (max-width: 767px) { .img-box3.tb7 .img-2 { margin: 0; } } .hero-info.tb8 { text-align: left; /* Small devices */ } @media (max-width: 767px) { .hero-info.tb8 { text-align: left; padding-top: 31px; } } .award-box.tb7 { padding: 35px 40px; background-color: var(--theme-color); border-radius: 10px; bottom: 35px; right: 110px; } .award-box.tb7 .award-box__icon { position: relative; color: var(--white-color); line-height: 1; margin: 0 27px 0 0; font-size: 69px; } .award-box.tb7 .award-box__number { margin: 0 0 6px 0; font-size: 48px; } .award-box.tb7 .award-box__text { font-size: 24px; } .counter-media.tb7, .counter-media.tb8 { flex-direction: column; text-align: center; gap: 20px; /* Large devices */ } @media (max-width: 1199px) { .counter-media.tb7, .counter-media.tb8 { display: flex; } } .counter-media.tb7 .counter-media__icon, .counter-media.tb8 .counter-media__icon { margin: 0 0px 0 0; background: var(--theme-color); border-radius: 50%; } .counter-media.tb7 .counter-media__number, .counter-media.tb7 .counter-media__title, .counter-media.tb8 .counter-media__number, .counter-media.tb8 .counter-media__title { color: var(--white-color); } .counter-media.tb7 .media-body__number, .counter-media.tb8 .media-body__number { display: flex; align-items: center; color: var(--white-color); margin-bottom: 0; justify-content: center; } .counter-media.tb7 .media-body__number .text, .counter-media.tb8 .media-body__number .text { line-height: 1; margin: -0.04em 0 7px 0; } .service-tb7 { position: relative; padding-top: 16px; } .service-tb7 .service-icon { position: absolute; top: 0px; left: 40px; z-index: 1; --icon-size: 80px; min-width: var(--icon-size); min-height: var(--icon-size); display: inline-flex; align-items: center; justify-content: center; background: var(--tb-color1); border-radius: 10px 0 10px 10px; } .service-tb7 .service-icon::before { position: absolute; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 16px 0 0 16px; border-color: transparent transparent transparent var(--theme-color); transform: rotate(0deg); top: 0; right: -16px; } .service-tb7 .service-img { border-radius: 10px; overflow: hidden; } .service-tb7 .service-img img { width: 100%; border-radius: 10px; transform: scale(1); transition: all ease 0.5s; } .service-tb7 .service-content { position: absolute; bottom: 0; left: 0; margin: 10px; padding: 60px 40px 35px 35px; z-index: 1; /* Small devices */ } @media (max-width: 767px) { .service-tb7 .service-content { padding: 45px 20px 31px 20px; } } .service-tb7 .service-content::before, .service-tb7 .service-content::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%); border-radius: 0 0 10px 10px; transition: all ease 0.5s; } .service-tb7 .service-content::before { background-color: var(--theme-color); } .service-tb7 .service-content::after { background-color: var(--white-color); z-index: -2; bottom: 5px; } .service-tb7 .service-body { margin-bottom: -45px; transition: all ease 0.5s; } .service-tb7 .service-title a { color: var(--white-color); } .service-tb7 .service-text { color: var(--white-color); margin: 0 0 13px 0; } .service-tb7 .tb-link { color: var(--white-color); font-size: 16px; font-weight: 700; font-family: var(--title-font); opacity: 0; visibility: hidden; transition: all ease 0.5s; display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; } .service-tb7:hover .service-content::before, .service-tb7:hover .service-content::after { background-color: var(--tb-color1); transition: all ease 0.5s; } .service-tb7:hover .service-img img { transform: scale(1.2); transition: all ease 0.5s; } .service-tb7:hover .service-body { margin-bottom: 0px; transition: all ease 0.5s; } .service-tb7:hover .tb-link { opacity: 1; visibility: visible; transition: all ease 0.5s; } .project-tbl7 .container { max-width: calc(1490px + var(--container-gutters)); } .filter-menu3 { position: relative; width: max-content; margin: 0 auto 50px auto; max-width: 100%; text-align: center; } .filter-menu3 button { border: none; background-color: rgb(238, 242, 251); font-size: 16px; line-height: 1; font-weight: 500; display: inline-block; position: relative; padding: 18px 20px; border-radius: 5px; margin-right: 5px; } .filter-menu3 button:last-child { margin-right: 0; } .filter-menu3 button:hover { color: var(--theme-color); } .filter-menu3 button.active { background-color: var(--theme-color); color: var(--white-color); } .filter-menu3 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 30px; /* Small devices */ } @media (max-width: 767px) { .filter-menu3 { gap: 15px; } } .filter-menu3 button { background-color: transparent; font-size: 24px; font-weight: 600; font-family: var(--title-font); position: relative; padding: 0 0 10px; /* Small devices */ } @media (max-width: 767px) { .filter-menu3 button { font-size: 16px; } } .filter-menu3 button::before { position: absolute; content: ""; width: 0%; height: 2px; background-color: var(--theme-color); bottom: 0; opacity: 0; visibility: hidden; transition: all ease 0.4s; } .filter-menu3 button > span { display: inline-block; opacity: 0; visibility: hidden; color: var(--theme-color); transform: translateY(-20px) scale(0); transition: all ease 0.4s; } .filter-menu3 button.active { background-color: transparent; color: var(--title-color); transition: all ease 0.4s; } .filter-menu3 button.active::before { opacity: 1; visibility: visible; width: 100%; transition: all ease 0.4s; } .filter-menu3 button.active > span { opacity: 1; visibility: visible; transition: all ease 0.4s; transform: translateY(-10px) scale(1); } .project-tbstyle7, .project-tbstyle8 { position: relative; margin-bottom: 30px; } .project-tbstyle7 .project-img, .project-tbstyle8 .project-img { overflow: hidden; border-radius: 10px; } .project-tbstyle7 .project-img img, .project-tbstyle8 .project-img img { transform: scale(1); transition: all ease 0.4s; width: 100%; } .project-tbstyle7 .project-bottom, .project-tbstyle8 .project-bottom { position: absolute; left: 30px; right: 30px; bottom: 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; background-color: var(--theme-color); border-radius: 10px; transition: all ease 0.4s; padding: 30px 35px 28px 35px; opacity: 0; visibility: hidden; } .project-tbstyle7 .icon-btn, .project-tbstyle7 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle7 .slick-arrow, .project-tbstyle7 .project-category, .project-tbstyle7 .project-title, .project-tbstyle8 .icon-btn, .project-tbstyle8 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8 .slick-arrow, .project-tbstyle8 .project-category, .project-tbstyle8 .project-title { transform: translateY(10px); transition: all ease 0.4s; opacity: 0; visibility: hidden; } .project-tbstyle7 .project-title, .project-tbstyle8 .project-title { font-size: 20px; font-weight: 600; color: var(--white-color); margin: 0 0 2px 0; } .project-tbstyle7 .project-category, .project-tbstyle8 .project-category { font-size: 16px; color: #7c98ff; margin: 0; } .project-tbstyle7 .icon-btn, .project-tbstyle7 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle7 .slick-arrow, .project-tbstyle8 .icon-btn, .project-tbstyle8 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8 .slick-arrow { --btn-size: 40px; --btn-font-size: 16px; transform: translateX(10px); } .project-tbstyle7:hover .project-bottom, .project-tbstyle8:hover .project-bottom { opacity: 1; visibility: visible; } .project-tbstyle7:hover .icon-btn, .project-tbstyle7:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle7:hover .slick-arrow, .project-tbstyle7:hover .project-title, .project-tbstyle7:hover .project-category, .project-tbstyle8:hover .icon-btn, .project-tbstyle8:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8:hover .slick-arrow, .project-tbstyle8:hover .project-title, .project-tbstyle8:hover .project-category { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0.1s; } .project-tbstyle7:hover .icon-btn, .project-tbstyle7:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle7:hover .slick-arrow, .project-tbstyle8:hover .icon-btn, .project-tbstyle8:hover .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8:hover .slick-arrow { transition-delay: 0.15s; } .project-tbstyle7:hover .project-category, .project-tbstyle8:hover .project-category { transition-delay: 0.2s; } .project-tbstyle7:hover .project-img img, .project-tbstyle8:hover .project-img img { transform: scale(1.1); } .project-tbstyle7 .project-title > a, .project-tbstyle8 .project-title > a { color: var(--white-color); } .project-tbstyle7 .project-bottom, .project-tbstyle8 .project-bottom { background: transparent; left: 0; right: 0; bottom: 0; padding: 55px 38px 55px 65px; } .project-tbstyle7 .project-bottom::before, .project-tbstyle8 .project-bottom::before { position: absolute; content: ""; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 35%, 100% 100%, 0% 100%); background: linear-gradient(180deg, #0e5af2 0%, #071a3e 94.17%); opacity: 0.8; border-radius: 10px; left: 0; } .project-tbstyle7 .project-category, .project-tbstyle8 .project-category { font-size: 20px; color: var(--white-color); font-family: var(--body-font); margin-bottom: 6px; } .project-tbstyle7 .project-title, .project-tbstyle8 .project-title { font-size: 32px; font-weight: 700; } .project-tbstyle7 .icon-btn, .project-tbstyle7 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle7 .slick-arrow, .project-tbstyle8 .icon-btn, .project-tbstyle8 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8 .slick-arrow { --btn-size: 60px; position: absolute; right: 100px; top: 20px; } .project-tbstyle7.v2 .project-bottom, .project-tbstyle8.v2 .project-bottom { padding: 30px 35px 28px 35px; } .project-tbstyle7.v2 .project-title, .project-tbstyle8.v2 .project-title { font-size: 24px; } .project-tbstyle7.v2 .project-category, .project-tbstyle8.v2 .project-category { font-size: 16px; } .project-tbstyle7.v2 .icon-btn, .project-tbstyle7.v2 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle7.v2 .slick-arrow, .project-tbstyle8.v2 .icon-btn, .project-tbstyle8.v2 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8.v2 .slick-arrow { --btn-size: 40px; right: 40px; top: 20px; } .cta-tb7wrap { padding: 25px 50px 25px 25px; position: relative; z-index: 1; clip-path: polygon(0 0, 100% 20%, 100% 80%, 0% 100%); border-radius: 100px 0px 0 100px; overflow: hidden; /* Small devices */ } @media (max-width: 767px) { .cta-tb7wrap { text-align: center; clip-path: none; border-radius: 0; padding: 25px 15px; } } .cta-tb7wrap .cta-title { margin-bottom: 0; color: var(--white-color); /* Medium devices */ } @media (max-width: 991px) { .cta-tb7wrap .cta-title { font-size: 24px; } } .cta-tb7wrap .cta-title > a:hover { color: var(--white-color); text-decoration: underline; } .cta-tb7wrap::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: var(--tb-color1); opacity: 0.8; z-index: -1; left: 0; top: 0; } .cta-tb7wrap .icon-box { --icon-size: 150px; min-width: var(--icon-size); min-height: var(--icon-size); display: inline-flex; align-items: center; justify-content: center; background: var(--theme-color); border-radius: 50%; border: 6px solid var(--white-color); } .team-tbstyle7 { text-align: right; background-color: var(--tb-color3); border-radius: 185px 185px 45px 0px; transition: background-color 0.4s; } .team-tbstyle7 .team-img { margin-bottom: 25px; } .team-tbstyle7 .team-img img { width: 100%; border-radius: 185px 185px 0px; } .team-tbstyle7 .team-title { font-size: 24px; font-weight: 700; margin-bottom: 5px; } .team-tbstyle7 .team-degi { margin-bottom: 12px; color: var(--theme-color); transition: all 0.4s; } .team-tbstyle7 .team-content { position: relative; padding: 0 30px 30px; } .team-tbstyle7 .team-social { overflow: hidden; } .team-tbstyle7 .team-social > ul { list-style: none; padding-left: 0; margin-bottom: 0; } .team-tbstyle7 .team-social > ul > li { position: relative; display: inline-block; } .team-tbstyle7 .team-social > ul > li a { display: inline-flex; align-items: center; width: 40px; height: 40px; justify-content: center; background: var(--theme-color); z-index: 1; position: relative; border-radius: 50%; color: var(--white-color); } .team-tbstyle7 .team-social > ul > li .team-social-list { position: absolute; right: 3px; top: 0; background-color: var(--white-color); padding-right: 37px; border-radius: 20px; display: inline-flex; align-items: center; transform: scaleX(0); transition: transform 0.6s; transform-origin: right; } .team-tbstyle7 .team-social > ul > li .team-social-list a { background-color: transparent; color: var(--tb-color1); transform: translateX(150px); transform-origin: right; opacity: 0; visibility: hidden; } .team-tbstyle7 .team-social > ul > li .team-social-list a:nth-of-type(1) { transition-delay: 0s; } .team-tbstyle7 .team-social > ul > li .team-social-list a:nth-of-type(2) { transition-delay: 0.1s; } .team-tbstyle7 .team-social > ul > li .team-social-list a:nth-of-type(3) { transition-delay: 0.2s; } .team-tbstyle7 .team-social > ul > li .team-social-list a:nth-of-type(4) { transition-delay: 0.3s; } .team-tbstyle7 .team-social > ul > li:hover .team-social-list { transform: scaleX(1); } .team-tbstyle7 .team-social > ul > li:hover .team-social-list a { transform: translateX(0px); opacity: 1; visibility: visible; } .team-tbstyle7 .team-social > ul > li:hover .team-social-list a:nth-of-type(1) { transition-delay: 0s; } .team-tbstyle7 .team-social > ul > li:hover .team-social-list a:nth-of-type(2) { transition-delay: 0.1s; } .team-tbstyle7 .team-social > ul > li:hover .team-social-list a:nth-of-type(3) { transition-delay: 0.2s; } .team-tbstyle7 .team-social > ul > li:hover .team-social-list a:nth-of-type(4) { transition-delay: 0.3s; } .team-tbstyle7:hover { background-color: var(--tb-color1); } .team-tbstyle7:hover .team-title a { color: var(--white-color); } .team-tbstyle7:hover .team-degi { color: var(--white-color); } .marquee-style1 { position: relative; overflow: hidden; } .marquee-style1 img { width: 100%; } .marquee { background: var(--theme-color); padding: 25px 0; } .marquee > div { display: flex; } .marquee > div .js-marquee { display: flex; } .marquee .marquee-text { font-size: 32px; font-weight: 700; color: var(--white-color); font-family: var(--title-font); text-transform: uppercase; display: flex; align-items: center; padding: 0 30px; } .counter-box { /* Large devices */ /* Medium devices */ /* Extra small devices */ } @media (max-width: 1199px) { .counter-box { margin-top: 0; justify-content: space-between; } } @media (max-width: 991px) { .counter-box { flex-wrap: wrap; justify-content: center; } } @media (max-width: 575px) { .counter-box { justify-content: center; } } .circle-column { position: relative; display: flex; align-items: center; gap: 15px; margin-bottom: 25px; /* Medium devices */ /* Small devices */ /* Extra small devices */ } @media (max-width: 991px) { .circle-column { padding: 0 15px; } } @media (max-width: 767px) { .circle-column { width: 50%; } } @media (max-width: 575px) { .circle-column { width: auto; padding: 0; } } .circle_percent { font-size: 100px; width: 100px; height: 100px; position: relative; background: var(--tb-color4); border-radius: 50%; overflow: hidden; display: inline-block; } .circle_inner { position: absolute; left: 0; top: 0; width: 100px; height: 100px; clip: rect(0 100px 100px 0.5em); } .round_per { position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: var(--theme-color); clip: rect(0 100px 100px 0.5em); transform: rotate(180deg); transition: 1.05s; } .percent_more .circle_inner { clip: rect(0 0.5em 1em 0em); } .percent_more:after { position: absolute; left: 0.5em; top: 0em; right: 0; bottom: 0; background: var(--theme-color); content: ""; } .circle_inbox { position: absolute; top: 10px; width: 80px; height: 80px; left: 10px; right: 10px; bottom: 10px; background: var(--smoke-color); z-index: 3; border-radius: 50%; } .percent_text { position: absolute; font-size: 20px; font-weight: 700; color: var(--title-color); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: inline-block; line-height: 1; } .progress-title { margin-bottom: 7px; } .progress-level { color: var(--tb-color2); font-size: 16px; } .skills-divider { height: 1.75px; background-color: var(--tb-color4); margin-bottom: 25px; } .skill-circle2 { position: relative; } .skill-circle2 .skill-text { font-size: 20px; line-height: 36px; color: var(--tb-color2); margin-bottom: 50px; } .skill-circle2 .skill-text span { font-family: var(--title-font); font-weight: 700; color: var(--theme-color); } .skill-circle2 .skill-img { width: 170px; height: 123px; margin-bottom: 50px; } .skill-circle2 .award-box { position: absolute; right: -120%; border: 4px solid var(--white-color); border-radius: 88px; padding: 25px 40px; bottom: 20px; /* Medium Large devices */ /* Large devices */ /* Medium devices */ /* Small devices */ } @media (max-width: 1399px) { .skill-circle2 .award-box { right: -75%; } } @media (max-width: 1199px) { .skill-circle2 .award-box { right: 0; bottom: 0; } } @media (max-width: 991px) { .skill-circle2 .award-box { bottom: 24%; } } @media (max-width: 767px) { .skill-circle2 .award-box { display: none; } } .skill-circle2 .award-box::before { position: absolute; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 28px 49px 28px; border-color: transparent transparent var(--white-color) transparent; transform: rotate(0deg); top: -49px; left: 50%; transform: translateX(-50%); } .skill-circle2 .award-box__text { text-transform: capitalize; } .list-style3.v2 { margin-bottom: 40px; } .list-style3.v2 ul li { margin: 0 0 15px 0; font-size: 20px; font-weight: 500; color: var(--tb-color1); /* Small devices */ } .list-style3.v2 ul li:last-child { margin-bottom: 0; } @media (max-width: 767px) { .list-style3.v2 ul li { font-size: 16px; } } .skills-tbl7 { position: relative; } .skills-shape { min-width: 70%; position: absolute; height: 100%; top: 0; background: var(--smoke-color); clip-path: polygon(0 0, 100% 0, 100% 86%, 0% 100%); /* Extra large devices */ } @media (max-width: 1500px) { .skills-shape { min-width: 100%; } } .skills-bg { position: absolute; right: 0; width: 859px; height: 912.5px; background-size: cover; top: 0; /* Extra large devices */ /* Medium Large devices */ /* Large devices */ } @media (max-width: 1500px) { .skills-bg { width: 670px; } } @media (max-width: 1399px) { .skills-bg { width: 40%; } } @media (max-width: 1199px) { .skills-bg { display: none; } } .blog-tlbstyle7, .blog-tlbstyle8 { display: flex; align-items: center; gap: 40px; background-color: var(--smoke-color); padding: 40px; border-radius: 10px; /* Medium devices */ /* Small devices */ } @media (max-width: 991px) { .blog-tlbstyle7, .blog-tlbstyle8 { flex-direction: column; } } @media (max-width: 767px) { .blog-tlbstyle7, .blog-tlbstyle8 { gap: 20px; padding: 20px; } } .blog-tlbstyle7 .blog-img, .blog-tlbstyle8 .blog-img { border-radius: 10px; overflow: hidden; min-width: 485px; /* Medium devices */ } @media (max-width: 991px) { .blog-tlbstyle7 .blog-img, .blog-tlbstyle8 .blog-img { min-width: 100%; } } .blog-tlbstyle7 .blog-meta, .blog-tlbstyle8 .blog-meta { margin-bottom: 15px; } .blog-tlbstyle7 .blog-meta a, .blog-tlbstyle8 .blog-meta a { font-size: 20px; color: var(--theme-color); text-transform: uppercase; /* Small devices */ } @media (max-width: 767px) { .blog-tlbstyle7 .blog-meta a, .blog-tlbstyle8 .blog-meta a { font-size: 16px; } } .blog-tlbstyle7 .blog-title, .blog-tlbstyle8 .blog-title { margin-bottom: 20px; } .blog-tlbstyle7 .blog-title a, .blog-tlbstyle8 .blog-title a { display: block; } .blog-tlbstyle7 .link-btn, .blog-tlbstyle8 .link-btn { display: inline-block; background: var(--white-color); padding: 16px 25px; font-weight: 700; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border-radius: 5px; } .blog-tlbstyle8 { background-color: var(--tb-color1); background-size: contain; background-position: left; } .blog-tlbstyle8 .blog-meta a { color: var(--white-color); } .blog-tlbstyle8 .blog-title { color: var(--white-color); } .blog-tlbstyle8 .blog-title a { display: block; } .blog-tlbstyle8 .link-btn { box-shadow: none; } .footer-tblayout7 { padding-bottom: 50px; } .footer-tblayout7 .footer-text2 { font-size: 18px; color: var(--white-color); line-height: 36px; /* Small devices */ } @media (max-width: 767px) { .footer-tblayout7 .footer-text2 { font-size: 16px; line-height: 28px; } } .footer-tblayout7 .widget.footer-widget { margin-bottom: 40px; } .footer-tblayout7 .widget-area { padding-top: 100px; padding-bottom: 30px; } .footer-tblayout7 .copyright-wrap { padding: 15px 30px; background-color: #0b2048; border-radius: 10px; } .footer-tblayout7 .copyright-text { color: var(--white-color); } .footer-tblayout7 .footer-social a { display: inline-flex; width: 30px; height: 30px; line-height: 0; font-size: 14px; margin: 0px 7px 0px 0px; color: var(--title-color); background-color: var(--white-color); text-align: center; border-radius: 50%; align-items: center; justify-content: center; } .footer-tblayout7 .footer-social a:hover { background-color: var(--theme-color); color: var(--white-color); } .footer-tblayout7 .form_text { color: var(--white-color); font-family: var(--title-font); margin-bottom: 28px; } .footer-tblayout7 .widget select, .footer-tblayout7 .widget input { background-color: transparent; height: 50px; border: 1px solid var(--white-color); border-radius: 5px; margin-bottom: 15px; } :root { --tb-color6: #29abe2; --tb-color7: #f4f8fb; --tb-color8: #f4f5f8; } .header-ltb8 { position: absolute; right: 0; left: 0; margin-top: 60px; margin-left: 10%; margin-right: 10%; z-index: 99999; /* Large devices */ /* Medium devices */ } .header-ltb8 .vs-menu-toggle { background-color: var(--theme-color); color: var(--white-color); /* Small devices */ } @media (max-width: 767px) { .header-ltb8 .vs-menu-toggle { margin-right: -15px; } } @media (max-width: 1199px) { .header-ltb8 { margin-left: 0%; margin-right: 0%; } } @media (max-width: 991px) { .header-ltb8 { margin-top: 20px; } } .header-ltb8 .header-btn8 { display: inline-flex; /* Medium Large devices */ } @media (max-width: 1399px) { .header-ltb8 .header-btn8 { display: none; } } .header-ltb8 .header-links li { /* Medium Large devices */ } @media (max-width: 1399px) { .header-ltb8 .header-links li { padding: 0 10px 0 0; margin: 0 10px 0 0; } } .header-ltb8 .will-sticky .sticky-active { padding: 0 15px; } .header-ltb8 .will-sticky .sticky-active .vs-menu-toggle { margin-right: -15px; } .header-ltb8 .will-sticky .sticky-active .header-btn8 { /* Medium Large devices */ /* Small devices */ } @media (max-width: 1399px) { .header-ltb8 .will-sticky .sticky-active .header-btn8 { display: inline-flex; } } @media (max-width: 767px) { .header-ltb8 .will-sticky .sticky-active .header-btn8 { display: none; } } .header-ltb8 .will-sticky .sticky-active .header-logo.v8 { padding: 15px 0; } .header-ltb8 .will-sticky .sticky-active .header-logo.v8::before, .header-ltb8 .will-sticky .sticky-active .header-logo.v8::after { display: none; } .header-ltb8 .will-sticky .sticky-active .header-logo.v8 .logo { filter: brightness(1) invert(1); } .header-ltb8 .will-sticky .sticky-active .menu-styletb8 { text-align: center; } .header-ltb8 .will-sticky .sticky-active .menu-styletb8 > ul > li { margin: 0 10px; } .header-top.style8 { padding: 12.12px 0 12.12px 248px; /* Small devices */ } @media (max-width: 767px) { .header-top.style8 { padding: 15px; } } .header-wrap8 { background-color: var(--tb-color1); border-radius: 50px 12px 30px 50px; padding: 0 10px 10px 0; } .header-wrap8 .sticky-wrapper { background-color: var(--white-color); border-radius: 16px; padding: 0 6px 0 0; } .header-logo.v8 { padding: 0 57px 18px 17px; position: relative; z-index: 1; /* Small devices */ } @media (max-width: 767px) { .header-logo.v8 { padding: 18px 30px 18px 17px; max-width: 170px; } } .header-logo.v8::before, .header-logo.v8::after { position: absolute; content: ""; } .header-logo.v8::before { width: 100%; height: 100px; background-color: var(--theme-color); left: -10px; bottom: -10px; border-radius: 50px; z-index: -1; /* Small devices */ } @media (max-width: 767px) { .header-logo.v8::before { height: 85px; } } .header-logo.v8::after { width: 100%; height: 80px; border: 2px solid var(--white-color); left: 0; bottom: 0; border-radius: 50px; z-index: -1; /* Small devices */ } @media (max-width: 767px) { .header-logo.v8::after { height: 65px; } } .menu-styletb8 a { font-size: 16px; font-weight: 700; } .menu-styletb8 > ul > li > a { padding: 18px 0; } .menu-styletb8 ul li.menu-item-has-children > a::after { content: "+"; font-size: 16px; font-family: var(--title-font); margin-left: 3px; } .hero-ltb8 { min-height: 1000px; position: relative; /* Medium devices */ } @media (max-width: 991px) { .hero-ltb8 { min-height: 820px; } } .hero-ltb8 .hero-inner { position: relative; min-height: 1000px; display: flex; align-items: end; /* Medium devices */ } @media (max-width: 991px) { .hero-ltb8 .hero-inner { min-height: 820px; } } .hero-ltb8 .hero-shape1 { position: absolute; right: 0; z-index: 2; top: 0; bottom: 0; height: 100%; } .hero-ltb8 .slick-dots { position: absolute; right: 113px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; margin: 0; gap: 10px; } .hero-ltb8 .slick-dots li { margin-right: 0; } .hero-ltb8 .slick-dots li button { width: 18px; height: 18px; background-color: transparent; border: 3px solid var(--white-color); } .hero-ltb8 .slick-dots li button::before { display: none; } .hero-ltb8 .slick-dots li.slick-active button { background-color: var(--tb-color1); } .hero-content.tb8 { position: relative; z-index: 99; max-width: 517px; margin-left: auto; margin-right: 15%; padding-bottom: 110px; padding-right: 15px; /* Medium devices */ /* Small devices */ } @media (max-width: 991px) { .hero-content.tb8 { margin-right: 5%; } } @media (max-width: 767px) { .hero-content.tb8 { margin-right: 0; padding-left: 75px; padding-right: 0; } } .hero-content.tb8 .hero-subtitle { font-size: 24px; font-weight: 700; color: var(--white-color); font-family: var(--body-font); margin: 0 0 20px 0; /* Small devices */ } @media (max-width: 767px) { .hero-content.tb8 .hero-subtitle { font-size: 18px; } } .hero-content.tb8 .hero-title { color: var(--white-color); font-size: 78px; font-weight: 700; line-height: normal; /* Small devices */ } @media (max-width: 767px) { .hero-content.tb8 .hero-title { font-size: 34px; } } .hero-content.tb8 p.hero-text { font-size: 24px; color: var(--white-color); margin: 0 0 40px 0; /* Small devices */ } @media (max-width: 767px) { .hero-content.tb8 p.hero-text { font-size: 16px; } } .play-btn-text { display: flex; align-items: center; gap: 20px; font-size: 24px; color: var(--white-color); font-weight: 700; /* Small devices */ } @media (max-width: 767px) { .play-btn-text { font-size: 16px; } } .play-btn-text .play-btn { --icon-size: 85px; --icon-font-size: 24px; } .social-media { position: fixed; z-index: 99999; background-color: var(--tb-color1); writing-mode: vertical-rl; text-align: left; transform: scaleX(-1) scaleY(-1); height: 100%; display: flex; align-items: center; padding: 70px 0; justify-content: space-between; font-size: 20px; font-weight: 700; min-width: 100px; /* Extra large devices */ } @media (max-width: 1500px) { .social-media { display: none; } } .social-media a { color: var(--white-color); font-family: var(--title-font); text-transform: uppercase; } .social-media a:hover { color: var(--theme-color); } .service-tb8 { text-align: center; margin: 0 0 30px 0; position: relative; } .service-tb8 .service-front .service-icon, .service-tb8 .service-back .service-icon { margin: 0 auto 30px auto; border: 0px solid var(--white-color); background-color: transparent; position: relative; width: var(--icon-size, 118px); height: var(--icon-size, 118px); z-index: auto; display: inline-flex; align-items: center; justify-content: center; } .service-tb8 .service-front .service-icon i, .service-tb8 .service-back .service-icon i { border: 3px solid var(--white-color); background-color: var(--theme-color); position: relative; width: var(--icon-size, 80px); height: var(--icon-size, 80px); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } .service-tb8 .service-front .service-icon > img, .service-tb8 .service-back .service-icon > img { display: inline-block; } .service-tb8 .service-front .service-icon .shape, .service-tb8 .service-back .service-icon .shape { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: -1; } .service-tb8 .service-front { width: auto; overflow: hidden; border-radius: 10px; /* Medium devices */ } @media (max-width: 991px) { .service-tb8 .service-front { width: 100%; } } .service-tb8 .service-front .service-content { padding: 30px; background-size: contain; background-position: center top; } .service-tb8 .service-front .service-icon { width: var(--icon-size, 85px); height: var(--icon-size, 85px); } .service-tb8 .service-front .service-text { color: var(--tb-color2); padding: 0 27px; margin-bottom: 30px; } .service-tb8 .service-front .service-link { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: var(--tb-color4); border-radius: 50%; position: relative; } .service-tb8 .service-front .service-link::before { position: absolute; content: ""; height: 1.5px; width: 270px; background-color: var(--tb-color1); z-index: -1; } .service-tb8 .service-front .service-title { margin-bottom: 20px; } .service-tb8 .service-back { height: 597.94px; overflow: hidden; border-radius: 10px; position: relative; z-index: 1; } .service-tb8 .service-back::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: var(--tb-color1); opacity: 0.9; left: 0; top: 0; z-index: -1; } .service-tb8 .service-back .service-content { padding: 75px 48px 75px; } .service-tb8 .service-back .service-icon { margin: 0 auto 45px auto; } .service-tb8 .service-back .service-title { margin: 0 0 26px 0; } .service-tb8 .service-back .service-text { margin: 0 9px 40px 9px; color: var(--white-color); } .service-tb8 .service-back .service-divider { display: flex; align-items: center; justify-content: center; position: relative; margin-bottom: 37px; } .service-tb8 .service-back .service-divider::before { position: absolute; content: ""; width: 100%; height: 1.5px; background-color: var(--white-color); z-index: -1; } .service-tb8 .service-back .service-divider span { display: inline-block; width: 30px; height: 30px; background: var(--white-color); border-radius: 50%; border: 8px solid var(--tb-color1); } .service-tb8 .service-back .link-btn { display: inline-block; } .marquee-style2 { position: relative; } .marquee-style2::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: var(--theme-color); opacity: 0.8; } .marquee-style2 .marquee-text { font-weight: 800; font-size: 90px; line-height: 120px; color: var(--white-color); -webkit-text-fill-color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: var(--white-color); } .marquee-style2 .marquee { background-color: transparent; padding: 63px 0; } .img-box3.tb8 .shape { position: absolute; top: 26px; right: -69px; /* Medium Large devices */ } @media (max-width: 1399px) { .img-box3.tb8 .shape { display: none; } } .img-box3.tb8 .img-1 img { border-radius: 10px; } .img-box3.tb8 .img-2 { margin: -116px -100px 0 0; text-align: right; /* Medium Large devices */ /* Small devices */ } @media (max-width: 1399px) { .img-box3.tb8 .img-2 { margin: -116px 0px 0 0; } } @media (max-width: 767px) { .img-box3.tb8 .img-2 { margin: -16px 0px 0 0; } } .img-box3.tb8 .img-2 img { border-radius: 10px; } .award-box.tb8 { bottom: 57px; left: 76px; margin-left: 0; padding: 34px 35px; background-color: var(--theme-color); align-items: center; /* Medium devices */ } @media (max-width: 991px) { .award-box.tb8 { left: 0; } } .award-box.tb8 .award-box__number { font-size: 76px; } .service-tb8-2 { background-color: var(--tb-color5); margin-bottom: 30px; border-radius: 10px; overflow: hidden; } .service-tb8-2 .service-img { position: relative; } .service-tb8-2 .service-img .img { width: 100%; } .service-tb8-2 .service-body { padding: 30px 24px 0 24px; } .service-tb8-2 .service-text { font-size: 14px; margin-bottom: 40px; } .service-tb8-2 .service-title { font-size: 20px; margin-bottom: 10px; } .service-tb8-2 .service-icon { position: absolute; right: 30px; top: -30px; width: 60px; height: 60px; display: inline-flex; align-items: center; justify-content: center; background: var(--theme-color); border-radius: 7px; } .service-tb8-2 .service-icon img { display: inline-flex; } .list-style3.tb8 { margin-bottom: 35px; } .list-style3.tb8 ul li { font-size: 20px; font-weight: 700; color: var(--tb-color1); margin: 0 0 16px 0; } .info-box { display: flex; align-items: center; padding-left: 20px; gap: 30px; } .info-box__img ul { list-style: none; margin-bottom: 0; padding-left: 0; display: flex; align-items: center; } .info-box__img ul li { margin-left: -20px; } .info-box__img ul li img { border: 2px solid var(--border-color); border-radius: 50%; } .info-box__content span { font-size: 36px; font-weight: 700; color: var(--theme-color); } .info-box__content h6 { margin-bottom: 0; text-transform: capitalize; } .offer-tblayout8 { padding: 120px 0 220px 0; background: radial-gradient(44.3% 113.4% at 50% 50%, #02318e 0%, #071a3e 100%); } .offer-style { min-width: 170px; border: 1px solid var(--tb-color6); border-radius: 10px; padding: 30px 20px 0; text-align: center; position: relative; margin-bottom: 70px; } .offer-style::before, .offer-style::after { position: absolute; content: ""; width: 15px; height: 48px; background-color: var(--theme-color); top: -1px; transition: all ease 0.4s; opacity: 0; visibility: hidden; } .offer-style::before { left: -1px; border-radius: 7.5px 0px; } .offer-style::after { left: auto; right: -1px; border-radius: 0px 7.5px; } .offer-style .offer-title { color: var(--white-color); line-height: 1; margin-bottom: 20px; } .offer-style .offer-icon { display: inherit; width: 80px; height: 80px; line-height: 80px; background: linear-gradient(180deg, #0b47bf 0%, #000000 100%); border-radius: 50%; margin: 0 auto -40px auto; } .offer-style:hover::before, .offer-style:hover::after { opacity: 1; visibility: visible; } .offer-more { padding: 12px 12px 12px 46px; background-color: rgba(255, 255, 255, 0.1); border-radius: 10px; margin-top: 60px; /* Medium Large devices */ } @media (max-width: 1399px) { .offer-more { margin-top: 20px; } } .offer-more .offer-text { color: var(--white-color); font-size: 20px; font-weight: 600; text-transform: capitalize; font-family: var(--title-font); } .brand-tb8 .brand-wrap8 { background-color: var(--theme-color); padding: 63.5px 85px; border-radius: 10px; margin-top: -100px; position: relative; z-index: 1; } .brand-style { min-height: 73px; display: flex; align-items: center; justify-content: center; } .project-tbl8 { background-color: var(--tb-color7); padding: 220px 0 120px; margin-top: -100px; } .project-tbl8 .container-wrap8 { max-width: calc(1570px + var(--container-gutters)); } .project-tbstyle8 { margin-bottom: 0; } .project-tbstyle8 .project-bottom { padding: 25px 30px; border-radius: 0; margin-right: 37px; } .project-tbstyle8 .project-bottom::before { clip-path: none; border-radius: 0; border-bottom-left-radius: 10px; } .project-tbstyle8 .project-category { font-size: 16px; } .project-tbstyle8 .project-title { font-size: 24px; } .project-tbstyle8 .icon-btn, .project-tbstyle8 .hero-layout4 .slick-arrow, .hero-layout4 .project-tbstyle8 .slick-arrow { right: 28px; top: -30px; border-radius: 50%; background-color: transparent; z-index: 1; } .project-tbstyle8 .icon-btn::before, .project-tbstyle8 .hero-layout4 .slick-arrow::before, .hero-layout4 .project-tbstyle8 .slick-arrow::before { position: absolute; content: ""; width: 100%; height: 100%; background-color: var(--white-color); z-index: -1; border-radius: 50%; left: 0; top: 0; filter: blur(2px); transition: all 0.4s; } .project-tbstyle8 .icon-btn:hover::before, .project-tbstyle8 .hero-layout4 .slick-arrow:hover::before, .hero-layout4 .project-tbstyle8 .slick-arrow:hover::before { background-color: var(--theme-color); filter: blur(2px); transition: all 0.4s; } .price-style2 { margin-left: 20px; background-color: var(--tb-color7); border-radius: 10px; position: relative; margin-bottom: 30px; } .price-style2 .price-header { display: flex; padding: 50px 35px 40px 0; align-items: flex-start; gap: 10px; justify-content: space-between; } .price-style2 .price-shape { position: absolute; right: 0; top: 116px; } .price-style2 .price-package { font-size: 20px; font-weight: 700; margin-bottom: 0; padding: 10px 30px 10px 50px; text-align: center; background-color: var(--tb-color1); color: var(--white-color); border-radius: 32px 32px 32px 0px; margin-left: -20px; position: relative; /* Medium devices */ } @media (max-width: 991px) { .price-style2 .price-package { padding: 10px 20px 10px 40px; } } .price-style2 .price-package::before { position: absolute; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 0 20px 20px 0; border-color: transparent var(--tb-color4) transparent transparent; transform: rotate(0deg); bottom: -20px; left: 0; } .price-style2 .price-amount { font-size: 64px; line-height: 1; font-weight: 700; font-family: var(--title-font); color: var(--tb-color1); display: flex; flex-direction: column; } .price-style2 .price-duration { font-size: 24px; color: var(--theme-color); } .price-style2 .price-body { padding: 0 50px 50px; /* Medium Large devices */ } @media (max-width: 1399px) { .price-style2 .price-body { padding: 0 25px 50px; } } .price-style2 .price-text { background: radial-gradient(50% 50% at 50% 50%, #0e5af2 0%, #08348c 100%); border-radius: 14.5px; text-align: center; padding: 3px 5px; font-size: 14px; color: var(--white-color); margin-bottom: 35px; } .price-style2 .price-features ul { padding-left: 0; margin-bottom: 40px; list-style: none; display: grid; gap: 10px; } .price-style2 .price-features ul li { display: flex; align-items: center; gap: 27px; color: var(--tb-color2); } .price-style2 .price-title { font-size: 24px; margin-bottom: 5px; } .price-style2 .price-hint { padding-top: 35px; } .price-style2 .price-hint ul { list-style: none; padding-left: 0; margin-bottom: 0; } .price-style2 .price-hint ul li { color: var(--tb-color2); } .footer-tblayout8, .footer-tblayout7 { position: relative; z-index: 1; } .footer-tblayout8 .overlay, .footer-tblayout7 .overlay { background-color: var(--tb-color1); opacity: 0.7; z-index: -1; } .footer-tblayout8 .shape, .footer-tblayout7 .shape { z-index: -1; } .footer-tblayout8 .footer-top-wrap, .footer-tblayout7 .footer-top-wrap { background-color: var(--tb-color1); padding: 50px 30px; } .footer-tblayout8 .widget_title, .footer-tblayout7 .widget_title { color: var(--white-color); margin: 0px 0px 40px; } .footer-tblayout8 .footer-text, .footer-tblayout7 .footer-text { color: var(--white-color); font-size: 18px; line-height: 38px; margin: -0.3em 0 40px 0; } .footer-tblayout8 .footer-info-list, .footer-tblayout7 .footer-info-list { margin-bottom: 0; } .footer-tblayout8 .footer-info-list .info, .footer-tblayout7 .footer-info-list .info { color: var(--white-color); padding-left: 42px; position: relative; } .footer-tblayout8 .footer-info-list .info:last-child, .footer-tblayout7 .footer-info-list .info:last-child { margin-bottom: 0; } .footer-tblayout8 .footer-info-list .info a, .footer-tblayout7 .footer-info-list .info a { display: block; color: var(--white-color); } .footer-tblayout8 .newsletter-form2, .footer-tblayout7 .newsletter-form2 { position: relative; } .footer-tblayout8 .newsletter-form2 .form-control, .footer-tblayout7 .newsletter-form2 .form-control { margin-bottom: 0; background-color: transparent; border: 1px solid var(--theme-color); height: 50px; } .footer-tblayout8 .newsletter-form2 .vs-btn, .footer-tblayout7 .newsletter-form2 .vs-btn { position: absolute; top: 0; right: 0; border-radius: 5px; height: 50px; width: 50px; display: inline-flex; align-items: center; justify-content: center; } .footer-tblayout8 .newsletter-form2 .vs-btn i, .footer-tblayout7 .newsletter-form2 .vs-btn i { margin-left: 0; } .footer-tblayout8 .footer-widget, .footer-tblayout7 .footer-widget { margin-bottom: 0; } .footer-tblayout8 .footer-widget.v2, .footer-tblayout7 .footer-widget.v2 { background-color: rgba(255, 255, 255, 0.05); padding: 90px 20px 30px 35px; } .footer-tblayout8 .footer-widget.widget_nav_menu a, .footer-tblayout7 .footer-widget.widget_nav_menu a { padding-left: 25px; margin-bottom: 27px; font-size: 18px; color: var(--white-color); } .footer-tblayout8 .footer-widget.widget_nav_menu a:before, .footer-tblayout7 .footer-widget.widget_nav_menu a:before { content: "\f101"; display: block; right: auto; left: 0; top: -1px; color: var(--theme-color); position: absolute; font-family: var(--icon-font); } .footer-tblayout8 .footer-widget.widget_nav_menu a:hover, .footer-tblayout7 .footer-widget.widget_nav_menu a:hover { color: var(--theme-color); transform: translateX(5px); } .footer-tblayout8 .sidebar-gallery, .footer-tblayout7 .sidebar-gallery { gap: 15px; } .footer-tblayout8 .widget-image img, .footer-tblayout7 .widget-image img { width: 100%; } .footer-tblayout8 .copyright-text, .footer-tblayout7 .copyright-text { color: var(--white-color); } .footer-tblayout8 .footer-top-wrap { /* Medium Large devices */ /* Small devices */ } @media (max-width: 1399px) { .footer-tblayout8 .footer-top-wrap { margin-bottom: 50px; } } @media (max-width: 767px) { .footer-tblayout8 .footer-top-wrap { padding: 20px 15px; } } .footer-tblayout8 .footer-widget { /* Medium Large devices */ } @media (max-width: 1399px) { .footer-tblayout8 .footer-widget { margin-bottom: 40px; } } .footer-tblayout8 .footer-widget.v2 { /* Medium Large devices */ } @media (max-width: 1399px) { .footer-tblayout8 .footer-widget.v2 { margin-bottom: 0; } } .blog-tlbstyle9 { box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); border-radius: 10px; overflow: hidden; transition: all ease 0.4s; } .blog-tlbstyle9 .blog-meta { background-color: var(--tb-color8); padding: 0 40px; margin-bottom: 50px; display: flex; align-items: center; justify-content: space-between; } .blog-tlbstyle9 .blog-date { display: inline-flex; align-items: center; flex-direction: column; font-size: 24px; font-weight: 700; background-color: var(--theme-color); color: var(--white-color); padding: 9px 18px; margin-bottom: -10px; position: relative; font-family: var(--title-font); } .blog-tlbstyle9 .blog-date span { color: var(--white-color); font-size: 16px; } .blog-tlbstyle9 .blog-date::before { position: absolute; content: ""; width: 0px; height: 0px; border-style: solid; border-width: 10px 10px 0 0; border-color: var(--tb-color1) transparent transparent transparent; transform: rotate(0deg); bottom: 0; right: -10px; transition: all ease 0.5s; } .blog-tlbstyle9 .blog-date:hover { background-color: var(--tb-color1); color: var(--white-color); } .blog-tlbstyle9 .blog-date:hover::before { border-color: var(--white-color) transparent transparent transparent; } .blog-tlbstyle9 .blog-user, .blog-tlbstyle9 .blog-cmnt { display: flex; align-items: center; font-size: 16px; font-weight: 600; color: var(--tb-color2); transition: all ease 0.4s; } .blog-tlbstyle9 .blog-user i, .blog-tlbstyle9 .blog-cmnt i { margin-right: 10px; color: var(--theme-color); transition: all ease 0.4s; } .blog-tlbstyle9 .blog-user:hover, .blog-tlbstyle9 .blog-cmnt:hover { color: var(--theme-color); } .blog-tlbstyle9 .blog-cmnt { font-size: 14px; font-weight: 500; } .blog-tlbstyle9 .blog-title { text-align: center; margin: 0 0 30px 0; padding: 0 10px; /* Medium Large devices */ } @media (max-width: 1399px) { .blog-tlbstyle9 .blog-title { font-size: 22px; padding: 0 0px; } } .blog-tlbstyle9 .blog-title a { display: block; } .blog-tlbstyle9 .blog-content { padding: 0 30px; transition: all ease 0.4s; } .blog-tlbstyle9 .blog-footer { display: flex; align-items: center; justify-content: space-between; padding: 22px 0px; border-top: 1px solid var(--border-color); } .blog-tlbstyle9 .link-btn { font-size: 14px; font-weight: 500; text-transform: capitalize; color: var(--tb-color2); } .blog-tlbstyle9:hover { background-color: var(--tb-color1); } .blog-tlbstyle9:hover .blog-title a { color: var(--white-color); } .blog-tlbstyle9:hover .blog-date::before { border-color: var(--white-color) transparent transparent transparent; } .blog-tlbstyle9:hover .link-btn, .blog-tlbstyle9:hover .blog-cmnt { color: var(--white-color); } .blog-tlbstyle9:hover .link-btn i, .blog-tlbstyle9:hover .blog-cmnt i { color: var(--white-color); } @media (max-width: 1800px) { .counter-wrap2 .counter-img { max-width: 780px; } .counter-wrap2 .counter-img .play-btn-two { bottom: 200px; } .counter-wrap2 .counter-shape2 { display: none; } } .counter-wrap2 { background: linear-gradient(180deg, #071a3e 0%, #1345a4 100%); position: relative; padding-bottom: 187px; /* Medium devices */ } .counter-wrap2 .counter-shape2 { position: absolute; right: -185px; bottom: 150px; animation: spin linear 12s infinite; } @media (max-width: 991px) { .counter-wrap2 { padding-bottom: 0; } } .counter-wrap2 .counter-img { position: absolute; bottom: -172px; left: 0; width: 853px; height: 1018px; /* Extra large devices */ /* Medium Large devices */ /* Medium devices */ } @media (max-width: 1500px) { .counter-wrap2 .counter-img { max-width: 658px; } } @media (max-width: 1399px) { .counter-wrap2 .counter-img { max-width: 600px; } } @media (max-width: 991px) { .counter-wrap2 .counter-img { position: relative; max-width: 100%; margin-top: 50px; bottom: 0; } } .counter-wrap2 .counter-img > img { width: 100%; height: 1018px; object-fit: cover; } .play-btn-two { position: absolute; right: -85px; bottom: 287px; width: 155px; height: 155px; background-color: var(--white-color); display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 4px solid var(--theme-color); box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.25); /* Medium Large devices */ /* Medium devices */ } @media (max-width: 1399px) { .play-btn-two { bottom: 200px; } } @media (max-width: 991px) { .play-btn-two { bottom: auto; right: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .counter-media.tb8 { background: var(--theme-color); margin-bottom: 80px; padding: 48px 40px; /* Medium devices */ } @media (max-width: 991px) { .counter-media.tb8 { margin-bottom: 30px; } } .why-choose8 { padding-top: 20px; } .why-choose8__text { line-height: 30px; color: var(--white-color); margin-bottom: 60px; } .why-choose8 .choose-img img { width: 100%; border-radius: 15px; } .why-choose8 .choose-title { font-size: 24px; line-height: 40px; color: var(--white-color); } .why-choose8 .choose-img, .why-choose8 .choose-content { margin-bottom: 60px; } .newsletter-wrap8 { background: radial-gradient(50% 50% at 50% 50%, #0e5af2 0%, #071a3e 100%); border-radius: 30px; position: relative; z-index: 9; padding: 56px; /* Medium devices */ } @media (max-width: 991px) { .newsletter-wrap8 { padding: 20px; padding-bottom: 0; } } .newsletter-wrap8 .newsletter-shape { position: absolute; right: 0; top: 0; height: 100%; /* Medium devices */ } @media (max-width: 991px) { .newsletter-wrap8 .newsletter-shape { display: none; } } .newsletter-wrap8 .newsletter-title { color: var(--white-color); margin-bottom: 25px; } .newsletter-wrap8 .newsletter-form { position: relative; margin-bottom: 28px; } .newsletter-wrap8 .newsletter-form .vs-btn { position: absolute; right: 0; top: 0; height: 60px; display: inline-flex; align-items: center; /* Small devices */ } @media (max-width: 767px) { .newsletter-wrap8 .newsletter-form .vs-btn { position: relative; } } .newsletter-wrap8 .newsletter-form .form-control { height: 60px; border-radius: 10px; } .newsletter-wrap8 .info-box { margin-bottom: 28px; /* Medium devices */ /* Small devices */ } @media (max-width: 991px) { .newsletter-wrap8 .info-box { justify-content: center; } } @media (max-width: 767px) { .newsletter-wrap8 .info-box { flex-wrap: wrap; } } .newsletter-wrap8 .info-box__content { padding-top: 5px; } .newsletter-wrap8 .info-box__content span, .newsletter-wrap8 .info-box__content h6 { color: var(--white-color); } .newsletter-wrap8 .newsletter-text { color: var(--white-color); /* Medium devices */ } @media (max-width: 991px) { .newsletter-wrap8 .newsletter-text { text-align: center; } } .newsletter-wrap8 .newsletter-text a { font-family: var(--title-font); font-weight: 700; color: var(--theme-color); } .newsletter-wrap8 .newsletter-img { position: absolute; bottom: 0; right: 43px; /* Medium devices */ } @media (max-width: 991px) { .newsletter-wrap8 .newsletter-img { position: relative; bottom: 0; right: 0; left: 0; } } /*# sourceMappingURL=style.css.map */