/*================================================================================================*/ /*=================[ ]=================*/ /*=================[ !!!!!!!! CSS CREATED BY RAJODIYA INFOTECH !!!!!!!! ]=================*/ /*=================[ ]=================*/ /*================================================================================================*/ /* =========================== */ /* !! SITE PAGE USE !! - 1. Home - 2. Collection List - 3. Product detail - 4. About us - 5. FAQs - 6. Contact Us - 7. Login/Register/Account - 8. Privacy Policy - 9. Blog - 10. Article - 11. Wishlist - 12. Cart - /* =========================== */ /* ============================================= */ /* !!!! VARIABLES STYLE CSS !!!! */ /* ============================================= */ /* --theme1: #0CAF60; --theme2: #75C251; --theme3: #584ED2; --theme4: #145388; --theme5: #B9406B; --theme6: #008ECC; --theme7: #922C88; --theme8: #C0A145; --theme9: #48494B; --theme10: #0C7785; */ body.theme-1{ --theme-color: #0CAF60; --second-color: #002332; --black: #000000; --light-color: #0CAF606F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-2{ --theme-color:#75C251; --second-color: #1b1b1b; --black: #000000; --light-color: #75C2516F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-3{ --theme-color: #584ED2; --second-color:#010032; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); --black: #000000; --light-color: #584ED26F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-4{ --theme-color: #145388; --second-color: #4c9adb; --black: #101214; --light-color: #1453883b; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-5{ --theme-color: #B9406B; --second-color: #020101; --black: #000000; --light-color: #B9406B6F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-6{ --theme-color: #008ECC; --second-color: #02151d; --black: #000000; --light-color: #008ECC6F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-7{ --theme-color:#922C88; --second-color: #1b0c1a; --black: #000000; --light-color: #922C886F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-8{ --theme-color: #C0A145; --second-color: #191814; --black: #000000; --light-color: #C0A1456F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-9{ --theme-color:#48494B; --second-color: #8b8b87; --black: #716f6f; --light-color: #48494B6F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.theme-10{ --theme-color:#0C7785; --second-color: #061b1e; --black: #000000; --light-color: #0C77856F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } body.custom-color{ --theme-color:var(--color-customColor); --second-color: #061b1e; --black: #000000; --light-color: #0C77856F; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); } :root { --first-font: 'Overpass', sans-serif; --second-font: 'Overpass', sans-serif; --theme-color: #0CAF60; --second-color: #002332; --light-color: #0CAF606F; --border-color: #D5EDF2; --black: #05103B; --white: #ffffff; --light-bg: #FBFCFE; --grey-color: #888888; --box-shadow:-2.37901px 23.6244px 43px var(--light-color); --h1: normal 600 51px/1.2 var(--first-font); --h2: normal 600 41px/1.2 var(--first-font); --h3: normal 600 26px/1.2 var(--first-font); --h4: normal 600 22px/1.2 var(--first-font); --h5: normal 600 18px/1.2 var(--first-font); --h6: normal 600 14px/1.2 var(--first-font); --common-text: normal 400 16px/1.4 var(--first-font); } /* body.theme-3 .btn-secondary, body.theme-4 .btn-secondary, body.theme-5 .btn-secondary, body.theme-6 .btn-secondary, body.theme-7 .btn-secondary, body.theme-8 .btn-secondary, body.theme-9 .btn-secondary, body.theme-10 .btn-secondary { color: var(--white); } */ /* body.theme-3 .btn-secondary svg path, body.theme-4 .btn-secondary svg path, body.theme-5 .btn-secondary svg path, body.theme-6 .btn-secondary svg path, body.theme-7 .btn-secondary svg path, body.theme-8 .btn-secondary svg path, body.theme-9 .btn-secondary svg path, body.theme-10 .btn-secondary svg path { fill: var(--white); } */ .main-home-first-section .section-title p { color: var(--white); } /* ============================================= */ /* !!!! SITE GLOBAL STYLE CSS !!!! */ /* ============================================= */ *, :after, :before { box-sizing: border-box; -webkit-tap-highlight-color: transparent; text-decoration: inherit; vertical-align: inherit; } html { outline: none; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } body { color: var(--black); font: var(--common-text); margin: 0; padding: 0; height: 100%; width: 100%; overflow-x: hidden; background: var(--light-bg); } body, html { scrollbar-width: none; } body::-webkit-scrollbar { display: none; } body::-moz-scrollbar { display: none; } svg, img { max-width: 100%; display: block; } a, .btn, button { cursor: pointer; text-decoration: none; outline: none; box-shadow: none; color: inherit; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; display: inline-block; } a, a:hover, a:focus, a:active, button, button:hover, button:focus, input, input:hover, input:focus, select, select:hover, select:focus, textarea, textarea:hover, textarea:focus, .btn, .btn:hover, .btn:focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus { text-decoration: none; -webkit-text-decoration-skip: objects; outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; font-family: var(--first-font); } .form-control:focus, [type="text"]:focus, [type="email"]:focus, [type="checkbox"]:focus, [type="password"]:focus, [type="file"]:focus, [type="radio"]:focus, [type="submit"]:focus, [type="date"]:focus, [type="time"]:focus, [type="tel"]:focus, [type="search"]:focus, [type="button"]:focus, [type="number"]:focus, textarea:focus, select:focus { outline: none; -webkit-box-shadow: none; -moz-box-shadow: none; -ms-box-shadow: none; -o-box-shadow: none; box-shadow: none; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { --moz-appearance: textfield; } ::-webkit-input-placeholder { color: var(--black); } :-ms-input-placeholder { color: var(--black); } ::placeholder { color: var(--black); } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; font-size: 100%; list-style: none; vertical-align: baseline; } /* ============================================= */ /* !!!! SITE TYPOGRAPHY CSS !!!! */ /* ============================================= */ p, li, ul, ol { margin: 0; padding: 0; list-style: none; font: var(--common-text); } h1, .h1 { font: var(--h1); } h2, .h2 { font: var(--h2); } h3, .h3 { font: var(--h3); } h4, .h4 { font: var(--h4); } h5, .h5 { font: var(--h5); } h6, .h6 { font: var(--h6); } h1, h2, h3, h4, h5, h6 { margin: 0; } .uppercase { text-transform: uppercase; } .text-center { text-align: center !important; } .text-left { text-align: left !important; } .text-right { text-align: right !important; } b { font-weight: bold; display: inline-block; } p:not(:last-of-type) { margin-bottom: 15px; } /* ============================================= */ /* !!!! GRID CSS !!!! */ /* ============================================= */ .container { max-width: 1320px; margin: 0 auto; padding: 0 15px; } .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; } .no-gutters { margin: 0 !important; } .row [class*="col-"] { padding: 0 15px; } .no-gutters [class*="col-"] { padding: 0; } .w-100 { width: 100%; } .h-100 { height: 100%; } .d-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; box-sizing: border-box; } .align-items-start { -ms-flex-align: start; align-items: flex-start; } .align-items-end { -ms-flex-align: end; align-items: flex-end; } .align-items-center { -ms-flex-align: center; align-items: center; } .justify-content-around { -ms-flex-pack: distribute; justify-content: space-around; } .justify-content-between { -ms-flex-pack: justify; justify-content: space-between; } .justify-content-start { -ms-flex-pack: start; justify-content: flex-start; } .justify-content-center { -ms-flex-pack: center; justify-content: center; } .justify-content-end { -ms-flex-pack: end; justify-content: flex-end; } .direction-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .no-wrap { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; } .desk-only { display: none !important; } .mobile-only { display: block !important; } /***** Columns *****/ .col-auto { flex: 0 0 auto; width: auto; } .col-1 { flex: 0 0 auto; width: 8.33333333%; } .col-2 { flex: 0 0 auto; width: 16.66666667%; } .col-3 { flex: 0 0 auto; width: 25%; } .col-4 { flex: 0 0 auto; width: 33.33333333%; } .col-5 { flex: 0 0 auto; width: 41.66666667%; } .col-6 { flex: 0 0 auto; width: 50%; } .col-7 { flex: 0 0 auto; width: 58.33333333%; } .col-8 { flex: 0 0 auto; width: 66.66666667%; } .col-9 { flex: 0 0 auto; width: 75%; } .col-10 { flex: 0 0 auto; width: 83.33333333%; } .col-11 { flex: 0 0 auto; width: 91.66666667%; } .col-12 { flex: 0 0 auto; width: 100%; } .offset-1 { margin-left: 8.33333333%; } .offset-2 { margin-left: 16.66666667%; } .offset-3 { margin-left: 25%; } .offset-4 { margin-left: 33.33333333%; } .offset-5 { margin-left: 41.66666667%; } .offset-6 { margin-left: 50%; } .offset-7 { margin-left: 58.33333333%; } .offset-8 { margin-left: 66.66666667%; } .offset-9 { margin-left: 75%; } .offset-10 { margin-left: 83.33333333%; } .offset-11 { margin-left: 91.66666667%; } @media (min-width: 576px) { .col-sm { flex: 1 0 0%; } .col-sm-auto { flex: 0 0 auto; width: auto; } .col-sm-1 { flex: 0 0 auto; width: 8.33333333%; } .col-sm-2 { flex: 0 0 auto; width: 16.66666667%; } .col-sm-3 { flex: 0 0 auto; width: 25%; } .col-sm-4 { flex: 0 0 auto; width: 33.33333333%; } .col-sm-5 { flex: 0 0 auto; width: 41.66666667%; } .col-sm-6 { flex: 0 0 auto; width: 50%; } .col-sm-7 { flex: 0 0 auto; width: 58.33333333%; } .col-sm-8 { flex: 0 0 auto; width: 66.66666667%; } .col-sm-9 { flex: 0 0 auto; width: 75%; } .col-sm-10 { flex: 0 0 auto; width: 83.33333333%; } .col-sm-11 { flex: 0 0 auto; width: 91.66666667%; } .col-sm-12 { flex: 0 0 auto; width: 100%; } .offset-sm-0 { margin-left: 0; } .offset-sm-1 { margin-left: 8.33333333%; } .offset-sm-2 { margin-left: 16.66666667%; } .offset-sm-3 { margin-left: 25%; } .offset-sm-4 { margin-left: 33.33333333%; } .offset-sm-5 { margin-left: 41.66666667%; } .offset-sm-6 { margin-left: 50%; } .offset-sm-7 { margin-left: 58.33333333%; } .offset-sm-8 { margin-left: 66.66666667%; } .offset-sm-9 { margin-left: 75%; } .offset-sm-10 { margin-left: 83.33333333%; } .offset-sm-11 { margin-left: 91.66666667%; } } @media (min-width: 768px) { .col-md { flex: 1 0 0%; } .col-md-auto { flex: 0 0 auto; width: auto; } .col-md-1 { flex: 0 0 auto; width: 8.33333333%; } .col-md-2 { flex: 0 0 auto; width: 16.66666667%; } .col-md-3 { flex: 0 0 auto; width: 25%; } .col-md-4 { flex: 0 0 auto; width: 33.33333333%; } .col-md-5 { flex: 0 0 auto; width: 41.66666667%; } .col-md-6 { flex: 0 0 auto; width: 50%; } .col-md-7 { flex: 0 0 auto; width: 58.33333333%; } .col-md-8 { flex: 0 0 auto; width: 66.66666667%; } .col-md-9 { flex: 0 0 auto; width: 75%; } .col-md-10 { flex: 0 0 auto; width: 83.33333333%; } .col-md-11 { flex: 0 0 auto; width: 91.66666667%; } .col-md-12 { flex: 0 0 auto; width: 100%; } .offset-md-0 { margin-left: 0; } .offset-md-1 { margin-left: 8.33333333%; } .offset-md-2 { margin-left: 16.66666667%; } .offset-md-3 { margin-left: 25%; } .offset-md-4 { margin-left: 33.33333333%; } .offset-md-5 { margin-left: 41.66666667%; } .offset-md-6 { margin-left: 50%; } .offset-md-7 { margin-left: 58.33333333%; } .offset-md-8 { margin-left: 66.66666667%; } .offset-md-9 { margin-left: 75%; } .offset-md-10 { margin-left: 83.33333333%; } .offset-md-11 { margin-left: 91.66666667%; } } @media (min-width: 992px) { .col-lg { flex: 1 0 0%; } .col-lg-auto { flex: 0 0 auto; width: auto; } .col-lg-1 { flex: 0 0 auto; width: 8.33333333%; } .col-lg-2 { flex: 0 0 auto; width: 16.66666667%; } .col-lg-3 { flex: 0 0 auto; width: 25%; } .col-lg-4 { flex: 0 0 auto; width: 33.33333333%; } .col-lg-5 { flex: 0 0 auto; width: 41.66666667%; } .col-lg-6 { flex: 0 0 auto; width: 50%; } .col-lg-7 { flex: 0 0 auto; width: 58.33333333%; } .col-lg-8 { flex: 0 0 auto; width: 66.66666667%; } .col-lg-9 { flex: 0 0 auto; width: 75%; } .col-lg-10 { flex: 0 0 auto; width: 83.33333333%; } .col-lg-11 { flex: 0 0 auto; width: 91.66666667%; } .col-lg-12 { flex: 0 0 auto; width: 100%; } .offset-lg-0 { margin-left: 0; } .offset-lg-1 { margin-left: 8.33333333%; } .offset-lg-2 { margin-left: 16.66666667%; } .offset-lg-3 { margin-left: 25%; } .offset-lg-4 { margin-left: 33.33333333%; } .offset-lg-5 { margin-left: 41.66666667%; } .offset-lg-6 { margin-left: 50%; } .offset-lg-7 { margin-left: 58.33333333%; } .offset-lg-8 { margin-left: 66.66666667%; } .offset-lg-9 { margin-left: 75%; } .offset-lg-10 { margin-left: 83.33333333%; } .offset-lg-11 { margin-left: 91.66666667%; } } @media (min-width: 1200px) { .col-xl { flex: 1 0 0%; } .col-xl-auto { flex: 0 0 auto; width: auto; } .col-xl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xl-3 { flex: 0 0 auto; width: 25%; } .col-xl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xl-6 { flex: 0 0 auto; width: 50%; } .col-xl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xl-9 { flex: 0 0 auto; width: 75%; } .col-xl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xl-12 { flex: 0 0 auto; width: 100%; } .offset-xl-0 { margin-left: 0; } .offset-xl-1 { margin-left: 8.33333333%; } .offset-xl-2 { margin-left: 16.66666667%; } .offset-xl-3 { margin-left: 25%; } .offset-xl-4 { margin-left: 33.33333333%; } .offset-xl-5 { margin-left: 41.66666667%; } .offset-xl-6 { margin-left: 50%; } .offset-xl-7 { margin-left: 58.33333333%; } .offset-xl-8 { margin-left: 66.66666667%; } .offset-xl-9 { margin-left: 75%; } .offset-xl-10 { margin-left: 83.33333333%; } .offset-xl-11 { margin-left: 91.66666667%; } } @media (min-width: 1400px) { .col-xxl { flex: 1 0 0%; } .col-xxl-auto { flex: 0 0 auto; width: auto; } .col-xxl-1 { flex: 0 0 auto; width: 8.33333333%; } .col-xxl-2 { flex: 0 0 auto; width: 16.66666667%; } .col-xxl-3 { flex: 0 0 auto; width: 25%; } .col-xxl-4 { flex: 0 0 auto; width: 33.33333333%; } .col-xxl-5 { flex: 0 0 auto; width: 41.66666667%; } .col-xxl-6 { flex: 0 0 auto; width: 50%; } .col-xxl-7 { flex: 0 0 auto; width: 58.33333333%; } .col-xxl-8 { flex: 0 0 auto; width: 66.66666667%; } .col-xxl-9 { flex: 0 0 auto; width: 75%; } .col-xxl-10 { flex: 0 0 auto; width: 83.33333333%; } .col-xxl-11 { flex: 0 0 auto; width: 91.66666667%; } .col-xxl-12 { flex: 0 0 auto; width: 100%; } .offset-xxl-0 { margin-left: 0; } .offset-xxl-1 { margin-left: 8.33333333%; } .offset-xxl-2 { margin-left: 16.66666667%; } .offset-xxl-3 { margin-left: 25%; } .offset-xxl-4 { margin-left: 33.33333333%; } .offset-xxl-5 { margin-left: 41.66666667%; } .offset-xxl-6 { margin-left: 50%; } .offset-xxl-7 { margin-left: 58.33333333%; } .offset-xxl-8 { margin-left: 66.66666667%; } .offset-xxl-9 { margin-left: 75%; } .offset-xxl-10 { margin-left: 83.33333333%; } .offset-xxl-11 { margin-left: 91.66666667%; } } /* ============================================= */ /* !!!! NICE SELECT CSS !!!! */ /* ============================================= */ .nice-select { -webkit-tap-highlight-color: transparent; background-color: var(--white); border: solid 1px var(--border-color); cursor: pointer; display: block; font-family: inherit; font-size: 14px; font-weight: normal; line-height: 1; outline: none; position: relative; text-align: left !important; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: 10px 35px 10px 15px; width: 100%; } .nice-select:after { border-bottom: 2px solid var(--black); border-right: 2px solid var(--black); content: ''; display: block; height: 8px; width: 8px; margin-top: -5px; pointer-events: none; position: absolute; right: 14px; top: 50%; -webkit-transform-origin: 66% 66%; -ms-transform-origin: 66% 66%; transform-origin: 66% 66%; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } .nice-select.open:after { -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .nice-select.open .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); } .nice-select.disabled { border-color: var(--border-color); color: var(--border-color); pointer-events: none; } .nice-select.disabled:after { border-color: #cccccc; } .nice-select.wide { width: 100%; } .nice-select.wide .list { left: 0 !important; right: 0 !important; } .nice-select.right { float: right; } .nice-select.right .list { left: auto; right: 0; } .nice-select.small { font-size: 12px; height: 36px; line-height: 34px; } .nice-select.small:after { height: 4px; width: 4px; } .nice-select.small .option { line-height: 34px; min-height: 34px; } .nice-select .list { background-color: var(--white); box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11); box-sizing: border-box; margin-top: 4px; opacity: 0; overflow: hidden; padding: 0; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 2; width: 100%; } .nice-select .list:hover .option:not(:hover) { background-color: transparent !important; } .nice-select .option { cursor: pointer; font-weight: 400; list-style: none; outline: none; padding-left: 18px; padding-right: 29px; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; font-size: 13px; line-height: 1; padding: 10px 15px; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; } .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus { background-color: var(--second-color); } .nice-select .option.selected { font-weight: bold; } .nice-select .option.disabled { background-color: transparent; color: #999; cursor: default; } .no-csspointerevents .nice-select .list { display: none; } .no-csspointerevents .nice-select.open .list { display: block; } /* ============================================= */ /* !!!! SLICK SLIDER CSS !!!! */ /* ============================================= */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { display: table; content: ""; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { display: none; float: left; height: 100%; min-height: 1px; } [dir="rtl"] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; outline: none; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; } .slick-arrow.slick-hidden { display: none; } .slick-dots { display: flex !important; align-items: center; justify-content: center; z-index: 1; } .slick-dots li:not(:last-child) { margin-right: 5px; } .slick-dots li { display: flex; height: 10px; width: 10px; background: var(--white); border-radius: 100%; border: 1px solid var(--theme-color); } .slick-dots li.slick-active { background: var(--theme-color); } .slick-dots li button { display: none; } .slick-arrow { width: 40px; height: 40px; position: absolute; top: 50%; font-size: 0; border: 0; outline: none; z-index: 1; border-radius: 0; padding: 0; background-color: var(--second-color); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .slick-arrow:hover { background-color: var(--theme-color); } .slick-arrow svg path { fill: var(--white); } /* .slick-disabled { opacity: 0.3; } */ .slick-arrow.slick-next { right: 0; left: auto; } .slick-arrow.slick-prev { right: auto; left: 0; -webkit-transform: translateY(-50%) scale(-1); -moz-transform: translateY(-50%) scale(-1); -ms-transform: translateY(-50%) scale(-1); -o-transform: translateY(-50%) scale(-1); transform: translateY(-50%) scale(-1); } .slick-arrow:focus, .slick-arrow:hover { background-color: var(--theme-color); } .slick-lightbox { position: fixed; top: 0; left: 0; z-index: 3; width: 100%; height: 100%; background: var(--theme-color); -webkit-transition: opacity 0.5s ease; transition: opacity 0.5s ease; -moz-transition: opacity 0.5s ease; -ms-transition: opacity 0.5s ease; -o-transition: opacity 0.5s ease; } .slick-lightbox .slick-loading .slick-list { background-color: transparent; } .slick-lightbox .slick-prev { left: 15px; } .slick-lightbox .slick-next { right: 15px; } .slick-lightbox-inner .slick-arrow { background: var(--white) url(../images/right-arrow.png); background-repeat: no-repeat; background-position: 50% 50%; } .slick-lightbox-hide { opacity: 0; } .slick-lightbox-hide-init { position: absolute; top: -9999px; opacity: 0; } .slick-lightbox-inner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .slick-lightbox-slick-item { text-align: center; overflow: hidden; } .slick-lightbox-slick-item:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; } .slick-caption-bottom .slick-lightbox-slick-item .slick-lightbox-slick-item .slick-lightbox-slick-caption { position: absolute; bottom: 0; left: 0; text-align: center; width: 100%; margin-bottom: 20px; } .slick-caption-dynamic .slick-lightbox-slick-item .slick-lightbox-slick-item .slick-lightbox-slick-caption { display: block; text-align: center; } .slick-lightbox-slick-item-inner { display: inline-block; vertical-align: middle; max-width: 90%; max-height: 90%; } .slick-lightbox-slick-img { margin: 0 auto; display: block; max-width: 90%; max-height: 90%; } .slick-lightbox-slick-caption { margin: 10px 0 0; display: block; color: var(--white); } .slick-lightbox-close { position: absolute; top: 15px; right: 15px; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; padding: 0; border: none; } .slick-lightbox .close svg { height: 100%; width: 100%; } .slick-lightbox .close { position: absolute; top: 20px; right: 20px; color: var(--white); opacity: 1; background: transparent; border: none; height: 27px; width: 27px; padding: 0; } .open-lightbox { height: 50px; width: 50px; background: rgba(32, 30, 30, 0.49); position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; z-index: 1; display: flex; align-items: center; justify-content: center; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; } .slide-arrow svg { height: 12px; width: 22px; margin: 0 auto; } .common-arrows .slick-arrow { width: 35px; height: 35px; background-color: var(--second-color); } .common-arrows .slide-arrow svg { height: 10px; width: 17px; } .common-arrows .slide-arrow svg path { fill: var(--white); } /* ============================================= */ /* !!!! COMMON BUTTON !!!! */ /* ============================================= */ .btn { text-align: center; padding: 10px 15px; font-family: var(--first-font); color: var(--white); background-color: var(--second-color); box-shadow: none; appearance: none; outline: none; cursor: pointer; border: 1px solid var(--second-color); position: relative; border-radius: 10px; font-weight: 600; font-size: 14px; line-height: 17px; display: inline-flex; align-items: center; justify-content: center; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; -webkit-appearance: none; -moz-appearance: none; appearance: none; /* max-width: 220px; */ } .btn svg { flex-shrink: 0; margin-left: 15px; height: auto; width: 20px; } .btn svg path { fill: var(--white); -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } .btn:hover, .btn:focus { background-color: var(--theme-color); border-color: var(--theme-color); color: var(--white); } .btn:focus svg path, .btn:hover svg path { fill: var(--white); } .link-btn { font-weight: 700; font-size: 14px; line-height: 17px; display: inline-flex; align-items: center; letter-spacing: 0.1em; text-transform: uppercase; color: var(--second-color); -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } .link-btn svg { fill: var(--second-color); margin-left: 13px; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } .link-btn:hover { color: var(--black); } .link-btn:hover svg { fill: var(--black); } .btn-secondary { display: inline-flex; align-items: center; padding: 10px 15px; background: var(--theme-color); border: 1px solid var(--theme-color); color: var(--white); justify-content: center; font-size: 14px; font-weight: 600; border-radius: 10px; transition: all ease-in-out 0.4s; -webkit-transition: all ease-in-out 0.4s; -moz-transition: all ease-in-out 0.4s; -ms-transition: all ease-in-out 0.4s; -o-transition: all ease-in-out 0.4s; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .btn-secondary svg { width: 20px; height: auto; margin-left: 15px; } .btn-secondary svg path { transition: all ease-in-out 0.4s; -webkit-transition: all ease-in-out 0.4s; -moz-transition: all ease-in-out 0.4s; -ms-transition: all ease-in-out 0.4s; -o-transition: all ease-in-out 0.4s; fill: var(--white); } .btn-secondary:hover { background: var(--second-color); color: var(--white); } .btn-secondary:hover svg path { fill: var(--white); } .btn-secondary.white-btn svg path { fill: var(--white); } .btn-secondary.white-btn:hover { border: 1px solid var(--theme-color); color: var(--theme-color); background: var(--white); } .btn-secondary.white-btn:hover svg path { fill: var(--theme-color); } /* ============================================= */ /* !!!! FORM CSS !!!! */ /* ============================================= */ .form-control, input:not([type="submit"]), input:not([type="checkbox"]), input:not([type="radio"]), select, textarea { position: relative; border: 1px solid var(--border-color); display: block; width: 100%; padding: 15px 20px; background: var(--white); font-size: 14px; line-height: 1; color: var(--black); } textarea { resize: none; } form .row { margin: 0 -8px; } form .row [class*="col-"] { padding: 0 10px; } .form-group { margin-bottom: 15px; } .form-group label { display: inline-block; margin-bottom: 10px; font-size: 14px; font-weight: 500; } sup { top: -0.5em; } sub, sup { position: relative; font-size: 75%; line-height: 0; vertical-align: baseline; } .form-group label sup { color: red; } .checkbox-custom input { padding: 0; height: initial; width: initial; margin-bottom: 0; display: none; cursor: pointer; } .checkbox-custom label { position: relative; display: flex; align-items: center; cursor: pointer; font-size: 14px; } .checkbox-custom label:before { content: ''; --webkit-appearance: none; background-color: transparent; border: 1px solid var(--grey-color); padding: 10px; display: inline-block; position: relative; vertical-align: middle; cursor: pointer; margin-right: 15px; } .checkbox-custom input:checked+label:before { background-color: var(--theme-color); border-color: var(--theme-color); } .checkbox-custom input:checked+label:after { content: ''; display: block; position: absolute; top: 50%; left: 9px; width: 5px; height: 9px; border: solid var(--white); border-width: 0px 2px 2px 0; transform: translateY(-50%) rotate(45deg); -webkit-transform: translateY(-62%) rotate(45deg); -moz-transform: translateY(-50%) rotate(45deg); -ms-transform: translateY(-50%) rotate(45deg); -o-transform: translateY(-50%) rotate(45deg); } .checkbox-custom label a { text-decoration: underline; font-weight: 600; } /** RADIO BUTTON CSS **/ .radio-group input[type="radio"] { display: none; padding: 0; border: 0; background: transparent; } .radio-group label { cursor: pointer; position: relative; font-size: 12px; padding-left: 24px; color: var(--theme-color); } .radio-group label::before { content: ""; position: absolute; width: 15px; height: 15px; background-color: transparent; border: 2px solid var(--theme-color); border-radius: 50%; top: 50%; left: 0; transform: translateY(-50%); transition: border-color 400ms ease; -webkit-transition: border-color 400ms ease; -moz-transition: border-color 400ms ease; -ms-transition: border-color 400ms ease; -o-transition: border-color 400ms ease; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .radio-group label::after { content: ""; position: absolute; width: 13px; height: 13px; background-color: var(--theme-color); border: 2px solid var(--theme-color); border-radius: 50%; top: 50%; left: 1px; transform: translateY(-50%) scale(0); transition: transform 400ms ease; right: auto; -webkit-transform: translateY(-50%) scale(0); -moz-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); -o-transform: translateY(-50%) scale(0); -webkit-transition: transform 400ms ease; -moz-transition: transform 400ms ease; -ms-transition: transform 400ms ease; -o-transition: transform 400ms ease; } .radio-group input[type="radio"]:checked+label::before { border-color: var(--theme-color); } .radio-group input[type="radio"]:checked+label::after { transform: translateY(-50%) scale(0.55); -webkit-transform: translateY(-50%) scale(0.55); -moz-transform: translateY(-50%) scale(0.55); -ms-transform: translateY(-50%) scale(0.55); -o-transform: translateY(-50%) scale(0.55); } /***** COMMON CSS ****/ body.active-menu, body.no-scroll { overflow: hidden; } .right-gliter { bottom: 0; right: 0; } .gliter-img { position: absolute; z-index: -1; height: 100%; } .padding-top { padding-top: 80px; } .padding-bottom { padding-bottom: 80px; } .section-title { margin-bottom: 26px; color: var(--theme-color); } .section-title b { color: var(--second-color); } .section-title.text-center { max-width: 690px; margin-left: auto; margin-right: auto; } .section-title.text-center h2+p { margin-top: 15px; } .section-title.text-center .btn-group { justify-content: center; margin-top: 20px; } .section-title p { color: var(--black); } .subtitle { letter-spacing: 2px; color: var(--grey-color); text-transform: uppercase; margin-bottom: 10px; } .offset-container { position: relative; } .offset-left { margin-left: calc((100% - 1320px) / 2); padding-left: 15px; } .offset-left .row { margin-right: 0; } .offset-left .row [class*="col-"]:last-child { padding-right: 0; } .offset-right { margin-right: calc((100% - 1320px) / 2); margin-left: 0; padding-right: 15px; } /* ============================================= */ /* !!!! CUSTOMIZE THE NAVBAR !!!! */ /* ============================================= */ .site-header { position: fixed; left: 0; right: 0; top: 0; z-index: 3; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s; } .site-header.header-style-one { background: var(--white); } .site-header.header-style-one.head-sticky { box-shadow: -2.37901px 23.6244px 44.5228px rgba(182, 186, 203, 0.3); } .homepage .site-header.header-style-one { background: transparent; } .homepage .site-header.header-style-one.head-sticky { background: var(--theme-color); } .header-style-one .main-navigationbar .menu-items-col .main-nav>li:not(:last-of-type) { margin-right: 30px; } .header-style-one .main-navigationbar .menu-items-col .main-nav>li { padding: 20px 0; line-height: 1; display: flex; align-items: center; } .header-style-one .main-navigationbar .menu-items-col .main-nav>li>a { position: relative; color: var(--black); display: inline-flex; align-items: center; font-size: 16px; line-height: 1; } .header-style-one .main-navigationbar .menu-items-col .main-nav>li.lnk-btn>a { background: var(--second-color); color: var(--white); padding: 11px 15px; border-radius: 30px; } .header-style-one .main-navigationbar .menu-items-col .main-nav>li.lnk-btn>a svg { margin-left: 10px; } .logo-col { max-width: 150px; width: 100%; } .logo-col a { display: block; } a svg path { -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; } /* announcebar */ .header-style-one .announcebar { background-color: var(--second-color); padding: 12px 12px 12px 12px; color: var(--white); text-transform: capitalize; position: relative; } .header-style-one .announcebar #announceclose { position: absolute; right: 16px; top: 50%; background: transparent; border: none; outline: none; padding: 0; margin: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } .header-style-one .announcebar svg { fill: var(--white); width: 16px; height: 16px; } .header-style-one .announcebar p a { text-decoration: underline; font-weight: 700; } /* Mobile menu */ .mobile-menu-wrapper { position: fixed; z-index: 4; background: var(--white); top: 0; height: 100%; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: translate(100%, 0px); -moz-transform: translate(100%, 0px); -ms-transform: translate(100%, 0px); -o-transform: translate(100%, 0px); transform: translate(100%, 0px); right: 0; width: 100%; max-width: 400px; } .mobile-menu-wrapper.active-menu { transform: translate(0%, 0px); -webkit-transform: translate(0%, 0px); -moz-transform: translate(0%, 0px); -ms-transform: translate(0%, 0px); -o-transform: translate(0%, 0px); } .mobile-menu-wrapper .menu-close-icon { text-align: right; padding: 15px 20px; background: var(--theme-color); } .mobile-menu-wrapper .menu-close-icon svg path { fill: var(--white); } .mobile-menu-wrapper .mobile-menu-bar>ul { height: calc(100vh - 48px); overflow: auto; padding: 10px 20px; background: var(--white); } .mobile-menu-wrapper .mobile-menu-bar>ul>li { margin-top: 12px; } .overlay { transition: all ease-in-out 0.4s; -webkit-transition: all ease-in-out 0.4s; -moz-transition: all ease-in-out 0.4s; -ms-transition: all ease-in-out 0.4s; -o-transition: all ease-in-out 0.4s; } .menu-overlay::after, .overlay.active, .cartOpen .overlay::after { content: " "; z-index: 3; background: rgba(0, 0, 0, 0.7); left: 0; top: 0; width: 100%; height: 100%; position: fixed; } /* landing page start */ .main-home-first-section { background: var(--theme-color); padding-top: 200px; padding-bottom: 160px; overflow: hidden; } .banner-content { color: var(--white); padding-right: 50px; } .banner-content h1 { margin-bottom: 26px; } .banner-content h1 b { color: var(--second-color); display: inline; } .btn-group { display: flex; align-items: center; } .btn-group>*:not(:last-of-type) { margin-right: 15px; } .banner-content .btn-group { margin-top: 26px; } .main-home-first-section .btn:hover, .main-home-first-section .btn:focus { background: var(--white); color: var(--second-color); border-color: var(--white); } .main-home-first-section .btn:hover svg path, .main-home-first-section .btn:focus svg path { fill: var(--second-color); } .banner-image-wrapper { position: relative; z-index: 1; } .banner-image-wrapper img { width: 100%; } .rtl-banner{ display: none; } .main-banner { display: block; } .banner-image-wrapper .ripple-icon.position-top { top: -120px; left: auto; right: 190px; bottom: auto; } .ripple-icon { position: absolute; left: -80px; bottom: 260px; z-index: -1; } .pulse0, .pulse1, .pulse2, .pulse3 { width: 323px; height: 323px; border-radius: 50%; z-index: 1; text-align: center; position: absolute; -webkit-transform: scale(.1, .1); transform: scale(.1, .1); border: 1px solid var(--white); } .pulse0 { -webkit-animation: ring-1 2s 0s ease-out infinite; animation: ring-1 2s 0s ease-out infinite } .pulse1 { bottom: auto; -webkit-animation: ring-1 2s .3s ease-out infinite; animation: ring-1 2s .3s ease-out infinite } .pulse2 { -webkit-animation: ring-1 2s .6s ease-out infinite; animation: ring-1 2s .6s ease-out infinite; bottom: auto } .pulse3 { -webkit-animation: ring-1 2s .9s ease-out infinite; animation: ring-1 2s .9s ease-out infinite } @-webkit-keyframes ring-1 { 0% { -webkit-transform: scale(.1, .1); transform: scale(.1, .1); opacity: 1 } 50% { opacity: 1 } 100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0 } } @keyframes ring-1 { 0% { -webkit-transform: scale(.1, .1); transform: scale(.1, .1); opacity: 1 } 50% { opacity: 1 } 100% { -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); opacity: 0 } } .exclusive-partners { position: relative; z-index: 1; padding-top: 60px; } .exclusive-partners .section-title { color: var(--white); text-align: center; } .partners-logo-slider { margin: 0 -10px; } .partners-logo-slider .logo-item { margin: 0 10px; display: flex; align-items: center; justify-content: center; opacity: 0.5; } .partners-logo-slider .logo-item img{ max-width: 175px; margin: auto; } .partners-logo-slider .logo-item.slick-center { opacity: 1; } /* Support section */ .support-section { margin-top: -80px; } .support-card { padding-bottom: 20px !important; } .support-card-inner { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--border-color); padding: 25px; background: var(--white); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .support-card:nth-child(odd) .support-card-inner { background: var(--white); margin-top: 40px; margin-bottom: 40px; } .support-card:nth-child(even) .support-card-inner { background: var(--second-color); color: var(--white); } .support-card:nth-child(even) .support-card-inner .btn { background: var(--theme-color); border-color: var(--theme-color); } .support-card-inner .card-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; z-index: 1; margin: 0 auto 30px; background: var(--theme-color); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .support-card-inner .card-icon svg { width: 80px; height: 80px; } .support-card-inner .card-icon::after { content: ''; position: absolute; width: 120px; height: 120px; margin: auto; z-index: -1; background: radial-gradient(59.93% 59.93% at 50% 50%, var(--theme-color) 0%, rgba(111, 217, 67, 0) 100%); } .support-card-inner .support-content { text-align: center; display: flex; flex-direction: column; height: 100%; } .support-card-inner .support-content h3 { color: var(--theme-color); margin-bottom: 15px; flex: 1; } .support-content-bottom { text-align: center; margin-top: 25px; margin-bottom: -45px; } .abt-theme .section-title h2 { color: var(--second-color); } .set { border: 1px solid var(--border-color); margin-bottom: 20px; } .set .acnav-label { padding: 15px 35px 15px 15px; position: relative; font-size: 14px; font-weight: 600; width: 100%; display: flex; align-items: center; } .set .acnav-label .acnav-icon { margin-right: 10px; } .set .acnav-list { display: none; padding: 15px; border-top: 1px solid var(--border-color); } .theme-acnav { margin-top: 20px; } .theme-acnav .set { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; box-shadow: 0px 4px 4px rgba(2, 25, 89, 0.06); } .theme-acnav .set .acnav-label { padding: 15px; font-size: 16px; line-height: 1; } .theme-acnav .set .acnav-list { border-top: 0; padding-top: 0; } .theme-acnav .set:first-of-type .acnav-label svg circle{ fill:var(--theme-color); } .bg-white { background: var(--white); } .review-section { background: var(--theme-color); } .review-section .section-title { color: var(--white); } .review-content { text-align: center; color: var(--white); max-width: 850px; width: 100%; margin: auto; } .btn.btn-white { background: var(--white); color: var(--second-color); border-color: var(--white); } .btn.btn-white svg path { fill: var(--second-color); } .review-content .btn-group { justify-content: center; margin-top: 20px; } .review-content .quats svg { margin: 0 auto 20px; } .review-content .subtitle { color: var(--white); } .progress { display: block; max-width: 650px; width: 100%; height: 3px; margin: 30px auto 0; border-radius: 10px; overflow: hidden; background-color: rgba(255, 255, 255, 0.3); background-image: linear-gradient(to right, var(--second-color), var(--second-color)); background-repeat: no-repeat; background-size: 25% 100%; transition: background-size .4s ease-in-out; } .theme-preview-section { background: linear-gradient(to bottom, var(--theme-color) 50.2%, transparent 50%); } .preview-itm img { width: 100%; object-fit: cover; } .information-card-inner { display: flex; flex-direction: column; height: 100%; padding: 30px 25px; background: var(--second-color); color: var(--white); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .information-card-inner .card-icon { margin-bottom: 15px; } .information-content { display: flex; flex-direction: column; height: 100%; align-items: flex-start; } .information-content h5 { margin-bottom: 15px; flex: 1; } .information-content .btn { margin-top: 15px; } .dedicated-section .information-card:nth-child(odd) .information-card-inner { background: var(--second-color); } .dedicated-section .information-card:nth-child(even) .information-card-inner { background: var(--theme-color); } .product-main-section .link-btn svg g path:first-of-type, .why-choose-section .link-btn svg g path:first-of-type , .dedicated-section .link-btn svg g path:first-of-type { fill: var(--theme-color); } .review-section .link-btn svg g path:first-of-type, .banner-content .link-btn svg g path:first-of-type{ fill: var(--second-color); } .built-technology .information-card-inner { height: 100%; } .built-technology .information-card-inner { border: 1px solid var(--border-color); } .built-technology .information-card-inner .information-content h5 { /* min-height: 43px; */ } .built-technology .information-card:first-child .information-card-inner, .built-technology .information-card:last-child .information-card-inner { background: var(--theme-color); } .built-technology .information-card:last-child .information-card-inner { height: 100%; } .package-detail-section { background: var(--second-color); color: var(--white); } .package-detail-section .section-title b { color: var(--white); } .package-detail-section .section-title p { color: var(--white); } .package-detail-section .section-title.text-center { max-width: 750px; } .built-technology { background: linear-gradient(to bottom, transparent 81%, var(--second-color) 8%); } .row-gap { margin-top: -30px; } .row-gap [class*="col-"] { margin-top: 30px; } /* Footer style */ .site-footer { padding: 40px 0; background: var(--second-color); color: var(--white); } .site-footer .footer-top { display: flex; align-items: center; justify-content: space-between; } .divider-line { flex: 1; height: 1px; margin: 0 50px; background: var(--white); opacity: 0.5; } .site-footer .footer-logo { max-width: 180px; width: 100%; } .footer-top-right ul { display: flex; align-items: center; } .footer-top-right ul li a { display: inline-flex; align-items: center; } .footer-top-right ul li:not(:last-of-type) { margin-right: 15px; } .footer-top-right ul li a.btn-secondary { color: var(--white); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .footer-top-right ul li .btn-link svg { margin-right: 10px; } .footer-top-right ul li a.btn-secondary svg path { fill: var(--white); } .footer-top-right ul li .btn-link svg path { fill: var(--theme-color); } .footer-row { display: flex; flex-wrap: wrap; padding-top: 50px; } .footer-col { width: 100%; flex: 1; } .footer-col:not(:first-of-type) { padding-left: 25px; } .about-site { max-width: 270px; flex: 0 0 270px; } .about-site p a { color: var(--theme-color); } .footer-widget h3, .footer-widget h4 { margin-bottom: 20px; } .footer-widget ul li:not(:last-of-type) { margin-bottom: 8px; } .footer-widget ul li a { font-weight: 500; } .footer-subscribe-col { max-width: 400px; flex: 0 0 400px; } .footer-subscribe-form { margin-top: 15px } .footer-subscribe-form .input-wrapper { position: relative; } .footer-subscribe-form .input-wrapper input { border: 2px solid var(--theme-color); border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; padding-right: 60px; } .footer-subscribe-form .btn-subscibe { background: transparent; color: var(--theme-color); border: 0; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); font-size: 16px; font-weight: bold; } /* common banner */ .common-banner-section { padding: 40px 0; background: var(--theme-color); color: var(--white); background-position: 50% 50%; position: relative; background-repeat: no-repeat; background-size: cover; overflow: hidden; } .common-banner-section .section-title{ margin-bottom: 0; } .common-banner-section .section-title, .common-banner-section .section-title p { color: var(--white); } .common-banner-section .banner-image { position: relative; } .common-banner-section .banner-image img { margin-left: auto; } .common-banner-section .banner-image .ripple-icon { left: auto; right: 160px; top: -50px; transform: translateY(-50%); bottom: unset; } .common-banner-section .banner-image .ripple-icon::before { content: ''; position: absolute; top: 0; right: -380px; width: 370px; height: 370px; border-radius: 100%; background: radial-gradient(50% 50% at 50% 50%, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .product-list-search { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 15px 25px; background: var(--white); border: 1px solid var(--border-color); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; margin-bottom: 30px; justify-content: flex-end; } .tabs { display: flex; flex-wrap: wrap; align-items: center; } .tabs .tab-link { color: var(--grey-color); font-weight: 600; } .tabs .tab-link a { padding: 5px; } .tabs .tab-link:not(:last-of-type) { margin-right: 10px; } .tabs .tab-link.active { color: var(--second-color); } .product-search { background: var(--white); box-shadow: -1.65876px 16.4721px 31.0436px rgb(182 186 203 / 52%); max-width: 500px; width: 100%; border-radius: 20px; } .product-search .input-wrapper input { padding: 20px 80px 20px 20px; border-radius: 20px; } .product-search .input-wrapper { position: relative; } .product-search .search-btn { position: absolute; top: 50%; left: auto; right: 15px; transform: translateY(-50%); background: var(--white); border: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 15px; box-shadow: -3px 4px 23px rgba(0, 0, 0, 0.28); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); } .product-list-search .tabs { flex: 1; padding-right: 15px; } .filter-title .filter-ic { display: none; } .filter-listing .filter-itm { display: flex; align-items: center; justify-content: space-between; color: #92A3AA; } .filter-listing .filter-itm.active .flt-lbl { color: var(--second-color); } .filter-listing .filter-itm:not(:last-of-type) { margin-bottom: 10px; } .filter-itm .cat-count { display: inline-block; padding: 6px 10px; font-size: 14px; line-height: 1; background: #EAEBEE; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .filter-listing .filter-itm.active .cat-count { background: var(--theme-color); color: var(--white); } .filter-title { margin-bottom: 26px; } .fillter-btns ul { display: flex; border: 2px solid var(--border-color); background: var(--white); margin-bottom: 30px; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .fillter-btn { text-align: center; padding: 15px 20px; color: #92A3AA; } .fillter-btn:not(:last-of-type) { border-right: 1px solid var(--border-color); } .fillter-btn.active { background: #92A3AA; color: var(--white); } .product-filter-right-column { padding-left: 22px !important; } .product-row { margin: -20px -10px 0; } .product-row .product-card { padding: 0 10px; margin-top: 20px; } .product-card-inner { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid transparent; padding: 15px; box-shadow: -2.37901px 23.6244px 44.5228px rgba(182, 186, 203, 0.3); border-radius: 18px; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -ms-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; transition: all ease-in-out 0.3s; -webkit-border-radius: 18px; -moz-border-radius: 18px; -ms-border-radius: 18px; -o-border-radius: 18px; } .product-card-inner.selected-itm { border-color: var(--theme-color); } .product-content { display: flex; flex-direction: column; height: 100%; } .product-img { padding-bottom: 15px; display: flex; align-items: center; justify-content: space-between; } .product-content h4 { margin-bottom: 15px; flex: 1; text-transform: capitalize; } .product-content h4 a { font-weight: 700; } .product-content .btn.cart-btn { margin-top: 10px; width: 100%; background: #F4F4F4; border: 1px solid #808191; color: #808191; } .product-content .btn.cart-btn.selected { background: var(--theme-color); color: var(--white); border-color: var(--theme-color); } .product-content .cart-btn.selected svg { margin-left: 0; margin-right: 10px; } .product-content .lbl { letter-spacing: 2px; text-transform: uppercase; font-weight: 600; font-size: 11px; color: var(--grey-color); margin-bottom: 10px; } .price { display: flex; align-items: center; font-size: 20px; flex-wrap: wrap; font-weight: 600; color: var(--second-color); } ins { display: inline-flex; align-items: center; } .price .currency-type { margin-left: 5px; } .time-lbl { color: var(--grey-color); font-weight: 700; font-size: 14px; } .tab-content { display: none; } .tab-content.active { display: block; } .product-listing-section { position: relative; margin-top: -50px;} .product-listing-section .more-btn { margin-top: 35px; } .product-filter-body .close-filter { display: none; } /* PDP page style */ .pdp-summery .section-title { color: var(--second-color); } .pdp-summery .price { font-size: 30px; margin-top: 20px; } .cart-view.btn-group { margin-top: 20px; } .pdp-summery { padding-right: 50px; } .pdp-media img { width: 100%; } .why-choose-section { background: linear-gradient(to bottom, var(--second-color) 70%, transparent 50%); } .why-choose-section .section-title b { color: var(--white); } .why-choose-section .section-title p { color: var(--white); } .pricing-area { padding: 25px; background: var(--theme-color); border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; } .pricing-area .section-title { color: var(--second-color); } .pricing-area .section-title h2 { margin-bottom: 20px; } .pricing-area .variable-list { display: flex; flex-wrap: wrap; align-items: center; } .pricing-area .variable-list li { display: flex; align-items: center; color: var(--white); line-height: 1; padding: 5px; } .pricing-area .variable-list li svg { margin-right: 10px; } .pricing-tab { padding: 15px; border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .pricing-tab .tabs { background: var(--theme-color); justify-content: center; padding: 10px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .pricing-tab .tabs .tab-link a { padding: 0; } .pricing-tab .tabs .tab-link { color: var(--white); padding: 10px 25px; border-radius: 10px; line-height: 1; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .pricing-tab .tabs .tab-link.active { background: var(--white); color: var(--second-color); } .pricing-tab .pricing-content .price { font-size: 40px; justify-content: center; } .pricing-tab .tabs-container { margin-top: 20px; margin-bottom: 10px; } .pricing-content .lbl { text-align: center; color: #6C8794; margin-top: 10px; } .pricing-tab .pricing-content .btn-group { justify-content: center; margin-top: 15px; } .screenshot-itm { padding: 0 15px; } .screenshot-slider { margin: 0 -15px; } .screenshot-slider .slick-arrow { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; background: var(--theme-color); padding: 0; box-shadow: 1px 1px 11.235px 5px rgb(111 217 67 / 31%); } .screenshot-slider .slick-arrow svg { width: 25px; height: 25px; } .screenshot-slider .slick-arrow svg path { fill: var(--second-color); } .screenshot-itm .scr-labl { margin-top: 10px; } .screenshot-itm .screenshot-image img { width: 100%; } .star-progress { display: flex; align-items: center; } .progress-wrap { height: 10px; overflow: hidden; background-color: var(--grey-color); -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1); border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .progress-bar { float: left; width: 0; height: 100%; font-size: 12px; line-height: 20px; color: #fff; text-align: center; background-color: var(--theme-color); -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15); -webkit-transition: width .6s ease; -o-transition: width .6s ease; transition: width .6s ease; } .star-progress .progress-wrap { margin: 0 15px; flex: 1; } .star-progress span { display: flex; align-items: center; line-height: 1; } .star-progress span b { line-height: 1; padding-top: 6px; } .star-progress span svg { margin-left: 5px; } .star-progress:not(:last-of-type) { margin-bottom: 10px; } .ratings .stars { display: flex; align-items: center; } .ratings { color: var(--grey-color); } .ratings .lbl { padding-left: 10px; } .review-progress .ratings { margin-bottom: 15px; } .feedback-card-inner .abt-user { margin-bottom: 15px; } .abt-user .date { color: var(--grey-color); } .feedback-card-inner p { font-style: italic; } .feedback-card:not(:last-of-type) .feedback-card-inner { border-bottom: 1px solid #E4E4E4; padding-bottom: 15px; margin-bottom: 15px; } .feedback-section .feedback-wrapper { padding-left: 50px; } .feedback-pagination { margin-top: 20px; padding-top: 15px; border-top: 1px solid #E4E4E4; } .showing-result { color: var(--grey-color); margin-bottom: 15px; } .pagination { border-top: 1px solid #E4E4E4; display: flex; justify-content: space-between; align-items: center; } .pagination .page-btn { display: inline-flex; align-items: center; color: var(--grey-color); } .pagination .page-btn.prev-btn svg { margin-right: 10px; } .pagination .page-btn.next-btn svg { margin-left: 10px; } .pagination .page-list { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; flex: 1; padding: 0 15px; margin-top: -1px; } .pagination .page-list li { padding: 15px 15px; color: var(--grey-color); border-top: 1px solid transparent; } .pagination .page-list li.active { border-color: var(--second-color); color: var(--second-color); } /* Pricing page */ .pricing-banner.common-banner-section { background: transparent; color: var(--second-color); } .pricing-banner.common-banner-section .section-title p { color: var(--grey-color); } .switch { position: relative; display: inline-flex; align-items: center; } .switch .lbl { color: var(--second-color); } .switch .lbl.active { color: var(--theme-color); } .switch input { display: none; } .slider { position: relative; cursor: pointer; margin: 0 10px; width: 3.4rem; height: 1.8rem; background-color: var(--theme-color); display: inline-block; vertical-align: middle; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 1.4rem; width: 1.4rem; left: 0.3rem; top: 50%; margin-top: -0.7rem; background-color: white; -webkit-transition: .4s; transition: .4s; } .switch input:checked+.slider { background-color: var(--theme-color); } .switch input:checked+.slider:before { -webkit-transform: translateX(1.4rem); -ms-transform: translateX(1.4rem); -moz-transform: translateX(1.4rem); transform: translateX(1.4rem); } .slider.round { border-radius: 1.8rem; } .slider.round:before { border-radius: 50%; } .pricing-switch { text-align: center; } .package-card-inner { display: flex; align-items: center; flex-wrap: wrap; padding: 20px; border: 1px solid var(--theme-color); box-shadow: -2.61824px 26px 49px rgba(182, 186, 203, 0.3); border-radius: 20px; } .package-card-inner .package-itm { width: 85px; height: 85px; border-radius: 20px; padding: 10px; border: 1px solid rgba(108, 117, 125); } .package-card-inner .package-itm img { width: 100%; height: 100%; object-fit: scale-down; } .package-content { flex: 1; padding: 0 20px; } .package-card-inner .price { flex-direction: column; align-items: flex-end; } .product-selection { margin-top: 30px; } .selected-module-list .package-card:not(:last-of-type) { margin-bottom: 20px; } .product-selection .row:not(:last-of-type) { margin-bottom: 50px; } .row.product-row .subtitle-col { margin-top: 20px; } .cart-summery { padding: 15px; border: 1px solid var(--theme-color); background: var(--white); box-shadow: -2.61824px 26px 49px rgba(182, 186, 203, 0.3); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .cart-summery .summery-header { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); } .cart-summery ul li { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .cart-summery ul li .cart-sum-left { display: flex; align-items: center; } .cart-summery ul li .cart-sum-left svg { margin-right: 10px; } .summery-footer { padding-top: 12px; border-top: 1px solid var(--border-color); } .summery-footer .user-qty { margin-bottom: 15px; } .user-qty .lbl { margin-bottom: 5px; font-weight: 600; } .qty-spinner { border: 1px solid var(--border-color); display: flex; padding: 15px 15px; width: 100%; box-shadow: -2.61824px 26px 49px rgba(182, 186, 203, 0.3); border-radius: 12px; } .qty-spinner button { background: transparent; padding: 0; margin: 0; border: 0; } .qty-spinner button svg { margin: auto; height: 20px; width: 20px; } .qty-spinner input { border: 0; flex: 1; color: var(--black); padding: 0 15px; text-align: center; font-size: 14px; line-height: 1; margin: 0; } .cart-footer-total-row { background: var(--theme-color); padding: 15px; border-radius: 10px; margin-bottom: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } .cart-footer-total-row .price { flex-direction: column; align-items: flex-end; color: var(--white); font-size: 25px; } .cart-footer-total-row .price .time-lbl { color: var(--second-color); letter-spacing: 2px; font-size: 10px; } .reset-btn { display: inline-flex; align-items: center; color: var(--grey-color); } .reset-btn svg { margin-right: 10px; width: 15px; height: 15px; } .module-section { background: linear-gradient(to bottom, transparent 90%, var(--theme-color) 50%); } .faq-section .set { border: 0; background: var(--white); box-shadow: -2.14722px 21.3227px 40.1851px rgba(182, 186, 203, 0.16); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .faq-section .set .acnav-label { background: var(--white); box-shadow: -2.14722px 21.3227px 40.1851px rgba(182, 186, 203, 0.16); border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; } .faq-section .set .acnav-list { border-top: 0; padding-top: 30px; } .faq-section .set .acnav-label:after { content: ''; position: absolute; height: 12px; width: 12px; background-image: url('/public/market_assets/images/menu-dropdown.svg'); background-repeat: no-repeat; background-size: 100%; background-position: 50% 50%; top: 50%; transform: translateY(-50%); right: 15px; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; } .faq-section .set.is-open .acnav-label::after { transform: translateY(-50%) rotate(180deg); -webkit-transform: translateY(-50%) rotate(180deg); -moz-transform: translateY(-50%) rotate(180deg); -ms-transform: translateY(-50%) rotate(180deg); -o-transform: translateY(-50%) rotate(180deg); } /* ============================================= */ /* !!!! DESKTOP HOVER CSS !!!! */ /* ============================================= */ @media (hover: hover) { .header-style-one .main-navigationbar .menu-items-col .main-nav>li>a:hover { color: var(--theme-color); } .header-style-one .main-navigationbar .menu-items-col .main-nav>li.lnk-btn>a:hover { background: var(--theme-color); color: var(--white); } .header-style-one .main-navigationbar .menu-items-col .main-nav>li.lnk-btn>a:hover svg path { fill: var(--white); } .header-style-one .announcebar p a:hover { color: var(--theme-color); } .header-style-one .announcebar #announceclose:hover svg path { fill: var(--theme-color); } .footer-widget ul li a:hover { color: var(--theme-color); } .product-card-inner:hover:not(.selected-itm) { border-color: var(--theme-color); box-shadow: var(--box-shadow); } .product-card-inner:hover .product-content .btn.cart-btn:not(.selected) { border-color: var(--theme-color); background: var(--light-color); color: var(--theme-color); } .pagination .page-btn:hover { color: var(--second-color); } .pagination .page-btn:hover svg path { fill: var(--second-color); } .pagination .page-list li:hover { color: var(--second-color); } } /* ************************************ */ /* custom */ /* ************************************ */ .theme-avtar{ width: 60px; height: 60px; } .theme-avtar img{ width: 100%; height: 100%; object-fit: contain; border-radius: 7px; } .cart-summery ul li.set.has-children{ border: 0; display: block; } .cart-summery ul li.set.has-children .acnav-label{ padding: 0; display: flex; align-items: center; position: relative; } .cart-summery ul li.set.has-children .acnav-label .cart-sum-right{ margin-left: 10px; } .cart-summery ul li.set.has-children .acnav-label::after{ content: ''; width: 16px; height: 16px; margin-left: auto; flex-shrink: 0; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-size: 16px ; transition: transform .2s ease-in-out; } .cart-summery ul li.set.has-children.is-open .acnav-label::after{ transform: rotate(-180deg); } .cart-summery ul li.set .acnav-list{ border-top: 0; padding: 15px 0 0; } .extension-card-min h4{ font-size: 16px; color: var(--theme-color); } .extension-card-min .theme-avtar{ width: 45px; height: 45px; border-radius: 17.3552px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .ms-2 { margin-left: 0.5rem !important; } .extension-card-min:not(:last-of-type){ padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-color); } .register-popup { position: fixed; background: rgba(24, 58, 64, 0.9); height: 100%; width: 100%; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; z-index: 3; padding: 0 30px; left: 0; right: 0; top: 0; bottom: 0; transition: all ease-in-out 0.5s; opacity: 0; visibility: hidden; overflow: auto; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s; -ms-transition: all ease-in-out 0.5s; -o-transition: all ease-in-out 0.5s; } .register-popup.active { opacity: 1; visibility: visible; } .register-popup .popup-header .close-register { cursor: pointer; width: 20px; height: 20px; } .register-popup .popup-header .close-register svg{ width: 100%; height: 100%; } .register-popup .close-register svg path{ fill: var(--black); } .register-popup-body{ max-width: 600px; width: 100%; background: var(--white); } .popup-content{ padding: 15px; } .register-popup .popup-header{ width: 100%; padding: 15px; background: var(--white); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); } .popup-footer .btn:not(:last-of-type){ margin-right: 15px; } .popup-footer{ padding: 15px; border-top: 1px solid var(--border-color); } .text-danger { color: #dc3545!important; } .d-none { display: none; } /* new css add by dinesh 15-05-23 */ .banner-img-wrapper { position: relative; } .banner-img-wrapper:before { content: ''; position: absolute; top: 50%; left: 15px; background: rgba(255, 255, 255, 0.15); border: 0.915516px solid rgba(255, 255, 255, 0.21); border-radius: 13.4283px; width: 100%; height: 80%; z-index: -1; backdrop-filter: blur(1.83103px); -webkit-backdrop-filter: blur(1.83103px); transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); -webkit-border-radius: 13.4283px; -moz-border-radius: 13.4283px; -ms-border-radius: 13.4283px; -o-border-radius: 13.4283px; } .faq-section .acnav-label .acnav-icon svg path{ fill: var(--theme-color); } .pricing-banner .pulse0, .pricing-banner .pulse1, .pricing-banner .pulse2, .pricing-banner .pulse3{ border: 1px solid var(--theme-color); } .pricing-banner.common-banner-section .banner-image .ripple-icon::before{ background: radial-gradient(50% 50% at 50% 50%, var(--theme-color) 0%, rgba(255, 255, 255, 0) 100%); } .banner-img-wrapper .inner-frame-img{ position: absolute; top: 49%; right: -16%; width: 100%; height: 87%; transform: translateY(-50%); } /* module detail page -> module name */ .pdp-summery .section-title h2 { text-transform: capitalize; } .built-technology .information-card-inner .information-content p{ display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .pricing-switch{ text-align: center; } .module-section .product-selection .product-content .price { margin-bottom: 10px; } .product-custom-page{ margin-top: 0; }