Файловый менеджер - Редактировать - /home/easybachat/makranacity.com/public/assets/front/css/style.css
Ðазад
/* Google Fonts */ /* ----------------------------------------- Variables CSS ----------------------------------------- */ @import url("header/header.css"); @import url("header/header-2.css"); @import url("pages/inner-pages.css"); :root { --font-heading: "Quicksand", sans-serif; --font-body: "Mulish", sans-serif; --font-family-fontawesome: "Font Awesome 5 Pro"; --font-base: 16px; --font-sm: 14px; --font-xsm: 12px; --font-lg: 18px; --font-medium: 500; --font-normal: 400; --font-semi-bold: 600; --font-bold: 700; --color-primary: #f9725f; --color-secondary: #f9725f; --color-red: #EB4C4C; --color-green: #00D5AE; --color-blue: #0061DF; --color-cyan: #21C4DF; --color-pink: #FF7294; --color-purple: #6231F0; --color-yellow: #FFC800; --color-orange: #F59872; --color-white: #ffffff; --color-dark: #181B1D; --color-medium: #757575; --color-light: #F5F5F5; --color-primary-rgb: 249, 114, 95; --color-secondary-rgb: 247, 71, 46; --color-red-rgb: 235, 76, 76; --color-green-rgb: 0, 213, 174; --color-blue-rgb: 0, 97, 223; --color-cyan-rgb: 33, 196, 223; --color-pink-rgb: 255, 114, 148; --color-purple-rgb: 98, 49, 240; --color-yellow-rgb: 253, 192, 64; --color-orange-rgb: 245, 152, 114; --color-white-rgb: 255, 255, 255; --color-dark-rgb: 25, 27, 30; --color-medium-rgb: 141, 141, 141; --color-light-rgb: 242, 242, 242; --border-color: #eaeaea; --bg-light: #F7F7F7; --gradient-bg: linear-gradient(90deg, var(--color-primary) 14.17%, var(--color-primary-shade) 94.83%); --shadow-md: 0px 4px 80px rgba(0, 0, 0, 0.08); --shadow-sm: 0px 10px 40px rgb(0, 0, 0, .06); } /* margin CSS*/ .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } /* Padding CSS*/ .pt-10 { padding-top: 10px !important; } .pt-20 { padding-top: 20px !important; } .pt-30 { padding-top: 30px !important; } .pt-40 { padding-top: 40px !important; } .pt-60 { padding-top: 60px !important; } .pb-10 { padding-bottom: 10px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-25 { padding-bottom: 25px !important; } .pb-30 { padding-bottom: 30px !important; } .pb-40 { padding-bottom: 40px !important; } .pb-60 { padding-bottom: 60px !important; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .ptb-70 { padding-top: 70px; padding-bottom: 70px; } .pb-100 { padding-bottom: 100px; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .spacer-x { margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); } .spacer-x .swiper-slide { padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); } /* Border */ .border, .border-top, .border-bottom, .border-end, .border-start { border-color: var(--border-color) !important; } /* Border Radius */ .radius-0 { border-radius: 0 !important; } .radius-sm { border-radius: 5px !important; } .radius-md { border-radius: 10px !important; } .radius-lg { border-radius: 15px !important; } .radius-xl { border-radius: 20px !important; } .opacity-65 { opacity: 0.65 !important; } .opacity-80 { opacity: 0.8 !important; } @media (max-width: 991.98px) { .fluid-left { padding-inline: 0; } .fluid-right { padding-inline: 0; } } @media (min-width: 992px) { .img-left { margin-inline-start: -20px; } .img-right { margin-inline-end: -20px; } .container-lg-fluid { max-width: 100%; } .fluid-left { padding-inline-start: calc((100vw - 960px) / 2); padding-inline-end: 0; } .fluid-right { padding-inline-end: calc((100vw - 960px) / 2); padding-inline-start: 0; } .border-lg-end { border-inline-end: 1px solid var(--border-color) !important; } } @media (min-width: 1200px) { .img-left { margin-inline-start: -30px; } .img-right { margin-inline-end: -30px; } .fluid-left { padding-inline-start: calc((100vw - 1140px) / 2); } .fluid-right { padding-inline-end: calc((100vw - 1140px) / 2); } .border-xl-end { border-inline-end: 1px solid var(--border-color) !important; } } @media (min-width: 1300px) { .img-left { margin-inline-start: -50px; } .img-right { margin-inline-end: -50px; } } @media (min-width: 1400px) { .fluid-left { padding-inline-start: calc((100vw - 1320px) / 2); } .fluid-right { padding-inline-end: calc((100vw - 1320px) / 2); } .img-left { margin-inline-start: -40px; } .img-right { margin-inline-end: -40px; } } @media (min-width: 1500px) { .img-left { margin-inline-start: -80px; } .img-right { margin-inline-end: -80px; } } /* Tooltip CSS */ .tooltip { --bs-tooltip-bg: var(--color-primary); --bs-tooltip-opacity: 1; } .no-animation { transform: none; -webkit-animation: none; animation: none; } /* Badge CSS */ .badge { padding: 8px 16px; font-size: var(--font-xsm); } .badge.bg-success { color: var(--color-green); background: rgba(var(--color-green-rgb), 0.2) !important; } .badge.bg-info { color: var(--color-blue); background: rgba(var(--color-blue-rgb), 0.2) !important; } .badge.bg-danger { color: var(--color-red); background: rgba(var(--color-red-rgb), 0.2) !important; } .badge.bg-warning { color: var(--color-yellow); background: rgba(var(--color-yellow), 0.2) !important; } /* Card CSS */ .card { border: none; border-radius: 10px; } .card .card-title { margin-bottom: 20px; } .card .card-text { color: var(--color-medium); } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-dark); opacity: 0.4; z-index: -1; } @media only screen and (min-width: 1200px) { .img-left { -webkit-margin-start: -100px; margin-inline-start: -100px; } .img-right { -webkit-margin-end: -100px; margin-inline-end: -100px; } } @media only screen and (min-width: 992px) { .img-left { -webkit-margin-start: -60px; margin-inline-start: -60px; } .img-right { -webkit-margin-end: -60px; margin-inline-end: -60px; } } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .click-show { position: relative; overflow: hidden; max-height: 70px !important; } .click-show.show { max-height: 100% !important; } .click-show.show::after { opacity: 0; } .read-more-btn { color: var(--color-dark); cursor: pointer; margin-top: 8px; font-weight: var(--font-medium); } .dropdown-menu { text-align: start; } /* ----------------------------------------- Typography CSS ----------------------------------------- */ body { font-family: var(--font-body); font-size: var(--font-base); font-weight: var(--font-medium); color: var(--color-medium); overflow-x: hidden; } a { color: var(--color-dark); text-decoration: none; outline: 0 !important; transition: all 0.3s ease-out; } a:hover { color: var(--color-primary); text-decoration: none; } :focus { outline: 0 !important; box-shadow: none !important; } :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) { font-family: var(--font-heading); color: var(--color-dark); font-weight: var(--font-bold); line-height: 1.3; } h1 { font-size: 64px; } h2, .h2 { font-size: 48px; } h3, .h3 { font-size: 24px; } p { color: var(--color-medium); line-height: 1.8; } .font-lg { font-size: var(--font-lg) !important; } .font-sm { font-size: var(--font-sm) !important; } .font-xsm { font-size: var(--font-xsm) !important; } /* ----------------------------------------- Reset CSS ----------------------------------------- */ :focus { outline: none; } img { max-width: 100%; } .form-control:focus { box-shadow: none; } ul { padding: 0; } figure, blockquote, ul { margin-bottom: 0; } table, th, td { vertical-align: middle; } /* ----------------------------------------- Color CSS ----------------------------------------- */ /* Theme Color CSS */ /* Color CSS */ .color-primary { color: var(--color-primary) !important; } .color-white { color: var(--color-white) !important; } .color-light { color: var(--color-light) !important; } .color-dark { color: var(--color-dark) !important; } .color-medium { color: var(--color-medium) !important; } .color-secondary { color: var(--color-secondary) !important; } .color-blue { color: var(--color-blue) !important; } .color-green { color: var(--color-green) !important; } .color-red { color: var(--color-red) !important; } .color-yellow { color: var(--color-yellow) !important; } .color-purple { color: var(--color-primary) !important; } .color-orange { color: var(--color-orange) !important; } .bg-primary { background: var(--color-primary) !important; } .bg-primary-light { background: rgba(var(--color-primary-rgb), 0.04) !important; } .bg-secondary { background: var(--color-secondary) !important; } .bg-light { background: var(--bg-light) !important; } .border-primary { border-color: var(--color-primary) !important; } .fill-primary { fill: var(--color-primary) !important; } .stroke-primary { stroke: var(--color-primary); } .fill-primary-light { fill: rgba(var(--color-primary-rgb), 0.5); } /* ----------------------------------------- Button CSS ----------------------------------------- */ button, .btn { cursor: pointer; border: none; background: inherit; } button:focus, button:active, .btn:focus, .btn:active { outline: none; box-shadow: none; } button:hover, .btn:hover { outline: none; } .btn { position: relative; overflow: hidden; font-size: 16px; font-weight: 700; text-transform: capitalize; border-radius: 0; letter-spacing: 0.05em; transition: all 0.3s ease-out; } .icon-start i { -webkit-margin-end: 5px; margin-inline-end: 5px; } .icon-end i { -webkit-margin-start: 5px; margin-inline-start: 5px; } .btn-lg { border-radius: 8px; padding: 15px 34px; } .btn-md { border-radius: 5px; padding: 8px 24px; font-size: var(--font-sm); } .btn-sm { padding: 6px 14px; font-size: var(--font-xsm); } .btn-primary { color: var(--color-white); background-color: var(--color-primary); box-shadow: 0px 14px 35px rgba(var(--color-primary-rgb), 0.12); transition: background 0.3s ease-out; border: 1px solid var(--color-primary); z-index: 1; } .btn-primary:hover { color: var(--color-primary); border-color: var(--color-primary); background-color: transparent; } .btn-danger { border: 1px solid var(--color-red); background-color: var(--color-red); transition: background 0.3s ease-out; } .btn-danger:hover { border-color: var(--color-red); background-color: var(--color-red); } .btn-outline { border: 1px solid var(--color-primary) !important; color: var(--color-primary); } .btn-outline:hover { background-color: var(--color-primary); color: var(--color-white); } .btn-remove { padding: 0; width: 30px; height: 30px; line-height: 30px; padding: 0; background: var(--color-primary); color: var(--color-white); } .btn-text { line-height: 1; text-decoration: underline; } .disabled { border: none; cursor: not-allowed !important; pointer-events: initial !important; } /* Video Btn CSS */ .video-btn { position: relative; width: 75px; height: 75px; padding: 0; font-size: 22px; display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; color: var(--color-white); background: var(--color-primary); } .video-btn:hover { background-color: var(--color-primary); color: var(--color-white); } .video-btn::after { content: ""; position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); -webkit-animation: ripple 3s linear infinite; animation: ripple 3s linear infinite; background: var(--color-primary); border-radius: 50%; z-index: -2; } .video-btn::before { content: ""; position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); -webkit-animation: ripple 3s 1s linear infinite; animation: ripple 3s 1s linear infinite; background: var(--color-primary); border-radius: 50%; z-index: -1; } /* ----------------------------------------- Form CSS ----------------------------------------- */ .form-control { border: 1px solid var(--border-color); border-radius: 5px; height: 55px; line-height: 55px; padding: 0 0 0 18px; font-size: 16px; } .form-control:focus { color: var(--color-dark); } :is(input:not([type=radio], [type=checkbox]), textarea, .nice-select):is(:focus, :visited, :focus-within, :focus-visible) { border-color: #86b7fe !important; } select.form-select { background-size: 11px !important; } textarea { height: auto; line-height: 1.4 !important; } textarea.form-control { min-height: 200px; padding-top: 15px; line-height: 1.4 !important; } ::-moz-placeholder { color: var(--color-medium) !important; } :-ms-input-placeholder { color: var(--color-medium) !important; } ::placeholder { color: var(--color-medium) !important; } .custom-radio .form-radio-label { position: relative; cursor: pointer; position: relative; cursor: pointer; padding: 0; vertical-align: middle; -webkit-padding-start: 20px; padding-inline-start: 20px; } .custom-radio .form-radio-label::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); height: 14px; width: 14px; border: 1px solid var(--color-primary); border-radius: 50%; } .custom-radio input[type=radio]:checked+.form-radio-label::after { opacity: 1; } .custom-radio input[type=radio]+.form-radio-label::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 2px; opacity: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-primary); transition: all 0.2s ease-out; } .custom-radio .input-radio { display: none; } .custom-checkbox .form-check-label { position: relative; cursor: pointer; position: relative; cursor: pointer; padding: 0; vertical-align: middle; -webkit-padding-start: 22px; padding-inline-start: 22px; } .custom-checkbox .form-check-label::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); height: 15px; width: 15px; border: 1px solid var(--color-primary); border-radius: 2px; } .custom-checkbox input[type=checkbox]:checked+.form-check-label::after { opacity: 1; } .custom-checkbox input[type=checkbox]+.form-check-label::after { content: ""; width: 11px; position: absolute; top: 50%; left: 2px; opacity: 0; height: 5px; border-left: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); transform: translateY(-65%) rotate(-45deg); transition: all 0.2s ease-out; } .custom-checkbox .input-checkbox { display: none; } input[type=checkbox]:checked+.form-check-label::before, input[type=radio]:checked+.form-check-label::before { background-color: var(--color-primary); border-color: var(--color-primary); } input[type=checkbox]:checked+.form-check-label::after, input[type=radio]:checked+.form-check-label::after { opacity: 1; } .form-group, .input-group { position: relative; } .form-group.icon-end label, .input-group.icon-end label { position: absolute; right: 0; left: 0; top: 50%; width: 18px; font-size: var(--font-sm); -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: 10px; margin-inline-end: 10px; transform: translateY(-50%); } .form-group.icon-start .form-control, .input-group.icon-start .form-control { -webkit-padding-start: 44px; padding-inline-start: 44px; } .form-group.icon-start label, .form-group.icon-start .icon, .input-group.icon-start label, .input-group.icon-start .icon { position: absolute; right: 0; left: 0; top: 50%; width: 18px; font-size: var(--font-sm); -webkit-margin-end: auto; margin-inline-end: auto; -webkit-margin-start: 20px !important; margin-inline-start: 20px !important; transform: translateY(-50%); z-index: 1; } .form-inline .input-group { flex-wrap: nowrap; padding: 3px; background-color: rgba(255, 255, 255, 0.259); } .form-inline .input-group .form-control { height: auto; line-height: 1; border: none; padding: 15px 25px; background-color: transparent; } .show-password-field { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; } .show-password-field .show-icon { font-family: var(--font-family-fontawesome); font-style: normal; } .show-password-field .show-icon::before { content: "\f06e"; } .show-password-field .show-icon.show::before { content: "\f070"; } .search-form { display: flex; padding: 6px 5px 6px 15px; border: 1px solid var(--border-color); } .search-form .search-input { display: block; width: 100%; border: none; outline: 0; height: 40px; line-height: 40px; border-radius: 5px 0 0 5px; background: transparent; } .search-form .btn-search { text-align: center; height: 40px; width: 40px; line-height: 40px; color: var(--color-medium); background: var(--color-white); } .filter-form { padding: 30px 30px 10px; border: 1px solid var(--color-primary); background: var(--color-white); } .filter-form .grid { display: grid; grid-template-columns: repeat(1, 250px) repeat(3, 160px) repeat(1, 250px) 1fr; grid-gap: 20px; align-items: center; } .filter-form .grid .grid-item { margin-bottom: 20px; } .filter-form .form-group { position: relative; } .filter-form .form-group i { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: var(--color-primary); z-index: 5; } .filter-form .price-value { margin-bottom: 5px; } .filter-form .price-value span { -webkit-margin-start: 10px; margin-inline-start: 10px; color: var(--color-primary); } .filter-form .form-control, .filter-form .nice-select { border: 0; background: var(--bg-light); -webkit-padding-start: 40px; padding-inline-start: 40px; color: var(--color-medium); } .filter-form .nice-select::after { -webkit-margin-end: 5px; margin-inline-end: 5px; } /* ----------------------------------------- Lazyload CSS ----------------------------------------- */ .lazy-container { position: relative; overflow: hidden; display: table; table-layout: fixed; width: 100%; background-color: var(--color-light); z-index: 1; } .lazy-container::after { position: absolute; content: "\f03e"; font-family: "Font Awesome 5 Pro"; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; font-size: 30px; color: var(--color-normal); z-index: -1; } .lazy-container img { position: absolute; top: 0; left: 0; width: 0px; height: 0px; max-width: 100%; min-width: 100%; max-height: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; } .lazy-container img.lazy-load { filter: blur(5px); transition: filter 400ms; } .lazy-container img.lazyloaded { filter: blur(0); } .ratio::before { content: ""; display: block; padding-bottom: 56.25%; } .ratio.ratio-1-1::before { padding-bottom: 100%; } .ratio.ratio-1-2::before { padding-bottom: 114%; } .ratio.ratio-1-3::before { padding-bottom: 126.14%; } .ratio.ratio-2-3::before { padding-bottom: 66.67%; } .ratio.ratio-16-11::before { padding-bottom: 53.57%; } .ratio.ratio-16-8::before { padding-bottom: 50%; } .ratio.ratio-21-9::before { padding-bottom: 42.85%; } .ratio.ratio-21-8::before { padding-bottom: 38.0952380952%; } .ratio.ratio-5-3::before { padding-bottom: 60%; } .ratio.ratio-5-4::before { padding-bottom: 80%; } .ratio.ratio-4-3::before { padding-bottom: 75%; } .ratio.ratio-3-4::before { padding-bottom: 75%; } .ratio.ratio-vertical::before { padding-bottom: 150%; } .blur-up { filter: blur(5px); transition: filter 400ms; } .lazyloaded.blur-up { filter: blur(0); } /* ----------------------------------------- Nice Select CSS ----------------------------------------- */ .nice-select { float: unset; } .nice-select:after { right: 0; left: 0; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: 0; margin-inline-end: 0; } .nice-select.form-control:after { -webkit-margin-end: 12px; margin-inline-end: 12px; } .nice-select .list { z-index: 777; } .nice-select .list::-webkit-scrollbar { width: 5px; } .nice-select .list::-webkit-scrollbar-track { background-color: var(--color-light); } .nice-select .list::-webkit-scrollbar-thumb { border-radius: 30px; background: rgba(var(--color-dark-rgb), 0.2); } .nice-select.open .list { width: 100%; opacity: 1; pointer-events: auto; } .nice-select .option { display: block; } /* ----------------------------------------- Preloader CSS ----------------------------------------- */ #preLoader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; } #preLoader .loader { width: 54px; height: 54px; position: relative; } #preLoader .loader svg { display: block; width: 100%; height: 100%; } #preLoader .loader svg rect { fill: none; stroke: var(--color-primary); stroke-width: 6px; stroke-linejoin: round; stroke-linecap: round; } #preLoader .loader svg rect { stroke-dasharray: 192 64 192 64; stroke-dashoffset: 0; -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } #preLoader .loader .icon { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; display: flex; align-items: center; justify-content: center; -webkit-animation: pulse 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; animation: pulse 2s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite; } @-webkit-keyframes pathRect { 25% { stroke-dashoffset: 64; } 50% { stroke-dashoffset: 128; } 75% { stroke-dashoffset: 192; } 100% { stroke-dashoffset: 256; } } @keyframes pathRect { 25% { stroke-dashoffset: 64; } 50% { stroke-dashoffset: 128; } 75% { stroke-dashoffset: 192; } 100% { stroke-dashoffset: 256; } } /* ----------------------------------------- Price Range Slider CSS ----------------------------------------- */ .noUi-target { border: none; box-shadow: none; border-radius: 30px; height: 8px; background: rgba(var(--color-primary-rgb), 0.3); } .noUi-connect { background: var(--color-primary); } .noUi-horizontal .noUi-handle { width: 20px; height: 20px; right: -8px; border-radius: 50%; border-width: 3px; box-shadow: none; background: var(--color-primary); border: 3px solid var(--color-light); cursor: -webkit-grab; cursor: grab; } .noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after { content: none; } /* ----------------------------------------- Swiper Slider CSS ----------------------------------------- */ .swiper-container { position: relative; overflow: hidden; } .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 30px; opacity: 1; background-color: #e9e9e9; } .swiper-pagination .swiper-pagination-bullet-active { background: var(--color-primary); } .pagination-fraction .swiper-pagination-bullet { position: relative; width: auto; height: auto; border-radius: 0; margin: 0; margin-inline: 5px; padding-bottom: 5px; text-align: center; font-size: var(--font-lg); color: var(--color-medium); background: transparent; } .pagination-fraction .swiper-pagination-bullet::before { position: absolute; content: ""; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 5px; background: var(--color-primary); transform: scaleX(0); transition: transform 0.4s ease-out; } .pagination-fraction .swiper-pagination-bullet-active { color: var(--color-primary); } .pagination-fraction .swiper-pagination-bullet-active::before { transform: none; } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { line-height: 1; bottom: 0; } .slider-navigation { z-index: 3; } .slider-navigation .slider-btn { width: 40px; height: 40px; text-align: center; border-radius: 5px; border: transparent; background: var(--color-primary); color: var(--color-white); font-size: 24px; border: 1px solid transparent; transition: all 0.3s ease-out; } .slider-navigation .slider-btn:last-child { -webkit-margin-start: 10px; margin-inline-start: 10px; } .slider-navigation .slider-btn i { transition: transform 0.3s ease-out; } .slider-navigation .slider-btn.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .slider-navigation .slider-btn.btn-outline:hover { color: var(--color-white); background: var(--color-primary); } .slider-navigation .slider-btn:disabled { cursor: not-allowed; } /* ----------------------------------------- Nav Tabs CSS ----------------------------------------- */ .tabs-navigation::-webkit-scrollbar { height: 5px; } .tabs-navigation .nav { display: inline-flex; border: none; z-index: 1; position: relative; overflow: hidden; } .tabs-navigation .nav li { flex: 0 0 auto; } .tabs-navigation .nav .nav-link { color: var(--color-medium); font-weight: var(--font-medium); border: 2px solid transparent; margin: 0; z-index: 999; border-radius: 0; cursor: pointer; } .tabs-navigation .nav .nav-link:is(.active, :hover) { color: var(--color-white); background: var(--color-primary); border-radius: 0; } .tabs-navigation .nav .nav-item:not(:last-child, :first-child, .active) .nav-link { border-inline-start-color: var(--border-color); } .tabs-navigation .nav[data-hover=fancyHover] .nav-link:is(.active, :hover) { color: var(--color-medium); background: transparent !important; } .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link { color: var(--color-white); background: var(--color-primary) !important; } .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link:is(:hover) { background: transparent !important; } .tabs-navigation .target { position: absolute; background: var(--color-primary); z-index: -1; transform: translateX(-50%); transition: all 0.3s ease-in-out; } .tabs-navigation.tabs-navigation-3 { border-bottom: 3px solid var(--color-light); } .tabs-navigation.tabs-navigation-3 .nav { display: inline-flex; overflow: hidden; width: 100%; } .tabs-navigation.tabs-navigation-3 .nav .nav-link { border-radius: 0; padding: 12px 30px; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.4s ease-out; color: var(--color-dark); } .tabs-navigation.tabs-navigation-3 .nav .nav-link:is(.active, :hover) { color: var(--color-primary); background: buttonface; border-bottom-color: var(--primary-color); } .tabs-navigation-2 .nav { display: inline-flex; padding: 10px; gap: 0; background-color: rgba(var(--color-primary-rgb), 0.13); } .tabs-navigation-2 .nav .nav-link { color: var(--color-dark); padding: 12px 35px; margin: 0; border-width: 0; } .tab-pane.fade { transition: all 0.2s; transform: translateY(1rem); } .tab-pane.fade.show { transform: translateY(0rem); } .tab-pane.slide.show { animation: slideUp 1 0.4s; } .tab-switch .text { font-size: 18px; color: var(--color-dark); } .switch-toggle { position: relative; display: inline-block; width: 70px; height: 30px; margin: 0 10px; } .switch-toggle .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; border-radius: 30px; background-color: var(--color-primary); border: 1.5px solid var(--color-primary); transition: 0.4s; } .switch-toggle .toggle-slider::before { position: absolute; content: ""; height: 24px; width: 24px; left: 2px; bottom: 2px; border-radius: 50%; background-color: var(--color-white); transition: 0.4s; } .switch-toggle input { opacity: 0; width: 0; height: 0; } .switch-toggle input:checked+.toggle-slider::before { transform: translateX(40px); } .tab-pane.fade { transition: all 0.2s; transform: translateY(1rem); } .tab-pane.fade.show { transform: translateY(0rem); } /* ----------------------------------------- Go top CSS ----------------------------------------- */ .go-top { position: fixed; display: flex; align-items: center; justify-content: center; bottom: 3%; left: 3%; width: 45px; height: 45px; opacity: 0; cursor: pointer; text-decoration: none; color: var(--color-light); font-size: 28px; border-radius: 50%; background-color: var(--color-primary); background-image: var(--gradient-bg); transition: 0.4s; transform: translateY(15%); z-index: 100; } .go-top.active { opacity: 1; transform: none; } .go-top:hover { transform: translateY(-3px); } /* ----------------------------------------- Title CSS ----------------------------------------- */ .section-title .title { margin-bottom: 0; margin-top: -12px; } .section-title.title-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; } .section-title.title-center { text-align: center; } .section-title.title-center .subtitle { -webkit-padding-start: 0; padding-inline-start: 0; } .section-title.title-center .subtitle::before { content: none; } .section-title.title-center .title { max-width: 600px; text-align: center; margin-left: auto; margin-right: auto; } .content-title h2 { margin-bottom: 10px; margin-top: -8px; } .content-title p { margin-bottom: 0; } .line { position: relative; overflow: hidden; padding-bottom: 6px; } .line::after { position: absolute; content: ""; bottom: 0; left: 0; right: 0; width: 100%; height: 16px; mask: url(../images/line.svg) no-repeat center/contain; -webkit-mask: url(../images/line.svg) no-repeat center/contain; background: var(--color-primary); } .line-2 { position: relative; overflow: hidden; } .line-2::after { position: absolute; content: ""; bottom: 0; left: 0; right: 0; width: 100%; height: 16px; mask: url(../images/line-2.svg) no-repeat center/contain; -webkit-mask: url(../images/line-2.svg) no-repeat center/contain; background: var(--color-primary); } /* ----------------------------------------- Animation CSS ----------------------------------------- */ @-webkit-keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } } @-webkit-keyframes slideUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes slideDown { from { opacity: 0; transform: translateY(-50%); } to { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-50%); } to { opacity: 1; transform: translateY(0); } } @-webkit-keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @-webkit-keyframes moveAround { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @keyframes moveAround { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @-webkit-keyframes moveUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } @keyframes moveUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } @-webkit-keyframes moveLeftRight { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } } @keyframes moveLeftRight { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } } @-webkit-keyframes ripple { 0% { opacity: 0.45; } 100% { opacity: 0; transform: scale(2); } } @keyframes ripple { 0% { opacity: 0.45; } 100% { opacity: 0; transform: scale(2); } } /* ----------------------------------------- Social Link CSS ----------------------------------------- */ .social-link a { display: inline-block; text-align: center; width: 36px; height: 36px; line-height: 36px; border-radius: 50%; -webkit-margin-end: 10px; margin-inline-end: 10px; background-color: rgba(var(--color-primary-rgb), 0.2); color: var(--color-primary); } .social-link a:last-child { margin: 0; } .social-link a:hover { color: var(--color-white); background-color: var(--color-primary); box-shadow: 0px 4px 8px 0px rgba(var(--color-primary-rgb), 0.34); } /* ----------------------------------------- Datepicker CSS ----------------------------------------- */ .datepicker { padding: 10px; text-align: center; background-color: #fff; border-width: 0; box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.2); } .datepicker td, .datepicker th { cursor: pointer; line-height: 0; border-radius: 0; width: 40px; height: 40px; } .datepicker td, .datepicker td span { border-radius: 5px; } .datepicker table tr td.active.active, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled.active, .datepicker table tr td.active.disabled.disabled, .datepicker table tr td.active.disabled:active, .datepicker table tr td.active.disabled:hover, .datepicker table tr td.active.disabled:hover.active, .datepicker table tr td.active.disabled:hover.disabled, .datepicker table tr td.active.disabled:hover:active, .datepicker table tr td.active.disabled:hover:hover, .datepicker table tr td.active.disabled:hover[disabled], .datepicker table tr td.active.disabled[disabled], .datepicker table tr td.active:active, .datepicker table tr td.active:hover, .datepicker table tr td.active:hover.active, .datepicker table tr td.active:hover.disabled, .datepicker table tr td.active:hover:active, .datepicker table tr td.active:hover:hover, .datepicker table tr td.active:hover[disabled], .datepicker table tr td.active[disabled], .datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] { background: var(--color-primary) !important; } .datepicker.datepicker-dropdown:before { border-color: transparent; } /* ----------------------------------------- Cookiebar CSS ----------------------------------------- */ .cookie-bar { position: fixed; bottom: -100%; left: 0; width: 100%; background-color: var(--color-dark); padding: 20px 20px 0; transition: all 2s linear; z-index: 999; } .cookie-bar-inner { display: flex; align-items: center; justify-content: space-between; } .cookie-bar .btn:not(:last-child) { -webkit-margin-end: 10px; margin-inline-end: 10px; } .cookie-bar .btn::before { content: none; } .cookie-bar.show { bottom: 0; transition: all 2s linear; } /* ----------------------------------------- Hero Banner CSS ----------------------------------------- */ .hero-banner { position: relative; overflow: hidden; } .hero-banner .content .text { font-size: var(--font-lg); max-width: 540px; margin-bottom: 0; } .hero-banner .banner-filter-form .form-wrapper { padding: 25px 25px; box-shadow: var(--shadow-md); background: var(--color-white); } .hero-banner .banner-filter-form .custom-col-1 { width: 30%; } .hero-banner .banner-filter-form .custom-col-2 { width: 20%; } .hero-banner .banner-filter-form .custom-col-3 { width: 30%; } .hero-banner .banner-filter-form .with-border { position: relative; } .hero-banner .banner-filter-form .with-border::after { position: absolute; content: ""; top: 0; right: 15px; bottom: 0; width: 1px; height: 100%; background: var(--border-color); } .hero-banner .banner-filter-form .input-group { align-items: center; height: 40px; line-height: 40px; } .hero-banner .banner-filter-form label { font-size: 20px; color: var(--color-primary); margin-bottom: 0; line-height: 1; } .hero-banner .banner-filter-form .select2-container { width: calc(100% - 30px) !important; flex: 0 0 auto; } .hero-banner .banner-filter-form .select2-container--default .select2-selection--single { border: unset; padding: 0; background-color: transparent; } .hero-banner .banner-filter-form .select2-container .select2-selection--single .select2-selection__rendered, .hero-banner .banner-filter-form .form-control { padding: 0; margin: 0; border: 0; height: 100%; -webkit-padding-start: 8px; padding-inline-start: 8px; font-size: var(--font-base); font-weight: 600; color: var(--color-medium); background: transparent; } .select2-dropdown { min-width: 200px; color: var(--color-dark); border-radius: 3px; border: unset; box-shadow: 0px 0px 30px 0px rgba(var(--color-dark-rgb), 0.15); } .select2-results__option { padding-inline: 12px; } .select2-container--default .select2-search--dropdown .select2-search__field { border-color: var(--border-color); } .select2-container ::-webkit-scrollbar { width: 5px; } .hero-banner .banner-filter-form .nice-select .list li, .hero-banner .banner-filter-form .form-control .list li { line-height: 30px; min-height: 30px; } .hero-banner .banner-filter-form .nice-select::after { position: static; display: inline-block; -webkit-margin-start: 10px; margin-inline-start: 10px; vertical-align: middle; } .hero-banner .banner-filter-form .price-value { margin-bottom: 20px; } .hero-banner .banner-filter-form .price-value span { color: var(--color-primary); font-size: var(--font-sm); } .hero-banner .banner-filter-form .btn-filter { font-size: 24px; color: var(--color-primary); } .hero-banner .banner-tags a { position: relative; -webkit-padding-start: 22px; padding-inline-start: 22px; color: var(--color-medium); } .hero-banner .banner-tags a:hover { color: var(--color-primary); } .hero-banner .banner-tags a i { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); -webkit-margin-end: auto; margin-inline-end: auto; } .hero-banner .banner-tags a:not(:last-child) { -webkit-margin-end: 16px; margin-inline-end: 16px; -webkit-padding-end: 16px; padding-inline-end: 16px; } .hero-banner .banner-tags a:not(:last-child)::after { position: absolute; content: ""; top: 50%; right: -4px; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; opacity: 0.3; background: var(--color-medium); } .hero-banner .shape img { position: absolute; z-index: -1; } .hero-banner .shape img.shape-1 { top: 13%; left: -3%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .hero-banner .shape img.shape-2 { top: 15%; left: 20%; -webkit-animation: rotate 15s linear infinite; animation: rotate 15s linear infinite; } .hero-banner .shape img.shape-3 { top: 10%; left: 55%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .hero-banner .shape img.shape-4 { bottom: 20%; left: 5%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .hero-banner .shape img.shape-5 { top: 40%; left: 50%; -webkit-animation: moveLeftRight 5s linear infinite; animation: moveLeftRight 5s linear infinite; } .hero-banner.hero-banner-1 .content { max-width: 600px; } .hero-banner.hero-banner-1 .content-left { padding-block: 100px 60px; } .hero-banner.hero-banner-2 { padding-top: 200px; padding-bottom: 270px; } .hero-banner.hero-banner-2.no-city { padding-bottom: 170px; } .hero-banner.hero-banner-3 { padding-top: 200px; padding-bottom: 160px; } .hero-banner.hero-banner-4 .content-left { padding-block: 100px 60px; } .hero-banner.hero-banner-4 .content-right { position: absolute; top: 100px; right: 0; width: 45%; z-index: -1; } .hero-banner.hero-banner-4 .content-right .img { -webkit-animation: moveUpDown 6s infinite; animation: moveUpDown 6s infinite; } /* ----------------------------------------- Category CSS ----------------------------------------- */ .counter-area { position: relative; } .counter-area .card { background: transparent; } .counter-area .card-icon { font-size: 70px; line-height: 1; color: var(--color-primary); } .counter-area .card h2 { line-height: 1; color: var(--color-primary); } .counter-area .card-content { -webkit-padding-start: 20px; padding-inline-start: 20px; } .counter-area.with-radius { border-radius: 50px 50px 0 0; } /* ----------------------------------------- Category CSS ----------------------------------------- */ .category-area { position: relative; overflow: hidden; } .category-area .category-item { padding: 25px; background: var(--color-white); transition: all 0.4s ease-out; } .category-area .category-item .category-icon { position: relative; margin-inline: auto; width: 76px; height: 76px; z-index: 1; font-size: 60px; color: var(--color-primary); } .category-area .category-item .category-icon i { display: inline-block; transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition-duration: 0.5s; } .category-area .category-item .category-qty { display: block; margin-inline: auto; font-size: var(--font-sm); transition: all 0.3s ease-out; } .category-area .category-item .hover-primary { transition: 0.3s all ease-out; } .category-area .category-item:hover .category-icon i { transform: scale(1.2); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } .category-area .category-item:hover .category-icon.hover-primary { color: var(--color-white); background: var(--color-primary) !important; } .category-area.category-1 .category-item { box-shadow: var(--shadow-sm); } .category-area.category-1 .category-item .category-icon { margin-bottom: 30px; } .category-area.category-1 .category-item .category-icon::after { position: absolute; content: ""; bottom: -30px; left: 50%; width: 100%; height: 100%; transform: translateX(-50%); mask: url(../images/shape/blob.svg) no-repeat center/contain; -webkit-mask: url(../images/shape/blob.svg) no-repeat center/contain; background: rgba(var(--color-primary-rgb), 0.13); z-index: -1; } .category-area.category-1 .category-item .category-title { font-size: var(--font-lg); } .category-area.category-1 .category-item .category-qty { width: 45px; height: 45px; line-height: 45px; border-radius: 5px; background: rgba(var(--color-primary-rgb), 0.13); } .category-area.category-1 .category-item:hover .category-qty { background: var(--color-primary); color: var(--color-white); } .category-area.category-1 .swiper-slide:nth-child(even) { margin-top: 30px; } .category-area.category-1 .shape img.shape-1 { top: 13%; right: 5%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .category-area.category-1 .shape img.shape-2 { top: 70%; left: 4%; -webkit-animation: moveLeftRight 5s linear infinite; animation: moveLeftRight 5s linear infinite; } .category-area.category-1 .shape img.shape-3 { bottom: 10%; right: 8%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .category-area.category-1 .shape img.shape-4 { top: 14%; left: 6%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .category-area.category-1 .shape img.shape-5 { top: 18%; left: 50%; -webkit-animation: moveAround 20s linear infinite; animation: moveAround 20s linear infinite; } .category-area.category-2 .category-item { padding-top: 0; padding-bottom: 0; margin-top: 30px; } .category-area.category-2 .category-item .category-icon { display: grid; place-items: center; margin-top: -30px; margin-bottom: 15px; background: var(--color-white); box-shadow: 0px 8px 45px rgba(65, 65, 65, 0.09); border-radius: 50%; font-size: 40px; } .category-area.category-2 .category-item .category-qty { position: relative; overflow: hidden; width: 60px; height: 60px; line-height: 80px; color: var(--color-medium); margin-top: -15px; margin-bottom: -1px; z-index: 2; } .category-area.category-2 .category-item .category-qty::after { position: absolute; content: ""; left: 0; bottom: -20px; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--color-white); z-index: -1; transition: all 0.3s ease-out; } .category-area.category-2 .category-item:hover { border-color: var(--color-primary) !important; } .category-area.category-2 .category-item:hover .category-qty { color: var(--color-white); } .category-area.category-2 .category-item:hover .category-qty::after { background: var(--color-primary); border-color: var(--color-primary); } .category-area.category-2 .shape img.shape-1 { left: -7%; top: 40%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .category-area.category-2 .shape img.shape-2 { right: -7%; top: 40%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .category-area.category-3 .category-item { padding-bottom: 0; border: 1px solid transparent; } .category-area.category-3 .category-item .category-qty { width: 60px; height: 45px; line-height: 45px; margin-bottom: -20px; color: var(--color-primary); border-radius: 5px; background: var(--color-white); box-shadow: 0px 8px 45px rgba(65, 65, 65, 0.05); } .category-area.category-3 .category-item:hover .category-qty { color: var(--color-white); background: var(--color-primary); } .category-area.category-4 .category-item { padding-top: 0; padding-bottom: 0; margin-top: 30px; } .category-area.category-4 .category-item .category-icon { display: grid; place-items: center; height: 80px; margin-top: -30px; margin-bottom: 20px; background: var(--color-white); box-shadow: 0px 8px 45px rgba(65, 65, 65, 0.09); border-radius: 50%; font-size: 40px; } .category-area.category-4 .category-item .category-qty { position: relative; overflow: hidden; width: 60px; height: 60px; line-height: 80px; color: var(--color-medium); margin-bottom: -1px; z-index: 2; } .category-area.category-4 .category-item .category-qty::after { position: absolute; content: ""; left: 0; bottom: -20px; width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--color-white); z-index: -1; transition: all 0.3s ease-out; } .category-area.category-4 .category-item:hover { border-color: var(--color-primary) !important; } .category-area.category-4 .category-item:hover .category-qty { color: var(--color-white); } .category-area.category-4 .category-item:hover .category-qty::after { background: var(--color-primary); border-color: var(--color-primary); } .category-area .shape img { position: absolute; z-index: -1; } /* ----------------------------------------- Gallery CSS ----------------------------------------- */ .gallery-area .card { overflow: hidden; } .gallery-area .card::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(180.25deg, rgba(255, 255, 255, 0) -4.6%, rgba(18, 18, 18, 0.56) 74.16%, rgba(12, 12, 12, 0.7) 99.79%); z-index: 2; } .gallery-area .card .card-img { overflow: hidden; } .gallery-area .card .card-img img { transition: transform 0.3s ease-out; } .gallery-area .card .card-text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 15px 0; z-index: 2; display: flex; flex-direction: column; justify-content: end; align-items: center; } .gallery-area .card .card-text .card-title, .gallery-area .card .card-text span { display: block; opacity: 0; transform: translateY(20px); transition: transform 0.4s, opacity 0.4s; } .gallery-area .card .card-text span { transition-delay: 0.1s; } .gallery-area .card:hover .card-img img { transform: scale3d(1.05, 1.05, 1.05); } .gallery-area .card:hover .card-text .card-title, .gallery-area .card:hover .card-text span { opacity: 1; transform: none; } /* ----------------------------------------- Testimonial CSS ----------------------------------------- */ .testimonial-area { position: relative; overflow: hidden; } .testimonial-area .slider-item { position: relative; background: var(--color-white); box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.11); } .testimonial-area .slider-item .client-content { border: 1px solid var(--border-color); background: var(--color-white); transition: box-shadow 0.3s ease-out; } .testimonial-area .slider-item .quote { padding: 25px 25px 23px 25px; border-bottom: 1px solid var(--border-color); } .testimonial-area .slider-item .icon { display: block; font-size: 22px; color: rgba(var(--color-primary-rgb), 0.19); } .testimonial-area .slider-item p { margin-bottom: 0; } .testimonial-area .slider-item .client-info { padding: 25px; } .testimonial-area .slider-item .client-info h6 { margin-bottom: 2px; } .testimonial-area .slider-item .client-info .designation { font-size: var(--font-sm); } .testimonial-area .slider-item .client-img { max-width: 50px; -webkit-margin-end: 16px; margin-inline-end: 16px; } .testimonial-area .slider-item .ratings { font-size: var(--font-sm); } .testimonial-area .slider-item .ratings i { color: var(--color-yellow); } .testimonial-area .swiper-slide:hover .client-content, .testimonial-area .swiper-slide-active .client-content { box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.11); } .testimonial-area .clients .client-img { -webkit-margin-end: 10px; margin-inline-end: 10px; } .testimonial-area .clients img { max-width: 40px; border-radius: 50%; } .testimonial-area .clients img:not(:first-child) { margin-left: -16px; } .testimonial-area.testimonial-1 .img-content { position: relative; } .testimonial-area.testimonial-1 .img-content::after { position: absolute; content: ""; bottom: -17px; left: 50%; width: calc(100% + 100px); height: 100%; transform: translateX(-50%); mask: url(../images/testimonial-img-bg.svg) no-repeat center/contain; -webkit-mask: url(../images/testimonial-img-bg.svg) no-repeat center/contain; background: var(--color-primary); z-index: -1; } .testimonial-area.testimonial-1 .img-content::before { position: absolute; content: ""; bottom: 0; right: 0; left: 50%; width: calc(100% + 100px); height: 100%; transform: translateX(-50%); background: url(../images/testimonial-img-bg-shape.png) no-repeat; background-size: cover; } .testimonial-area.testimonial-1 .img-content img { display: block; margin-inline: auto; } .testimonial-area.testimonial-1 .shape img { position: absolute; z-index: -1; } .testimonial-area.testimonial-1 .shape img.shape-1 { left: -5%; top: 10%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-1 .shape img.shape-2 { right: -5%; bottom: 2%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-1 .shape img.shape-3 { left: -4%; bottom: 0%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-1 .shape img.shape-4 { right: -5%; top: 0%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-2 { position: relative; } .testimonial-area.testimonial-2 .swiper-pagination { bottom: unset; left: unset; width: auto; right: 0; top: 50%; transform: translateY(-50%); text-align: unset; -webkit-margin-end: 20px; margin-inline-end: 20px; } .testimonial-area.testimonial-2 .swiper-pagination span { display: block; margin: 5px 0; } .testimonial-area.testimonial-2 .swiper-slide { -webkit-padding-end: 50px; padding-inline-end: 50px; } .testimonial-area.testimonial-2 .img-content .img { position: relative; } .testimonial-area.testimonial-2 .img-content .img img { overflow: hidden; border-radius: 10px; -webkit-clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); clip-path: polygon(5% 0, 100% 0%, 95% 100%, 0% 100%); } .testimonial-area.testimonial-2 .img-content .img::after { position: absolute; content: ""; top: 0; left: 50%; width: 10px; height: 100%; transform: translateX(-50%) skewX(-5deg); background: var(--color-white); z-index: 1; } .testimonial-area.testimonial-2 .shape img { position: absolute; z-index: -1; } .testimonial-area.testimonial-2 .shape img.shape-1 { left: 0%; top: 10%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-2 .shape img.shape-2 { right: 0%; bottom: 2%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-2 .shape img.shape-3 { left: 45%; top: 20%; -webkit-animation: rotate 10s linear infinite; animation: rotate 10s linear infinite; } .testimonial-area.testimonial-2 .shape img.shape-4 { right: 0%; top: 5%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .testimonial-area.testimonial-2 .shape img.shape-5 { right: 10%; bottom: 15%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } /* ----------------------------------------- Newsletter CSS ----------------------------------------- */ .newsletter-area .newsletter-inner { position: relative; overflow: hidden; padding: 60px 0; border-radius: 30px; } .newsletter-area .newsletter-inner::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background-color: var(--color-dark); opacity: 0.5; z-index: -1; } .newsletter-area .newsletter-form .input-group { padding: 0; background-color: transparent; border: 2px solid var(--color-white); } .newsletter-area .newsletter-form .input-group :-ms-input-placeholder { color: var(--color-white); } .newsletter-area .newsletter-form .input-group ::-moz-placeholder { color: var(--color-white); } .newsletter-area .newsletter-form .input-group ::placeholder { color: var(--color-white); } .newsletter-area .newsletter-form .input-group .btn { border-radius: 5px !important; color: var(--color-dark); background: var(--color-white); } .newsletter-area .newsletter-form .input-group .form-control { background-color: transparent; padding: 20px; color: var(--color-white); } /* ----------------------------------------- Product CSS ----------------------------------------- */ .product-default { position: relative; overflow: hidden; background: var(--color-white); transition: all 0.3s ease-out; } .product-default.active { border-color: var(--color-primary) !important; background-color: rgba(var(--color-primary-rgb), 0.04) !important; } .product-default .product-img { position: relative; } .product-default .badge { position: absolute; top: 10px; left: 0; right: 0; margin-inline-start: auto; margin-inline-end: 10px; padding: 7px 12px; border-radius: 3px; color: var(--color-white); background-color: var(--color-primary); width: fit-content; z-index: 5; } .product-default .btn-icon { position: absolute; top: 10px; left: 0; right: 0; margin-inline-start: auto; margin-inline-end: 10px; z-index: 4; display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 30px; text-align: center; color: var(--color-primary); border-radius: 4px; background-color: var(--color-white); } .product-default .product-img img { transition: transform 0.3s ease-out; } .product-default .product-details { padding: 16px; } .product-default .product-details .product-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .product-default .author span { font-size: var(--font-sm); } .product-default .author img { border-radius: 50%; width: 25px; height: 25px; object-fit: cover; -webkit-margin-end: 5px; margin-inline-end: 5px; background-color: var(--bg-light); } .product-default .product-category { font-size: var(--font-sm); font-weight: var(--font-medium); color: var(--color-medium); } .product-default .btn-wishlist i, .product-default .product-category i { color: var(--color-primary); } .wishlist-active i { color: var(--color-red) !important; font-weight: 900; } .product-default .product-title { margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-default .product-location { font-weight: var(--font-medium); } .product-default .product-location i { font-size: var(--font-sm); } .product-default:hover { border-color: transparent !important; box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.1); } .product-default:hover .btn-wishlist i { font-weight: 700; } .product-default:hover .product-img img { transform: scale3d(1.05, 1.05, 1.05); } .product-price { display: flex; align-items: center; justify-content: start; } .product-price .price { font-weight: var(--font-semi-bold); } .product-location i { color: var(--color-primary); } .product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .product-price .price .prev-price { font-size: 80%; text-decoration: line-through; margin-inline-start: 5px; color: #969696 !important; } .product-info { margin-bottom: 0; font-weight: 500; font-size: var(--font-sm); color: var(--color-primary); } .product-info i { font-size: 20px; } .product-info span { color: var(--color-medium); } .product-info li:not(:last-child) { -webkit-padding-end: 10px; padding-inline-end: 10px; -webkit-margin-end: 10px; margin-inline-end: 10px; border-right: 1px solid var(--border-color); } .product-column { border-radius: 0 15px 15px 0; } .product-column .btn-icon { margin-inline-start: 10px; margin-inline-end: auto; } .product-column .product-img { position: relative; overflow: hidden; padding: 0; border-radius: 0 15px 15px 0; } .product-column .product-title { margin-top: 5px; margin-bottom: 5px; -webkit-line-clamp: 1; } .product-column .product-details { padding: 0; -webkit-padding-start: 22px; padding-inline-start: 22px; } .product-column .product-list-group { margin-top: 15px; -webkit-padding-start: 16px; padding-inline-start: 16px; } .product-column .product-list-group li { list-style-type: disc; } .product-column .product-list-group li:not(:last-child) { margin-bottom: 5px; } .product-column .product-info { margin-top: 20px; } .product-inline { display: flex; border-width: 0; padding: 0; border: 0; box-shadow: none; background: transparent; } .product-inline .product-img { flex: 0 0 35%; max-width: 35%; overflow: hidden; } .product-inline .product-img img { background-color: var(--color-light-1); } .product-inline .product-title { -webkit-line-clamp: 1; margin-bottom: 0; } .product-inline .product-details { flex: 0 0 70%; max-width: 70%; padding: 0; -webkit-padding-start: 10px; padding-inline-start: 10px; } .product-inline .product-location { font-size: var(--font-sm); } .product-inline .product-location i { font-size: var(--font-sm); } .product-inline .product-price { margin: 0; font-size: var(--font-xsm); } .product-inline .product-price .new-price { font-size: 12px; -webkit-margin-end: 5px; margin-inline-end: 5px; } .product-inline .product-info { margin-top: 5px; } .product-inline .product-info i { font-size: 12px; } .product-inline:hover { box-shadow: none; } .listing-single .product-single-gallery { position: relative; padding-bottom: 30px; } .listing-single .product-single-gallery .swiper-slide { overflow: hidden; } .listing-single .product-single-gallery .slider-btn { position: absolute; top: 50%; width: 50px; height: 50px; transform: translateY(-50%); z-index: 4; } .listing-single .product-single-gallery .slider-btn.slider-btn-prev { left: 1%; } .listing-single .product-single-gallery .slider-btn.slider-btn-next { right: 1%; } .listing-single .slider-thumbnails { position: relative; bottom: 0; max-width: 60%; margin-inline: auto; margin-top: -40px; z-index: 1; } .listing-single .slider-thumbnails .swiper-wrapper { justify-content: center; } .listing-single .slider-thumbnails .swiper-slide { height: 100%; overflow: hidden; } .listing-single .slider-thumbnails .thumbnail-img { cursor: pointer; } .listing-single .slider-thumbnails .thumbnail-img img { -o-object-fit: cover; object-fit: cover; height: 100%; } .listing-single .product-full-screen { position: absolute; top: 0; right: 0; z-index: 1; } .listing-single .product-single-details h2.product-title { font-size: 32px; } .listing-single .product-single-details .product-price h3 { -webkit-margin-end: 10px; margin-inline-end: 10px; } .listing-single .product-single-details .info-list { display: flex; align-items: center; flex-wrap: wrap; gap: 15px; } .listing-single .product-single-details .info-list li *:not(i) { font-size: var(--font-sm); } .listing-single .product-single-details .info-list li:not(:last-child) { -webkit-padding-end: 15px; padding-inline-end: 15px; border-inline-end: 1px solid var(--border-color); } .listing-single .product-single-details .info-list .btn { padding: 0; font-weight: normal; color: var(--color-medium); } .listing-single .product-single-details .info-list .btn.blue i { color: var(--color-blue); } .listing-single .product-single-details .info-list .btn.red i { color: var(--color-red); } .listing-single .product-single-details .product-desc p:last-child { margin-bottom: 0; } .listing-single .product-single-details .progress { height: 10px; border-radius: 30px; } .listing-single .product-single-details .progress .progress-bar { border-radius: 30px; background: var(--color-primary); } .listing-single .form-group ul.rating li { margin-bottom: 10px; display: inline-block; cursor: pointer; } .listing-single .form-group ul.rating li:after { display: inline-block; content: "|"; margin-left: 10px; margin-right: 7px; } .listing-single .form-group ul.rating li:last-child:after { display: none; } .listing-single .form-group ul.rating li:hover span { color: var(--color-primary); } .product-sort-area p { -webkit-margin-end: 20px; margin-inline-end: 20px; } .product-sort-area .product-sort-list { text-align: end; } .product-sort-area .item label { line-height: 2; margin-inline-end: 10px; margin-bottom: 0; } .product-sort-area .item { display: inline-block; } .product-sort-area .item:not(:last-child) { -webkit-margin-end: 10px; margin-inline-end: 10px; } .product-sort-area .item form { display: flex; align-items: center; } .product-sort-area .nice-select { border: 0; padding: 0; line-height: 1.2; height: auto; background-color: var(--bg-light); border-radius: 3px; padding: 10px 15px; padding-inline-end: 20px; } .product-sort-area .nice-select::after { right: 6px; } .product-sort-area .nice-select .list { min-width: 150px; width: fit-content; } .product-sort-area .btn-icon { width: auto; height: auto; background: transparent; color: var(--color-gray-1); } .product-sort-area .btn-icon.active, .product-sort-area .btn-icon:hover { color: var(--color-primary); } .featured-list li { -webkit-margin-end: 20px; margin-inline-end: 20px; margin-bottom: 10px; } .featured-list li i { color: var(--color-primary); } .amenities-list { display: inline-flex; flex-wrap: wrap; gap: 10px; } .amenities-list li { padding: 8px 16px; border: 1px solid var(--border-color); font-size: var(--font-sm); line-height: 1.3; } .amenities-list i { color: var(--color-primary); } .product-area { position: relative; overflow: hidden; } .product-area .shape img { position: absolute; z-index: -1; } .product-area .shape img.shape-1 { left: -5%; top: 10%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .product-area .shape img.shape-2 { right: -5%; bottom: 2%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .product-area .shape img.shape-3 { left: -4%; bottom: 0%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .product-area .shape img.shape-4 { right: -5%; top: 10%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } /* ----------------------------------------- Footer CSS ----------------------------------------- */ .footer-area { position: relative; overflow: hidden; } .footer-area .footer-widget { margin-bottom: 30px; } .footer-area .footer-widget ul { padding: 0; margin: 0; list-style-type: none; } .footer-area .footer-widget .navbar-brand { margin: 0; margin-bottom: 28px; padding: 0; } .footer-area .footer-widget h3 { text-transform: capitalize; margin-bottom: 25px; } .footer-area .footer-widget p { margin-bottom: 25px; } .footer-area .footer-widget .info-list li { display: flex; align-items: center; } .footer-area .footer-widget .info-list i { color: var(--color-primary); font-size: 20px; -webkit-margin-end: 10px; margin-inline-end: 10px; } .footer-area .footer-widget .footer-links li, .footer-area .footer-widget .info-list li { position: relative; overflow: hidden; margin-bottom: 10px; color: var(--color-medium); } .footer-area .footer-widget .footer-links li a, .footer-area .footer-widget .info-list li a { color: var(--color-medium); } .footer-area .footer-widget .footer-links li a:hover, .footer-area .footer-widget .info-list li a:hover { color: var(--color-primary); } .footer-area .footer-widget .footer-links li:last-child, .footer-area .footer-widget .info-list li:last-child { margin-bottom: 0; } .footer-area .copy-right-area { text-align: center; padding: 30px 0; } .footer-area .newsletter-form { box-shadow: 0px 0px 20px 0px rgba(76, 87, 125, 0.1); } .footer-area .newsletter-form input { height: 55px; border-color: rgba(var(--color-white-rgb), 0.1); } .footer-area .newsletter-form .btn { top: 5px; right: 5px; height: calc(100% - 10px); position: absolute; } @keyframes cluster-animation { 0%, 100% { transform: scale(1.3); } 50% { transform: scale(1.5); } } .leaflet-container { height: 100%; width: 100vw; max-width: 100%; max-height: 100%; } .marker-cluster { background: transparent; } .marker-cluster div { position: relative; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); font-size: var(--font-lg); text-align: center; } .marker-cluster div:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; box-shadow: inset 0 0 0 10px var(--color-primary); content: ""; border-radius: 50%; animation: cluster-animation 2.5s infinite; z-index: -1; } .cluster img { display: none; } .map-marker-container { position: absolute; margin-top: 10px; transform: translate3d(-50%, -100%, 0); } .marker-container { position: relative; margin: 10px auto; width: 40px; height: 40px; z-index: 1; border-radius: 50%; cursor: pointer; top: -5px; } .marker-container .marker-card { width: 100%; height: 100%; transform-style: preserve-3d; position: absolute; z-index: 1; transition: all 0.3s linear; } .marker-container .marker-arrow { position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 22px 15px 0; border-color: var(--color-primary) transparent transparent; top: 33px; left: 50%; transform: translateX(-50%); border-radius: 0; z-index: 1; } .marker-container:hover .marker-card { transform: translateY(-5px); } .map-marker-container.clicked .marker-card { transform: rotateY(-180deg) translateY(0px); } .face { position: absolute; width: 100%; height: 100%; text-align: center; border-radius: 10%; border-radius: 50px; background-color: #fff; border: 6px solid var(--color-primary); color: var(--color-primary); transition: all 1s linear; z-index: 100; } .face i { line-height: 28px; font-size: var(--font-sm); } .leaflet-popup { transition: all 0.3s linear; } .leaflet-popup .leaflet-popup-content-wrapper, .leaflet-popup .leaflet-popup-tip { padding: 0; overflow: hidden; } .leaflet-popup .leaflet-popup-content-wrapper { border-radius: var(--radius-sm); } .leaflet-popup a { color: var(--text-dark); } .leaflet-popup .leaflet-popup-content { position: relative; margin: 0; border-radius: 0; } .leaflet-popup .product-default { width: 280px; border: 0; color: var(--text-medium); } .leaflet-popup a.leaflet-popup-close-button { width: 25px; height: 25px; border-radius: 0 0 0 10px; background: var(--bg-white); z-index: 5; } .leaflet-popup .label { padding: 3px 10px; font-size: var(--font-sm); } .leaflet-touch .leaflet-control-attribution { font-size: 10px; } .leaflet-top, .leaflet-bottom { z-index: 777; } /* ----------------------------------------- Banner CSS ----------------------------------------- */ .video-banner, .action-banner { position: relative; overflow: hidden; } .action-banner .image .img-1, .action-banner .image .img-2 { padding: 10px; position: relative; } .action-banner .image .img-1::after, .action-banner .image .img-2::after { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-white); border-radius: 10px; z-index: -1; } .action-banner .image .img-1 { transform: rotateZ(-10deg); } .action-banner .image .img-2 { transform: rotateZ(10deg); } .banner-sm { position: relative; overflow: hidden; } .banner-sm .banner-content { position: absolute; top: 0; bottom: 0; left: 0; max-width: 60%; padding: 0 30px; display: flex; align-items: center; } .banner-sm.content-center .banner-content { max-width: 100%; text-align: center; padding: 30px 10px; } /* ----------------------------------------- Work Process CSS ----------------------------------------- */ .work-area { position: relative; overflow: hidden; } .work-area .shape img { position: absolute; z-index: -1; } .work-area .shape img.shape-1 { top: 13%; right: 5%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .work-area .shape img.shape-2 { top: 70%; left: 4%; -webkit-animation: moveLeftRight 5s linear infinite; animation: moveLeftRight 5s linear infinite; } .work-area .shape img.shape-3 { bottom: 10%; right: 8%; -webkit-animation: moveAround 20s linear infinite; animation: moveAround 20s linear infinite; } .work-area .shape img.shape-4 { top: 14%; left: 6%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .work-area .shape img.shape-5 { top: 18%; left: 50%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .work-process-1 .card { padding: 20px; margin-top: 42px; transition: all 0.3s ease-out; border: 3px solid var(--border-color); z-index: 1; } .work-process-1 .card-content { position: relative; padding: 35px; background: rgba(var(--color-primary-rgb), 0.1); transition: all 0.3s ease-out; } .work-process-1 .card-icon { width: 80px; height: 80px; line-height: 80px; margin-top: 30px; margin-bottom: 30px; text-align: center; font-size: 45px; color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.13); } .work-process-1 .card-step { position: absolute; top: -50px; left: 30px; right: 0; width: 120px; height: 60px; display: flex; align-items: center; text-align: center; } .work-process-1 .card-step:before { position: absolute; content: ""; top: 50%; left: -10px; right: 0; transform: translateY(-50%); width: calc(100% + 20px); height: 20px; background: var(--color-white); z-index: -1; } .work-process-1 .card-step span { position: relative; font-weight: 800; font-size: 115px; line-height: 1; text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 2px var(--color-medium); transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 0.3s linear; } .work-process-1 .card-step span::before { position: absolute; top: 100%; left: 0; width: 100%; height: 100%; content: attr(data-hover); transform: rotateX(-90deg); transform-origin: 50% 0; -webkit-text-fill-color: var(--color-primary); -webkit-text-stroke: 0; } .work-process-1 .card:hover { border-color: rgba(var(--color-primary-rgb), 0.4); } .work-process-1 .card:hover .card-content { background: var(--color-white); box-shadow: var(--shadow-sm); } .work-process-1 .card:hover .card-step span { transform: rotateX(90deg) translateY(-22px); } .work-process-2 .card { padding: 0 30px 30px; transition: all 0.4s ease-out; z-index: 1; } .work-process-2 .card::after { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; border-radius: 5px; border-bottom: 2px solid var(--color-primary); transform: scaleX(0); transition: transform 0.4s ease-out; z-index: -1; } .work-process-2 .card .card-icon { width: 64px; height: 84px; line-height: 84px; text-align: center; font-size: 32px; border-radius: 0 0 5px 5px; color: var(--color-primary); background-color: rgba(var(--color-primary-rgb), 0.13); transition: all 0.3s ease-out; } .work-process-2 .card .card-content { position: relative; } .work-process-2 .card .card-content .card-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .work-process-2 .card:hover { border-color: transparent !important; box-shadow: 0px 4px 80px rgba(17, 16, 33, 0.08); transform: none; } .work-process-2 .card:hover::after { transform: scaleX(1); } .work-process-2 .card:hover .card-icon { color: var(--color-white); background: var(--color-primary); } /* ----------------------------------------- Pricing CSS ----------------------------------------- */ .pricing-item { position: relative; overflow: hidden; padding: 50px 40px; border: 1px solid var(--border-color); background: var(--color-white); transition: all 0.3s ease-out; z-index: 1; } .pricing-item::after { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-primary); transform: translateY(calc(-100% - 2px)); transition: transform 0.5s ease-out; z-index: -1; } .pricing-item .icon { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; font-size: 32px; text-align: center; border-radius: 10px; color: var(--color-primary); background: rgba(var(--color-primary-rgb), 0.13); } .pricing-item .icon i { font-weight: var(--font-semi-bold); } .pricing-item .label { -webkit-padding-start: 16px; padding-inline-start: 16px; } .pricing-item .label span { display: inline-block; padding: 5px 18px; border-radius: 30px; margin-top: 5px; font-size: 12px; font-weight: 500; background-color: var(--color-white); color: var(--color-primary); display: none; } .pricing-item h3 { margin-bottom: 0; } .pricing-item .text { margin-top: 20px; margin-bottom: 30px; } .pricing-item .price { font-family: var(--font-heading); font-weight: 700; color: var(--color-dark); font-size: 48px; line-height: 1; -webkit-margin-end: 10px; margin-inline-end: 10px; } .pricing-item h5 { margin-top: 5px; margin-bottom: 30px; } .pricing-item .item-list { margin-bottom: 0; color: var(--color-dark); } .pricing-item .item-list li { margin-bottom: 10px; } .pricing-item .item-list i { width: 25px; height: 25px; line-height: 25px; border-radius: 50%; text-align: center; font-size: 14px; color: var(--color-white); background-color: var(--color-green); -webkit-margin-end: 10px; /* border: 1px solid var(--border-color); */ margin-inline-end: 10px; } .pricing-item .item-list i.not-active { background-color: var(--color-red); } .pricing-item .btn { margin-top: 35px; } .pricing-item .show-more { display: block; color: var(--color-dark); margin-top: 5px; cursor: pointer; transition: transform 0.4s ease-out; } .pricing-item .show-more:hover { transform: translateX(5px); } .pricing-item .disabled { background: transparent !important; } .pricing-item :is(h3, .text, .price, .period, h5, .item-list) { transition: color 0.2s linear; transition-delay: 0.1s; } .pricing-item .btn-outline:hover { background: var(--color-white); } .pricing-item:is(.pricing-item:hover, .pricing-item.active) { box-shadow: 0px 20px 80px rgba(var(--color-primary-rgb), 0.24); } .pricing-item:is(.pricing-item:hover, .pricing-item.active)::after { transform: none; } .pricing-item:is(.pricing-item:hover, .pricing-item.active) :is(h3, .text, .price, .period, h5, .item-list, .show-more) { color: var(--color-white); } .pricing-item:is(.pricing-item:hover, .pricing-item.active) .icon { color: var(--color-primary); background: var(--color-white); } .pricing-item:is(.pricing-item:hover, .pricing-item.active) .label span { display: inline-block; } .pricing-item:is(.pricing-item:hover, .pricing-item.active) .disabled i { border-color: transparent; } .pricing-item:is(.pricing-item:hover, .pricing-item.active) .item-list i { color: var(--color-green); background-color: var(--color-white); } .pricing-item:is(.pricing-item:hover, .pricing-item.active) .item-list i.not-active { color: var(--color-red); } .pricing-item:is(.pricing-item:hover, .pricing-item.active) .btn-outline { color: var(--color-primary) !important; background: unset; background-color: var(--color-white); } .pricing-item:hover { border-color: transparent; transform: none; } .pricing-area { position: relative; overflow: hidden; } .pricing-area .tab-pane { -webkit-animation: none; animation: none; } .pricing-area .tab-pane.active { -webkit-animation: slideUp 0.3s ease-out 1; animation: slideUp 0.3s ease-out 1; } .pricing-area .shape img { position: absolute; z-index: -1; } .pricing-area .shape img.shape-1 { top: 13%; right: 5%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .pricing-area .shape img.shape-2 { top: 70%; left: 4%; -webkit-animation: moveLeftRight 5s linear infinite; animation: moveLeftRight 5s linear infinite; } .pricing-area .shape img.shape-3 { bottom: 10%; right: 8%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .pricing-area .shape img.shape-4 { top: 14%; left: 6%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .pricing-area .shape img.shape-5 { top: 18%; left: 50%; -webkit-animation: moveAround 20s linear infinite; animation: moveAround 20s linear infinite; } /* ----------------------------------------- Blog CSS ----------------------------------------- */ .blog-area { position: relative; overflow: hidden; } .blog-area .card .card-img { overflow: hidden; } .blog-area .card img { transition: transform 0.3s ease-out; } .blog-area .card .content { padding-top: 25px; -webkit-padding-end: 20px; padding-inline-end: 20px; } .blog-area .card .card-title { margin-bottom: 15px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-area .card .card-text { margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .blog-area .card .card-btn { line-height: 1; font-weight: var(--font-bold); text-decoration: underline; color: var(--color-primary); } .blog-area .card:hover img { transform: scale3d(1.05, 1.05, 1.05); } .blog-area.blog-2 .card { padding-top: 12px; transition: all 0.4s ease-out; } .blog-area.blog-2 .card .card-img { position: relative; overflow: unset; padding: 0 12px 0 12px; z-index: 2; } .blog-area.blog-2 .card .card-img::after { position: absolute; content: ""; top: -12px; right: 0; bottom: 0; width: 33.3333333333%; height: calc(100% + 24px); border-radius: 10px; background: var(--color-primary); transition: width 0.4s ease-out; z-index: -1; } .blog-area.blog-2 .card .card-img .lazy-container { left: -12px; width: calc(100% + 12px); } .blog-area.blog-2 .card .content { border-top: 0 !important; border-radius: 0 0 10px 10px; padding: 25px; } .blog-area.blog-2 .card:hover { box-shadow: 0px 24px 80px rgba(49, 49, 49, 0.12); } .blog-area.blog-2 .card:hover .card-img::after { width: 100%; } .blog-area.blog-2 .card:hover .content { border-color: transparent !important; } .blog-area.blog-2 .card:hover .lazy-container { left: 0; width: 100%; } .blog-area.blog-3 .card { transition: all 0.4s ease-out; } .blog-area.blog-3 .card .card-img { border: 10px solid var(--color-primary); } .blog-area.blog-3 .card .content { padding: 25px; } .blog-area.blog-3 .card:hover { border-color: transparent !important; box-shadow: 0px 24px 80px rgba(49, 49, 49, 0.12); } .blog-area .shape img { position: absolute; z-index: -1; } .blog-area .shape img.shape-1 { left: -7%; top: 10%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .blog-area .shape img.shape-2 { right: 0%; top: 40%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .blog-area .shape img.shape-3 { left: -4%; bottom: 0%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } .blog-area .shape img.shape-4 { right: 14%; bottom: 0%; -webkit-animation: moveUpDown 10s linear infinite; animation: moveUpDown 10s linear infinite; } /* ----------------------------------------- City CSS ----------------------------------------- */ .city-area { position: relative; overflow: hidden; } .city-area.spacer-negative { margin-top: -170px; } .city-area .card { overflow: hidden; } .city-area .card::before { position: absolute; content: ""; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(179.93deg, rgba(255, 255, 255, 0) 0.06%, rgba(0, 0, 0, 0.72) 83.9%, rgba(0, 0, 0, 0.8) 99.94%); z-index: 2; } .city-area .card .card-img { position: relative; overflow: hidden; } .city-area .card .card-img img { transition: transform 0.3s ease-out; } .city-area .card .card-text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 15px 0; z-index: 2; display: flex; flex-direction: column; justify-content: end; align-items: center; } .city-area .card .card-text span { color: rgba(var(--color-white-rgb), 0.9); } .city-area .card:hover .card-img img { transform: scale3d(1.05, 1.05, 1.05); } .city-area .slider-navigation .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); border-color: transparent; background: var(--color-white); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); z-index: 3; } .city-area .slider-navigation .slider-btn#city-slider-btn-prev { left: 5px; } .city-area .slider-navigation .slider-btn#city-slider-btn-next { right: 5px; } .city-area .shape img { position: absolute; z-index: -1; } .city-area .shape img.shape-1 { top: 13%; right: 5%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .city-area .shape img.shape-2 { top: 70%; left: 4%; -webkit-animation: moveLeftRight 5s linear infinite; animation: moveLeftRight 5s linear infinite; } .city-area .shape img.shape-3 { bottom: 10%; right: 8%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .city-area .shape img.shape-4 { top: 14%; left: 6%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .city-area .shape img.shape-5 { top: 18%; left: 50%; -webkit-animation: moveAround 20s linear infinite; animation: moveAround 20s linear infinite; } /* ----------------------------------------- Explore CSS ----------------------------------------- */ .explore-area { position: relative; overflow: hidden; } .explore-area .shape img { position: absolute; z-index: -1; } .explore-area .shape img.shape-1 { top: 13%; right: 5%; -webkit-animation: moveLeftRight 10s linear infinite; animation: moveLeftRight 10s linear infinite; } .explore-area .shape img.shape-2 { top: 70%; left: 4%; -webkit-animation: moveLeftRight 5s linear infinite; animation: moveLeftRight 5s linear infinite; } .explore-area .shape img.shape-3 { bottom: 10%; right: 8%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .explore-area .shape img.shape-4 { top: 14%; left: 6%; -webkit-animation: moveUpDown 5s linear infinite; animation: moveUpDown 5s linear infinite; } .explore-area .shape img.shape-5 { top: 18%; left: 50%; -webkit-animation: moveAround 20s linear infinite; animation: moveAround 20s linear infinite; } .product-single-details .video-banner { overflow: hidden; } .product-single-details .video-banner .video-btn { z-index: 3; } .product-single-details .video-banner .overlay { z-index: 2; } /*# sourceMappingURL=style.css.map */ a#cartIcon { position: fixed; z-index: 401; top: 50%; right: 0; left: 0; margin-inline-start: auto; margin-inline-end: 0; width: fit-content; transform: translateY(-50%); border-right: none; font-size: 12px; text-align: center; color: inherit; box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12); text-decoration: none; line-height: 1.5; } a#cartIcon span.length { display: block; } a#cartIcon .cart-length { background: #242323; padding: 10px; font-weight: 500; color: #fff; } a#cartIcon .cart-length i { font-size: 16px; } a#cartIcon .cart-total { background-color: #fff; text-align: center; font-weight: 600; color: inherit; } .stripe-errors { color: red; ; } /* popup css start */ /* Popup css */ .popup-wrapper { display: none; } .popup_main-content h1 { font-size: 40px; line-height: 50px; } .bg_cover { background-position: center center; background-size: cover; background-repeat: no-repeat; } .mfp-close-btn-in .mfp-close { color: #333; background: #FFF; opacity: 1; border-radius: 50%; width: 30px; height: 30px; line-height: 32px; right: -15px; top: -15px; } .popup-wrapper { position: relative; width: auto; max-width: 960px; margin: 0 auto; } .popup-wrapper .form_control { width: 100%; height: 70px; padding: 0 30px; line-height: 70px; } /* Popup-one */ .popup-one { position: relative; padding: 138px 120px; } .popup-one .popup_main-content { position: relative; text-align: center; background-color: rgba(69, 29, 83, 0.8); border-radius: 10px; padding: 90px 55px; } .popup-one .popup_main-content h1, .popup-one .popup_main-content p { color: #fff; } .popup-one .popup_main-content h1 { margin-bottom: 20px; } .popup-one .popup_main-content p { margin-bottom: 30px; } .popup-one .popup_main-content .popup-main-btn { padding: 15px 100px; display: inline-block; color: #fff; border-radius: 40px; border: 1px solid #fff; text-decoration: none; transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -ms-transition: .3s; -o-transition: .3s; } .popup-one .popup_main-content .popup-main-btn:hover, .popup-one .popup_main-content .popup-main-btn:focus { background-color: #451D53; color: #fff; border-color: transparent; } /* Popup-two */ .popup-two { position: relative; padding: 120px; } .popup-two .popup_main-content { position: relative; text-align: center; background-color: rgba(255, 40, 101, 0.7); border-radius: 10px; padding: 90px 55px; } .popup-two .popup_main-content h1, .popup-two .popup_main-content p { color: #fff; } .popup-two .popup_main-content h1 { margin-bottom: 20px; } .popup-two .popup_main-content p { margin-bottom: 30px; } .popup-two .popup_main-content .subscribe-form { padding: 0 70px; } .popup-two .popup_main-content .subscribe-form .form_control { border: none; border-radius: 10px; font-size: 20px; margin-bottom: 20px; } .popup-two .popup_main-content .subscribe-form .popup-main-btn { width: 100%; border: 1px solid #fff; background-color: transparent; color: #fff; font-size: 20px; height: 70px; border-radius: 10px; cursor: pointer; transition: all .3s; } .popup-two .popup_main-content .subscribe-form .popup-main-btn:hover, .popup-two .popup_main-content .subscribe-form .popup-main-btn:focus { background-color: #FF2865; color: #fff; border-color: transparent; } /* Popup-three */ .popup-three .popup_main-content { display: flex; align-items: center; flex-wrap: wrap; background-color: #fff; } .popup-three .popup_main-content .left-bg { width: 45%; height: 100%; min-height: 670px; } .popup-three .popup_main-content .right-content { width: 55%; padding: 30px 15px; text-align: center; } .popup-three .popup_main-content .right-content h1 { font-weight: 400; margin-bottom: 20px; } .popup-three .popup_main-content .right-content p { margin-bottom: 20px; } .popup-three .popup_main-content .right-content .popup-main-btn { padding: 15px 70px; background-color: #FF2865; color: #fff; font-size: 19px; border-radius: 35px; display: inline-block; text-decoration: none; } /* Popup-four */ .popup-four .popup_main-content { display: flex; align-items: center; flex-wrap: wrap; background-color: #fff; } .popup-four .popup_main-content .left-bg { width: 45%; height: 100%; min-height: 670px; } .popup-four .popup_main-content .right-content { width: 55%; padding: 30px 30px; text-align: center; } .popup-four .popup_main-content .right-content h1 { font-weight: 400; margin-bottom: 20px; } .popup-four .popup_main-content .right-content p { margin-bottom: 20px; } .popup-four .popup_main-content .subscribe-form { padding: 0 70px; } .popup-four .popup_main-content .subscribe-form .form_control { border: 2px solid #C5C5C5; border-radius: 10px; font-size: 20px; margin-bottom: 20px; } .popup-four .popup_main-content .subscribe-form .popup-main-btn { width: 100%; background-color: #F8960D; color: #fff; font-size: 20px; height: 70px; border-radius: 10px; cursor: pointer; border: none; transition: all .3s; } .popup-four .popup_main-content .subscribe-form .popup-main-btn:hover, .popup-four .popup_main-content .subscribe-form .popup-main-btn:focus { background-color: #F8960D; color: #fff; border-color: transparent; } /* Popup-five */ .popup-five .popup_main-content { text-align: center; padding: 75px; } .popup-five .popup_main-content h1 { font-size: 42px; line-height: 52px; font-weight: 400; color: #fff; margin-bottom: 20px; margin: 0 auto 20px; max-width: 600px; } .popup-five .popup_main-content h4 { color: #fff; font-size: 25px; font-weight: 35px; margin-bottom: 40px; font-weight: 400; } .popup-five .popup_main-content .popup-main-btn { padding: 15px 30px; display: inline-block; color: #fff; background-color: #29A19C; border-radius: 40px; text-decoration: none; } /* Popup-six */ .popup-six .popup_main-content { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background-color: #fff; text-decoration: none; } .popup-six .popup_main-content .left-bg { position: absolute; top: 0; left: 0; width: 50%; height: 100%; } .popup-six .popup_main-content .right-content { background-color: #930077; width: 50%; height: 100%; padding: 120px 15px; text-align: center; margin-left: 50%; } .popup-six .popup_main-content .right-content h1 { font-size: 40px; font-weight: 400; line-height: 50px; color: #fff; margin-bottom: 25px; } .popup-six .popup_main-content h4 { color: #fff; font-size: 20px; line-height: 32px; margin-bottom: 40px; font-weight: 400; } .popup-six .popup_main-content .right-content .popup-main-btn { padding: 15px 30px; display: inline-block; color: #ffffff; background-color: #494949; border-radius: 40px; text-decoration: none; } /* syotimer css */ .popup-wrapper .syotimer__body { max-width: 420px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 30px; } .popup-wrapper .syotimer__body p { color: #fff; } .popup-wrapper .syotimer-cell { flex: 0 0 24%; padding-left: 10px; padding-right: 10px; } .popup-wrapper .syotimer-cell__value { width: 100%; height: 80px; display: flex; align-items: center; justify-content: center; background: #1F3A52; border-radius: 10px; font-size: 36px; color: #fff; margin-bottom: 15px; border: 0; } .popup-wrapper .syotimer-cell__value:after { content: none; } .popup-wrapper .syotimer-cell__unit { font-size: 20px; color: #fff; text-transform: capitalize; } /*Large Device*/ @media only screen and (min-width: 1200px) and (max-width : 1400px) {} /*Large Device*/ @media only screen and (min-width: 992px) and (max-width : 1199px) {} /*Medium Device*/ @media only screen and (min-width: 768px) and (max-width : 991px) { .popup-one .popup_main-content h1, .popup-three .popup_main-content .right-content h1, .popup-four .popup_main-content .right-content h1, .popup-five .popup_main-content h1, .popup-six .popup_main-content .right-content h1 { font-size: 40px; line-height: 50px; } .popup-wrapper { max-width: 720px; } .popup-two .popup_main-content .subscribe-form, .popup-four .popup_main-content .subscribe-form { padding: 0 15px; } .popup-one, .popup-two { padding: 80px 30px; } .syotimer__body { margin-bottom: 0px; } .syotimer-cell { flex: 0 0 50%; margin-bottom: 20px; } } /* Small Devices, Tablets */ @media only screen and (max-width : 991px) { .popup-wrapper .syotimer-cell { padding-left: 5px; padding-right: 5px; } } /* Small Devices, Tablets */ @media only screen and (max-width : 767px) { .popup-wrapper { max-width: 500px; } .popup-five .popup_main-content { text-align: center; padding: 50px 15px; } .popup-three .popup_main-content .left-bg, .popup-four .popup_main-content .left-bg, .popup-six .popup_main-content .left-bg { display: none; } .popup-one, .popup-two { padding: 30px 15px; } .popup-one .popup_main-content, .popup-two .popup_main-content { padding: 20px 15px; } .popup-one .popup_main-content .main-btn { padding: 15px 30px; } .popup-three .popup_main-content .right-content, .popup-four .popup_main-content .right-content, .popup-six .popup_main-content .right-content { width: 100%; padding: 50px 15px; } .popup-two .popup_main-content .subscribe-form, .popup-four .popup_main-content .subscribe-form { padding: 0 15px; } .popup-two .popup_main-content .subscribe-form .form_control, .popup-four .popup_main-content .subscribe-form .form_control { font-size: 15px; } .popup-two .popup_main-content h1, .popup-one .popup_main-content h1, .popup-three .popup_main-content .right-content h1, .popup-four .popup_main-content .right-content h1, .popup-five .popup_main-content h1, .popup-six .popup_main-content .right-content h1 { font-size: 24px; line-height: 34px; } .popup-six .popup_main-content .right-content { margin-left: 0%; } .syotimer__body { max-width: 380px; margin-bottom: 0px; } .syotimer-cell { flex: 0 0 50%; margin-bottom: 20px; } } /* Mobile Devices, Tablets */ @media only screen and (max-width: 400px) { .popup-wrapper { max-width: 300px; } .syotimer__body { max-width: 300px; margin-bottom: 0px; } .syotimer-cell { flex: 0 0 50%; margin-bottom: 20px; } } /* Wide mobile Devices */ @media only screen and (min-width: 401px) and (max-width : 767px) { .popup-wrapper { max-width: 380px; } } /* wide mobile devices */ @media only screen and (min-width: 401px) and (max-width : 767px) { .popup-wrapper { max-width: 380px; } } /* popup css end */ .social-media-modal .actions .action-btn a i { --size: 35px; display: block; width: var(--size); height: var(--size); line-height: var(--size); border-radius: 50%; text-align: center; margin-inline: auto; color: #fff; margin-bottom: 5px; font-size: 14px; background-color: var(--color-primary); } .social-media-modal .actions { display: flex; align-items: center; text-align: center; gap: 15px; justify-content: space-between; font-size: 14px; } /* ----------------------------------------- Shop Single CSS ----------------------------------------- */ .products-modal .btn-groups { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; } .products-modal .product-modal-gallery { position: relative; } .products-modal .product-modal-single-slider .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; color: var(--color-primary); background: var(--color-white); } .products-modal .product-modal-single-slider .slider-btn.slider-btn-prev { left: 0; } .products-modal .product-modal-single-slider .slider-btn.slider-btn-next { right: 0; } .product-modal-single-slider .img-pagination { display: flex; align-items: center; gap: 10px; position: static; overflow-x: scroll; scroll-behavior: smooth; } .product-modal-single-slider .img-pagination img { flex: 0 0 auto; max-width: calc(100% / 3 - 10px); border-radius: 5px; } .products-modal .product-modal-thumb { margin-inline: auto; margin-top: 10px; z-index: 5; } .products-modal .product-modal-thumbnails .thumbnail-img { cursor: pointer; border: 1px solid var(--color-primary); } .products-modal .product-modal-thumbnails .thumbnail-img img { -o-object-fit: cover; object-fit: cover; height: 100%; } .products-modal .product-price span { display: inline-block; } .products-modal .product-price { gap: 5px; } .products-modal .product-price .h6 { color: var(--color-medium); text-decoration: line-through; } body.modal-open .mfp-bg { z-index: 1092; } body.modal-open .mfp-wrap { z-index: 1093; } .modal-header .btn-close { margin-inline-start: auto; margin-inline-end: 0; } .show-more { cursor: pointer; } /* ----------------------------------------- Ratings CSS ----------------------------------------- */ .ratings { display: flex; align-items: center; flex-wrap: wrap; margin-inline-start: -3px; gap: 5px; } .ratings .rate { background-position: 0 -13px; background-repeat: repeat-x !important; height: 13px; transition: all 0.5s ease-out 0s; width: 90px; } .ratings .rating-icon { background-position: 0 0; background-repeat: repeat-x !important; height: 13px; } .ratings .ratings-total { font-size: 12px; line-height: 1; } .ratings.size-md .rate { background-position: 0 -15px; height: 15px; width: 115px; } .ratings.size-md .rating-icon { height: 15px; } .ratings.size-md .ratings-total { font-size: 14px; } .ratings.size-lg .rate { background-position: 0 -20px; height: 20px; width: 145px; } .ratings.size-lg .rating-icon { height: 20px; } .ratings.size-lg .ratings-total { font-size: 16px; } /* ----------------------------------------- Telegram Button CSS ----------------------------------------- */ .floating-btns { display: flex; gap: 10px; flex-direction: column; justify-content: center; align-items: center; position: fixed; right: 20px; bottom: 90px; z-index: 402; } .telegram-btn { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; cursor: pointer; border-radius: 50%; z-index: 100; } .facebook-btn { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; cursor: pointer; border-radius: 50%; z-index: 100; } .floating-wpp:not(.whatsapp-btn-1) { position: relative; left: unset !important; right: unset !important; bottom: unset !important; transform: unset !important; } .floating-wpp .floating-wpp-popup.active { right: 0; } .whatsapp-btn-1.floating-wpp { left: unset; right: 15px; z-index: 402; } .widget-visible iframe { bottom: 100px !important; } .request-loader { position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: #0000007a; z-index: 10000; display: none; } .request-loader img { position: fixed; display: none; width: 80px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .request-loader.show { display: block; } .request-loader.show img { display: block; } .pagination.pagination-item { margin-right: 15px; } .bg-facebook { color: #fff; background: #4267B2; } .bg-google { color: #fff; background: #DB4437; } /*---========================= Start Cookie Alert =========================---*/ .cookie-consent { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #262938; z-index: 99999; animation: slideUp .4s linear; transition: bottom 2s linear; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .cookie-consent.hide { bottom: -100%; } .cookie-container { display: flex; justify-content: space-between; align-items: center; } button.cookie-consent__agree { padding: 5px 16px; border: none; background-color: var(--color-primary); color: #fff; cursor: pointer; border-radius: 3px; font-size: 14px; } p.cookie-consent__message { background-color: transparent !important; font-size: 14px; color: #fff; } .js-cookie-consent .flex { display: flex; align-items: center; justify-content: space-between; gap: 15px; } .js-cookie-consent p.cookie-consent__message { margin: unset !important; } .cookie-consent { padding: 20px 20px !important; bottom: 0; } .cookie-consent .mt-2 { margin-top: 0 !important; } .js-cookie-consent>div { max-width: 1200px; margin-inline: auto; } .leaflet-pane.leaflet-shadow-pane { display: none; } /* ----------------------------------------- Choose CSS ----------------------------------------- */ .choose-area { position: relative; overflow: hidden; } .choose-area .info-list { -webkit-border-start: 5px solid var(--color-primary); border-inline-start: 5px solid var(--color-primary); } .choose-area .info-list>div { -webkit-padding-start: 20px; padding-inline-start: 20px; } .choose-area .card-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; font-size: 42px; color: var(--color-primary); box-shadow: 0px 8px 20px rgba(39, 39, 39, 0.08); border-bottom: 1px solid var(--color-primary); } .choose-area .card-content { -webkit-padding-start: 20px; padding-inline-start: 20px; } .choose-area .shape { position: absolute; top: 100px; left: 0; height: calc(100% - 200px); z-index: -1; overflow: hidden; } .choose-area .shape img { border-radius: 0 30px 30px 0; height: 100%; } .choose-2 .info-list { -webkit-border-start: unset; border-inline-start: unset; } .choose-2 .info-list>div { -webkit-padding-start: unset; padding-inline-start: unset; } .choose-3 .info-list { -webkit-border-start: unset; border-inline-start: unset; border: 2px solid var(--color-primary); padding: 0 25px 30px; } .choose-3 .info-list>div { -webkit-padding-start: unset; padding-inline-start: unset; } .choose-3 .card-icon { border: unset; width: 60px; height: 60px; font-size: 42px; -webkit-margin-end: 15px; margin-inline-end: 15px; box-shadow: unset; } .choose-3 .card-icon i { -webkit-margin-end: -40px; margin-inline-end: -40px; } /* ----------------------------------------- Steps CSS ----------------------------------------- */ .steps-area { position: relative; overflow: hidden; } .steps-area .card { -webkit-margin-start: 100px; margin-inline-start: 100px; margin-top: 50px; border: 1px solid var(--border-color); background-color: var(--color-white); transition: all 0.3s; } .steps-area .card .card-icon { display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; font-size: 42px; color: var(--color-primary); background-color: rgba(var(--color-primary-rgb), 0.1); transition: all 0.3s; } .steps-area .card .text-stroke { position: absolute; top: -50px; left: -100px; font-weight: 800; font-size: 100px; line-height: 1; opacity: 0.2; z-index: -1; } .steps-area .card:hover { border-color: transparent; border-bottom-color: var(--color-primary); box-shadow: var(--shadow-lg); } .steps-area .card:hover .card-icon { color: var(--color-white); background-color: var(--color-primary); } .purchase-message, .booking-message { padding: 120px 0px; max-width: 780px; margin: 0 auto; } .purchase-success, .booking-success { background: #f1f1f1; padding: 40px 0px; text-align: center; border-radius: 15px; } .purchase-success .icon, .booking-success .icon { display: block; margin-bottom: 20px; } .purchase-success .icon i, .booking-success .icon i { font-size: 60px !important; } .purchase-success h2, .booking-success h2 { margin-bottom: 15px; text-transform: uppercase; } .purchase-success p, .booking-success p { line-height: 26px; } td.title { min-width: 250px; } .listing-contract .g-recaptcha { transform: scale(0.77); transform-origin: 0 0; }
| ver. 1.4 |
Github
|
.
| PHP 8.2.29 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0.4 |
proxy
|
phpinfo
|
ÐаÑтройка