/* Theme marker: Lomart */
html, body {
overflow-x: hidden;
}
.tenant-lomart {
--lomart-main-blue: #005cb8;
--lomart-light-blue: #b2cde9;
--lomart-dark-blue: #1e345d;
--lomart-orange: #f8651b;
--lomart-nav-ink: #f5f8ff;
--lomart-nav-surface: rgba(7, 24, 55, 0.2);
--lomart-nav-shadow: 0 22px 50px rgba(9, 20, 40, 0.28);
}
.tenant-lomart .navbar-area.navbar-style-two.navbar-lomart-modern {
background: #ffffff !important;
box-shadow: 0 12px 30px rgba(16, 24, 40, 0.12);
border-bottom: 1px solid rgba(30, 52, 93, 0.08);
position: relative;
overflow: visible;
z-index: 2000;
animation: lomartNavReveal 700ms ease both;
}
.tenant-lomart .navbar-area.navbar-style-two.navbar-lomart-modern::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at top, rgba(178, 205, 233, 0.35), transparent 60%);
opacity: 0.5;
pointer-events: none;
}
.tenant-lomart .navbar-area.navbar-style-two.navbar-lomart-modern.is-sticky {
background: #ffffff !important;
box-shadow: 0 10px 24px rgba(16, 24, 40, 0.14);
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.tenant-lomart .navbar-area.navbar-style-two.navbar-lomart-modern::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, var(--lomart-main-blue), var(--lomart-light-blue), var(--lomart-main-blue));
background-size: 200% 100%;
animation: lomartGradientSlide 6s ease infinite;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar {
padding: 16px 0;
position: relative;
z-index: 2;
}
.tenant-lomart .navbar-lomart-modern .navbar-brand .logo {
filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.25));
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item {
position: relative;
animation: lomartNavItemIn 520ms ease both;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(1) { animation-delay: 80ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(2) { animation-delay: 120ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(3) { animation-delay: 160ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(4) { animation-delay: 200ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(5) { animation-delay: 240ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(6) { animation-delay: 280ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:nth-child(7) { animation-delay: 320ms; }
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item > .nav-link {
color: var(--lomart-dark-blue);
font-family: "Rubik", sans-serif;
font-weight: 600;
letter-spacing: 0.02em;
padding: 10px 18px;
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 200ms ease, transform 200ms ease;
}
/* .tuam-nav .navbar .navbar-nav {
overflow-x: hidden!important;
} */
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item > a {
color: var(--lomart-dark-blue) !important;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item > .nav-item-link-wrap > a {
color: var(--lomart-dark-blue) !important;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item > a:hover,
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item > a:focus {
color: var(--lomart-orange) !important;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item > .nav-item-link-wrap > a:hover,
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item > .nav-item-link-wrap > a:focus {
color: var(--lomart-orange) !important;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item > .nav-link::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 6px;
height: 2px;
border-radius: 999px;
background: linear-gradient(90deg, rgba(248, 101, 27, 0.15), var(--lomart-orange), rgba(248, 101, 27, 0.15));
transform: scaleX(0);
transform-origin: center;
transition: transform 220ms ease;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:hover > .nav-link,
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item > .nav-link:focus-visible {
color: var(--lomart-orange);
transform: translateY(-1px);
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:hover > .nav-link::after,
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item > .nav-link:focus-visible::after {
transform: scaleX(1);
}
/* .tenant-lomart .navbar-lomart-modern .nav-pool-banner {
background: rgba(0, 92, 184, 0.08);
border: 1px solid rgba(0, 92, 184, 0.2);
border-radius: 999px;
padding: 4px 12px;
} */
.tenant-lomart .navbar-lomart-modern li.nav-item.nav-hassub::after {
content: none;
}
.tenant-lomart .navbar-lomart-modern li.nav-item.nav-hassub:hover::after {
content: none;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item + .nav-item::before {
content: "|";
color: rgba(30, 52, 93, 0.4);
position: absolute;
left: -6px;
top: 50%;
transform: translateY(-50%);
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu {
background: #ffffff;
border-radius: 18px;
border: 1px solid rgba(30, 52, 93, 0.12);
box-shadow: 0 20px 40px rgba(12, 22, 40, 0.18);
padding: 14px 16px;
z-index: 2100;
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu,
.tenant-lomart .navbar-lomart-modern .dropdown-menu .dropdown-menu {
border-radius: 18px;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item .dropdown-menu,
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item .dropdown-menu .dropdown-menu {
border-radius: 18px !important;
overflow: visible;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav > .nav-item > .dropdown-menu {
overflow: visible;
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu > label {
display: block;
margin: 6px 10px 12px;
color: var(--lomart-dark-blue);
font-family: "Rubik", sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .nav-link,
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .dropdown-item {
color: var(--lomart-dark-blue);
font-weight: 400;
text-transform: none;
letter-spacing: 0.01em;
padding: 10px 14px;
border-radius: 12px;
transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .nav-link:hover,
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .nav-link:focus-visible,
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .dropdown-item:hover,
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .dropdown-item:focus-visible {
background: linear-gradient(90deg, rgba(178, 205, 233, 0.45), rgba(178, 205, 233, 0));
color: var(--lomart-orange);
transform: translateX(3px);
}
@media (max-width: 991px) {
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item.dropdown > .dropdown-menu {
display: none;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item.dropdown.submenu-open > .dropdown-menu,
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item.dropdown > .dropdown-menu.show {
display: block;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav .nav-item .nav-item-link-wrap {
display: flex;
justify-content: space-between;
align-items: center;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav .nav-item .nav-item-link-wrap > a {
flex: 1 1 auto;
min-width: 0;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav .nav-item .nav-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
min-width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--lomart-dark-blue);
font-size: 13px;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav .nav-item .nav-submenu-toggle.nav-submenu-spacer {
visibility: hidden;
pointer-events: none;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav .nav-item.dropdown.submenu-open > .nav-item-link-wrap .nav-submenu-toggle i {
transform: rotate(180deg);
}
.tenant-lomart .navbar-lomart-modern #navbarSupportedContent .nav-sc-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin-top: 8px;
}
.tenant-lomart .navbar-lomart-modern #navbarSupportedContent .nav-sc-row .nav-sc-wrap {
margin-left: 0 !important;
}
}
@media (min-width: 992px) {
.tenant-lomart .navbar-lomart-modern #navbarSupportedContent,
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar,
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav {
overflow: visible !important;
max-height: none;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav {
margin-top: 0;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-nav .nav-item .dropdown-menu {
display: block;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav .nav-item .nav-submenu-toggle {
display: none;
}
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap .sc-icon a {
color: white;
background: var(--lomart-orange);
border-radius: 999px;
font-size: 1.2rem;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: transform 200ms ease, background-color 200ms ease, color 200ms ease;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap .sc-icon a::before {
content: "";
position: absolute;
left: -15%;
width: 130%;
height: 150%;
bottom: -90%;
background-image:
radial-gradient(circle at 12px -6px, rgba(0, 132, 255, 0.6) 12px, transparent 13px),
radial-gradient(circle at 46px -6px, rgba(0, 132, 255, 0.6) 12px, transparent 13px),
radial-gradient(circle at 80px -6px, rgba(0, 132, 255, 0.6) 12px, transparent 13px),
linear-gradient(180deg, rgba(0, 162, 255, 0.85), rgba(0, 30, 60, 0.9));
background-size: 96px 22px, 96px 22px, 96px 22px, 100% 100%;
background-position: 0 0, 24px 0, 48px 0, 0 0;
transform: translateY(100%);
transition: transform 420ms ease;
z-index: 0;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap .sc-icon a > * {
position: relative;
z-index: 1;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap {
width: auto;
margin-left: 0;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-row {
display: flex;
align-items: center;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap + .nav-sc-wrap {
margin-left: 12px;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap .sc-icon a:hover {
/* transform: translateY(-2px); */
cursor: pointer;
background: var(--lomart-orange);
color: white;
}
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap .sc-icon a:hover::before,
.tenant-lomart .navbar-lomart-modern .nav-sc-wrap .sc-icon a:focus-visible::before {
transform: translateY(0%);
animation: lomart-water-flow 1.6s linear infinite;
}
@keyframes lomart-water-flow {
0% { background-position: 0 0, 24px 0, 48px 0, 0 0; }
100% { background-position: 96px 0, 120px 0, 144px 0, 0 0; }
}
.tenant-lomart .navtopper-modern,
.navtopper-modern {
position: relative;
overflow-x: hidden;
overflow-y: visible;
z-index: 2101;
}
.tenant-lomart .navtopper-modern .navtopper-waves,
.navtopper-modern .navtopper-waves {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.tenant-lomart .navtopper-modern .navtopper-waves .waves,
.navtopper-modern .navtopper-waves .waves {
position: absolute;
left: 0;
right: 0;
bottom: -40px;
width: 100%;
height: 100%;
min-height: 36px;
}
.tenant-lomart .navtopper-modern .navtopper-inner,
.tenant-lomart .navtopper-modern .nav-topper-wrap,
.navtopper-modern .navtopper-inner,
.navtopper-modern .nav-topper-wrap {
position: relative;
z-index: 1;
}
.tenant-lomart .navtopper-modern .parallax > use,
.navtopper-modern .parallax > use {
animation: lomart-move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.tenant-lomart .navtopper-modern .parallax > use:nth-child(1),
.navtopper-modern .parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.tenant-lomart .navtopper-modern .parallax > use:nth-child(2),
.navtopper-modern .parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.tenant-lomart .navtopper-modern .parallax > use:nth-child(3),
.navtopper-modern .parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.tenant-lomart .navtopper-modern .parallax > use:nth-child(4),
.navtopper-modern .parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes lomart-move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
@media (max-width: 768px) {
.tenant-lomart .navtopper-modern .waves,
.navtopper-modern .waves {
height: 40px;
min-height: 40px;
}
}
.feature-banner-slider--wave {
position: relative;
}
.feature-banner-wave {
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 300px;
width: 100%;
z-index: 20;
pointer-events: none;
}
.feature-banner-wave .waves {
display: block;
width: 100%;
height: 100%;
}
.feature-banner-wave .parallax > use {
animation: none;
}
.feature-banner-wave .parallax > use:nth-child(1) {
animation: none;
}
.feature-banner-wave .parallax > use:nth-child(2) {
animation: none;
}
.feature-banner-wave .parallax > use:nth-child(3) {
animation: none;
}
.feature-banner-wave .parallax > use:nth-child(4) {
animation: none;
}
.banner-btm-abs {
z-index: 25;
}
.hero-metrics {
background: #ffffff;
border-radius: 999px;
padding: 18px 24px;
box-shadow: 0 14px 30px rgba(5, 16, 32, 0.12);
max-width: 980px;
}
.hero-metrics-fixed {
position: absolute;
left: 0;
right: 0;
bottom: 150px;
z-index: 30;
pointer-events: none;
}
.hero-metrics-fixed .hero-metrics {
pointer-events: auto;
}
.hero-metric-number {
color: #0b6fc2;
font-size: 30px;
font-weight: 700;
letter-spacing: 0.3px;
}
.hero-pill {
border: 1px solid;
background: #ffffff4a;
border-radius: 20px;
color: #ffffff;
padding: 4px 8px;
}
.hero-metric-label {
color: #8fa2b7;
font-size: 14px;
font-weight: 500;
}
.banner-section .d-table {
height: 100%;
}
.banner-section .d-table-cell {
vertical-align: middle;
}
.banner-section .main-banner-content {
margin-top: -260px;
}
.pl-titleGradient {
background: linear-gradient(90deg, #83cbf1 0%, #2a7cff 55%, #03203e 100%) !important;
-webkit-background-clip: text !important;
background-clip: text;
color: transparent;
}
.banner-section .main-banner-content .hero-title {
/* margin-top: -28px; */
}
@media (max-width: 768px) {
.banner-section .main-banner-content .hero-title {
margin-top: -14px;
}
}
@media (max-width: 768px) {
.hero-metrics {
border-radius: 22px;
}
.hero-metric-number {
font-size: 26px;
}
.section-features {
padding:0rem;
}
.tenant-lomart .feature-banner-slider--wave .feature-banner-wave {
display: none;
}
.tenant-lomart .feature-banner-slider--wave .banner-section {
padding-top: 118px !important;
padding-bottom: 145px !important;
}
.tenant-lomart .feature-banner-slider--wave .banner-section .main-banner-content {
margin-top: 0 !important;
}
.tenant-lomart .feature-banner-slider--wave .hero-pill {
margin-bottom: 3rem !important;
}
.featureList-cont::after {
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin-top: auto !important;
}
.tenant-lomart .feature-banner-slider--wave .hero-title {
font-size: clamp(40px, 11vw, 58px);
line-height: 1.03;
margin-bottom: 12px !important;
}
.tenant-lomart .feature-banner-slider--wave .hero-subtitle {
font-size: 18px;
line-height: 1.35;
margin-bottom: 18px !important;
}
.tenant-lomart .feature-banner-slider--wave .main-banner-content > .d-flex {
gap: 10px !important;
margin-bottom: 18px !important;
}
.tenant-lomart .feature-banner-slider--wave .hero-btn-primary,
.tenant-lomart .feature-banner-slider--wave .hero-btn-outline {
min-width: 180px;
padding: 11px 22px !important;
font-size: 18px;
}
.tenant-lomart .feature-banner-slider--wave .hero-metrics-fixed {
position: relative;
bottom: auto;
margin-top: -150px;
padding: 0 12px 14px;
pointer-events: auto;
margin-bottom: 4rem;
}
.tenant-lomart .feature-banner-slider--wave .hero-metrics {
border-radius: 24px;
padding: 18px 14px;
row-gap: 12px;
}
.tenant-lomart .feature-banner-slider--wave .hero-metric-number {
font-size: 22px;
}
.tenant-lomart .feature-banner-slider--wave .hero-metric-label {
font-size: 13px;
line-height: 1.2;
}
}
@media (min-width: 992px) {
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item > .dropdown-menu {
opacity: 0;
transform: translateY(12px) scale(0.98);
visibility: hidden;
pointer-events: none;
transition: opacity 420ms ease, transform 420ms ease, visibility 0s linear 420ms;
}
.tenant-lomart .navbar-lomart-modern .navbar-nav > .nav-item:hover > .dropdown-menu {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
transition: opacity 420ms ease, transform 420ms ease, visibility 0s;
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item > .dropdown-menu {
opacity: 0;
transform: translateY(8px) scale(0.98);
visibility: hidden;
pointer-events: none;
transition: opacity 380ms ease, transform 380ms ease, visibility 0s linear 380ms;
}
.tenant-lomart .navbar-lomart-modern .dropdown-menu .nav-item:hover > .dropdown-menu {
opacity: 1;
transform: translateY(0) scale(1);
visibility: visible;
pointer-events: auto;
transition: opacity 380ms ease, transform 380ms ease, visibility 0s;
}
}
.tenant-lomart {
--lomart-footer-bg: #0b0b0b;
--lomart-footer-hover: #b2cde9;
--lomart-footer-ink: #f5f5f0;
--lomart-footer-muted: rgba(245, 245, 240, 0.7);
--lomart-footer-accent: #f8651b;
}
.tenant-lomart .lomart-footer {
background: radial-gradient(circle at top left, rgba(27, 167, 248, 0.18), transparent 55%),
radial-gradient(circle at 20% 20%, rgba(0, 92, 184, 0.2), transparent 50%),
var(--lomart-footer-bg);
color: var(--lomart-footer-ink);
padding: 72px 0 32px;
position: relative;
overflow: hidden;
}
.tenant-lomart .lomart-footer::before {
content: "";
position: absolute;
inset: 0;
background-image: linear-gradient(120deg, rgba(255, 255, 255, 0.05), transparent 60%);
opacity: 0.4;
pointer-events: none;
}
.tenant-lomart .lomart-footer .lomart-footer-main {
gap: 28px 0;
position: relative;
z-index: 1;
}
.tenant-lomart .lomart-footer .single-footer-widget h4 {
color: var(--lomart-footer-ink);
font-family: "Rubik", sans-serif;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: 18px;
}
.tenant-lomart .lomart-footer .footer-title {
display: inline-flex;
align-items: center;
gap: 12px;
}
.tenant-lomart .lomart-footer .footer-title-icon {
width: 34px;
height: 34px;
border-radius: 999px;
border: 1px solid rgba(249, 102, 22, 0.7);
/* background: radial-gradient(circle at 30% 30%, #de665d, #f96616 70%); */
background: radial-gradient(circle at 70% 80%, #de655d, #f96616 80%);
display: inline-flex;
align-items: center;
justify-content: center;
color: #101010;
font-size: 18px;
}
.tenant-lomart .lomart-footer .single-footer-widget p,
.tenant-lomart .lomart-footer .single-footer-widget li,
.tenant-lomart .lomart-footer .single-footer-widget a {
color: var(--lomart-footer-muted);
font-family: "Rubik", sans-serif;
}
.tenant-lomart .lomart-footer a {
text-decoration: none;
}
.tenant-lomart .lomart-footer a:hover,
.tenant-lomart .lomart-footer a:focus-visible {
text-decoration: none;
}
.tenant-lomart .lomart-footer .lomart-footer-brand img {
max-width: 180px;
margin-bottom: 18px;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}
.tenant-lomart .lomart-footer .lomart-footer-brand p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 18px;
}
.tenant-lomart .lomart-footer .footer-quick-links {
display: grid;
gap: 3px;
}
.tenant-lomart .lomart-footer .footer-quick-links a {
display: inline-flex;
align-items: center;
gap: 8px;
transition: color 200ms ease, transform 200ms ease, letter-spacing 200ms ease;
}
.tenant-lomart .lomart-footer .footer-quick-links a:hover,
.tenant-lomart .lomart-footer .footer-quick-links a:focus-visible {
color: var(--lomart-footer-hover);
transform: translateX(2px);
letter-spacing: 0.02em;
}
.tenant-lomart .lomart-footer .lomart-footer-connect {
background: linear-gradient(140deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 18px;
padding: 24px;
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
position: relative;
overflow: hidden;
}
.tenant-lomart .lomart-footer .lomart-footer-connect::after {
content: "";
position: absolute;
inset: -120% -40%;
background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.45), transparent);
transform: translateX(-40%) rotate(8deg);
opacity: 0;
pointer-events: none;
}
.tenant-lomart .lomart-footer .lomart-footer-connect:hover::after,
.tenant-lomart .lomart-footer .lomart-footer-connect:focus-within::after {
animation: lomartFooterShimmer 1.2s ease;
}
.tenant-lomart .lomart-footer .lomart-footer-connect p {
font-size: 14px;
line-height: 1.6;
}
.tenant-lomart .lomart-footer .social {
display: flex;
gap: 12px;
margin-bottom: 22px;
}
.tenant-lomart .lomart-footer .social li a {
width: 40px;
height: 40px;
border-radius: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.08);
color: var(--lomart-footer-ink);
transition: transform 200ms ease, background 200ms ease, color 200ms ease;
}
.tenant-lomart .lomart-footer .social li a:hover,
.tenant-lomart .lomart-footer .social li a:focus-visible {
transform: translateY(-2px);
background: linear-gradient(135deg, var(--lomart-main-blue));
color: #ffffff;
box-shadow: 0 10px 20px rgba(0, 92, 184, 0.28);
}
.tenant-lomart .lomart-footer .copyright-area {
border-top: 1px solid rgba(255, 255, 255, 0.08);
margin-top: 48px;
padding-top: 24px;
position: relative;
z-index: 1;
}
.tenant-lomart .lomart-footer .copyright-area p {
color: rgba(245, 245, 240, 0.6);
font-size: 13px;
letter-spacing: 0.08em;
text-transform: uppercase;
}
@media (max-width: 991px) {
.tenant-lomart .lomart-footer {
padding-top: 56px;
}
.tenant-lomart .lomart-footer .lomart-footer-connect {
margin-top: 24px;
}
}
@media (max-width: 575px) {
.tenant-lomart .lomart-footer {
padding-top: 48px;
}
.tenant-lomart .lomart-footer .lomart-footer-connect {
padding: 20px;
}
}
@keyframes lomartNavReveal {
from {
opacity: 0;
transform: translateY(-12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lomartNavItemIn {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lomartGradientSlide {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes lomartFooterShimmer {
0% {
transform: translateX(-50%) rotate(8deg);
opacity: 0;
}
20% {
opacity: 0.8;
}
100% {
transform: translateX(60%) rotate(8deg);
opacity: 0;
}
}
:root {
--lomart-main-blue: #005cb8;
--lomart-light-blue: #b2cde9;
--lomart-dark-blue: #1e345d;
--lomart-orange: #f8651b;
--lomart-orange-topper: #DD655D;
--lomart-warm-50: #fff6e6;
--lomart-warm-100: #ffefd2;
--lomart-warm-150: #fffaf1;
--lomart-warm-500: #f59e0b;
--lomart-warm-600: #f97316;
--lomart-warm-700: #b45309;
--lomart-gold: #ffbf38;
--lomart-text-strong: #12223f;
--lomart-text-body: #3b4a66;
--dp-theme-custom-3: var(--lomart-main-blue);
--dp-theme-light: #ffffff;
--dp-theme-custom-5: var(--lomart-light-blue);
--dp-theme-pop: var(--lomart-orange);
--dp-theme-yellow: #eed532;
--dp-theme-green: #30d06d;
--dp-theme-red: #ee4444;
--dp-theme-lightred: #ff5c5c;
--dp-theme-bluepop: linear-gradient(72.5deg, rgb(0, 175, 255) 27.9%, rgb(0, 224, 254) 84.2%);
--dp-theme-grey: #F8F8F8;
--dp-theme-grey4: #DBDBDB;
--dp-theme-overlay: var(--lomart-dark-blue)
}
a {
color: #4490e2;
}
.dp-hidden {
display: none !important
}
.dp-flex {
display: flex;
}
.dp-justify-center {
justify-content: center;
}
.dp-align-center {
align-items: center;
}
.dp-justify-spacebetween {
justify-content: space-between
}
.primary-bg {
background: #0A4396;
}
.primary-bg-fade {
background: rgba(12, 84, 1600, 0.7);
}
.primary {
color: #0A4396;
}
.navtopper.navtopper-modern {
background: linear-gradient(135deg, #1e3a5f 0%, #0066b3 55%, #1e3a5f 100%);
color: #ffffff;
padding: 12px 0;
position: relative;
overflow-x: hidden;
overflow-y: visible;
box-shadow: 0 12px 30px rgba(10, 18, 36, 0.25);
}
.navtopper.navtopper-modern::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 4px;
background: linear-gradient(90deg, #e85d2b, #4da6d6, #e85d2b);
background-size: 200% 100%;
animation: navtopper-gradient-fast 3s linear infinite;
}
.navtopper.navtopper-modern .navtopper-inner {
position: relative;
z-index: 2;
}
.navtopper.navtopper-modern .navtopper-waves {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.navtopper.navtopper-modern .navtopper-wave {
position: absolute;
left: -150%;
right: -150%;
bottom: -35%;
height: 130%;
background-repeat: repeat-x;
/* background-size: 3000px 100%; */
opacity: 0.18;
will-change: transform;
}
.navtopper.navtopper-modern .navtopper-wave.wave-1 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 320'%3E%3Cpath fill='%234da6d6' d='M0,160 C800,280 1100,100 1800,160 C2500,220 2800,120 3600,160 L3600,320 L0,320 Z'/%3E%3C/svg%3E");
animation: navtopper-wave-slow 22s linear infinite;
}
.navtopper.navtopper-modern .navtopper-wave.wave-2 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 320'%3E%3Cpath fill='%230066b3' d='M0,192 C600,280 1200,160 1800,192 C2400,224 3000,160 3600,192 L3600,320 L0,320 Z'/%3E%3C/svg%3E");
animation: navtopper-wave-medium 16s linear infinite;
opacity: 0.22;
}
.navtopper.navtopper-modern .navtopper-wave.wave-3 {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 320'%3E%3Cpath fill='%23ffffff' d='M0,224 C900,280 1200,200 1800,224 C2400,248 2700,200 3600,224 L3600,320 L0,320 Z'/%3E%3C/svg%3E");
animation: navtopper-wave-fast 12s linear infinite;
opacity: 0.25;
}
.navtopper.navtopper-modern .navtopper-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
animation: navtopper-shimmer 8s ease-in-out infinite;
opacity: 1;
}
.navtopper.navtopper-modern .nav-topper-wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.navtopper.navtopper-modern .vendor-form {
display: flex;
align-items: center;
gap: 12px;
/* flex-wrap: wrap; */
}
.navtopper.navtopper-modern .vendor-text {
font-weight: 400;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
}
.navtopper.navtopper-modern .vendor-text-banner {
font-weight: 600;
font-size: 15px;
color: #ffffff;
letter-spacing: 0.01em;
}
.navtopper.navtopper-modern .nav-circle-icon {
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
margin-right: 0;
transition: 0.3s ease;
}
.navtopper.navtopper-modern .vendor-cont {
display: flex;
align-items: center;
gap: 10px;
margin-left: 0;
position: relative;
}
.navtopper.navtopper-modern .vendor-cont::before {
content: "";
position: absolute;
inset: -4px;
border-radius: 12px;
background: linear-gradient(90deg, #e85d2b, #4da6d6);
opacity: 0;
filter: blur(6px);
transition: opacity 0.3s ease;
z-index: 0;
}
.navtopper.navtopper-modern .vendor-cont:focus-within::before {
opacity: 0.55;
}
.navtopper.navtopper-modern input.vendor-input {
height: 38px;
width: 150px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
font-size: 13px;
font-weight: 600;
text-align: left;
padding: 0 12px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
position: relative;
z-index: 1;
}
.hp-block1 {
position: relative;
overflow: hidden;
border-bottom: 5px solid white;
background: linear-gradient(135deg, var(--lomart-dark-blue) 0%, var(--lomart-main-blue) 55%, var(--lomart-dark-blue) 100%);
/* min-height: 100vh; */
}
.hp-block1-bg-grid {
position: absolute;
inset: 0;
opacity: 0.2;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxwYXR0ZXJuIGlkPSJncmlkIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiPjxwYXRoIGQ9Ik0gNDAgMCBMIDAgMCAwIDQwIiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjAuNSIgb3BhY2l0eT0iMC4xIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+");
animation: hp-block1-pulse 8s ease-in-out infinite;
pointer-events: none;
}
.hp-block1-inner {
padding-top: 5rem;
padding-bottom: 5rem;
}
.hp-block1-image-shell {
position: relative;
border-radius: 24px;
}
.hp-block1-image-cluster {
position: relative;
width: min(620px, 100%);
height: 620px;
margin: 0 auto;
z-index: 2;
}
.hp-block1-circle {
position: absolute;
border-radius: 10%;
overflow: hidden;
border: 4px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 20px 40px rgba(8, 21, 43, 0.35);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(4px);
}
.hp-block1-circle img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.15) contrast(1.05);
}
.hp-block1-circle-top {
width: 390px;
height: 390px;
top: -90px;
right: 0;
}
.hp-block1-circle-mid {
width: 340px;
height: 340px;
top: 140px;
right: 240px;
}
.hp-block1-circle-bottom {
width: 280px;
height: 280px;
top: 330px;
right: 40px;
}
.hp-block1-glow {
position: absolute;
inset: -16px;
border-radius: 28px;
background: linear-gradient(90deg, rgba(0, 92, 184, 0.25), rgba(178, 205, 233, 0.25));
filter: blur(24px);
transition: filter 0.5s ease;
z-index: 0;
}
.hp-block1-image-shell:hover .hp-block1-glow {
filter: blur(32px);
}
.hp-block1-image {
position: relative;
z-index: 2;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(178, 205, 233, 0.55);
background: linear-gradient(145deg, #1f3561, #152646);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.6);
}
.hp-block1-image-inner {
aspect-ratio: 4 / 3;
display: flex;
align-items: center;
justify-content: center;
/* padding: 32px; */
background: linear-gradient(145deg, rgba(0, 92, 184, 0.18), rgba(178, 205, 233, 0.18));
}
.hp-block1-orb {
position: absolute;
right: -24px;
bottom: -24px;
width: 140px;
height: 140px;
background: linear-gradient(145deg, var(--lomart-light-blue), var(--lomart-main-blue));
border-radius: 999px;
filter: blur(40px);
opacity: 0.4;
animation: hp-block1-orb-pulse 3s ease-in-out infinite;
z-index: 1;
}
.hp-block1-mobile-carousel {
display: none;
margin-bottom: 28px;
}
/*
.hp-block1-mobile-track {
display: flex;
gap: 14px;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
} */
/* .hp-block1-mobile-track {
overflow-x: auto;
max-width: 100%;
}
.hp-block1-mobile-track::-webkit-scrollbar {
display: none;
} */
.hp-block1-mobile-slide {
position: relative;
flex: 0 0 88%;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(178, 205, 233, 0.45);
box-shadow: 0 14px 30px rgba(8, 21, 43, 0.35);
scroll-snap-align: center;
background: #0f2344;
}
.hp-block1-mobile-slide img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
.hp-block1-mobile-chip {
position: absolute;
right: 10px;
bottom: 10px;
border-radius: 999px;
padding: 4px 10px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: #ffffff;
background: rgba(12, 34, 68, 0.72);
border: 1px solid rgba(255, 255, 255, 0.35);
backdrop-filter: blur(4px);
}
.hp-block1-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(0, 92, 184, 0.2);
border: 1px solid rgba(178, 205, 233, 0.5);
margin-bottom: 20px;
backdrop-filter: blur(6px);
}
.hp-block1-badge-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--lomart-light-blue);
animation: hp-block1-orb-pulse 2s ease-in-out infinite;
}
.hp-block1-badge-text {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.16em;
color: var(--lomart-light-blue);
font-weight: 600;
}
.hp-block1-title {
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 700;
line-height: 1.1;
margin-bottom: 18px;
}
.hp-block1-title-accent {
display: block;
margin-top: 6px;
/* background: linear-gradient(90deg, var(--lomart-orange), #ff9b4a); */
background: linear-gradient(90deg, #b2cde9, #0d6efd);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hp-block1-divider {
width: 96px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--lomart-orange), #ff9b4a);
margin-bottom: 24px;
}
.hp-block1-description {
color: var(--lomart-light-blue);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 32px;
}
.hp-block1-card {
height: 100%;
padding: 24px;
border-radius: 16px;
background: rgba(30, 52, 93, 0.45);
border: 1px solid rgba(178, 205, 233, 0.25);
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
position: relative;
overflow: hidden;
}
.hp-block1-card:hover {
transform: translateY(-4px);
border-color:#ff913c;
background: rgba(30, 52, 93, 0.7);
box-shadow: 0 20px 40px rgba(0, 92, 184, 0.25);
}
.hp-block1-card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
background: linear-gradient(145deg, rgba(0, 92, 184, 0.25), rgba(178, 205, 233, 0.25));
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
position: relative;
}
.hp-block1-card-icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: 14px;
background: rgba(178, 205, 233, 0.35);
filter: blur(20px);
opacity: 0;
transition: opacity 0.3s ease;
}
.hp-block1-card:hover .hp-block1-card-icon::after {
opacity: 1;
}
.hp-block1-icon {
font-size: 28px;
line-height: 1;
display: inline-flex;
color: #ff913c;
position: relative;
z-index: 1;
}
.hp-block1-card-title {
font-size: 1.1rem;
font-weight: 600;
color: #ffffff;
margin-bottom: 8px;
}
.hp-block1-card-text {
color: rgba(178, 205, 233, 0.8);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 0;
}
.hp-block1-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 14px;
font-weight: 600;
color: #ffffff;
border: none;
background: linear-gradient(90deg, var(--lomart-orange), #ff9b4a);
box-shadow: 0 14px 30px rgba(248, 101, 27, 0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.hp-block1-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(248, 101, 27, 0.45);
background: linear-gradient(90deg, #ff9b4a, var(--lomart-orange));
color: #ffffff;
}
.hp-block1-cta-icon {
font-size: 20px;
line-height: 1;
transition: transform 0.3s ease;
}
.hp-block1-cta:hover .hp-block1-cta-icon {
transform: translateX(4px);
}
.hp-block1-animate {
opacity: 0;
transition: transform 1s ease, opacity 1s ease;
}
.hp-block1-left {
transform: translateX(-40px);
}
.hp-block1-right {
transform: translateX(40px);
}
.hp-block1-rise {
transform: translateY(20px);
}
.hp-block1-animate.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
@keyframes hp-block1-pulse {
0%, 100% {
opacity: 0.15;
}
50% {
opacity: 0.3;
}
}
@keyframes hp-block1-orb-pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
}
@media (max-width: 991.98px) {
.hp-block1 {
min-height: auto;
}
.hp-block1-left {
display: none;
}
.hp-block1-inner {
padding-top: 3.2rem;
padding-bottom: 3.2rem;
}
.hp-block1-title {
font-size: clamp(2rem, 9vw, 2.6rem);
margin-bottom: 14px;
}
.hp-block1-divider {
margin-bottom: 18px;
}
.hp-block1-description {
font-size: 0.98rem;
line-height: 1.6;
margin-bottom: 18px;
}
.hp-block1-mobile-carousel {
display: block;
}
.hp-block1-card {
padding: 18px;
}
.hp-block1-card-icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
}
.hp-block1-icon {
font-size: 24px;
}
}
@media (min-width: 992px) {
.hp-block1-inner {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
.hp-block2 {
position: relative;
overflow: hidden;
border-bottom:5px solid white;
background: linear-gradient(135deg, #f1f6fb 0%, #e7f2f7 45%, #f7f9fc 100%);
}
.hp-block3::after {
content: "";
position: absolute;
left: -1%;
bottom: -1px;
width: 102%;
height: 80px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center top;
mask-position: center top;
transform: scaleY(-1);
pointer-events: none;
z-index: 2;
}
.featureList-cont {
position: relative;
overflow-x: clip;
}
.featureList-cont::after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 100%;
margin-top: 3rem;
height: 80px;
background-color: #ffffff;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center top;
mask-position: center top;
/* transform: scaleY(-1); */
pointer-events: none;
z-index: 2;
}
.hp-block2-bg {
position: absolute;
inset: 0;
opacity: 0.35;
background-image:
radial-gradient(circle at 30% 20%, rgba(0, 92, 184, 0.12) 0%, transparent 50%),
radial-gradient(circle at 70% 60%, rgba(178, 205, 233, 0.18) 0%, transparent 50%);
pointer-events: none;
}
.hp-block2-inner {
padding-top: 5rem;
padding-bottom: 5rem;
}
.hp-block2-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(0, 92, 184, 0.12);
border: 1px solid rgba(0, 92, 184, 0.25);
color: var(--lomart-main-blue);
margin-bottom: 20px;
transition: background 0.3s ease;
backdrop-filter: blur(6px);
}
.hp-block2-badge-icon {
font-size: 16px;
color: var(--lomart-main-blue);
animation: hp-block1-orb-pulse 2.5s ease-in-out infinite;
}
.hp-block2-badge-text {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.hp-block2-title {
font-size: clamp(2.1rem, 3.5vw, 3.1rem);
font-weight: 700;
color: #12223f;
line-height: 1.1;
margin-bottom: 18px;
}
.hp-block2-title-accent {
display: block;
margin-top: 6px;
background: linear-gradient(90deg, var(--lomart-main-blue), #3fb5d9);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hp-block2-divider {
width: 96px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--lomart-main-blue), #3fb5d9);
margin-bottom: 24px;
}
.hp-block2-description {
color: #3b4a66;
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 32px;
}
.hp-block2-feature-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 32px;
}
.hp-block2-feature {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
backdrop-filter: blur(6px);
}
.hp-block2-feature:hover {
transform: translateX(8px);
border-color: rgba(0, 92, 184, 0.3);
box-shadow: 0 20px 40px rgba(0, 92, 184, 0.18);
background: #ffffff;
}
.hp-block2-feature-icon {
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(0, 92, 184, 0.15), rgba(178, 205, 233, 0.3));
display: flex;
align-items: center;
justify-content: center;
color: var(--lomart-main-blue);
font-size: 28px;
flex-shrink: 0;
box-shadow: 0 12px 24px rgba(0, 92, 184, 0.15);
transition: transform 0.3s ease;
}
.hp-block2-feature:hover .hp-block2-feature-icon {
transform: scale(1.08) rotate(4deg);
}
.hp-block2-feature-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 6px;
color: #1b2c4f;
}
.hp-block2-feature-text {
margin-bottom: 0;
color: #53627b;
line-height: 1.6;
}
.hp-block2-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 14px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(90deg, var(--lomart-orange), #ff9b4a);
box-shadow: 0 14px 30px rgba(248, 101, 27, 0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.hp-block2-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(248, 101, 27, 0.45);
background: linear-gradient(90deg, #ff9b4a, var(--lomart-orange));
color: #ffffff;
}
.hp-block2-cta-icon {
font-size: 20px;
line-height: 1;
transition: transform 0.3s ease;
}
.hp-block2-cta:hover .hp-block2-cta-icon {
transform: translateX(4px);
}
.hp-block2-patterns {
position: relative;
}
.hp-block2-patterns-glow {
position: absolute;
inset: -16px;
border-radius: 28px;
background: linear-gradient(90deg, rgba(0, 92, 184, 0.28), rgba(63, 181, 217, 0.28));
filter: blur(28px);
transition: filter 0.5s ease;
z-index: 1;
}
.hp-block2-patterns:hover .hp-block2-patterns-glow {
filter: blur(36px);
}
.hp-block2-patterns-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.hp-block2-new-badge {
position: absolute;
top: -16px;
right: -16px;
z-index: 3;
background: linear-gradient(90deg, #ef4444, #f97316);
color: #ffffff;
padding: 8px 14px;
border-radius: 10px;
font-weight: 700;
font-size: 0.75rem;
box-shadow: 0 12px 20px rgba(239, 68, 68, 0.35);
transform: rotate(3deg);
animation: hp-block2-bounce 2.6s ease-in-out infinite;
}
.hp-block2-pattern {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 16px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.65);
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.25);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
background: #e5e7eb;
}
.hp-block2-pattern:hover {
transform: scale(1.05);
box-shadow: 0 22px 50px rgba(0, 92, 184, 0.35);
}
.hp-block2-pattern::before {
content: "";
position: absolute;
inset: 0;
background: transparent;
pointer-events: none;
}
.hp-block2-pattern-overlay {
position: absolute;
inset: 0;
/* background: linear-gradient(to top, rgba(15, 23, 42, 0.35), transparent); */
}
.hp-block2-pattern-label {
position: absolute;
bottom: 12px;
left: 12px;
color: #ffffff;
font-weight: 700;
font-size: 0.85rem;
background: rgba(15, 23, 42, 0.7);
padding: 6px 10px;
border-radius: 8px;
opacity: 0;
transition: opacity 0.3s ease;
}
.hp-block2-pattern:hover .hp-block2-pattern-label {
opacity: 1;
}
.hp-block2-orb {
position: absolute;
top: -24px;
left: -24px;
width: 140px;
height: 140px;
border-radius: 999px;
background: linear-gradient(145deg, rgba(0, 92, 184, 0.7), rgba(63, 181, 217, 0.7));
filter: blur(40px);
opacity: 0.5;
animation: hp-block1-orb-pulse 3s ease-in-out infinite;
z-index: 1;
}
.hp-block2-animate {
opacity: 0;
transition: transform 1s ease, opacity 1s ease;
}
.hp-block2-left {
transform: translateX(-40px);
}
.hp-block2-right {
transform: translateX(40px);
}
.hp-block2-rise {
transform: translateY(20px);
}
.hp-block2-animate.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
@keyframes hp-block2-marina {
0%, 100% {
opacity: 0.75;
}
50% {
opacity: 1;
}
}
@keyframes hp-block2-bounce {
0%, 100% {
transform: rotate(3deg) translateY(0);
}
50% {
transform: rotate(6deg) translateY(-6px);
}
}
@media (min-width: 992px) {
.hp-block2-inner {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
.hp-block3 {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, var(--lomart-warm-50) 0%, var(--lomart-warm-100) 45%, var(--lomart-warm-150) 100%);
}
.hp-block3::after {
content: "";
position: absolute;
left: -1%;
bottom: -1px;
width: 102%;
height: 80px;
background-color: white;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center top;
mask-position: center top;
transform: scaleY(-1);
pointer-events: none;
z-index: 2;
}
.hp-block3-bg {
position: absolute;
inset: 0;
opacity: 0.35;
background-image:
radial-gradient(circle at 25% 25%, rgba(248, 142, 39, 0.16) 0%, transparent 52%),
radial-gradient(circle at 70% 65%, rgba(255, 208, 122, 0.22) 0%, transparent 52%);
pointer-events: none;
}
.hp-block3-ripple {
z-index: 0;
}
.hp-block3 .circle {
background: var(--lomart-gold);
box-shadow: 0 0 2px 0 rgba(255, 191, 56, 0.45);
}
.hp-block3-inner {
padding-top: 5rem;
padding-bottom: 5rem;
}
.hp-block3-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 16px;
border-radius: 999px;
background: rgba(248, 142, 39, 0.12);
border: 1px solid rgba(248, 142, 39, 0.3);
color: var(--lomart-warm-700);
margin-bottom: 20px;
transition: background 0.3s ease;
backdrop-filter: blur(6px);
}
.hp-block3-badge-icon {
font-size: 16px;
color: var(--lomart-warm-600);
animation: hp-block1-orb-pulse 2.5s ease-in-out infinite;
}
.hp-block3-badge-text {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 600;
}
.hp-block3-title {
font-size: clamp(2.1rem, 3.5vw, 3.1rem);
font-weight: 700;
color: var(--lomart-text-strong);
line-height: 1.1;
margin-bottom: 18px;
}
.hp-block3-title-accent {
display: block;
margin-top: 6px;
background: linear-gradient(90deg, var(--lomart-warm-600), var(--lomart-warm-500));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hp-block3-divider {
width: 96px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, var(--lomart-warm-600), var(--lomart-warm-500));
margin-bottom: 24px;
}
.hp-block3-description {
color: var(--lomart-text-body);
font-size: 1.05rem;
line-height: 1.7;
margin-bottom: 32px;
}
.hp-block3-feature-list {
display: flex;
flex-direction: column;
gap: 20px;
margin-bottom: 32px;
}
.hp-block3-feature {
display: flex;
align-items: flex-start;
gap: 20px;
padding: 20px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(148, 163, 184, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
backdrop-filter: blur(6px);
}
.hp-block3-feature:hover {
transform: translateX(8px);
border-color: rgba(249, 115, 22, 0.35);
box-shadow: 0 20px 40px rgba(249, 115, 22, 0.2);
background: #ffffff;
}
.hp-block3-feature-icon {
width: 64px;
height: 64px;
border-radius: 18px;
background: linear-gradient(145deg, rgba(249, 115, 22, 0.18), rgba(251, 191, 36, 0.28));
display: flex;
align-items: center;
justify-content: center;
color: #c2410c;
font-size: 28px;
flex-shrink: 0;
box-shadow: 0 12px 24px rgba(249, 115, 22, 0.2);
transition: transform 0.3s ease;
}
.hp-block3-feature:hover .hp-block3-feature-icon {
transform: scale(1.08) rotate(4deg);
}
.hp-block3-feature-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 6px;
color: #1b2c4f;
}
.hp-block3-feature-text {
margin-bottom: 0;
color: #53627b;
line-height: 1.6;
}
.hp-block3-cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 14px;
font-weight: 600;
color: #ffffff;
background: linear-gradient(90deg, var(--lomart-warm-500), var(--lomart-warm-600));
box-shadow: 0 14px 30px rgba(249, 115, 22, 0.35);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.hp-block3-cta:hover {
transform: translateY(-2px);
box-shadow: 0 18px 38px rgba(249, 115, 22, 0.45);
background: linear-gradient(90deg, var(--lomart-warm-600), var(--lomart-warm-500));
color: #ffffff;
}
.hp-block3-cta-icon {
font-size: 20px;
line-height: 1;
transition: transform 0.3s ease;
}
.hp-block3-cta:hover .hp-block3-cta-icon {
transform: translateX(4px);
}
.hp-block3-collage {
position: relative;
min-height: 460px;
padding: 32px;
}
.hp-block3-collage-badge {
position: absolute;
top: 12px;
left: 12px;
background: linear-gradient(90deg, var(--lomart-warm-600), var(--lomart-warm-500));
color: #ffffff;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 12px;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(249, 115, 22, 0.35);
z-index: 4;
}
.hp-block3-collage-main {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
border: 3px solid rgba(255, 255, 255, 0.8);
background: #fff4e5;
z-index: 2;
}
.hp-block3-collage-main img {
width: 100%;
height: 100%;
min-height: 320px;
object-fit: cover;
display: block;
transform: scale(1.02);
}
.hp-block3-collage-tile {
position: absolute;
width: 190px;
height: 190px;
border-radius: 20px;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.9);
box-shadow: 0 22px 46px rgba(15, 23, 42, 0.25);
background: #fff8ee;
z-index: 3;
}
.hp-block3-collage-tile img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hp-block3-collage-tile-one {
bottom: -18px;
right: 28px;
transform: rotate(-3deg);
}
.hp-block3-collage-tile-two {
top: 36px;
right: -12px;
transform: rotate(4deg);
}
.hp-block3-animate {
opacity: 0;
transition: transform 1s ease, opacity 1s ease;
}
.hp-block3-left {
transform: translateX(-40px);
}
.hp-block3-right {
transform: translateX(40px);
}
.hp-block3-rise {
transform: translateY(20px);
}
.hp-block3-animate.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
@media (min-width: 992px) {
.hp-block3-inner {
padding-top: 7rem;
padding-bottom: 7rem;
}
}
@media (max-width: 991.98px) {
.hp-block3-collage {
min-height: 360px;
padding: 20px;
}
.hp-block3-collage-tile {
width: 150px;
height: 150px;
}
.hp-block3-collage-tile-one {
right: 12px;
bottom: -10px;
}
.hp-block3-collage-tile-two {
right: 0;
top: 18px;
}
}
.navtopper.navtopper-modern input.vendor-input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.navtopper.navtopper-modern input.vendor-input:focus {
border-color: #e85d2b;
box-shadow: 0 0 0 2px rgba(232, 93, 43, 0.2);
}
.navtopper.navtopper-modern button.vendor-submit {
background: #e85d2b;
border: none;
border-radius: 10px;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
padding: 10px 16px;
letter-spacing: 0.4px;
color: #ffffff;
box-shadow: 0 10px 20px rgba(232, 93, 43, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
position: relative;
z-index: 1;
}
.navtopper.navtopper-modern button.vendor-submit:hover {
transform: translateY(-1px) scale(1.02);
box-shadow: 0 12px 24px rgba(232, 93, 43, 0.4);
background: #d64e1f;
}
.navtopper.navtopper-modern button.vendor-submit:disabled {
background: rgba(255, 255, 255, 0.2);
box-shadow: none;
cursor: not-allowed;
transform: none;
}
.navtopper.navtopper-modern .use-location {
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
color: #ffffff;
gap: 8px;
padding: 8px 14px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 10px;
background: rgba(255, 255, 255, 0.12);
transition: 0.3s ease;
}
.navtopper.navtopper-modern .vendor-form .nav-circle-icon {
color: #e85d2b;
}
.navtopper.navtopper-modern .use-location .nav-circle-icon {
color: #4da6d6;
}
.navtopper.navtopper-modern .use-location:hover {
border-color: #e85d2b;
background: rgba(255, 255, 255, 0.2);
}
.navtopper.navtopper-modern .use-location:hover .nav-circle-icon {
background: rgba(255, 255, 255, 0.2);
color: #e85d2b;
}
@media only screen and (max-width: 767px) {
.tenant-lomart .navbar-lomart-modern .tuam-nav .container-xl {
display: flex;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .container-xl > .navbar {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
/* overflow-x: hidden; */
/* flex-wrap: nowrap; */
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar {
padding-top: 10px;
padding-bottom: 10px;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-brand {
padding: 0;
margin-right: 8px;
flex: 0 0 auto;
min-width: 0;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-brand .logo {
width: 128px;
max-width: 128px;
height: auto;
}
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-toggler {
flex: 0 0 auto;
margin-left: auto;
}
.tenant-lomart .navtopper.navtopper-modern {
padding: 10px 0;
}
.tenant-lomart .navtopper.navtopper-modern::after {
animation: none;
}
.tenant-lomart .navtopper.navtopper-modern .navtopper-waves {
display: none;
}
.tenant-lomart .navtopper.navtopper-modern .nav-topper-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) 36px;
align-items: center;
column-gap: 8px;
row-gap: 0;
}
.tenant-lomart .navtopper.navtopper-modern .vendor-form {
width: 100%;
min-width: 0;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 6px;
margin-right: 0;
}
.tenant-lomart .navtopper.navtopper-modern .vendor-form > .nav-circle-icon {
flex: 0 0 auto;
}
.tenant-lomart .navtopper.navtopper-modern .vendor-text-banner {
display: block !important;
flex: 0 0 auto;
font-size: 12px;
line-height: 1.2;
white-space: nowrap;
}
.tenant-lomart .navtopper.navtopper-modern .vendor-cont {
flex: 1 1 auto;
min-width: 0;
justify-content: flex-start;
margin-left: 0;
gap: 6px;
}
.tenant-lomart .navtopper.navtopper-modern input.vendor-input {
flex: 1 1 auto;
width: auto;
min-width: 0;
height: 34px;
padding: 0 10px;
}
.tenant-lomart .navtopper.navtopper-modern button.vendor-submit {
flex: 0 0 auto;
min-width: 58px;
padding: 8px 10px;
font-size: 11px;
line-height: 1;
}
.tenant-lomart .navtopper.navtopper-modern .use-location {
grid-column: 2;
width: 36px;
min-width: 36px;
height: 36px;
justify-content: center;
padding: 0;
min-height: 36px;
border-radius: 999px;
gap: 0;
}
@media only screen and (max-width: 430px) {
.tenant-lomart .navbar-lomart-modern .tuam-nav .navbar .navbar-brand .logo {
width: 112px;
max-width: 112px;
}
.tenant-lomart .navtopper.navtopper-modern .vendor-form .vendor-text-banner {
display: none !important;
}
}
.tenant-lomart .navtopper.navtopper-modern .use-location .vendor-text-banner {
display: none !important;
}
.tenant-lomart .navtopper.navtopper-modern .navvendor {
width: 100%;
}
.tenant-lomart .navvendor .vendor-content {
width: min(92vw, 380px);
right: 50%;
transform: translateX(50%);
max-height: 55vh;
overflow-y: auto;
}
}
@keyframes navtopper-wave-slow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
@keyframes navtopper-wave-medium {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
@keyframes navtopper-wave-fast {
0% {
transform: translateX(0);
}
100% {
transform: translateX(50%);
}
}
@keyframes navtopper-shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(200%);
}
}
@keyframes navtopper-gradient-fast {
0% {
background-position: 0% 50%;
}
100% {
background-position: 200% 50%;
}
}
li.nav-item-lg {
display: flex;
}
.nav-item-hover {
display: none;
}
.nav-item-hover.active {
display: block;
}
.nav-pool .dropdown-menu .dropdown-menu {
width: 500px;
}
.nav-pool .dropdown-menu li:hover .dropdown-menu {
width: 500px !important;
left: auto !important;
right: -500px;
}
.nav-pool-banner {
background: #f2ca4d;
color: #0b4396;
text-align: center;
font-weight: 600;
text-transform: uppercase;
}
img.nav-offer-img {
max-width: 100%;
width: 100%;
max-height: 50px;
}
.others-option {
position: absolute;
right: 0;
text-align: 0px;
}
.vendor-circle-icon {
width: 26px;
height: 26px;
flex: none;
background: #009FDF;
color: #ffffff;
border-radius: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 12px;
}
.vendor-title {
width: 100%;
font-size: 15px;
font-weight: 700;
padding: 2px 10px;
cursor: pointer;
text-align: center;
margin-bottom: 0px !important;
}
.vendor-content {
padding: 10px 18px 30px 18px;
}
.vendor-info-row {
display: flex;
gap: 8px;
margin-bottom: 6px;
margin-top: 6px;
}
.navvendor {
background: #ffffff;
border-radius: 8px;
padding: 0px;
width: 100%;
}
.navvendor.active .vendor-title {
border-radius: 0px;
}
.navvendor .collapsed .navoffer {
bottom: -36px;
}
.navvendor .vendor-content .navoffer {
width: 100%;
margin-bottom: -50px;
}
.vendor-info-row {
padding: 4px 15px;
}
.vendor-text-banner {
cursor: pointer;
font-weight: 600;
font-size: 15px;
color: #ffffff;
letter-spacing: 0.01em;
}
.navbar-collapse .nav-link img {
display: none;
}
.navbar-collapse .nav-pool-banner {
background: transparent;
color: inherit;
text-align: inherit;
font-weight: inherit;
text-transform: inherit;
}
.pop-btn {
border: none;
position: relative;
display: inline-block;
text-align: center;
overflow: hidden;
z-index: 1;
color: var(--dp-theme-custom-3) !important;
text-transform: uppercase;
background: var(--dp-theme-pop);
-webkit-transition: 0.5s;
transition: 0.5s;
border-radius: 5px;
font-weight: 600;
font-size: 15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 14px;
padding-bottom: 14px;
}
.pop-btn:hover {
color: var(--dp-theme-light) !important;
background: var(--dp-theme-custom-5) !important;
}
.banner-section::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10;
background: linear-gradient(72.5deg, rgb(0 0 0 / 50%) 27.9%, rgba(0, 77, 88, 0.5) 84.2%);
opacity: 0.5;
}
.rubik {
font-family: "Rubik", sans-serif;
font-optical-sizing: auto;
font-style: normal;
}
.hind-madurai-light {
font-family: "Hind Madurai", sans-serif;
font-weight: 300;
font-style: normal;
}
.hind-madurai-regular {
font-family: "Hind Madurai", sans-serif;
font-weight: 400;
font-style: normal;
}
.hind-madurai-medium {
font-family: "Hind Madurai", sans-serif;
font-weight: 500;
font-style: normal;
}
.hind-madurai-semibold {
font-family: "Hind Madurai", sans-serif;
font-weight: 600;
font-style: normal;
}
.hind-madurai-bold {
font-family: "Hind Madurai", sans-serif;
font-weight: 700;
font-style: normal;
}
.banner-rel {
position: relative;
}
.banner-btm-abs {
background: hsla(211, 73%, 10%, 0.7);
position: absolute;
bottom: 100px;
left: 0px;
width: 100%;
z-index: 99;
}
.banner-btm-cont {
display: flex;
justify-content: center;
align-items: center;
padding: 36px;
text-align: center;
}
.banner-btm-cont img {
width: 125px;
margin-right: 10px;
}
.banner-btm-txt {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 44px;
display: flex;
align-items: center;
text-align: center;
color: #FFFFFF;
}
.db-diff-text {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 64px;
letter-spacing: -1px;
color: #0A4396;
text-align: center;
}
.db-sec-cont {
padding-top: 100px;
padding-bottom: 100px;
}
.db-sec-cont-loading {
padding-top: 200px;
padding-bottom: 200px;
}
.sec-p {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(10, 39, 69, 0.7);
}
.sec-topper {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 17px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 15px;
padding-left: 6px;
}
.sec-lg-text {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 64px;
letter-spacing: -1px;
margin-bottom: 30px;
}
.sec-md-text {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 64px;
letter-spacing: -1px;
margin-bottom: 30px;
}
.sec-lg-p {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
}
.poolslide {
overflow: hidden;
}
.content-center {
justify-content: center;
align-items: center;
}
.db-sec-cont.bg-white {
background-color: #ffffff;
}
.db-sec-cont.bg-blue {
background-position: right;
background-size: 70%;
background-repeat: no-repeat;
background-color: #0A4396;
}
.db-sec-cont.bg-blue .sec-topper {
color: var(--dp-theme-custom-5);
border-left: 4px solid var(--dp-theme-custom-5);
}
.db-sec-cont.bg-blue .sec-lg-text {
color: #FFFFFF;
}
.db-sec-cont.bg-blue .sec-lg-p {
color: rgba(241, 248, 251, 0.7);
}
.db-sec-cont.bg-white .sec-topper {
color: var(--dp-theme-custom-5);
border-left: 4px solid var(--dp-theme-custom-5);
}
.db-sec-cont.bg-white .sec-lg-text {
color: var(--dp-theme-custom-3);
}
.db-sec-cont.bg-white .sec-lg-p {
color: #0A2745;
}
.sec-left {
padding-right: 100px;
}
.sec-right {
padding-left: 100px;
}
.btn-yellow {
background: var(--dp-theme-pop);
padding: 20px 20px;
color: #07192C;
font-weight: bold;
border-radius: 8px;
border: none;
}
.section-float-button {
justify-content: center;
display: flex;
margin-top: -30px;
}
.db-rewview-wrap {
display: flex;
gap:40px;
justify-content: center;
}
.db-review {
background: #FFFFFF;
border-radius: 10px;
padding: 30px;
border: 1px solid #0A2745;
}
/* .reviews-cont {
margin-top: -140px;
} */
.db-review.lg {
width: 100%;
margin-bottom: auto;
}
.db-rev-slide-item {
padding: 20px;
}
.db-rev-title {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #0A4396;
margin-bottom: 20px;
}
.db-rev-star {
margin-bottom: 20px;
}
.db-rev-p {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(10, 39, 69, 0.7);
margin-bottom: 20px;
}
.db-rev-cust-img-cont {
padding-right: 10px;
}
.db-rev-cust {
display: flex;
}
.db-rev-cust-name {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 20px;
line-height: 24px;
color: #07192C;
}
.db-rev-cust-desc {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: var(--dp-theme-custom-5);
}
.db-rev-star {
display: flex;
}
.blog-item {
margin-bottom: 40px;
}
.blog-img {
border-radius: 10px;
margin-bottom: 20px;
cursor: pointer;
}
.blog-title {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #07192C;
margin-bottom: 10px;
cursor: pointer;
}
.blog-p {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(10, 39, 69, 0.7);
}
.db-rev-slide-item {
padding: 20px;
}
footer p {
color: #F1F8FB;
margin-bottom: 0;
margin-top: 20px;
}
input.footer-input {
padding: 8px;
border: none;
border-radius: 5px;
font-size: 15px;
width: 100%;
margin-bottom: 15px;
margin-top: 15px;
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(10, 39, 69, 0.7);
}
.btn.secondary {
background: var(--dp-theme-pop);
font-weight: bold;
}
.footer-sub {
width: 100%;
}
/* .feature-yellow-title {
color: var(--dp-theme-pop) !important;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #ffffff;
}
*/
.sec-card h3 {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 44px;
color: #07192C;
}
.dealer-card p {
font-family: 'Hind Madurai';
font-style: normal;
/* font-weight: 700; */
font-size: 18px;
line-height: 25px;
color: rgba(10, 39, 69, 0.7);
}
.dealer-card h6 {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #07192C;
}
.card-icon {
width: 64px;
height: 64px;
}
.sec-card {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px;
background: #FFFFFF;
box-shadow: 0px 10px 50px rgba(10, 39, 69, 0.05);
border-radius: 10px;
margin-bottom: 25px;
}
.dealer-card {
display: flex;
flex-flow: row;
padding: 0px;
background: #FFFFFF;
box-shadow: 0px 10px 50px rgba(10, 39, 69, 0.05);
border-radius: 10px;
margin-bottom: 25px;
}
.dp-topper {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 12px;
line-height: 17px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 15px;
padding-left: 6px;
display: inline-block;
}
.dp-title {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 64px;
letter-spacing: -1px;
margin-bottom: 30px;
}
.dp-title {
color: var(--dp-theme-custom-3);
}
.sec-p {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(10, 39, 69, 0.7);
}
.dp-topper {
color: var(--dp-theme-custom-5);
border-left: 4px solid var(--dp-theme-custom-5);
}
.pop-info-cont {
padding: 50px;
}
.pop-row {
display: flex;
}
.pop-right {
text-align: left;
display: flex;
justify-content: center;
align-items: center;
}
input.dp-input {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: #000000;
min-width: 75px;
}
.btn-pop {
background: var(--lomart-dark-blue);
color: white;
font-weight: bold;
}
.btn-pop:hover {
background: var(--dp-theme-custom-3) !important;
color: #ffffff !important;
font-weight: bold;
}
.btn-white:hover {
background: var(--dp-theme-lightred);
color: #fff;
font-weight: bold;
}
.btn-white {
background: #ffffff !important;
color: var(--dp-theme-custom-3) !important;
font-weight: bold;
}
.label-helper {
font-size: 11px;
color: #9e9e9e;
margin:0px;
}
.btn-lightred:disabled {
background: var(--dp-theme-lightred);
color: #fff;
font-weight: bold;
opacity: .5;
}
.btn-lightred {
background: var(--dp-theme-lightred);
color: #fff;
font-weight: bold;
}
.btn-lightred:hover {
background: var(--dp-theme-pop) !important;
color: #07192C !important;
font-weight: bold;
}
.btn-secondary-outline {
border: 2px solid var(--dp-theme-custom-5);
color: var(--dp-theme-custom-5);
font-weight: bold;
}
.btn-secondary-outline:hover {
background: var(--dp-theme-custom-5) !important;
color: #ffffff !important;
font-weight: bold;
}
.full-width {
width: 100%;
}
.pop-img-cont {
height: 100%;
width: 100%;
background-size: cover;
background-position: center;
}
.ReactModal__Overlay {
background-color: rgb(0 0 0 / 50%) !important;
z-index: 9999999 !important;
}
.pop-left {
width: 100%;
}
.pop-img-logo {
margin-bottom: 30px;
}
.dc-l {
border-radius: 5px 5px 5px 5px;
}
.dc-r {
width: 100%;
padding: 20px;
border-radius: 5px 5px 5px 5px;
}
.icon-circle {
align-items: center;
width: 32px;
height: 32px;
background: var(--dp-theme-custom-5);
border-radius: 100px;
color: #ffffff;
display: flex;
justify-content: center;
font-size: 14px;
margin-right: 10px;
}
ul.dc-contact {
padding: 0px;
list-style: none;
color: white;
margin-top: 0px;
margin-bottom: 0px;
}
ul.dc-contact li {
color: white;
margin-bottom: 10px;
}
ul.dc-contact li a {
display: flex;
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(10, 39, 69, 0.7);
}
.dc-l {
width: 250px;
background-size: contain;
background-repeat: no-repeat;
}
.db-divider {
width: 100%;
height: 1px;
background-color: var(--dp-theme-grey4);
}
.dp-divider {
width: 100%;
height: 1px;
background-color: var(--dp-theme-grey4);
}
ul.cu-contact {
padding: 0px;
list-style: none;
color: white;
margin-top: 0px;
margin-bottom: 0px;
}
.feature-banner-slider .slick-next:before, .feature-banner-slider .slick-prev:before {
color: var(--dp-theme-pop);
}
.feature-banner-slider .slick-prev {
left: 20px;
}
.feature-banner-slider .slick-next {
right: 20px;
}
ul.cu-contact li {
color: white;
margin-bottom: 10px;
}
ul.cu-contact li a {
display: flex;
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(10, 39, 69, 0.7);
}
.cu-cont {
padding: 32px;
width: 100%;
background: #F8F8F8;
border-radius: 10px;
justify-content: center;
display: flex;
flex-flow: column;
align-items: center;
}
.cu-image img {
width: 100%;
}
.cu-image {
border-radius: 31px;
width: 100%;
text-align: center;
}
.cu-divider {
width: 100%;
height: 1px;
background: #DBDBDB;
margin-bottom: 20px;
margin-top: 20px;
}
.blogsum-title {
font-style: normal;
font-weight: 700;
font-size: 36px;
line-height: 44px;
color: var(--dp-theme-custom-3);
}
.blogsum-p-sm {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: #554955;
}
.blogsum-p {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 32px;
color: #554955;
}
.blogd-title {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 48px;
line-height: 54px;
text-align: center;
color: #07192C;
}
.blogd-comments {
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 32px;
text-align: center;
color: #554955
}
.blog-p-content {
font-family: 'Rubik';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: rgba(10, 39, 69, 0.7);
margin-bottom: 30px;
}
.blog-details-img {
margin-bottom: 30px;
}
.blogd-tags {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #554955;
margin-bottom: 40px;
}
.blogd-tags a {
color: var(--dp-theme-custom-5);;
}
.blogd-tags a:hover {
color: var(--dp-theme-pop);
}
.page404-wrap {
min-height: 100vh;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.page404-cont {
}
.page404-top {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 45px;
line-height: 44px;
text-align: center;
color: #ffffff;
margin-bottom: 45px;
}
.page404-title {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 120px;
line-height: 82px;
text-align: center;
letter-spacing: -1px;
color: #ffffff;
margin-bottom: 30px;
}
.page404-bottom {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
text-align: center;
color: #ffffff;
}
.q-question {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: #486d93;
display: flex;
justify-content: space-between;
padding-top: 12px;
padding-bottom: 12px;
}
.q-wrap {
cursor: pointer;
}
.q-wrap .q-q-icon-minus {
display: none;
}
.q-wrap.active .q-q-icon-minus {
display: block;
}
.q-wrap.active .q-q-icon-plus {
display: none;
}
.q-wrap.active .q-question{
color: var(--dp-theme-custom-3);
}
.q-wrap .q-content{
display: none;
}
.q-wrap.active .q-content{
display: block;
}
.sec-l-img {
width: 100%;
margin-bottom: 30px;
}
.dp-img {
width: 100%;
margin-bottom: 30px;
}
.dp-sub {
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 32px;
color: var(--dp-theme-custom-3);
}
.dp-sec {
padding-top: 50px;
padding-bottom: 50px;
}
.db-popup-ad-close {
position: absolute;
color: var(--dp-theme-custom-3);
font-size: 25px;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 2;
}
.db-popup-ad-wrap {
position: relative;
}
.db-popup-close {
position: absolute;
color: var(--dp-theme-custom-3);
font-size: 25px;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 2;
}
.db-popup-ad-close i.fa.fa-times-circle,
.db-popup-close i.fa.fa-times-circle {
background: #ffffff;
border-radius: 100px;
}
.db-popup-wrap {
position: relative;
}
.stepper-title{
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 60px;
line-height: 64px;
letter-spacing: -1px;
color: var(--dp-theme-custom-3);
margin-bottom: 30px;
}
.dp-choice-name {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 38px;
line-height: 64px;
letter-spacing: -1px;
color: var(--dp-theme-custom-5);
}
.dp-choice-p {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 26px;
color: var(--dp-theme-custom-3);
margin-bottom: 30px;
}
.dp-choice-img {
margin-bottom: 30px;
}
.dp-choice-img img {
width: 100%;
}
.dp-choice-cont {
border: 1px solid #ddd;
padding: 20px;
border-radius: 5px;
cursor: pointer;
margin-bottom: 25px;
}
.dp-choice-cont:hover {
background: var(--dp-theme-custom-5);
background: linear-gradient(145deg, var(--dp-theme-custom-5) 0%, var(--dp-theme-custom-3) 70%);
}
.dp-choice-cont:hover .dp-choice-name {
color: #ffffff;
}
.dp-choice-cont:hover .dp-choice-p {
color: #ffffff;
}
.dp-stepper-cont {
display: flex;
justify-content: space-between;
position: relative;
}
.dp-stepper-cont:before {
content: ' ';
height: 2px;
background: #ddd;
position: absolute;
width: 100%;
top: 16px;
margin-top: -2px;
}
.dp-step-circle {
z-index: 1;
background: #f1f1f1;
border: 2px solid #ccc;
height: 30px;
width: 30px;
justify-content: center;
display: flex;
align-items: center;
border-radius: 100px;
font-weight: bold;
font-size: 19px;
}
.dp-step-circle.active {
background: var(--dp-theme-pop);
color: var(--dp-theme-custom-3);
}
.db-chocie-number {
font-size: 30px;
font-weight: bold;
text-align: center;
}
.dp-choice-cont:hover .db-chocie-number {
color: #ffffff;
}
.dp-step-canhover {
cursor: pointer;
background: var(--dp-theme-custom-5);
color: #fff;
}
.dp-step-canhover:hover {
background: var(--dp-theme-custom-3);
color: #ffffff;
}
.db-step-circle-wrap {
display: flex;
text-align: center;
align-items: center;
justify-content: start;
z-index: 1;
flex-flow: column;
/* width: 14%; */
}
.db-step-circle-wrap.step-first {
align-items: start;
justify-content: start;
/* width: 8%; */
}
.db-step-circle-wrap.step-last {
align-items: end;
justify-content: start;
/* width: 8%; */
}
.db-step-circle-name {
margin-top: 3px;
font-weight: 700;
color:var(--dp-theme-custom-3);
}
.section-loading {
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
}
.blog-item a h3:hover {
color: var(--dp-theme-custom-5);
}
.db-filter-header {
background: var(--dp-theme-custom-3);
color: #ffffff;
border-bottom: 4px solid var(--dp-theme-pop);
}
.db-filter-header .title {
margin-bottom: 0px;
color: #ffffff;
}
.price, .price-format__main-price {
display: inline-block;
}
.price {
color: var(--dp-theme-custom-3);
font-size: 1.8rem
}
.price .price-format__main-price {
line-height: normal;
}
.price, .price-format__main-price {
display: inline-block;
}
.price.product-details {
color: var(--dp-theme-custom-3);
font-size: 2.6rem;
}
.price__format-style {
font-size: 1rem;
line-height: 1rem;
vertical-align: 1.1ex;
}
.product-details .price__format-style {
font-size: 1.3rem;
line-height: 1rem;
vertical-align: 1.3ex;
}
.sui-sr-only {
clip: rect(0, 0, 0, 0);
border-width: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* .price__format-style {
font-size: 1.2rem;
line-height: 1rem;
vertical-align: 1.3ex;
} */
.price__was-price {
color: #cd2828;
}
.u__strike {
text-decoration: line-through;
}
.price-cont {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.dp-product-card {
text-align: center;
margin-bottom: 30px;
}
.dp-product-img {
height: 200px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
p.dp-product-desc {
margin-bottom: 0px;
font-size: 14px;
color: #7b787b;
}
.dp-product-name {
color: var(--dp-theme-custom-5);
}
.dp-product-img-cont img {
max-width: 70%;
position: absolute;
bottom: 0px;
}
.dp-product-img-cont {
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-size: cover;
background-repeat: no-repeat;
height: 550px;
background-position: center center;
}
.dp-product-details-name {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 600;
font-size: 45px;
line-height: 45px;
letter-spacing: -1px;
color: var(--dp-theme-custom-3);
}
.varedit-row {
display: flex;
gap: 10px;
justify-content: start;
align-items: start;
}
form.varedit-form {
flex-flow: column;
}
.varedit-row span {
width: 100%;
}
form.varedit-form {
flex-flow: column;
background: #f1f1f1;
padding: 10px;
border: 1px solid #ddd;
margin-bottom: 10px;
}
.price-details-cont {
display: flex;
justify-content: left;
align-items: center;
gap: 8px;
}
table.dp-pdetails-data td,table.dp-pdetails-data th {
padding: 5px 10px;
}
.dp-addtocart-wrap {
display: flex;
max-width: 500px;
gap: 20px;
}
.dp-addtocart-wrap .dp-product-btn {
width: 200px;
}
.dp-addtocart-wrap .dp-input {
padding: 10px !important;
text-align: center;
}
.dp-pdetails-share {
display: flex;
gap: 5px;
}
table.dp-pdetails-data th {
padding-left: 0px;
}
.dp-ship-cont {
padding: 10px;
border: 1px solid #ddd;
display: inline-block;
}
.dp-ship-row img {
margin-right: 10px;
}
.dp-product-img-sm-cont {
flex: auto;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 90%;
transition: 300ms ease;
cursor: pointer;
}
.dp-product-img-sm-cont:hover {
opacity: .5;
}
.dp-product-img-list {
/* display: flex; */
/* gap: 10px; */
margin-top: 10px;
width: 100%;
}
.dp-product-padding {
padding: 115px 50px 50px 50px;
}
.nav-sc-wrap {
display: flex;
color: #ffffff;
margin-left: 10px;
position: relative;
width: 10px;
}
.sc-count {
position: absolute;
top: -2px;
right: -26px;
background: #ffe53a;
color: black;
font-weight: bold;
border-radius: 20px;
height: 16px;
width: 16px;
font-size: 13px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
padding: 2px;
}
.sc-quotecount {
position: absolute;
top: 14px;
right: -26px;
background: #8235a2;
border-radius: 20px;
height: 16px;
width: 16px;
font-size: 13px;
justify-content: center;
align-items: center;
text-align: center;
display: flex;
padding: 2px;
}
.sc-icon {
font-size: 24px;
}
.sc-icon a {
color: #ffffff;
}
.sc-page-title {
color: var(--dp-theme-custom-3);
letter-spacing: 0px;
font-size: 28px;
line-height: 38px;
margin-bottom: 0;
text-transform: none;
font-weight: 600;
}
.sc-helper {
font-size: 20px;
line-height: 27px;
letter-spacing: 0px;
color: #666;
white-space: nowrap;
}
.sc-account{
background: #f0f8ff;
border: 1px solid #cccccc;
padding: 30px 20px;
font-size: 14px;
line-height: 21px;
letter-spacing: 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.sc-ac-text {
font-size: 16px;
line-height: 21px;
color: var(--dp-theme-custom-3);
font-weight: 400;
}
.sc-ac-action {
background-color: #fff;
width: 164px;
min-width: 164px;
height: 40px;
color: var(--dp-theme-custom-5);
font-weight: 600;
font-size: 16px;
line-height: 22px;
border-radius: 5px;
border: 2px solid var(--dp-theme-custom-5);
padding: 9px;
cursor: pointer;
}
.sc-ac-action:hover {
background-color: var(--dp-theme-custom-5);
color: #fff;
border: 2px solid var(--dp-theme-custom-5);
}
.sc-aside-title {
text-align: left;
font: normal normal bold 20px / 27px "Hind Madurai";
letter-spacing: 0px;
color: var(--dp-theme-custom-3);
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
margin-bottom: 20px;
}
.sc-aside-subtitle {
text-align: left;
font: normal normal bold 14px / 21px "Hind Madurai";
letter-spacing: 0px;
color: var(--dp-theme-custom-3);
margin-bottom: 10px;
}
.sc-item {
border: 1px solid rgba(0, 0, 0, 0.125);
padding: 50px 30px;
margin-bottom: 20px;
}
.strike-through {
text-decoration: line-through;
color: #999;
}
.item-total {
color: #333;
font: normal normal bold 20px / 27px "Hind Madurai";
}
.pricing-discount {
color: #098a00;
font-size: 0.813em;
}
.btn-default {
background: #f1f1f1;
color: var(--dp-theme-custom-3);
}
.btn-default:hover {
color: #f1f1f1 !important;
background: var(--dp-theme-custom-3) !important;
}
.sc-item-title {
font: normal normal bold 20px / 24px "Hind Madurai";
color: var(--dp-theme-custom-3);
}
.sc-item-delivery .form-check-label {
font-size: 14px;
}
.sc-item-img img {
max-height: 200px;
max-width: 200px;
}
.sc-item-label {
font-size: 14px;
}
.sc-item-qtywrap {
display: flex;
justify-content: left;
align-items: center;
}
.sc-item-qtychangewrap {
display: flex;
gap: 10px;
margin-left: 10px;
align-items: center;
}
.sc-item-qtychange-btn {
flex: none !important;
cursor: pointer;
background: #ffffff;
border: 1px solid var(--dp-theme-custom-5);
border-radius: 100px;
width: 30px;
height: 30px;
text-align: center;
align-items: center;
display: flex;
justify-content: center;
font-size: 20px;
color: var(--dp-theme-custom-5);
}
.sc-item-qtychange-btn.plus {
padding-top: 3px;
}
.sc-item-qtychange-btn:hover {
color: #ffffff;
border: 1px solid var(--dp-theme-custom-5);
background: var(--dp-theme-custom-5);
}
.sc-qty-input {
background: white 0% 0% no-repeat padding-box;
border: 1px solid silver;
border-radius: 4px;
opacity: 1;
margin: 0 9px;
padding: 8px 0;
max-width: 48px;
text-align: center;
-moz-appearance: textfield;
}
.sc-promo-input {
background: white 0% 0% no-repeat padding-box;
border: 1px solid silver;
border-radius: 4px;
opacity: 1;
margin-right: 9px;
padding: 3px 0;
max-width: 100%;
width: 100%;
text-align: center;
-moz-appearance: textfield;
}
.sc-totals-cont {
font-size: 16px;
line-height: 18px;
border-top: 1px solid rgba(0, 0, 0, 0.125);
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
padding-top: 20px;
margin-bottom: 20px;
}
.sc-sb {
display: flex;
justify-content: space-between;
padding: 0 0px;
font-size: 16px;
margin-bottom: 14px;
}
.sc-value-helper {
color: #ababab;
font-size: 12px;
}
.sc-bold {
font-weight: 600;
}
.sc-checkout-btn {
width: 100%;
height: 38px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
font: normal normal 600 20px / 27px "Hind Madurai";
background: var(--dp-theme-custom-3);
color: #ffffff !important;
}
.sc-checkout-btn i {
margin-right: 10px;
}
.sc-checkout-btn:hover {
background: var(--dp-theme-custom-5) !important;
}
.sc-promo-flex {
display: flex;
}
.sc-promo-apply-btn {
width: 175px;
}
.cart-best-sellers .dp-product-img {
height: 175px;
}
.cart-best-sellers .price__format-style {
font-size: 12px;
}
.cart-best-sellers .price {
font-size: 26px;
}
.cart-best-sellers .dp-product-name {
font-size: 22px;
}
.db-prod-list-rating {
display: flex;
gap: 6px;
font-size: 14px;
justify-content: center;
align-items: center;
}
.db-prod-list-rating img {max-width: 15px;}
.dp-title-sm {
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 40px;
line-height: 44px;
letter-spacing: -1px;
margin-bottom: 30px;
}
.dp-title-sm {
color: var(--dp-theme-custom-3);
}
.product-slider-wrap {
position: relative;
}
.slick-next:before, .slick-prev:before {
font-size: 35px;
line-height: 1;
opacity: .75;
color: var(--dp-theme-custom-3);
}
.slick-next, .slick-prev {
width: 35px;
height: 35px;
}
.redast {
color: #b00000;
}
.form-helper {
margin: 0px;
color: #aaaaaa;
font-style: italic;
font-size: 14px;
}
.form-group.custom-checkbox {
display: flex;
gap: 10px;
}
.bg-checkout {
background-color: #f9f9f9;
}
.sc-infobox {
position: relative;
padding: 30px;
border: 1px solid #cccccc;
}
.db-sec-cont.noheader {
padding-top: 150px;
}
.db-sec-cont.nobanner {
margin-top: 116px;
}
.sc-page-title i {
font-size: 22px;
color: var(--dp-theme-custom-5);
}
.sc-flex-js {
display: flex;
align-items: center;
justify-content: space-between;
}
.sc-helper span {
font-weight: bold;
color: var(--dp-theme-custom-5);
}
.bold-green {
color: #098A00;
font: normal normal normal 14px / 19px "Hind Madurai";
font-weight: 600;
}
.bold-red {
color: #8a0000;
font: normal normal normal 14px / 19px "Hind Madurai";
font-weight: 600;
}
.scim-img {
max-width: 50px;
}
.scim-wrap {
display: flex;
align-items: center;
justify-content: space-between;
}
.sc-item-mini-price {
font-weight: bold;
}
.sc-item-mini-title {
font-size: 16px;
font: normal normal bold 16px / 24px "Hind Madurai";
color: var(--dp-theme-custom-3);
}
.scim-data-wrap {
display: flex;
align-items: center;
gap: 10px;
}
.sc-item-aside .sc-item-qtychange-btn {
width: 20px;
height: 20px;
}
.sc-item-aside .sc-item-qtychange-input input {
padding: 4px 0;
}
.sc-item-aside .sc-item-qtywrap {
display: flex;
justify-content: left;
margin-top: 10px;
}
.card-header-custom {
font-size: 22px;
font-weight: 600;
color: var(--dp-theme-custom-3);
}
.sc-item-aside {
border: 1px solid #ccc;
padding: 16px;
margin-bottom: 10px;
}
.dd-title {
font-weight: 700;
font-size: 20px;
line-height: 1em;
color: var(--dp-theme-custom-3);
}
.dd-detail {
padding: 30px;
border-bottom: 1px solid #ccc;
}
label.dd-label {
font-weight: bold;
font-size: 14px;
color: var(--dp-theme-custom-2);
margin: 0px;
}
label.dd-label-dark {
font-weight: bold;
font-size: 14px;
color: var(--dp-theme-custom-1);
margin: 0px;
}
p.dd-p {
margin: 0px;
font-size: 16px;
line-height: 14px;
margin-bottom: 6px;
}
p.dd-p a {
margin: 0px;
font-size: 16px;
line-height: 14px;
color: var(--dp-theme-custom-5);
}
p.dd-hr {
margin-bottom: 0px;
line-height: 18px;
font-size: 14px;
}
.db-popup-dealer-cont {
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
}
.db-dealer-close {
position: absolute;
color: var(--dp-theme-custom-3);
font-size: 25px;
right: 10px;
top: 10px;
cursor: pointer;
z-index: 3;
}
.db-dealer-close i.fa.fa-times-circle {
background: #ffffff;
border-radius: 100px;
}
.db-popup-dealer-wrap {
position: relative;
overflow: visible;
}
.btn-pop.btn-outline {
border: 2px solid var(--dp-theme-pop);
background: transparent;
color: #07192C;
font-weight: bold;
}
.btn-po.btn-outline:hover {
background: var(--dp-theme-pop) !important;
font-weight: bold;
}
.navbar-area.navbar-style-two.mgmt-nav {
top: 0px;
}
.vendor-title {
color: var(--dp-theme-custom-3);
}
.navvendor {
position: relative;
z-index: 2102;
}
.navvendor .vendor-content {
padding: 0px;
position: absolute;
background: #fff;
right: 0;
width: 400px;
z-index: 2103;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
.ReactModal__Content.ReactModal__Content--after-open {
border-radius: 1rem!important;
}
.navvendor.active {
border-radius: 8px 8px 0px 0px;
}
.tenant-lomart .navtopper-modern #navbarvendor.active .vendor-content,
.navtopper-modern #navbarvendor.active .vendor-content {
position: absolute !important;
top: calc(100% + 6px) !important;
right: auto;
left: auto !important;
transform: none !important;
width: min(90vw, 400px) !important;
max-width: calc(100vw - 16px) !important;
max-height: none !important;
overflow: visible !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
z-index: 2200 !important;
border-radius: 1rem;
}
.tenant-lomart .navtopper.navtopper-modern,
.tenant-lomart .navtopper-modern,
.navtopper.navtopper-modern,
.navtopper-modern {
position: relative !important;
overflow: visible !important;
z-index: 3200 !important;
}
.tenant-lomart .navbar-area.navbar-style-two.navbar-lomart-modern {
z-index: 3000 !important;
}
.tenant-lomart #navbarvendor,
#navbarvendor {
position: relative;
z-index: 3300;
}
.tenant-lomart #navbarvendor.active .vendor-content,
#navbarvendor.active .vendor-content {
z-index: 3400 !important;
}
.v-arrow-l {
margin-left: 10px;
color: var(--dp-theme-custom-5);
}
.pf-row {
padding: 10px;
background: #fff;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.pf-row ul {
padding: 0px;
list-style: none;
margin-bottom: 0px;
}
.pf-row ul li label {
font-size: 12px;
}
.pf-row ul li {
font-size: 12px;
margin-bottom: 0px;
}
.product-editor label {
font-weight: bold;
color: var(--dp-theme-custom-5);
text-transform: uppercase;
font-size: 13px;
}
.p-flex form {
display: flex;
gap: 10px;
}
.p-flex form span {
display: flex;
justify-content: center;
align-items: baseline;
flex-flow: column;
}
.f-add {
padding-bottom: 10px;
border-bottom: 1px solid #dddd;
}
.p-flex form span button {
margin-top: 20px;
}
.hidden {
display: none !important;
}
.table thead tr {
background: #686868;
color: #fff;
font-weight: bold;
}
.table tbody a {
color: var(--dp-theme-custom-5);
font-weight: bold;
}
li.nav-item.nav-hassub:after {
content: '\f078';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration:none;
position: absolute;
right: 8px;
color: #ffffff;
top: 50%;
height: 10px;
/* background: green; */
width: 10px;
margin-top: -13px;
font-size: 14px;
}
.navbar-nav li.nav-item:hover.nav-hassub:after {
color: var(--dp-theme-pop);
}
.tuam-nav .navbar .navbar-nav .nav-item a {
padding-left: 2px;
padding-right: 2px;
}
.tuam-nav .navbar .navbar-nav .nav-item.nav-hassub a {
padding-right: 12px;
}
.nav-item li.nav-item.nav-hassub:after {
content: '\f078';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration:none;
position: absolute;
right: 8px;
color: var(--dp-theme-custom-5);
top: 50%;
height: 10px;
/* background: green; */
width: 10px;
margin-top: -13px;
font-size: 14px;
}
img.m-img {
max-width: 100px;
max-height: 100px;
}
.breadcrumb-cont {
display: flex;
gap: 5px;
align-items: center;
justify-content: left;
margin-bottom: 0px;
margin-top: 20px;
}
.breadcrumb-cont a {
font-weight: 12px;
color: var(--dp-theme-custom-5);
}
.breadcrumb-cont span {
color: #9a9999;
}
.breadcrumb-cont i {
color: #9a9999;
}
.loader-r {
margin-right: 5px;
}
.formError {
color: red;
}
.formSuccess {
color: green;
}
.bold-green {
color: green;
font-weight: bold;
}
.regular-green {
color: green;
}
.regular-red {
color: red;
}
.infobox-loading {
text-decoration:none;
width: 100%;
height: 100%;
position: absolute;
background: rgba(255, 255, 255, 0.75);
top: 0px;
left: 0px;
justify-content: center;
align-items: center;
display: flex;
}
.infobox-disabled {
opacity: .3;
}
.productloading {
font-size: 30px;
text-align: center;
padding: 50px;
padding-top: 140px;
padding-bottom: 100px;
}
.sc-aside.loading {
opacity: .3;
}
.pl-0 {
padding: 0px !important;
}
.dp-product-img-card {
width: 150px;
height: 150px;
text-align: center;
background: #f1f1f1;
margin: 5px;
}
.dp-product-img-wrap .slick-arrow {
display: none !important;
}
.dp-mptitle-desc {
font-size: 11px;
font-weight: 600;
color: #7f7f7f;
}
.dp-mptitle-option {
font-size: 18px;
line-height: 16px;
padding-top: 3px;
font-weight: 600;
color: var(--dp-theme-lightred);
}
.dp-mptitle {
font-size: 18px;
line-height: 16px;
padding-top: 3px;
font-weight: 600;
color: var(--dp-theme-custom-3);
}
[data-productvariationvalue] img {
max-height: 60px;
}
.dp-gallery-main .iiz {
width: 100%;
min-height: 340px;
max-height: 560px;
align-items: center;
justify-content: center;
display: flex !important;
}
.dp-gallery-main .iiz__img {
width: 100%;
max-height: 560px;
object-fit: contain !important;
}
@media (max-width: 767px) {
.dp-gallery-main .iiz {
min-height: 240px;
}
.dp-gallery-main .iiz__img {
max-height: 380px;
}
}
.dp-link-tag {
color: #000;
background: #f1f1f1;
border: 1px solid #ccc;
padding: 2px 5px;
font-size: 12px;
}
.dp-link-tag:hover {
color: #fff !important;
background: var(--dp-theme-custom-5);
border: 1px solid var(--dp-theme-custom-5);
}
.tag-wrapper {
flex-wrap: wrap;
display: flex;
gap: 7px;
max-width: 400px;
}
.filter-hide {
display: none !important;
}
.card-header.db-filter-header {
border-radius: 0px;
}
#filter-form {
border-radius: 0px;
}
.db-review-cont {
max-width: 90%;
margin: 5%;
}
.btn-quote {
width: 100%;
}
.btn-quote {
background: #ff4b4b;
}
.btn-quote:disabled {
background: #ff4b4b !important;
}
.sc-checkout-btn:disabled {
width: 100%;
height: 52px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font: normal normal 600 20px / 27px "Hind Madurai";
background: var(--dp-theme-custom-3);
color: #ffffff !important;
}
.fs-12 {
font-size: 12px
}
.fs-14 {
font-size: 14
}
.fs-16 {
font-size: 16
}
.db-quote-popup {
padding: 25px;
}
.btn-pop:disabled {
background: var(--dp-theme-pop);
color: #07192C;
border: 1px solid var(--dp-theme-pop);
}
.db-quote-popup .dealer-list {
height: 400px;
overflow-y: scroll;
overflow-x: hidden;
}
.db-quote-popup .dealer-list::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.db-quote-popup .dealer-list::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.db-quote-popup .dd-detail {
padding: 10px 0px;
}
.mini-list .sc-item-img img {
width: 100%;
height: auto;
}
.mini-list .sc-item {
padding: 10px;
}
.sc-items-list.mini-list {
max-height: 210px;
overflow-y: scroll;
overflow-x: hidden;
}
.sc-items-list.mini-list::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.sc-items-list.mini-list::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.blog-details-img img {
width: 100%;
}
.mr-1 {
margin-right: .5em;
}
.mr-2 {
margin-right: 1em;
}
.mr-3 {
margin-right: 1.5em;
}
.mr-4 {
margin-right: 2em;
}
.ml-1 {
margin-left: .5em;
}
.ml-2 {
margin-left: 1em;
}
.ml-3 {
margin-left: 1.5em;
}
.ml-4 {
margin-left: 2em;
}
.nac-section {
margin-bottom: 40px;
}
.nac-section a {
margin-bottom: 10px;
}
.nac-section h4 {
font-size: 28px;
font-weight: 600;
background: #f1f1f1;
padding: 4px 10px;
}
.o-item-img {
max-width: 85px;
max-height: 85px;
width: 100%;
height: 100%;
}
.order-item-imgs {
display: flex;
gap: 5px;
}
b, strong {
font-weight: bold;
}
.order-item a {
color: #e5323f;
}
.nac-section a.nav-link {
color: #000;
}
.nac-section a.nav-link.active,.nac-section a.nav-link:hover {
color: #0b4396;
font-weight: 600;
}
.od-img {
padding: 5px;
}
.table.no-border td,.table.no-border th {
border: none;
}
table.table.no-border th,table.table.no-border td {
padding: 3px;
padding-left: 0px;
}
.border-none {
border: none !important;
}
h5.sc-page-title-mini.full-width {
background: #c1c1c1;
color: #ffffff;
padding: 6px;
}
.extra-ms {
width: 160px;
}
.extra-xl {
width: 460px;
}
.rmsc .clear-selected-button {
margin: 0px;
}
a.dp-active {
color: var(--dp-theme-green) !important;
}
a.dp-inactive{
color: var(--dp-theme-red) !important;
}
.pvar-list {
display: flex;
justify-content: left;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.pvar-item {
border: solid 3px #75849f;
border-radius: 4px;
padding: 4px 20px;
font-weight: 500;
color: #07192d;
/* box-shadow: 0px 6px 8px rgb(0 0 0 / 10%); */
transition: .3s ease;
cursor: pointer;
}
.pvar-item:hover,.pvar-item.active {
border: solid 3px #07192d;
background: #07192d;
color: #fff;
}
.pvar-item-shape {
border: solid 1px #b6bece;
border-radius: 4px;
padding: 4px 20px;
font-weight: 500;
color: #07192d;
transition: .3s ease;
cursor: pointer;
}
.pvar-item-shape.active {
border: solid 4px var(--dp-theme-lightred);
color: var(--dp-theme-lightred);
}
.pvar-item-cover-type {
border: solid 1px #b6bece;
border-radius: 4px;
padding: 0px 0px;
font-weight: 500;
color: #07192d;
transition: .3s ease;
cursor: pointer;
}
.pvar-item-cover-type.active {
border: solid 4px var(--dp-theme-lightred);
color: var(--dp-theme-lightred);
}
.pvar-item-shape:hover {
border: solid 1px var(--dp-theme-lightred);
color: var(--dp-theme-lightred);
}
.pvar-item-cover-type:hover {
border: solid 1px var(--dp-theme-lightred);
color: var(--dp-theme-lightred);
}
.pvar-item-cover-type img {
min-height: 100px;
}
.row-accessories .dp-choice-name {
font-size: 20px;
line-height: normal;
}
.row-accessories .dp-choice-p {
font-size: 14px;
}
.history-db .sec-img img {
width: 100%;
height: auto;
}
.page-title-area.cat-feature {
text-align:center;
}
.cat-feature .container.page-title-content {
text-align: center;
}
.cat-feature h5 {
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
color: var(--dp-theme-pop);
margin: 0;
}
.page-title-area.pool-feature {
height: 600px;
text-align:center;
}
.pool-feature .container.page-title-content {
text-align: center;
}
.pool-feature h5 {
font-size: 30px;
text-transform: uppercase;
font-weight: bold;
color: var(--dp-theme-pop);
margin: 0;
}
.pline-cont {
display: flex;
justify-content:center;
align-items: center
}
.pline-leftside {
height: 4px;
flex: auto;
background: var(--dp-theme-custom-5);
margin-right:20px;
}
.pline-rightside {
margin-left:20px;
height: 4px;
flex: auto;
background: var(--dp-theme-custom-5);
}
.poolinfo-wrap .sec-left-pad {
padding-right: calc(var(--bs-gutter-x)* .5);
padding-left: calc(var(--bs-gutter-x)* .5);
}
.poolinfo-wrap .sec-left {
padding: 115px 50px 50px 50px;
}
.pool-selector {
display: flex;
justify-content: center;
align-items: center;
}
.img-info {
width: 50%;
padding-right: 2%;
}
.pt-0 {
padding-top: 0px !important;;
}
.picker-img {
padding-left: 2%;
width: 50%;
}
.interactive-picker {
flex-wrap: wrap;
display: flex;
gap: 10px;
padding-bottom: 20px;
border-bottom: 2px solid #ddd;
margin-bottom: 21px;
}
.interactive-item {
transition: 0.3s ease;
cursor:pointer;
padding: 6px 16px;
border: 1px solid #ddd;
border-radius: 3px;
background: #f5f5f5;
color: #363648;
font-weight: 600;
font-size: 13px;
}
.interactive-item:hover,.interactive-item.active {
padding: 6px 16px;
border: 1px solid #ffe53a;
border-radius: 3px;
background: #ffe53a;
color: #296ae1;
}
.page-title-area.pool-feature::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(72.5deg, rgb(25 74 247 / 60%) 18%, rgb(0 224 255 / 50%) 85%);
opacity: .60;
}
.sec-bred {
color: var(--dp-theme-lightred) !important;
font-weight: 600;
}
.col-center {
flex-flow: column;
text-align: center;
height: 100%;
}
.pool-video-wrap {
position: relative;
}
.v-swave-cont.vh-75 {
min-height: 75vh;
}
.v-swave-cont {
display: flex;
width: 100%;
min-height: 100vh;
padding: 0px;
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 200px !important;
}
.react-player {
height: auto !important;
}
.wave-video {
margin-bottom: 20px;;
}
.v-swave-cont::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(72.5deg, rgb(25 74 247 / 60%) 18%, rgb(0 224 255 / 50%) 85%);
opacity: .60;
}
.v-swave {
width: 100%;
height: 100px;
position: absolute;
top: 0;
z-index:2
}
.poolinfo-wrap {
align-items: center;
justify-content: center;
color: #ffffff;
z-index: 2;
width: 100%;
}
.pinteractive-img-right {
justify-content: right;
display: flex;
align-items: center;
}
.b-white {
font-weight: bold;
color: #ffffff;
}
.nav-item label {
margin-top: 10px;
width: 100%;
padding: 0px 15px 0px 15px;
font-weight: bold;
color: var(--dp-theme-lightred);
border-bottom: 1px solid var(--dp-theme-lightred);
}
.quote-form {
padding: 50px;
position: relative;
}
.succes-mark {
font-size: 60px;
color: var(--dp-theme-green);
}
.sm-title {
font-size: 45px;
line-height: 48px;
}
.btn-xsm {
padding-top: 4px !important;
padding-bottom: 4px !important;
padding-left: 8px !important;
padding-right: 8px !important;
font-size: 12px !important;
}
.pop-btn.btn-sm {
line-height: auto;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
font-size: 14px;
}
.light-red {
color: var(--dp-theme-lightred) !important
}
.light-blue {
color: var(--dp-theme-custom-5) !important
}
.dark-blue {
color: var(--dp-theme-custom-3) !important
}
.mgmt-section-wrap {
background: #f1f1f1;
padding: 10px;
margin-bottom: 10px;
}
.cat-icons {
width: 100%;
max-width: 25px;
}
.rsw-ce {
background: #ffffff;
}
.pos-relative {
position: relative;
}
.floating-altProduct {
width: 50px;
position: absolute;
bottom: 0px;
right: 0px;
}
.floating-altProduct {
width: 200px;
position: absolute;
bottom: -50px;
right: -50px;
padding: 0;
}
.floating-altProduct-image {
width: 100%;
}
.floating-altProduct-img {
width: fit-content;
}
p.pb-0.floating-altProduct-title {
color: var(--dp-theme-lightred);
font-size: 29px;
}
.p-mini {
font-weight: bold;
font-size: 16px;
line-height: 9px;
}
.db-thin-banner p {
color: #ffffff !important;
font-weight: 400;
font-size: 20px;
}
.db-thin-banner {
background: var(--dp-theme-lightred);
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
text-align: center;
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 10px;
}
a.btn {
cursor: pointer;
}
.btn-sm {
line-height: auto;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 20px;
padding-right: 20px;
font-size: 14px;
}
.btn-xsm {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 10px;
padding-right: 10px;
font-size: 11px;
}
.text-white {
color: #ffffff !important
}
.mini-selector img {
max-height: 300px;
}
.large-selector img {
max-height: 650px;
}
.sec-md-text {
margin-top: 10px;
font-family: 'Hind Madurai';
font-style: normal;
font-weight: 700;
font-size: 30px;
line-height: 34px;
letter-spacing: -1px;
margin-bottom: 20px;
}
.multi-var-list-shape {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.pvar-item-shape.isDisabled {
opacity: .3;
}
.tiny-p {
margin-bottom: 0px;
font-size: 10px;
}
.db-info-flex {
display: flex;
gap: 5px;
}
.markerlabel {
color: var(--dp-theme-lightred) !important;
background: #fff;
padding: 4px 6px;
border-radius: 3px;
border: 1px solid #ccc;
position: absolute;
bottom: 0px;
font-size: 10px !important;
font-weight: 600 !important;
left: 50%;
transform: translate(-50%, 0);
}
span.map-number {
margin-right: 10px;
border: 1px solid #35b0d9;
color: #ffffff;
background: #1495c9;
width: 28px;
height: 28px;
text-align: center;
border-radius: 100px;
justify-content: center;
align-items: center;
display: inline-flex;
}
.text-right {
text-align: right;
}
.contact-table, .contact-table p {
font-size: 12px;
}
.type-tag-pool {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
text-align: center;
border: 1px solid #35b0d9;
color: #ffffff;
background: #1495c9;
}
.type-tag-dealer {
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
text-align: center;
border: 1px solid #ff7171;
color: #ffffff;
background: #ff5c5c;
}
.hp-block1-bg {
background: url('/assets/${tenant}/images/homepage/block1-bg-alt.jpg` #4879a9');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #4879a9;
}
.hp-block1-bg::before {
content: ' ';
position: absolute;
top: 0px;
width: 100%;
height: 100%;
background-image: linear-gradient(rgb(0 0 0 / 0%), rgba(31, 114, 162, 0.75));
}
.hp-block2-bg {
background: url('/assets/${tenant}/images/homepage/block2-bg.jpg` #c2e6f5');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #c2e6f5;
}
.hp-block4-bg {
background: url('/assets/${tenant}/images/homepage/block4-bg.jpg` #c2e6f5');
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #c2e6f5;
}
.hp-block5-bg {
/* background: url('/assets/${tenant}/images/homepage/block5-bg.jpg` #c2e6f5;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-color: #c2e6f5; */
background: rgb(20,56,92);
background: linear-gradient(-180deg, rgba(20,56,92,1) 0%, rgba(8,29,56,1) 100%);
}
.sec-relative {
position: relative;
}
.sec-padding {
padding-top: 100px;
padding-bottom: 100px;
}
.sec-bottom-bar {
position: relative;
}
.sec-bottom-bar::after {
content: ' ';
width: 100%;
height: 20px;
/* display: block; */
-moz-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}
.sec-b-lightblue {
background-color: #6fd5ff;
height: 6px;
width: 100%;
}
.sec-b-red {
background-color: #ff5c5c;
height: 6px;
width: 100%;
}
.sec-b-blue {
background-color: #193a54;
height: 14px;
width: 100%;
-moz-box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
}
.sec-b-white {
background-color: #ffffff;
height: 0px;
width: 100%;
-moz-box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0 0px 25px rgba(0, 0, 0, 0.3);
}
.sec-container {
z-index: 1;
position: relative;
}
.sec-icon-title {
font-size: 20px;
line-height: 26px;
color: #fff;
/* color: var(--dp-theme-pop); */
margin-bottom: 6px;
font-weight: bold;
}
.sec-icon-wrap {
/* margin: auto; */
max-width: 100px;
margin-bottom: 10px;
}
.text-white {
color: #ffffff;
}
.sec-padding-right {
padding-right: 50px;
}
.sec-padding-left {
padding-left: 50px;
}
.sec-img-cont {
display: flex;
justify-content: center;
align-items: center;
}
.sec-icon-text {
font-size: 14px;
line-height: 20px;
}
.sec-fw-padding-right {
padding-right: 50px;
}
.sec-fw-padding-left {
padding-left: 50px;
}
.ab-img-left {
position: absolute;
width: 48%;
top: 50%;
left: 0px;
margin-top: -225px;
}
.hp-filter-img {
max-width: 460px;
}
.text-dark {
color: var(--dp-theme-custom-3);
}
.sec-icon-title-red {
font-size: 20px;
line-height: 26px;
color: var(--dp-theme-custom-3);
font-weight: bold;
/* color: var(--dp-theme-lightred); */
margin-bottom: 6px;
}
.sec-icon-title-blue {
font-size: 20px;
line-height: 26px;
color: var(--dp-theme-custom-3);
margin-bottom: 6px;
}
.sec-dark .sec-container h2 {
color: #fff;
font-size: 56px;
line-height: 53px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
margin-bottom: 32px !important;
}
.sec-dark .sec-container h2::after {
content: ' ';
display: inline-block;
width: 100%;
height: 3px;
background: #fff;
/* background: var(--dp-theme-pop); */
position: absolute;
bottom: -10px;
left: 0px;
}
.sec-light .sec-container h2 {
color: var(--dp-theme-custom-3);
font-size: 56px;
line-height: 53px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
margin-bottom: 32px !important;
}
.sec-light .sec-container h2::after {
content: ' ';
display: inline-block;
width: 100%;
height: 3px;
background: var(--dp-theme-custom-3);
/* background: var(--dp-theme-lightred); */
position: absolute;
bottom: -10px;
left: 0px;
}
.sec-dark .sec-topper {
color: var(--dp-theme-pop);
border-left: 4px solid var(--dp-theme-custom-5);
}
.sec-light .sec-topper {
/* color: var(--dp-theme-lightred);
border-left: 4px solid var(--dp-theme-pop); */
color: var(--dp-theme-custom-5);
border-left: 4px solid var(--dp-theme-pop);
}
.yellow-btn {
border: none;
position: relative;
display: inline-block;
text-align: center;
overflow: hidden;
z-index: 1;
color: var(--dp-theme-custom-3) !important;
text-transform: uppercase;
background: var(--dp-theme-pop);
-webkit-transition: 0.5s;
transition: 0.5s;
border-radius: 5px;
font-weight: 600;
font-size: 15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 14px;
padding-bottom: 14px;
}
.yellow-btn:hover {
color: var(--dp-theme-custom-3) !important;
background: var(--dp-theme-pop) !important;
}
.red-btn {
border: none;
position: relative;
display: inline-block;
text-align: center;
overflow: hidden;
z-index: 1;
color: #ffffff !important;
text-transform: uppercase;
background: var(--dp-theme-lightred);
-webkit-transition: 0.5s;
transition: 0.5s;
border-radius: 5px;
font-weight: 600;
font-size: 15px;
padding-left: 30px;
padding-right: 30px;
padding-top: 14px;
padding-bottom: 14px;
}
.red-btn:hover {
color: var(--dp-theme-custom-3) !important;
background: var(--dp-theme-pop) !important;
}
.flag-flex {
display: flex;
justify-content: center;
align-items: center;
}
.flag-flex img {
max-width: 200px;
margin-right: 50px;
}
.sec-builder-padding {
padding-top: 65px;
padding-bottom: 65px;
}
.item-bg1::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(72.5deg, rgb(25 74 247 / 35%) 18%, rgb(0 224 255 / 35%) 85%);
opacity: .60;
}
.item-bg1::after {
content: '';
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -2;
background: linear-gradient(72.5deg, rgba(0, 0, 0, 50%) 18%, rgba(0, 0, 0,50%) 85%);
opacity: .60;
}
.poolslide .slick-slide {
margin: 0 10px;
}
.poolslide .slick-list {
margin: 0 -10px;
}
h2.buildpool-title {
color: #fff;
font-size: 70px;
line-height: 53px;
font-weight: bold;
position: relative;
padding-bottom: 10px;
margin-bottom: 32px !important;
}
.buildpoolbtn {
font-size: 18px;
margin: -50px;
box-shadow: 0px 20px 30px rgb(0 0 0 / 20%);
}
.poolslide-wrap-cont {
margin-top: -11px;
}
.poolslide-wrap-cont .slick-track {
height: 115px !important;
}
.mgmt-productimg {
max-width: 100px;
max-height: 100px;
}
.bw-bold {
font-weight: bold;
}
.gap-8 {
gap: 8px;
}
.slick-next {
right: 0;
}
.slick-prev {
left: 0;
}
button.slick-arrow {
z-index: 1;
}
.quote-form .dealer-list {
overflow: scroll;
height: 100%;
max-height: 450px !important;
display: inline-block;
background: #f6f6f6;
}
.quote-form .dealer-list::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.quote-form .dealer-list::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
.ReactModalPortal .quote-form .db-sec-cont {
padding-bottom: 0px !important;
}
.ReactModalPortal .quote-form {
padding: 10px;
position: relative;
}
.ReactModalPortal .quote-form .container {
padding: 0px;
}
.disclaimer-p {
font-size: 12px;
color: #999;
}
.text-italic {
font-style: italic;
}
.fw-500 {
font-weight: 500;
}
.db-modal-wrap {
padding: 20px;
}
.d4db-ad {
background: #68c243;
width: 100%;
display: flex;
gap: 10px;
color: #fff;
text-align: center;
padding: 0px;
justify-content: center;
align-items: center;
}
.navbar-area.navbar-style-two {
top: 0px;
padding-left: 0px;
padding-right: 0px;
background-color: rgba(12, 84, 1600, 0.7);
padding-bottom:0px;
padding-top:5px;
}
p.d4db-ad-bold {margin: 0px;color: #fff;font-weight: bold;font-size: 20px;}
p.d4db-ad-thin {
margin: 0px;
color: #fff;
font-weight: 100;
font-size: 18px;
}
h4.feature-blue-subtitle {
font-size: 50px;
color: #69d3ff;
margin-bottom: 0px;
font-weight: bold;
}
.pt-acct {
padding-top: 150px !important;
}
.modal-padding {
padding: 30px;
}
.regDealerTitle {
font-weight: bold;
color: var(--dp-theme-lightred);
margin:0px;
}
.regDealerName {
margin: 0px;
font-weight: bold;
color: var(--dp-theme-custom-5);
font-size: 24px;
line-height: 22px;
}
.regDealerAddress {
margin: 0px;
color: #959595;
}
.pop-btn:disabled {
color: var(--dp-theme-custom-3) !important;
background: var(--dp-theme-pop);
}
.product-details.sum-price {
font-size: 40px !important;
line-height: 35px !important;
}
.green-price {
color: #68c243;
font-weight:bold;
font-size: 40px !important;
line-height: 35px !important;
}
.price__was-price.sum-before-price {
font-weight:700;
font-size: 40px !important;
line-height: 35px !important;
}
.spec-offer {
background: red;
padding: 1px 4px;
width: fit-content;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 12px;
line-height: 16px;
display: inline-block;
margin-bottom: 7px !important;
}
.mini-text {
font-size: 10px;
color: #999;
}
.dp-was-price {
color: var(--dp-theme-custom-5);
position: relative;
}
.dp-was-price::after {
content: ' ';
display: inline-block;
width: 100%;
height: 1px;
background: red;
position: absolute;
bottom: 37px;
left: 0px;
}
.db-thin-banner.no-bg-summerville-ad {
color: #ff5c5c !important;
background: none;
}
.db-thin-banner.no-bg-summerville-ad p {
color: #ff5c5c !important;
}
p.sale-banner {
background: #ff5c5c;
color: #fff;
padding: 4px 10px;
width: fit-content;
margin-top: 10px;
}
.orange-text {
color: #ffa85c;
font-size:12px;
line-height:16px;
}
.red-text {
color: #ff5c5c;
font-size:12px;
line-height:16px;
}
.head-red-text {
color: #ff5c5c;
font-size:16px;
line-height:22px;
font-weight: bold;
}
.image-disclaimer {
color: #ff5c5c;
text-align: right;
padding-right: 100px;
}
.img-preview-order {
max-width: 200px;
}
.noTitlePadding {
padding-top: 175px;
}
.inviteaccept-img {
max-width: 200px;
}
.appicons-img {
max-width: 150px;
}
.invite-success {
color: #30ad81;
}
.dl-icon-wrap {
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
.sc-item-sm {
font-size: 12px;
}
/* .pvar-item-cover-type.pvar-item-cover-type.active {
border: solid 4px var(--dp-theme-lightred);
} */
/* .table-body-scroll {
display: block;
max-height: 100px;
overflow-y: auto;
overflow-x: hidden;
} */
.order-bg {
background: #f1f1f1;
}
.order-sec-bg {
background: #ffffff;
}
.orderalert-title {
font-size: 14px;
line-height: normal;
margin-bottom: 0px;
}
.orderalert-text {
font-size: 12px;
line-height: normal;
}
.orderalert-date {
font-size: 12px;
line-height: normal;
text-decoration: italic;
}
.orderalert-card {
padding: 4px;
}
.orderalert-card .card-body {
margin: 0px;padding:0px;
}
:root {
--lomart-main-blue: #005cb8;
--lomart-light-blue: #b2cde9;
--lomart-dark-blue: #1e345d;
}
.section-features {
background: white;
padding: 0 3rem 3rem !important;
}
@media (max-width: 768px) {
.section-features {
padding: 0 !important;
}
}
.feature-icon-card {
background: linear-gradient(145deg, #ffffff 0%, #f8fbff 100%);
border: 2px solid var(--lomart-light-blue);
border-radius: 20px;
padding: 2.5rem 1.5rem;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 20px rgba(0, 92, 184, 0.08);
height: 100%;
position: relative;
overflow: hidden;
}
.feature-icon-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--lomart-main-blue), var(--lomart-light-blue));
transform: scaleX(0);
transition: transform 0.4s ease;
}
/* .feature-icon-card:hover {
transform: translateY(-10px);
box-shadow: 0 12px 40px rgba(0, 92, 184, 0.15);
border-color: var(--lomart-main-blue);
background: linear-gradient(145deg, #ffffff 0%, #f0f7ff 100%);
} */
.feature-icon {
width: 45px;
height: 45px;
background: linear-gradient(135deg, var(--lomart-orange) 0%, var(--lomart-orange-topper) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
box-shadow: 0 8px 25px rgba(0, 92, 184, 0.25);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.feature-icon::after {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
background: linear-gradient(135deg, var(--lomart-light-blue), transparent);
opacity: 0;
transition: opacity 0.4s ease;
z-index: -1;
}
/* .feature-icon-card:hover .feature-icon {
transform: scale(1.1);
box-shadow: 0 12px 35px rgba(0, 92, 184, 0.35);
}
.feature-icon-card:hover .feature-icon::after {
opacity: 1;
} */
.feature-icon i {
font-size: 2rem;
color: white;
transition: transform 0.4s ease;
}
.feature-icon-card h6 {
color: var(--lomart-dark-blue);
font-weight: 700;
font-size: 1.25rem;
margin-bottom: 0.75rem;
letter-spacing: 0.5px;
}
.feature-icon-card p {
color: #5a6c7d;
font-size: 0.95rem;
margin: 0;
line-height: 1.6;
font-weight: 400;
}
@media (max-width: 768px) {
.feature-icon-card {
padding: 1.25rem 0.85rem;
border-radius: 14px;
}
.feature-icon {
width: 38px;
height: 38px;
margin: 0 auto 0.75rem;
}
.feature-icon i {
font-size: 1.05rem;
}
.feature-icon-card h6 {
font-size: 1rem;
margin-bottom: 0.45rem;
}
.feature-icon-card p {
font-size: 0.83rem;
line-height: 1.35;
}
}
/* Choose Your Perfect Pool section background */
.section-pools {
margin-top: 40px;
padding-top: 0;
position: relative;
}
.section-pools::before {
content: "";
position: absolute;
top: 90px;
right: 0;
bottom: 0;
left: 0;
/* background-image: url("/assets/lomart/images/water.jpg"); */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 0;
filter: saturate(0.5)
}
.section-pools .container {
position: relative;
z-index: 1;
}
.section-pools .section-title {
margin-top: -6px;
font-family: "Rubik", sans-serif;
}
.section-pools .section-title-singleline {
white-space: nowrap;
}
.section-pools .section-title-inline {
display: inline;
margin-top: 0;
}
.section-title-singleline .hp-block2-title-accent {
display: inline;
margin-top: 0;
}
.waterflow-inline {
position: relative;
display: inline-block;
margin-left: 6px;
line-height: 1;
vertical-align: middle;
}
.waterflow-inline.hp-block2-title-accent {
display: inline-block;
margin-top: 0;
background: none;
-webkit-background-clip: initial;
background-clip: initial;
color: inherit;
}
.waterflow-svg {
width: 9.6em;
height: 1.05em;
display: block;
}
.parallax > use {
animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
.waterflow-inline::after {
content: "Dream Pool";
visibility: hidden;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
.section-pools .section-subtitle {
margin-top: 6px;
}
.product-card {
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
transform: translateY(18px);
opacity: 0;
height: 100%;
max-width: 360px;
margin: 0 auto;
display: flex;
flex-direction: column;
transition: transform 1400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 1400ms ease-out;
transition-delay: var(--delay, 0ms);
will-change: transform, opacity;
}
.product-card-image img {
width: 100%;
height: 160px;
object-fit: cover;
display: block;
background: #f6f8fb;
padding: 10px;
border-radius: 20px;
}
.product-card-body {
padding: 18px 18px 22px;
text-align: left;
display: flex;
flex-direction: column;
flex: 1;
}
.section-pools h5 {
font-family: "Rubik", sans-serif;
}
.product-card.in-view {
opacity: 1;
transform: translateY(0);
}
.product-card:hover {
transform: translateY(-6px);
transition: transform 200ms ease;
border: 1px solid #f8651b7a
}
.product-card .btn {
margin-top: auto;
}
.product-card-icon {
display: flex;
align-items: center;
justify-content: center;
height: 140px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(0, 92, 184, 0.12), rgba(248, 101, 27, 0.14));
color: var(--lomart-main-blue);
font-size: 48px;
}
.product-card-icon i {
line-height: 1;
}
.hp-block2-pattern-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.hp-block2-pattern:hover .hp-block2-pattern-image {
transform: scale(1.04);
}
/* Lomart Reviews (Modern) */
.lp-reviews-section {
position: relative;
padding: 110px 0 120px;
background: #ffffff;
overflow: hidden;
}
.lp-reviews-section > * {
position: relative;
z-index: 1;
}
.lp-reviews-header {
margin-bottom: 60px;
}
.lp-reviews-badge {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 18px;
background: rgba(248, 101, 27, 0.08);
border: 1px solid rgba(248, 101, 27, 0.28);
border-radius: 999px;
margin-bottom: 18px;
}
.lp-reviews-dot {
width: 8px;
height: 8px;
background: var(--dp-theme-pop);
border-radius: 50%;
}
.lp-reviews-label {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
font-weight: 700;
color: var(--lomart-orange);
font-family: 'Rubik', sans-serif;
}
.lp-reviews-title {
font-family: 'Hind Madurai', sans-serif;
font-size: 42px;
font-weight: 700;
color: var(--lomart-dark-blue);
margin-bottom: 18px;
line-height: 1.15;
}
.lp-reviews-title span {
display: block;
margin-top: 8px;
background: linear-gradient(90deg, var(--lomart-main-blue) 0%, var(--lomart-orange) 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.lp-reviews-subtitle {
font-size: 18px;
line-height: 1.7;
color: rgba(30, 52, 93, 0.8);
font-family: 'Rubik', sans-serif;
}
.lp-reviews-hero {
width: 400px;
height: 400px;
border-radius: 50%;
padding: 10px;
background: linear-gradient(135deg, rgba(0, 92, 184, 0.12), rgba(248, 101, 27, 0.18));
box-shadow: 0 18px 40px rgba(7, 25, 44, 0.18);
display: flex;
align-items: center;
justify-content: center;
}
.lp-reviews-hero-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
display: block;
filter: none;
}
.lp-reviews-slider {
position: relative;
padding: 20px 0 10px;
}
.lp-review-slide {
padding: 0 14px;
}
.lp-review-card {
position: relative;
background: linear-gradient(135deg, #f5f9ff 0%, #ffffff 65%);
border: 1px solid rgba(0, 92, 184, 0.12);
border-radius: 22px;
box-shadow: 0 20px 40px rgba(7, 25, 44, 0.08);
padding: 40px 36px;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.lp-review-quote {
position: absolute;
top: 26px;
right: 28px;
font-size: 64px;
color: rgba(0, 92, 184, 0.12);
}
.lp-review-stars {
display: flex;
gap: 6px;
margin-bottom: 20px;
color: var(--dp-theme-yellow);
font-size: 18px;
}
.lp-review-text {
font-size: 18px;
line-height: 1.7;
color: #24324a;
margin-bottom: 26px;
font-family: 'Rubik', sans-serif;
}
.lp-review-person {
display: flex;
align-items: center;
gap: 16px;
}
.lp-review-avatar {
width: 54px;
height: 54px;
border-radius: 50%;
/* background: linear-gradient(135deg, var(--lomart-main-blue) 0%, var(--lomart-orange) 100%); */
background: linear-gradient(135deg, var(--lomart-orange) 0%, var(--lomart-orange-topper) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-weight: 700;
font-size: 18px;
overflow: hidden;
font-family: 'Hind Madurai', sans-serif;
}
.lp-review-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.lp-review-avatar i {
font-size: 28px;
color: #ffffff;
line-height: 1;
}
.lp-review-name {
font-weight: 700;
color: var(--lomart-dark-blue);
font-family: 'Hind Madurai', sans-serif;
}
.lp-review-location {
font-size: 14px;
color: rgba(30, 52, 93, 0.7);
font-family: 'Rubik', sans-serif;
}
.lp-reviews-slider .slick-dots {
margin-top: 24px;
position: static;
}
.lp-reviews-slider .slick-dots li button:before {
font-size: 10px;
color: rgba(30, 52, 93, 0.3);
opacity: 1;
}
.lp-reviews-slider .slick-dots li.slick-active button:before {
color: var(--lomart-main-blue);
}
.lp-reviews-slider .slick-prev,
.lp-reviews-slider .slick-next {
width: 44px;
height: 44px;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 10px 24px rgba(7, 25, 44, 0.12);
z-index: 2;
}
.lp-reviews-slider .slick-prev:before,
.lp-reviews-slider .slick-next:before {
color: var(--lomart-main-blue);
font-size: 20px;
}
.lp-reviews-slider .slick-prev {
left: -8px;
}
.lp-reviews-slider .slick-next {
right: -8px;
}
.grayCont {
background: #e9ecef;
padding: 3rem;
border-radius: 1rem;
}
@media (max-width: 991px) {
.lp-reviews-section {
padding: 90px 0 100px;
}
.lp-reviews-title {
font-size: 34px;
}
.lp-reviews-hero {
width: 200px;
height: 200px;
}
.lp-review-card {
padding: 34px 28px;
}
}
@media (max-width: 575px) {
.lp-reviews-title {
font-size: 30px;
}
.lp-reviews-hero {
width: 170px;
height: 170px;
margin: 0 auto;
}
.lp-review-card {
min-height: auto;
}
.lp-reviews-slider .slick-prev {
left: 4px;
}
.lp-reviews-slider .slick-next {
right: 4px;
}
}
.feature-bullets {
margin: 14px 0 0;
padding: 0;
text-align: left;
}
.feature-bullets li {
position: relative;
padding-left: 22px;
margin-bottom: 8px;
color: #8fa2b7;
font-size: 14px;
line-height: 1.5;
}
.feature-bullets li::before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: #2fbf5b;
font-weight: 700;
}
/* Lomart News (Modern) */
.lomart-news-card {
height: 100%;
background: #ffffff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 16px 34px rgba(8, 21, 43, 0.12);
border: 1px solid rgba(0, 92, 184, 0.08);
display: flex;
flex-direction: column;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.lomart-news-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(8, 21, 43, 0.16);
}
.lomart-news-media {
display: block;
height: 200px;
background: linear-gradient(135deg, rgba(0, 92, 184, 0.12), rgba(248, 101, 27, 0.12));
}
.lomart-news-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lomart-news-fallback {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--lomart-main-blue);
font-size: 42px;
}
.lomart-news-body {
padding: 22px 22px 26px;
}
.lomart-news-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 999px;
background: rgba(0, 92, 184, 0.08);
color: var(--lomart-main-blue);
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1.4px;
margin-bottom: 12px;
}
.lomart-news-title {
display: block;
font-family: "Hind Madurai", sans-serif;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
color: #07192C;
text-decoration: none;
}
.lomart-news-title:hover {
color: var(--lomart-main-blue);
}
@media (max-width: 991px) {
.lomart-news-media {
height: 180px;
}
}
.waterflow {
position: relative;
}
.waterflow h2 {
color: #fff;
font-size: 8em;
position: absolute;
transform: translate(-50%, -50%);
}
.waterflow h2:nth-child(1) {
color: transparent;
-webkit-text-stroke: 2px var(--lomart-main-blue);
}
.waterflow h2:nth-child(2) {
color: var(--lomart-main-blue);
animation: animate 4s ease-in-out infinite;
}
@keyframes animate {
0%,
100% {
clip-path: polygon(
0% 45%,
16% 44%,
33% 50%,
54% 60%,
70% 61%,
84% 59%,
100% 52%,
100% 100%,
0% 100%
);
}
50% {
clip-path: polygon(
0% 60%,
15% 65%,
34% 66%,
51% 62%,
67% 50%,
84% 45%,
100% 46%,
100% 100%,
0% 100%
);
}
}
.circle{
position: absolute;
border-radius: 50%;
background: white;
box-shadow: 0px 0px 1px 0px #508fb9;
transform: scale(0.8);
}
.hp-block1 .circle {
background: #fff3f2a8;
}
.hp-block2 .circle {
background: #94a8ba;
}
.ripple-background{
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 0;
transform: translateY(-50%);
pointer-events: none;
z-index: 0;
opacity: 0;
}
.ripple-right {
left: auto;
right: 0;
}
.hp-block2 .ripple-background {
z-index: 0;
}
.ripple-right .small,
.ripple-right .medium,
.ripple-right .large,
.ripple-right .xlarge,
.ripple-right .xxlarge {
left: auto;
}
.ripple-right .small {
right: -100px;
}
.ripple-right .medium {
right: -200px;
}
.ripple-right .large {
right: -300px;
}
.ripple-right .xlarge {
right: -400px;
}
.ripple-right .xxlarge {
right: -500px;
}
.ripple-background.is-visible .circle {
animation: ripple 6s ease-in-out 1;
animation-fill-mode: forwards;
}
.ripple-background.is-visible {
opacity: 1;
}
.small{
width: 200px;
height: 200px;
left: -100px;
top: -100px;
}
.medium{
width: 400px;
height: 400px;
left: -200px;
top: -200px;
}
.large{
width: 600px;
height: 600px;
left: -300px;
top: -300px;
}
.xlarge{
width: 800px;
height: 800px;
left: -400px;
top: -400px;
}
.xxlarge{
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
}
.shade1{
opacity: 0.2;
}
.shade2{
opacity: 0.5;
}
.shade3{
opacity: 0.7;
}
.shade4{
opacity: 0.8;
}
.shade5{
opacity: 0.9;
}
@keyframes ripple{
0%{
transform: scale(0.8);
}
50%{
transform: scale(1.2);
}
100%{
transform: scale(1.2);
}
}
/* Pool Builder Hero */
.pool-builder-hero{
min-height: 100vh;
color: #e5f6ff;
padding:2rem;
}
.pool-builder-hero::after {
content: "";
position: absolute;
left: -1%;
bottom: -1px;
width: 102%;
height: 80px;
background-color: #f7fafc;
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-position: center top;
mask-position: center top;
transform: scaleY(-1);
pointer-events: none;
z-index: 2;
}
.pool-builder-bg{
background-size: cover;
background-position: right right;
background-attachment: fixed;
z-index: 0;
pointer-events: none;
}
.pool-builder-overlay{
background: linear-gradient(135deg, rgba(12, 45, 66, 0.96), rgba(15, 45, 97, 0.92), rgba(16, 75, 122, 0.96));
background: linear-gradient(135deg, rgb(12 45 66 / 73%), rgb(15 45 97 / 68%), rgb(16 75 122 / 79%));
z-index: 1;
pointer-events: none;
}
.pool-builder-blobs{
opacity: 0.2;
z-index: 2;
pointer-events: none;
}
.pool-builder-blob{
position: absolute;
width: 360px;
height: 360px;
border-radius: 999px;
filter: blur(60px);
mix-blend-mode: multiply;
animation: pool-blob 7s infinite;
}
.pool-builder-blob.blob-1{
top: 15%;
left: 12%;
background: rgba(34, 211, 238, 0.9);
}
.pool-builder-blob.blob-2{
top: 22%;
right: 14%;
background: rgba(59, 130, 246, 0.9);
animation-delay: 2s;
}
.pool-builder-blob.blob-3{
bottom: 10%;
left: 28%;
background: rgba(56, 189, 248, 0.9);
animation-delay: 4s;
}
.pool-builder-content{
z-index: 3;
position: relative;
}
.pool-badge{
padding: 8px 16px;
border-radius: 999px;
border: 1px solid rgba(103, 232, 249, 0.35);
background: rgba(34, 211, 238, 0.18);
color: #bff3ff;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
}
.pool-badge-dot{
width: 8px;
height: 8px;
border-radius: 999px;
background: #67e8f9;
display: inline-block;
animation: pool-pulse 2s infinite;
}
.pool-hero-title{
font-size: clamp(2.8rem, 5vw, 4.4rem);
font-weight: 800;
color: #ffffff;
line-height: 1.05;
}
.pool-hero-title-accent{
background: linear-gradient(90deg, #22d3ee, #60a5fa);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.pool-hero-subtitle{
font-size: 1.2rem;
color: #c2eaff;
}
.pool-hero-body{
color: #a5d6f4;
}
.pool-feature-card{
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.pool-feature-card:hover{
transform: translateY(-4px) scale(1.02);
background: rgba(255, 255, 255, 0.16);
box-shadow: 0 20px 45px rgba(14, 116, 144, 0.25);
}
.pool-feature-icon{
width: 48px;
height: 48px;
min-width: 48px;
min-height: 48px;
flex: 0 0 48px;
aspect-ratio: 1 / 1;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #e0faff;
font-size: 22px;
}
.pool-feature-icon.bg-cyan{
background: rgba(34, 211, 238, 0.25);
}
.pool-feature-icon.bg-gold{
background: rgba(250, 204, 21, 0.2);
color: #fef08a;
}
.pool-feature-icon.bg-purple{
background: rgba(192, 132, 252, 0.22);
color: #e9d5ff;
}
.pool-btn-primary{
background: linear-gradient(90deg, var(--lomart-orange), #ff9b4a);
color: #ffffff;
border: none;
padding: 14px 28px;
border-radius: 14px;
font-weight: 700;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}
.pool-btn-primary:hover{
color: #ffffff;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 18px 30px rgba(14, 116, 144, 0.35);
}
.pool-btn-ghost{
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 14px 28px;
border-radius: 14px;
font-weight: 600;
transition: transform 0.3s ease, background 0.3s ease;
}
.pool-btn-ghost:hover{
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
transform: translateY(-2px) scale(1.02);
}
.pool-tip{
background: rgba(250, 204, 21, 0.12);
border: 1px solid rgba(250, 204, 21, 0.35);
padding: 16px;
border-radius: 12px;
color: #fef9c3;
}
.pool-tip i{
color: #facc15;
font-size: 18px;
margin-top: 2px;
}
.pool-quote-card{
background: rgba(255, 255, 255, 0.95);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.5);
overflow: hidden;
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
}
.pool-quote-header{
/* background: linear-gradient(90deg, #22d3ee, #3b82f6); */
background: #e9ecef;
padding: 24px 28px;
color: #e0f2fe;
}
.pool-head {
width: 100%;
}
.pool-head h2 {
color:var(--lomart-dark-blue)
}
.pool-quote-header div {
justify-content: center;
}
.pool-head p {
text-align: center;
}
.choose-type-header {
display: flex;
align-items: center;
gap:10px;
}
.pool-quote-indicator{
width: 48px;
height: 48px;
background: #eb6441a3;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
}
.pool-quote-indicator span{
width: 12px;
height: 12px;
background: #ffffff;
border-radius: 999px;
display: inline-block;
animation: pool-pulse 2s infinite;
}
.pool-quote-body{
padding: 28px;
}
.pool-options {
display: flex;
justify-content: space-around;
}
.pool-step{
display: flex;
gap: 16px;
width: 250px;
flex-direction: column;
padding: 16px;
border-radius: 14px;
transition: transform 0.3s ease, background 0.3s ease;
animation: pool-slide-right 0.8s ease both;
border: 1px solid #c5c3c3;
}
.pool-step:hover{
background: linear-gradient(90deg, rgba(34, 211, 238, 0.12), rgba(59, 130, 246, 0.12));
transform: translateX(4px) scale(1.01);
}
.pool-step-number{
width: 40px;
height: 40px;
border-radius: 12px;
background: linear-gradient(135deg, #22d3ee, #3b82f6);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
box-shadow: 0 10px 20px rgba(14, 116, 144, 0.25);
}
.pool-choice-card{
display: flex;
flex-direction: column;
gap: 16px;
padding: 18px;
border-radius: 18px;
border: 2px solid rgba(0, 92, 184, 0.2);
background: #ffffff;
box-shadow: 0 20px 40px rgba(30, 52, 93, 0.12);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
animation: pool-slide-right 0.8s ease both;
width: 250px;
text-align: left;
cursor: pointer;
position: relative;
}
.pool-choice-card:hover{
transform: translateY(-6px);
box-shadow: 0 26px 50px rgba(30, 52, 93, 0.18);
border-color: rgba(0, 92, 184, 0.45);
}
.pool-choice-card.is-selected{
border-color: var(--lomart-orange, #f8651b);
box-shadow: 0 22px 46px rgba(248, 101, 27, 0.25);
/* background: rgba(248, 101, 27, 0.08); */
}
.pool-choice-check{
position: absolute;
top: 10px;
right: 10px;
width: 30px;
height: 30px;
border-radius: 999px;
background: #16a34a;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
opacity: 0;
transform: scale(0.85);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
z-index: 2;
}
.pool-choice-card.is-selected .pool-choice-check{
opacity: 1;
transform: scale(1);
}
.pool-choice-list{
display: flex;
gap: 1rem;
}
.pool-choice-image{
border-radius: 14px;
overflow: hidden;
position: relative;
padding-top: 58%;
background: #f2f6fb;
}
.pool-choice-image img{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.pool-choice-body{
display: flex;
flex-direction: column;
gap: 6px;
}
/* Pool Showcase Carousel */
.pool-showcase{
padding: 80px 0;
background: linear-gradient(135deg, #f7fafc 0%, #eef5fb 100%);
}
.pool-showcase-badge{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 16px;
border-radius: 999px;
background: rgba(0, 92, 184, 0.12);
color: var(--lomart-main-blue);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.18em;
font-weight: 700;
margin-bottom: 12px;
}
.pool-showcase-title{
font-size: clamp(2rem, 3.5vw, 3rem);
font-weight: 700;
color: #1e345d;
margin-bottom: 10px;
}
.pool-showcase-subtitle{
color: #4b6b8f;
max-width: 680px;
margin: 0 auto 28px;
}
.pool-collage{
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-template-rows: repeat(5, 120px);
gap: 8px;
}
.pool-collage-card{
position: relative;
border-radius: 22px;
overflow: hidden;
min-height: 120px;
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(0, 92, 184, 0.15);
background: #ffffff;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.pool-collage-card.collage-1{
grid-column: span 2;
grid-row: span 2;
}
.pool-collage-card.collage-2{
grid-column: 3 / span 1;
grid-row: span 4;
}
.pool-collage-card.collage-3{
grid-column: 1 / span 2;
grid-row: 3 / span 3;
}
.pool-collage-card.collage-4{
grid-column: 3 / span 3;
grid-row: 5 / span 1;
}
.pool-collage-card.collage-5{
grid-column: 4 / span 2;
grid-row: 1 / span 2;
}
.pool-collage-card.collage-6{
grid-column: 4 / span 1;
grid-row: 3 / span 2;
}
.pool-collage-card.collage-7{
grid-column: 5 / span 1;
grid-row: 3 / span 2;
}
.pool-collage-card img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(1.05) contrast(1.05);
transition: transform 0.5s ease;
}
.pool-collage-card:hover{
transform: translateY(-6px);
box-shadow: 0 30px 60px rgba(15, 23, 42, 0.18);
}
.pool-collage-card:hover img{
transform: scale(1.04);
}
.pool-collage-label{
position: absolute;
left: 16px;
bottom: 16px;
padding: 8px 14px;
border-radius: 999px;
background: rgba(30, 52, 93, 0.75);
color: #ffffff;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.04em;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
}
@media (max-width: 991px){
.pool-showcase{
padding: 60px 0;
}
.pool-collage{
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-rows: repeat(7, 120px);
}
.pool-collage-card{
grid-column: span 2;
grid-row: span 1;
}
}
@media (max-width: 575px){
.pool-collage{
grid-template-columns: 1fr;
grid-template-rows: repeat(7, 200px);
}
.pool-collage-card{
grid-column: span 1;
grid-row: span 1;
}
}
@media (max-width: 768px){
.pool-showcase{
padding: 44px 0 52px;
}
.pool-showcase .container{
padding-left: 14px;
padding-right: 14px;
}
.pool-showcase-badge{
margin-bottom: 10px;
}
.pool-showcase-title{
font-size: clamp(1.6rem, 7.4vw, 2.1rem);
line-height: 1.15;
margin-bottom: 8px;
}
.pool-showcase-subtitle{
max-width: 100%;
font-size: 0.95rem;
line-height: 1.45;
margin: 0 auto 18px;
}
.pool-collage{
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 150px;
gap: 10px;
}
.pool-collage .pool-collage-card{
grid-column: auto !important;
grid-row: auto !important;
min-height: 150px;
border-radius: 14px;
box-shadow: 0 16px 30px rgba(15, 23, 42, 0.12);
}
.pool-collage-label{
left: 10px;
bottom: 10px;
max-width: calc(100% - 20px);
padding: 6px 10px;
font-size: 11px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 480px){
.pool-showcase .container{
padding-left: 12px;
padding-right: 12px;
}
.pool-showcase-badge{
font-size: 10px;
letter-spacing: 0.14em;
padding: 5px 12px;
}
.pool-collage{
grid-template-columns: 1fr;
grid-auto-rows: 180px;
}
}
.pool-summary{
padding: 10px;
border-radius: 16px;
background: linear-gradient(135deg, #eff6ff, #ecfeff);
border: 2px solid rgba(59, 130, 246, 0.25);
}
.pool-summary-icon{
width: 44px;
/* height: 44px; */
/* background: #1cb76f; */
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #12cc07;
font-size: 20px;
}
.pool-animate-fade{
animation: pool-fade-in 0.6s ease-out;
}
.pool-animate-left{
animation: pool-slide-left 0.8s ease-out;
}
.pool-animate-right{
animation: pool-slide-right 0.8s ease-out;
}
@keyframes pool-blob{
0%, 100%{
transform: translate(0, 0) scale(1);
}
33%{
transform: translate(30px, -50px) scale(1.1);
}
66%{
transform: translate(-20px, 20px) scale(0.9);
}
}
@keyframes pool-fade-in{
from{
opacity: 0;
transform: translateY(-10px);
}
to{
opacity: 1;
transform: translateY(0);
}
}
@keyframes pool-slide-left{
from{
opacity: 0;
transform: translateX(-50px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
@keyframes pool-slide-right{
from{
opacity: 0;
transform: translateX(50px);
}
to{
opacity: 1;
transform: translateX(0);
}
}
@keyframes pool-pulse{
0%, 100%{
transform: scale(1);
opacity: 0.85;
}
50%{
transform: scale(1.25);
opacity: 1;
}
}
@media (max-width: 991px){
.pool-builder-hero{
min-height: auto;
}
.pool-builder-bg{
background-attachment: scroll;
}
.pool-builder-blob{
width: 260px;
height: 260px;
}
.pool-quote-card{
margin-top: 12px;
}
}
@media (max-width: 768px){
.pool-builder-hero{
padding: 1rem 0.75rem 1.75rem;
}
.pool-builder-content{
padding-top: 1.75rem !important;
padding-bottom: 2.25rem !important;
}
.pool-hero-title{
font-size: clamp(2rem, 9vw, 2.6rem);
line-height: 1.08;
}
.pool-hero-subtitle{
font-size: 1rem;
line-height: 1.35;
}
.pool-hero-body{
font-size: 0.95rem;
line-height: 1.5;
}
.pool-feature-card{
padding: 14px;
border-radius: 14px;
}
.pool-feature-icon{
width: 40px;
height: 40px;
min-width: 40px;
min-height: 40px;
flex: 0 0 40px;
font-size: 18px;
}
.pool-builder-hero .pool-btn-primary,
.pool-builder-hero .pool-btn-ghost{
width: 100%;
justify-content: center;
padding: 12px 14px;
font-size: 15px;
}
.pool-quote-card{
border-radius: 16px;
}
.pool-quote-header{
padding: 16px;
}
.choose-type-header{
align-items: center;
gap: 8px;
}
.pool-quote-indicator{
width: 34px;
height: 34px;
flex: 0 0 34px;
margin-left: 8px;
display: none;
}
.pool-quote-indicator span{
width: 9px;
height: 9px;
}
.pool-quote-body{
padding: 16px;
}
.pool-options{
display: block;
}
.pool-choice-list{
display: grid;
grid-template-columns: 1fr;
gap: 12px;
width: 100%;
}
.pool-choice-card{
width: 100%;
max-width: 100%;
padding: 14px;
gap: 12px;
}
.pool-choice-card:hover{
transform: none;
}
.pool-choice-image{
padding-top: 52%;
}
}
/* Lomart safety section (interactive) */
.pool-safety-section {
padding: 64px 0;
position: relative;
overflow: hidden;
box-shadow: inset 0 0 0 5px #ffffff;
}
.pool-safety-section::before {
content: "";
position: absolute;
inset: 0;
/* background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.1), transparent 55%),
radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.08), transparent 60%); */
/* opacity: 0.3; */
background: var(--lomart-dark-blue);
}
.pool-safety-section::after {
content: "";
position: absolute;
inset: -10%;
background: url("/assets/lomart/images/BG/waterFlyer.png") center top/100% auto no-repeat;
transform: rotate(-2deg);
opacity: 0.22;
z-index: 0;
}
.pool-safety-section .section-header {
text-align: center;
margin-bottom: 50px;
position: relative;
z-index: 1;
}
.pool-safety-section .pool-safety-kicker {
color: #ffffff;
letter-spacing: 0.18em;
font-weight: 700;
font-size: 12px;
margin-bottom: 12px;
}
.pool-safety-section .section-title {
color: #ffffff;
font-size: clamp(1.8rem, 2.3vw, 2.4rem);
font-weight: 700;
margin-bottom: 16px;
text-shadow: none;
}
.pool-safety-section .section-subtitle {
color: rgba(255, 255, 255, 0.92);
font-size: 1.1rem;
font-weight: 500;
margin-bottom: 24px;
}
.pool-safety-section .section-subtitle .manual-link {
display: inline-block;
}
.section-subtitle-highlight {
color: var(--lomart-orange);
font-size: 1.05rem;
font-weight: 600;
}
.manual-link {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
padding: 6px 16px;
border-radius: 999px;
text-decoration: none;
font-weight: 600;
border: 1px solid rgba(255, 255, 255, 0.25);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease;
}
.manual-link:hover {
background: rgba(255, 255, 255, 0.24);
border-color: rgba(255, 255, 255, 0.45);
color: #ffffff;
}
.safety-cards-container {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 0;
position: relative;
z-index: 1;
}
.safety-card {
background: linear-gradient(135deg, rgba(22, 44, 83, 0.78), rgba(15, 32, 61, 0.82));
border-radius: 14px;
padding: 18px;
border: 1px solid rgba(178, 205, 233, 0.2);
box-shadow: 0 8px 20px rgba(5, 18, 44, 0.28);
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
text-align: left;
width: 100%;
font-family: inherit;
overflow: clip;
position: relative;
}
.safety-card:hover {
transform: translateY(-1px);
border-color: rgba(255, 145, 60, 0.55);
box-shadow: 0 12px 26px rgba(5, 18, 44, 0.35);
}
.safety-card.active {
border-color: rgba(255, 145, 60, 0.85);
background: linear-gradient(135deg, rgba(28, 54, 98, 0.92), rgba(17, 37, 68, 0.94));
}
.safety-card:focus-visible {
outline: 3px solid var(--lomart-orange);
outline-offset: 3px;
}
.safety-card-row {
display: flex;
align-items: flex-start;
gap: 12px;
}
.safety-card-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(178, 205, 233, 0.18);
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
position: relative;
}
.safety-card-body {
display: flex;
flex-direction: column;
gap: 6px;
}
.safety-card-icon::after {
content: "";
position: absolute;
inset: 0;
border-radius: 10px;
background: rgba(178, 205, 233, 0.25);
opacity: 0;
transition: opacity 0.18s ease;
}
.safety-card:hover .safety-card-icon::after {
opacity: 0.45;
}
.safety-letter {
font-size: 1.45rem;
font-weight: 800;
color: var(--lomart-orange);
position: relative;
z-index: 1;
}
.safety-letter.lomart-safety-blue {
color: var(--lomart-orange);
}
.safety-letter.lomart-safety-orange {
color: var(--lomart-orange);
}
.safety-title {
color: #ffffff;
font-size: 1rem;
font-weight: 700;
margin-bottom: 0;
min-height: 0;
line-height: 1.35;
}
.safety-description {
color: rgba(218, 233, 248, 0.92);
line-height: 1.45;
font-size: 0.9rem;
max-height: 0;
opacity: 0;
margin: 0;
overflow: hidden;
transition: max-height 0.2s ease, opacity 0.18s ease, margin-top 0.18s ease;
}
.safety-card.active .safety-description,
.safety-card:focus-visible .safety-description {
max-height: 200px;
opacity: 1;
margin-top: 6px;
}
.bottom-banner {
margin-top: 0;
background: linear-gradient(155deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
color: #ffffff;
padding: 28px;
border-radius: 18px;
text-align: left;
box-shadow: 0 16px 32px rgba(5, 18, 44, 0.22);
border: 1px solid rgba(255, 255, 255, 0.22);
position: relative;
z-index: 1;
}
.safety-content-row {
display: flex;
gap: 20px;
align-items: flex-start;
margin-top: 28px;
}
.safety-content-row .bottom-banner {
flex: 0 0 38%;
text-align: left;
}
.safety-content-row .safety-cards-container {
flex: 1 1 62%;
}
.bottom-banner h3 {
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 10px;
}
.bottom-banner p {
font-size: 1rem;
margin-bottom: 6px;
font-weight: 600;
color: #ffffff;
}
.water-depth-info {
background: rgba(5, 28, 59, 0.35);
color: #ffffff;
padding: 16px 18px;
border-radius: 12px;
margin-top: 16px;
font-size: 0.98rem;
font-weight: 500;
border: 1px solid rgba(178, 205, 233, 0.25);
}
.safety-cta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.safety-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.safety-modal {
background: #ffffff;
padding: 28px;
border-radius: 18px;
max-width: 520px;
text-align: center;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}
.safety-modal h3 {
color: var(--lomart-main-blue);
margin-bottom: 12px;
font-weight: 800;
}
.safety-modal p {
color: var(--lomart-text-body);
margin-bottom: 18px;
}
.pulse-animation {
animation: none;
}
@media (min-width: 992px) {
.safety-content-row .safety-cards-container {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-content: start;
}
}
@media (max-width: 768px) {
.pool-safety-section .section-title {
font-size: 2rem;
}
.section-subtitle-highlight {
font-size: 1.1rem;
}
.bottom-banner {
padding: 28px;
}
.safety-content-row {
flex-direction: column;
}
.safety-content-row .bottom-banner,
.safety-content-row .safety-cards-container {
flex: 1 1 auto;
}
}
@media (prefers-reduced-motion: reduce) {
.safety-card,
.safety-card-icon::after,
.safety-description {
transition: none;
}
}
/* Lomart safety footer refresh */
.pool-safety-footer .lomart-safety-kicker .pool-safety-kicker {
color: var(--lomart-warm-50);
letter-spacing: 0.18em;
font-weight: 700;
font-size: 12px;
}
.lomart-safety-kicker-pill {
background: rgba(255, 255, 255, 0.16);
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.lomart-safety-kicker-icon {
width: 16px;
height: 16px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.lomart-safety-title {
color: #ffffff;
font-size: clamp(1.5rem, 2.1vw, 2.1rem);
font-weight: 800;
}
.lomart-safety-subtitle {
color: rgba(255, 255, 255, 0.9);
font-size: 1rem;
line-height: 1.6;
}
.lomart-safety-acrostic {
display: inline-flex;
gap: 8px;
flex-wrap: wrap;
}
.lomart-safety-acrostic span {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 12px;
background: rgba(255, 255, 255, 0.18);
color: #ffffff;
font-weight: 800;
border: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.lomart-safety-image {
max-width: 380px;
border-radius: 16px;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
border: 3px solid rgba(255, 255, 255, 0.25);
}
.lomart-safety-btn {
font-weight: 700;
border-radius: 999px;
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.lomart-safety-btn-outline {
border-radius: 999px;
font-weight: 700;
border-width: 2px;
}
.lomart-safety-legal {
color: rgba(255, 255, 255, 0.85);
font-size: 0.95rem;
}
.lomart-safety-rules {
margin-top: 6px;
}
.lomart-safety-card {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 16px 16px;
background: rgba(255, 255, 255, 0.92);
border-radius: 16px;
box-shadow: 0 12px 28px rgba(12, 26, 54, 0.18);
border: 1px solid rgba(0, 92, 184, 0.18);
height: 100%;
}
.lomart-safety-letter {
width: 40px;
height: 40px;
border-radius: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 800;
color: #ffffff;
background: linear-gradient(135deg, var(--lomart-main-blue), var(--lomart-dark-blue));
box-shadow: 0 10px 20px rgba(0, 92, 184, 0.25);
flex: 0 0 40px;
}
.lomart-safety-card-title {
font-weight: 800;
color: var(--lomart-text-strong);
margin-bottom: 4px;
}
.lomart-safety-card-text {
color: var(--lomart-text-body);
font-size: 0.95rem;
line-height: 1.45;
}
@media (max-width: 991px) {
.lomart-safety-image {
max-width: 100%;
}
.lomart-safety-card {
padding: 14px 14px;
}
}
.gradient-text {
background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.step-circle {
width: 48px;
height: 48px;
border-radius: 50%;
border: 2px solid #dee2e6;
background: white;
color: #6c757d;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
cursor: default;
}
.step-circle:hover:not(:disabled) {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.step-active {
/* background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%); */
background: linear-gradient(90deg, var(--lomart-orange), #ff9b4a);
/* border-color: #0d6efd; */
color: white;
transform: scale(1.15);
box-shadow: 0 8px 20px rgba(222, 100, 91, 0.3);
}
.step-done {
background: #198754;
border-color: #198754;
color: white;
}
.step-clickable {
cursor: pointer;
}
.step-label {
font-size: 0.75rem;
text-align: center;
transition: all 0.3s ease;
}
.step-connector {
width: 60px;
height: 2px;
background: #dee2e6;
transition: all 0.5s ease;
}
.step-connector-filled {
background: #198754;
}
.choice-card {
background: white;
border-radius: 16px;
padding: 2rem;
border: 2px solid #e9ecef;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.choice-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
border-color: #0d6efd;
}
.choice-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0d6efd 0%, #0dcaf0 100%);
opacity: 0;
transition: opacity 0.3s ease;
}
.choice-card:hover::before {
opacity: 1;
}
.choice-card-img-wrapper {
border-radius: 12px;
overflow: hidden;
background: #f8f9fa;
}
.choice-card-img {
width: 100%;
height: 250px;
object-fit: cover;
transition: transform 0.5s ease;
}
.choice-card:hover .choice-card-img {
transform: scale(1.1);
}
/* Entry system step: keep both option images fully visible and not oversized. */
.entry-system-row .choice-card-img-wrapper {
height: 180px;
display: flex;
align-items: center;
justify-content: center;
}
.entry-system-row .choice-card-img {
height: 100%;
width: 100%;
object-fit: contain;
}
.entry-system-row .choice-card:hover .choice-card-img {
transform: none;
}
/* Model step: reduce card length without changing image size. */
.model-choice-row .model-choice-card {
height: auto;
padding-top: 1rem;
padding-bottom: 1rem;
}
.model-choice-row .model-choice-card .choice-card-img-wrapper {
margin-bottom: 0.75rem !important;
}
.model-choice-row .model-choice-card h3 {
margin-bottom: 0.25rem !important;
}
.model-choice-row .model-choice-card p {
margin-bottom: 0;
}
.choice-indicator {
position: absolute;
top: 1rem;
right: 1rem;
width: 24px;
height: 24px;
border-radius: 50%;
border: 2px solid #dee2e6;
background: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.choice-card:hover .choice-indicator {
border-color: #0d6efd;
background: #0d6efd;
}
.choice-indicator-inner {
width: 8px;
height: 8px;
border-radius: 50%;
background: transparent;
transition: all 0.3s ease;
}
.choice-card:hover .choice-indicator-inner {
background: white;
}
.benefits-list {
border-top: 1px solid #e9ecef;
padding-top: 1rem;
}
.benefit-item {
display: flex;
align-items: center;
font-size: 0.875rem;
color: #495057;
margin-bottom: 0.5rem;
}
.size-card {
background: white;
border-radius: 16px;
padding: 2rem 1rem;
border: 2px solid #e9ecef;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
}
.size-card:hover {
transform: translateY(-4px) scale(1.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-color: #0d6efd;
background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
}
.size-value {
font-size: 2rem;
font-weight: 700;
color: #212529;
transition: color 0.3s ease;
}
.size-card:hover .size-value {
color: white;
}
.package-card {
text-align: center;
}
.package-icon {
width: 80px;
height: 80px;
margin: 0 auto;
border-radius: 50%;
background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
transition: transform 0.3s ease;
}
.choice-card:hover .package-icon {
transform: scale(1.1) rotate(5deg);
}
.summary-card,
.quote-form-card {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
height: 100%;
}
.choices-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.choice-summary-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
background: #f8f9fa;
border-radius: 12px;
transition: all 0.3s ease;
}
.choice-summary-item:hover {
background: #e9ecef;
transform: translateX(4px);
}
.choice-step-number {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.875rem;
flex-shrink: 0;
}
.choice-category {
font-size: 0.75rem;
color: #6c757d;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.choice-value {
font-size: 1.125rem;
font-weight: 600;
color: #212529;
margin-top: 0.25rem;
}
.success-card {
background: white;
border-radius: 24px;
padding: 4rem 2rem;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.1);
}
.success-icon {
width: 100px;
height: 100px;
margin: 0 auto;
border-radius: 50%;
background: linear-gradient(135deg, #198754 0%, #20c997 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: white;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.animate-fadeIn {
animation: fadeIn 0.6s ease-out;
}
.animate-scaleIn {
animation: scaleIn 0.5s ease-out;
}
.form-control:focus {
border-color: #0d6efd;
box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
}
.btn-primary {
background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
border: none;
font-weight: 600;
padding: 0.75rem 2rem;
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(13, 110, 253, 0.3);
background: linear-gradient(135deg, #0b5ed7 0%, #0bb5d8 100%);
}
@media (max-width: 768px) {
.step-connector {
display: none;
}
.choice-card {
padding: 1.5rem;
}
.choice-card-img {
height: 200px;
}
}
.tenant-lomart .lomart-privacy-policy-page h3 {
font-weight: 400;
color: #e06759;
font-size: 24px;
margin-top: 0;
margin-bottom: 15px;
}
.tenant-lomart .lomart-privacy-policy-page p {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
color: #222222;
font-size: 16px;
line-height: 26px;
}
/* Lomart product detail mobile overflow fix (matches embassy behavior) */
@media (max-width: 767px) {
.page-title-area.pool-feature + .container-fluid,
.page-title-area.pool-feature + .container-fluid + .container-fluid {
padding-left: 0 !important;
padding-right: 0 !important;
}
.breadcrumb-cont {
padding: 1rem;
}
.dp-product-info-solid {
margin: 0.5rem;
width: auto;
}
.disclaimer-p {
margin: 1rem;
}
.page-title-area.pool-feature + .container-fluid > .row.flex-nowrap,
.page-title-area.pool-feature + .container-fluid + .container-fluid > .row.flex-nowrap {
flex-wrap: wrap !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.page-title-area.pool-feature + .container-fluid > .row.flex-nowrap > .dp-product-padding,
.page-title-area.pool-feature + .container-fluid + .container-fluid > .row.flex-nowrap > .col {
width: 100%;
max-width: 100%;
min-width: 0;
padding-left: 0;
padding-right: 0;
}
.dp-product-padding {
width: auto;
max-width: 100%;
padding-left: 12px;
padding-right: 12px;
box-sizing: border-box;
overflow-x: hidden;
padding: 0;
}
.dp-product-grid {
margin-left: 0;
margin-right: 0;
}
}