/* ============================================================
   JEEVAN SMART LIFE - MAIN STYLESHEET
   Organized and mobile dropdown fixed
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
/* ============================================================
   01. GLOBAL + HEADER
   ============================================================ */

/* =========================================
   FIXED HEADER
========================================= */

:root {
    --primary: #e31e24;
    --text-dark: #292929;
    --border-color: #e5e5e5;
}

body {
    padding-top: 108px;
    font-family: 'Poppins', sans-serif;
}


/* Header */

.main-header {
    width: 100%;
    z-index: 1050;
    background: #fff;
}


/* =========================================
   MAIN NAVBAR
========================================= */

.main-navbar {
    min-height: 60px;
    border-bottom: 1px solid var(--border-color);
}


/* Logo */

.header-logo {
    width: 120px;
    height: auto;
    object-fit: contain;
}


/* =========================================
   SEARCH
========================================= */

.header-search {
    width: 100%;
    max-width: 360px;
}

.header-search .form-control {
    height: 42px;
    border: 1px solid #b5b5b5;
    border-radius: 25px;
    padding-left: 42px;
    padding-right: 20px;
    font-size: 12px;
    box-shadow: none;
}

.header-search .form-control:focus {
    border-color: #aaa;
    box-shadow: none;
}

.search-icon {
    position: absolute;

    left: 17px;
    top: 50%;

    transform: translateY(-50%);

    font-size: 15px;
    color: #333;

    z-index: 2;
}


/* =========================================
   MAIN NAVIGATION
========================================= */

.main-navbar .navbar-nav {
    gap: 10px;
}

.main-navbar .nav-link {
    color: var(--text-dark);
    font-size: 12px;
    font-weight: 400;
    padding: 6px 10px !important;
    white-space: nowrap;
    transition: color .2s ease;
}

.main-navbar .nav-link:hover {
    color: var(--primary);
}


/* Bootstrap Dropdown Arrow */

.main-navbar .dropdown-toggle::after {
    margin-left: 8px;
    vertical-align: 2px;
}


/* =========================================
   DROPDOWN
========================================= */

.dropdown-menu {
    border: 0;

    border-radius: 8px;

    padding: 10px;

    min-width: 210px;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, .12);
}

.dropdown-item {
    border-radius: 5px;

    padding: 10px 14px;

    font-size: 14px;
}

.dropdown-item:hover {
    color: var(--primary);
    background: #f7f7f7;
}


/* =========================================
   FOR BUSINESS
========================================= */

.business-btn {
    min-width: 122px;

    padding: 8px 20px;

    border: 1px solid var(--primary);
    border-radius: 25px;

    color: var(--primary);

    font-size: 13px;
    font-weight: 500;

    background: transparent;

    transition: all .25s ease;
}

.business-btn:hover {
    color: #fff;
    background: var(--primary);
    border-color: var(--primary);
}


/* =========================================
   CART / ACCOUNT
========================================= */

.header-action-icon {
    font-size: 21px !important;

    padding-left: 12px !important;
    padding-right: 12px !important;
}

.header-icon {
    color: #222;
    font-size: 20px;
}


/* =========================================
   SECOND NAVBAR
========================================= */

.secondary-navbar {
    height: 48px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid var(--border-color);

    box-shadow: 0 2px 5px rgba(0, 0, 0, .025);
}

.secondary-links {
    height: 48px;
    display: flex;
    align-items: center;
    gap: 46px;
    justify-content: center;
    text-align: center;
}

.secondary-links a {
    position: relative;

    color: #292929;

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    white-space: nowrap;

    transition: color .2s ease;
}

.secondary-links a:hover {
    color: var(--primary);
}


/* Underline Hover */

.secondary-links a::after {
    content: "";
    position: absolute;
    right: -10px;
    bottom: 5px;
    width: 0;
    height: 2px;
    transition: width .25s ease;
}

.secondary-links a:hover::after {
}

.secondary-dropdown .dropdown-menu.show{
    margin-top: 14px !important;
    border: 1px solid #e8e8e8;
    border-radius: 0px;
}


/* =========================================
   HEADER BRAND / LOGO ALIGNMENT
========================================= */
.flex-div-align-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.flex-div-align-center img {
    width: 55px !important;
    float: none;
}

.flex-div-align-center h1 {
    margin: 10px 0 0 15px;
    color: #5a5959;
    font-size: large;
}


/* =========================================
   HEADER MARQUEE
========================================= */

.header-marquee {
    flex: 1;
    min-width: 0;
    max-width: 650px;
    margin: 0 35px;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
}

/* fade effect on both sides */
.header-marquee::before,
.header-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    width: 45px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.header-marquee::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.header-marquee::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}


/* Moving track */
.marquee-track {
    display: flex;
    width: max-content;
    animation: headerMarquee 24s linear infinite;
}


/* Content */
.marquee-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 22px;
    padding-right: 22px;

    font-size: 13px;
    font-weight: 500;
    color: #555;
}


/* Highlight alternate content */
.marquee-content span:nth-child(1),
.marquee-content span:nth-child(5) {
    color: #e31e24;
    font-weight: 600;
}


/* Animation */
@keyframes headerMarquee {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* Pause when mouse hover */
.header-marquee:hover .marquee-track {
    animation-play-state: paused;
}


/* =========================================
   HEADER STACKING / DROPDOWN SAFETY
========================================= */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

.main-navbar,
.secondary-navbar {
    position: relative;
    background: #fff;
}

.secondary-navbar {
    z-index: 9998;
}

.secondary-dropdown {
    position: relative;
}

.secondary-dropdown .dropdown-menu {
    z-index: 10000;
}


/* =========================================
   HEADER RESPONSIVE - TABLET
========================================= */
@media (max-width: 1199px) {

    .header-marquee {
        max-width: 430px;
        margin: 0 20px;
    }

    .marquee-content {
        font-size: 12px;
    }

    .header-search {
        max-width: 290px;
    }

    .main-navbar .navbar-nav {
        gap: 2px;
    }

    .main-navbar .nav-link {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 13px;
    }
}


/* =========================================
   HEADER RESPONSIVE - MOBILE
========================================= */
@media (max-width: 991.98px) {

    body {
        padding-top: 116px;
    }

    .main-header {
        z-index: 9999;
    }

    .main-navbar {
        min-height: 68px;
    }

    .header-logo {
        width: 105px;
    }

    /* Top navbar collapsed menu */
    .navbar-collapse {
        background: #fff;
        margin-left: -12px;
        margin-right: -12px;
        padding: 0 18px 20px;
        border-top: 1px solid #eee;
        max-height: calc(100vh - 116px);
        overflow-y: auto;
    }

    .header-search {
        max-width: 100%;
    }

    .main-navbar .navbar-nav {
        align-items: stretch !important;
        gap: 0;
    }

    .main-navbar .nav-link {
        padding: 13px 4px !important;
        border-bottom: 1px solid #eee;
        font-size: 14px;
    }

    .business-btn {
        width: 100%;
        margin-top: 15px;
    }

    /* Marquee is intentionally hidden on mobile */
    .header-marquee {
        display: none !important;
    }

    /* -----------------------------------------
       SECOND NAVBAR - MOBILE
       Keep the menu horizontally scrollable.
    ----------------------------------------- */
    .secondary-navbar {
        height: 48px;
        position: relative;
        z-index: 9998;
        overflow: visible !important;
    }

    .secondary-navbar .container-fluid {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .secondary-navbar .container-fluid::-webkit-scrollbar {
        display: none;
    }

    .secondary-links {
        width: max-content;
        min-width: 100%;
        gap: 25px;
        padding-right: 20px;
        justify-content: flex-start;
        overflow: visible;
    }

    /*
       IMPORTANT FIX:
       Bootstrap dropdown was opening correctly but was being clipped by the
       horizontally-scrollable secondary navigation on mobile.

       On mobile we detach the visible dropdown from that clipping area by
       positioning it against the viewport.
    */
    .secondary-dropdown {
        position: static !important;
    }

    .secondary-dropdown .dropdown-menu {
        position: fixed !important;
        top: 116px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        min-width: 0 !important;
        max-height: calc(100vh - 135px);
        overflow-y: auto;
        transform: none !important;
        margin: 0 !important;
        padding: 8px !important;
        z-index: 100000 !important;
        background: #fff;
        border: 1px solid #e8e8e8;
        border-radius: 8px;
        box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
    }

    .secondary-dropdown .dropdown-menu.show {
        display: block !important;
        margin-top: 0 !important;
    }

    .secondary-dropdown .dropdown-item {
        padding: 11px 14px;
        font-size: 13px;
        white-space: nowrap;
    }
}


/* =========================================
   HEADER RESPONSIVE - SMALL MOBILE
========================================= */
@media (max-width: 575px) {

    .header-logo {
        width: 95px;
    }

    .secondary-links {
        gap: 22px;
    }

    .secondary-links a {
        font-size: 12px;
    }

    .secondary-dropdown .dropdown-menu {
        left: 10px !important;
        right: 10px !important;
    }
}


/* ============================================================
   02. HERO SLIDER
   ============================================================ */

/* ============================
   HERO SLIDER
============================ */

.hero-slider {
    width: 100%;
    position: relative;
}


/* SLIDER HEIGHT */

.hero-slider .carousel-item {
    height: 620px;
    position: relative;
}


/* IMAGE */

.hero-slider .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* DARK OVERLAY */

.hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.68) 0%,
        rgba(0, 0, 0, 0.42) 40%,
        rgba(0, 0, 0, 0.05) 75%
    );
}


/* CAPTION */

.hero-caption {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    bottom: auto;

    transform: translateY(-50%);

    text-align: left;

    z-index: 5;
}


/* SMALL TITLE */

.hero-small-title {
    display: inline-block;

    margin-bottom: 15px;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #ffffff;
}


/* MAIN TITLE */

.hero-caption h1,
.hero-caption h2 {

    font-size: 58px;

    line-height: 1.1;

    font-weight: 700;

    color: #ffffff;

    margin-bottom: 20px;
}


/* DESCRIPTION */

.hero-caption p {

    max-width: 580px;

    font-size: 17px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.9);

    margin-bottom: 28px;
}


/* BUTTON */

.hero-btn {

    border-radius: 30px;

    padding: 13px 28px;

    font-weight: 600;

    background: #e31e24;

    border-color: #e31e24;
}


.hero-btn:hover {

    background: #c9151b;

    border-color: #c9151b;
}


.hero-btn-light {

    border-radius: 30px;

    padding: 13px 28px;

    font-weight: 600;
}


/* ============================
   BOOTSTRAP FADE SPEED
============================ */

.carousel-fade .carousel-item {

    opacity: 0;

    transition-property: opacity;

    transition-duration: 1.1s;

    transition-timing-function: ease-in-out;
}


.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end {

    opacity: 1;
}


/* ============================
   TEXT FADE
============================ */

.carousel-item .hero-caption > .container {

    opacity: 0;

    transform: translateY(15px);

    transition:
        opacity 0.8s ease 0.25s,
        transform 0.8s ease 0.25s;
}


.carousel-item.active .hero-caption > .container {

    opacity: 1;

    transform: translateY(0);
}


/* ============================
   INDICATORS
============================ */

.hero-slider .carousel-indicators {
    margin-bottom: 25px;
}


.hero-slider .carousel-indicators button {

    width: 35px;

    height: 3px;

    border: 0;

    border-radius: 5px;

    opacity: 0.55;
}


.hero-slider .carousel-indicators .active {
    opacity: 1;
}


/* ============================
   CONTROLS
============================ */

.hero-slider .carousel-control-prev,
.hero-slider .carousel-control-next {

    width: 55px;

    height: 55px;

    top: 50%;

    transform: translateY(-50%);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(5px);

    opacity: 0;

    transition: 0.3s ease;
}


.hero-slider:hover .carousel-control-prev,
.hero-slider:hover .carousel-control-next {

    opacity: 1;
}


.hero-slider .carousel-control-prev {

    left: 25px;
}


.hero-slider .carousel-control-next {

    right: 25px;
}


/* ============================
   TABLET
============================ */

@media (max-width: 991px) {

    .hero-slider .carousel-item {
        height: 530px;
    }

    .hero-caption h1,
    .hero-caption h2 {
        font-size: 45px;
    }

}


/* ============================
   MOBILE
============================ */

@media (max-width: 767px) {

    .hero-slider .carousel-item {
        height: 480px;
    }

    .hero-caption {
        padding-left: 15px;
        padding-right: 15px;
    }

    .hero-caption h1,
    .hero-caption h2 {
        font-size: 34px;
    }

    .hero-caption p {
        font-size: 15px;
        line-height: 1.6;
    }

    .hero-small-title {
        font-size: 11px;
        letter-spacing: 1.5px;
    }

    .hero-slider .carousel-control-prev,
    .hero-slider .carousel-control-next {
        display: none;
    }

}


@media (max-width: 480px) {

    .hero-slider .carousel-item {
        height: 430px;
    }

    .hero-caption h1,
    .hero-caption h2 {
        font-size: 30px;
    }

    .hero-caption p {
        margin-bottom: 20px;
    }

}


/* ============================================================
   03. ABOUT SECTION
   ============================================================ */

/* ========================================
   JEEVAN SMART LIFE - ABOUT SECTION
======================================== */

.jsl-about-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}


/* =========================
   IMAGE
========================= */

.jsl-about-image {
    position: relative;
    padding: 0 30px 30px 0;
}

.main-image-box {
    position: relative;
    z-index: 2;
}

.main-image-box > img {
    width: 100%;
    height: 620px;
    object-fit: cover;
    border-radius: 4px;
    position: relative;
    z-index: 2;
}


/* Decorative shape behind image */

.image-border-shape {
    position: absolute;
    width: 85%;
    height: 90%;
    right: -25px;
    bottom: -25px;
    border: 2px solid #e31e24;
    z-index: 1;
}


/* =========================
   FLOATING CARD
========================= */

.about-floating-card {
    position: absolute;
    right: -15px;
    bottom: 45px;
    z-index: 4;

    display: flex;
    align-items: center;
    gap: 14px;

    background: #ffffff;

    padding: 17px 22px;

    min-width: 235px;

    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.12);
}

.floating-icon {
    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #e31e24;
    color: #ffffff;

    font-size: 21px;
}

.about-floating-card span {
    display: block;
    font-size: 12px;
    color: #777777;
    margin-bottom: 2px;
}

.about-floating-card strong {
    display: block;
    color: #202020;
    font-size: 15px;
}


/* =========================
   SMALL HEADING
========================= */

.section-small-title {
    display: flex;
    align-items: center;
    gap: 12px;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1.8px;

    color: #e31e24;

    margin-bottom: 16px;
}

.section-small-title span {
    width: 35px;
    height: 2px;
    background: #e31e24;
}


/* =========================
   MAIN HEADING
========================= */

.jsl-about-content h2 {
    font-size: 45px;
    line-height: 1.15;
    font-weight: 700;

    color: #171717;

    margin-bottom: 26px;

    letter-spacing: -1px;
}

.jsl-about-content h2 span {
    color: #e31e24;
}


/* =========================
   PARAGRAPHS
========================= */

.jsl-about-content p {
    font-size: 15px;
    line-height: 1.8;

    color: #656565;

    margin-bottom: 12px;
}

.jsl-about-content p strong {
    color: #333333;
}


/* =========================
   FEATURES
========================= */

.about-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 13px 25px;

    margin-top: 25px;
    padding-top: 22px;

    border-top: 1px solid #eeeeee;
}

.about-feature {
    display: flex;
    align-items: center;
    gap: 9px;

    font-size: 14px;
    font-weight: 600;

    color: #333333;
}

.about-feature i {
    color: #e31e24;
    font-size: 18px;
}


/* =========================
   BUTTON
========================= */

.jsl-about-btn {
    position: relative;

    padding: 13px 25px;

    background: #e31e24;
    color: #ffffff;

    border: 1px solid #e31e24;
    border-radius: 2px;

    font-size: 14px;
    font-weight: 600;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.jsl-about-btn:hover {
    background: #111111;
    border-color: #111111;
    color: #ffffff;

    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.12);
}


/* =========================
   SCROLL REVEAL
========================= */

.reveal-left,
.reveal-right {
    opacity: 0;

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left {
    transform: translateX(-35px);
}

.reveal-right {
    transform: translateX(35px);
}

.reveal-left.active,
.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .jsl-about-section {
        padding: 75px 0;
    }

    .jsl-about-image {
        max-width: 650px;
        margin: 0 auto;
    }

    .main-image-box > img {
        height: 520px;
    }

    .jsl-about-content {
        margin-top: 20px;
    }

    .jsl-about-content h2 {
        font-size: 38px;
    }

}


@media (max-width: 576px) {

    .jsl-about-section {
        padding: 55px 0;
    }

    .jsl-about-image {
        padding: 0 15px 15px 0;
    }

    .main-image-box > img {
        height: 390px;
    }

    .image-border-shape {
        right: -10px;
        bottom: -15px;
    }

    .about-floating-card {
        right: 0;
        bottom: 25px;

        min-width: auto;

        padding: 12px 15px;
    }

    .floating-icon {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .about-floating-card strong {
        font-size: 13px;
    }

    .jsl-about-content h2 {
        font-size: 31px;
    }

    .jsl-about-content p {
        font-size: 14px;
    }

    .about-features {
        grid-template-columns: 1fr;
    }

}


/* ============================================================
   04. PRODUCT CATEGORY SECTION
   ============================================================ */

/* ==============================
   PRODUCT CATEGORY SECTION
============================== */

.product-category-section {
    background: #f8f9fb;
}

.section-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #e31e24;
}

.section-title {
    font-size: 38px;
    font-weight: 700;
    color: #171717;
    margin-bottom: 12px;
}

.section-subtitle {
    max-width: 620px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.7;
    color: #777;
}


/* ==============================
   CATEGORY CARD
============================== */

.category-card {
    display: block;
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    height: 100%;

    border: 1px solid #d7d7d7;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.category-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}


/* IMAGE */

.category-image {
    position: relative;
    overflow: hidden;
    background: #f4f4f4;
}

.category-image img {
    width: 100%;
    height: 210px;
    object-fit: cover;

    transition:
        transform 0.5s ease;
}

.category-card:hover .category-image img {
    transform: scale(1.06);
}


/* CONTENT */

.category-content {
    padding: 18px 18px 20px;
}

.category-content h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: #111;
}

.category-content span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    font-size: 13px;
    font-weight: 600;
    color: #777;

    transition:
        color 0.3s ease;
}

.category-content span i {
    transition:
        transform 0.3s ease;
}

.category-card p{
    font-size: 12px;
    color: #848383;
}

.category-card:hover .category-content span {
    color: #e31e24;
}

.category-card:hover .category-content span i {
    transform: translateX(5px);
}


/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 991px) {

    .section-title {
        font-size: 34px;
    }

    .category-image img {
        height: 190px;
    }

}


@media (max-width: 767px) {

    .product-category-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .section-title {
        font-size: 30px;
    }

    .section-subtitle {
        font-size: 14px;
    }

    .category-image img {
        height: 170px;
    }

    .category-content {
        padding: 14px;
    }

    .category-content h3 {
        font-size: 16px;
    }

}


@media (max-width: 480px) {

    .category-image img {
        height: 145px;
    }

    .category-content h3 {
        font-size: 15px;
    }

    .category-content span {
        font-size: 12px;
    }

}


.category-card.show-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.category-card.show-card:hover {
    transform: translateY(-7px) !important;
}


/* ============================================================
   05. LIGHTING SOLUTIONS SECTION
   ============================================================ */

/* ==============================
   LIGHTING SOLUTIONS SECTION
============================== */

.lighting-solutions-section {
    background: #ffffff;
    position: relative;
    overflow: hidden;
}

.section-subtitle {
    display: inline-block;
    color: #e31e24;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 13px;
}

.section-heading {
    font-size: 42px;
    line-height: 1.15;
    font-weight: 700;
    color: #171717;
    margin-bottom: 25px;
}

.section-heading span {
    color: #e31e24;
}

.section-text {
    font-size: 15px;
    line-height: 1.8;
    color: #666666;
    margin-bottom: 12px;
}

.section-text strong {
    color: #222222;
}


/* BUTTON */

.explore-btn {
    background: #e31e24;
    color: #ffffff;

    padding: 13px 26px;

    border-radius: 4px;

    font-size: 14px;
    font-weight: 600;

    border: 1px solid #e31e24;

    transition: 0.3s ease;
}

.explore-btn:hover {
    background: #111111;
    border-color: #111111;
    color: #ffffff;

    transform: translateY(-2px);
}


/* ==============================
   RIGHT FEATURE BOX
============================== */

.solution-box {
    background: #f7f8fa;
    padding: 35px;

    border-radius: 12px;

    border: 1px solid #eeeeee;
}

.solution-item {
    display: flex;
    gap: 17px;

    padding-bottom: 22px;
    margin-bottom: 22px;

    border-bottom: 1px solid #e8e8e8;
}

.solution-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ffffff;

    border-radius: 8px;

    color: #e31e24;

    font-size: 21px;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

.solution-item h4 {
    font-size: 17px;
    font-weight: 600;

    color: #202020;

    margin-bottom: 6px;
}

.solution-item p {
    font-size: 13px;
    line-height: 1.6;

    color: #777777;

    margin: 0;
}


/* ==============================
   RESPONSIVE
============================== */

@media (max-width: 991px) {

    .section-heading {
        font-size: 36px;
    }

    .solution-box {
        margin-top: 20px;
    }

}


@media (max-width: 576px) {

    .lighting-solutions-section {
        padding-top: 55px !important;
        padding-bottom: 55px !important;
    }

    .section-heading {
        font-size: 30px;
    }

    .section-text {
        font-size: 14px;
    }

    .solution-box {
        padding: 24px 20px;
    }

}


/* ============================================================
   06. POPULAR CATEGORY SECTION
   ============================================================ */

/* =====================================
   POPULAR CATEGORY
===================================== */

.popular-category-section {
    background: #2d2c29;
    overflow: hidden;
}


/* HEADING */

.popular-kicker {
    display: inline-block;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;

    color: #e31e24;

    margin-bottom: 10px;
}

.popular-heading h2 {
    max-width: 650px;

    font-size: 42px;
    line-height: 1.15;

    font-weight: 700;

    color: #ffffff;

    margin: 0;
}

.popular-heading h2 span {
    color: #e31e24;
}

.popular-heading p {
    max-width: 420px;

    color: rgba(255,255,255,0.58);

    font-size: 14px;
    line-height: 1.7;

    margin: 0;
}


/* =====================================
   CARD
===================================== */

.popular-card {
    position: relative;

    display: block;

    min-height: 285px;

    overflow: hidden;

    border-radius: 16px;

    text-decoration: none;

    background: #1c1c1c;

    isolation: isolate;
}

.popular-card-large {
    min-height: 594px;
}


/* IMAGE */

.popular-card img {
    position: absolute;

    width: 100%;
    height: 100%;

    inset: 0;

    object-fit: cover;

    transition:
        transform 0.7s cubic-bezier(.2,.8,.2,1),
        filter 0.6s ease;
}


/* OVERLAY */

.popular-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.03) 20%,
            rgba(0,0,0,0.80) 100%
        );

    z-index: 1;

    transition: background 0.4s ease;
}


/* CONTENT */

.popular-content {
    position: absolute;

    inset: auto 0 0 0;

    z-index: 3;

    display: flex;

    justify-content: space-between;
    align-items: end;

    gap: 20px;

    padding: 24px;
}

.category-no {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.12);

    border: 1px solid rgba(255,255,255,0.25);

    backdrop-filter: blur(8px);

    color: #ffffff;

    font-size: 11px;
    font-weight: 700;
}

.popular-content small {
    display: block;

    color: rgba(255,255,255,0.7);

    font-size: 10px;
    font-weight: 600;

    letter-spacing: 1.5px;

    margin-bottom: 6px;
}

.popular-content h3 {
    color: #ffffff;

    font-size: 23px;
    font-weight: 600;

    margin: 0 0 7px;
}

.popular-card-large .popular-content h3 {
    font-size: 33px;
}

.explore-link {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    font-size: 13px;
    font-weight: 500;

    opacity: 0.85;
}

.explore-link i {
    transition: transform 0.3s ease;
}


/* =====================================
   HOVER
===================================== */

.popular-card:hover img {
    transform: scale(1.08);

    filter: brightness(0.92);
}

.popular-card:hover .popular-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.05) 10%,
            rgba(0,0,0,0.88) 100%
        );
}

.popular-card:hover .explore-link i {
    transform: translate(4px, -4px);
}


/* =====================================
   SHINE EFFECT
===================================== */

.shine {
    position: absolute;

    width: 120px;
    height: 120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.18),
            transparent 70%
        );

    pointer-events: none;

    opacity: 0;

    z-index: 2;

    transform: translate(-50%, -50%);

    transition: opacity 0.2s ease;
}

.popular-card:hover .shine {
    opacity: 1;
}


/* =====================================
   RESPONSIVE
===================================== */

@media (max-width: 991px) {

    .popular-heading h2 {
        font-size: 36px;
    }

    .popular-card-large {
        min-height: 420px;
    }

}


@media (max-width: 767px) {

    .popular-heading h2 {
        font-size: 31px;
    }

    .popular-heading p {
        font-size: 13px;
    }

    .popular-card,
    .popular-card-large {
        min-height: 290px;
    }

    .popular-content {
        padding: 18px;
    }

    .popular-content h3,
    .popular-card-large .popular-content h3 {
        font-size: 21px;
    }

}


@media (max-width: 480px) {

    .popular-card,
    .popular-card-large {
        min-height: 260px;
    }

}


/* ============================================================
   07. CUSTOMER SUPPORT SECTION
   ============================================================ */

/* =====================================
   CUSTOMER SUPPORT SECTION
===================================== */

.jsl-support-strip {
    padding: 70px 0;
    background: #f6f7f9;
}


/* MAIN BOX */

.support-strip-inner {
    position: relative;

    padding: 45px 50px;

    background: #ffffff;

    border-radius: 18px;

    border: 1px solid #eeeeee;

    box-shadow:
        0 15px 50px rgba(0, 0, 0, 0.06);

    overflow: hidden;
}


/* RED DECORATIVE LINE */

.support-strip-inner::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 6px;
    height: 100%;

    background: #e31e24;
}


/* =====================================
   LEFT AREA
===================================== */

.support-main {
    display: flex;

    align-items: flex-start;

    gap: 22px;
}


/* ICON */

.support-icon {
    width: 68px;
    height: 68px;

    min-width: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 28px;
}


/* SMALL LABEL */

.support-label {
    display: block;

    margin-bottom: 8px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.7px;

    color: #e31e24;
}


/* HEADING */

.support-content h2 {
    margin-bottom: 10px;

    font-size: 32px;

    line-height: 1.2;

    font-weight: 700;

    color: #171717;
}


/* DESCRIPTION */

.support-content p {
    max-width: 580px;

    margin: 0;

    color: #707070;

    font-size: 14px;

    line-height: 1.7;
}


/* =====================================
   TOLL FREE BOX
===================================== */

.tollfree-box {
    padding-left: 40px;

    border-left: 1px solid #e5e5e5;
}


/* CUSTOMER CARE */

.tollfree-top {
    display: flex;

    align-items: center;

    gap: 8px;

    margin-bottom: 8px;

    color: #555555;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.5px;
}


/* LIVE DOT */

.live-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #28a745;

    box-shadow:
        0 0 0 4px rgba(40, 167, 69, 0.12);
}


/* LABEL */

.tollfree-label {
    display: block;

    margin-bottom: 4px;

    color: #777777;

    font-size: 13px;
}


/* NUMBER */

.tollfree-number {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 20px;

    color: #111111;

    text-decoration: none;

    font-size: 31px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.5px;

    transition: color 0.3s ease;
}


.tollfree-number i {
    color: #e31e24;

    font-size: 23px;
}


.tollfree-number:hover {
    color: #e31e24;
}


/* =====================================
   BUTTONS
===================================== */

.support-actions {
    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}


.support-call-btn,
.support-contact-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 11px 18px;

    border-radius: 30px;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none;

    transition:
        all 0.3s ease;
}


/* CALL */

.support-call-btn {
    background: #e31e24;

    border: 1px solid #e31e24;

    color: #ffffff;
}


.support-call-btn:hover {
    background: #111111;

    border-color: #111111;

    color: #ffffff;

    transform: translateY(-2px);
}


/* CONTACT */

.support-contact-btn {
    background: #ffffff;

    border: 1px solid #dddddd;

    color: #222222;
}


.support-contact-btn:hover {
    border-color: #e31e24;

    color: #e31e24;

    transform: translateY(-2px);
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 991px) {

    .support-strip-inner {
        padding: 35px;
    }

    .tollfree-box {
        padding-left: 0;

        padding-top: 25px;

        border-left: 0;

        border-top: 1px solid #eeeeee;
    }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 576px) {

    .jsl-support-strip {
        padding: 45px 0;
    }

    .support-strip-inner {
        padding: 30px 22px;
    }

    .support-main {
        flex-direction: column;

        gap: 17px;
    }

    .support-icon {
        width: 55px;
        height: 55px;

        min-width: 55px;

        font-size: 23px;
    }

    .support-content h2 {
        font-size: 26px;
    }

    .tollfree-number {
        font-size: 25px;
    }

    .support-actions {
        width: 100%;
    }

    .support-call-btn,
    .support-contact-btn {
        flex: 1;
    }

}


/* ============================================================
   08. FOOTER
   ============================================================ */

/* =========================================
   JEEVAN SMART LIFE FOOTER
========================================= */

.jsl-footer {
    background: #101010;
    color: #ffffff;
    position: relative;
}


/* =========================
   LOGO / BRAND
========================= */

.footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}

.footer-logo img {
    max-width: 180px;
    border-radius: 50%;
}

.footer-brand p {
    max-width: 360px;

    font-size: 14px;
    line-height: 1.8;

    color: rgba(255,255,255,0.62);

    margin-bottom: 25px;
}


/* =========================
   SOCIAL ICONS
========================= */

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social a {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);

    color: #ffffff;

    font-size: 16px;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.footer-social a:hover {
    background: #e31e24;
    border-color: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}


/* =========================
   FOOTER WIDGETS
========================= */

.footer-widget h4 {
    position: relative;

    font-size: 16px;
    font-weight: 600;

    color: #ffffff;

    margin-bottom: 23px;

    padding-bottom: 12px;
}

.footer-widget h4::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 32px;
    height: 2px;

    background: #e31e24;
}


.footer-widget ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.footer-widget ul li {
    margin-bottom: 11px;
}

.footer-widget ul li a {
    display: inline-block;

    color: rgba(255,255,255,0.62);

    font-size: 13px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.footer-widget ul li a:hover {
    color: #ffffff;

    transform: translateX(4px);
}


/* =========================
   CONTACT
========================= */

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-item {
    display: flex;
    gap: 10px;

    align-items: flex-start;

    font-size: 13px;
    line-height: 1.7;

    color: rgba(255,255,255,0.62);
}

.contact-item i {
    color: #e31e24;

    font-size: 16px;

    margin-top: 2px;
}

.contact-item a {
    color: rgba(255,255,255,0.62);

    text-decoration: none;

    transition: color 0.3s ease;
}

.contact-item a:hover {
    color: #ffffff;
}


/* =========================
   RED HIGHLIGHT STRIP
========================= */

.footer-highlight {
    background: #e31e24;

    padding: 25px 0;
}

.footer-highlight-content {
    display: flex;
    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    font-size: 20px;
}

.footer-highlight-content span {
    color: rgba(255,255,255,0.82);
}

.footer-highlight-content strong {
    color: #ffffff;

    font-weight: 700;
}


.footer-enquiry-btn {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 12px 22px;

    background: #ffffff;
    color: #111111;

    border-radius: 30px;

    font-size: 13px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}

.footer-enquiry-btn:hover {
    background: #111111;
    color: #ffffff;

    transform: translateY(-2px);
}


/* =========================
   FOOTER BOTTOM
========================= */

.footer-bottom {
    padding: 20px 0;

    background: #080808;

    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom p {
    margin: 0;

    font-size: 12px;

    color: rgba(255,255,255,0.52);
}

.footer-bottom-links {
    display: flex;

    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 22px;
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.52);

    font-size: 12px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.footer-bottom-links a:hover {
    color: #ffffff;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .footer-highlight-content {
        font-size: 18px;
    }

    .footer-enquiry-btn {
        margin-top: 5px;
    }

}


@media (max-width: 767px) {

    .jsl-footer .container {
        padding-left: 22px;
        padding-right: 22px;
    }

    .footer-widget h4 {
        margin-bottom: 18px;
    }

    .footer-highlight {
        text-align: center;
    }

    .footer-highlight-content {
        justify-content: center;
    }

    .footer-bottom {
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;

        margin-top: 8px;

        gap: 14px;
    }

}


@media (max-width: 480px) {

    .footer-brand p {
        font-size: 13px;
    }

    .footer-highlight-content {
        flex-direction: column;

        gap: 2px;

        font-size: 17px;
    }

}




































/* ============================================================
   JEEVAN SMART LIFE - PREMIUM ABOUT PAGE
   IMPORTANT: KEEP THIS CSS AT THE VERY END OF style.css
============================================================ */


/* ============================================================
   01. PAGE RESET
============================================================ */

.about-premium-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.about-premium-page *,
.about-premium-page *::before,
.about-premium-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   02. ABOUT HERO
============================================================ */

.about-premium-page .about-premium-hero {
    position: relative;
    width: 100%;
    min-height: 650px;
    overflow: hidden;
    background: #111111;
}

.about-premium-page .about-hero-bg {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    background-image:
        url("../images/about-lighting.jpg");

    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;

    z-index: 1;

    transform: scale(1.02);
}

.about-premium-page .about-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(10, 10, 10, 0.98) 0%,
        rgba(10, 10, 10, 0.94) 35%,
        rgba(10, 10, 10, 0.70) 58%,
        rgba(10, 10, 10, 0.25) 100%
    );
}

.about-premium-page .about-premium-hero .container {
    position: relative;
    z-index: 5;
}

.about-premium-page .min-vh-75 {
    min-height: 650px;
}

.about-premium-page .about-hero-content {
    position: relative;
    max-width: 780px;
    z-index: 5;
}


/* Small Heading */

.about-premium-page .about-hero-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 24px;

    color: rgba(255,255,255,.75);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;
}

.about-premium-page .about-hero-kicker > span {
    display: block;

    width: 38px;
    height: 2px;

    background: #e31e24;
}


/* Hero Heading */

.about-premium-page .about-hero-content h1 {
    margin: 0 0 25px;

    max-width: 760px;

    color: #ffffff !important;

    font-size: 66px;
    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}

.about-premium-page .about-hero-content h1 strong {
    display: block;

    color: #e31e24 !important;

    font-weight: 700;
}


/* Hero Paragraph */

.about-premium-page .about-hero-content > p {
    max-width: 650px;

    margin: 0 0 34px;

    color: rgba(255,255,255,.75) !important;

    font-size: 16px;
    line-height: 1.8;
}


/* Hero Actions */

.about-premium-page .about-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 25px;
}

.about-premium-page .about-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 25px;

    background: #e31e24;

    border: 1px solid #e31e24;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 13px;
    font-weight: 600;

    transition: all .3s ease;
}

.about-premium-page .about-primary-btn:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111 !important;

    transform: translateY(-3px);
}

.about-premium-page .about-hero-tagline {
    color: rgba(255,255,255,.60);

    font-size: 12px;
}


/* Large JSL Text */

.about-premium-page .about-hero-number {
    position: absolute;

    right: 25px;
    bottom: -45px;

    z-index: 3;

    color: rgba(255,255,255,.045);

    font-size: 190px;
    line-height: 1;

    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   03. BRAND STORY
============================================================ */

.about-premium-page .about-story-section {
    position: relative;

    padding: 110px 0;

    background: #ffffff;
}

.about-premium-page .about-story-image {
    position: relative;

    padding: 0 35px 35px 0;
}

.about-premium-page .about-story-image > img {
    position: relative;

    z-index: 3;

    display: block;

    width: 100%;
    height: 600px;

    object-fit: cover;
}

.about-premium-page .story-red-shape {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 82%;
    height: 82%;

    background: #e31e24;

    z-index: 1;
}

.about-premium-page .story-floating-card {
    position: absolute;

    right: -5px;
    bottom: 65px;

    z-index: 6;

    width: 245px;

    padding: 24px;

    background: #ffffff;

    box-shadow: 0 18px 50px rgba(0,0,0,.15);
}

.about-premium-page .story-floating-card span {
    display: block;

    margin-bottom: 8px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.about-premium-page .story-floating-card strong {
    display: block;

    color: #181818;

    font-size: 16px;
    line-height: 1.5;
}


/* Story Content */

.about-premium-page .about-story-content {
    padding-left: 35px;
}

.about-premium-page .premium-section-label {
    display: block;

    margin-bottom: 17px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.about-premium-page .about-story-content h2 {
    max-width: 580px;

    margin: 0 0 28px;

    color: #171717 !important;

    font-size: 48px;
    line-height: 1.12;

    font-weight: 700;

    letter-spacing: -1px;
}

.about-premium-page .about-story-content h2 span {
    color: #e31e24 !important;
}

.about-premium-page .about-story-content p {
    margin-bottom: 14px;

    color: #6b6b6b !important;

    font-size: 14px;
    line-height: 1.85;
}

.about-premium-page .about-story-content .story-lead {
    color: #333333 !important;

    font-size: 17px;
}


/* Story Values */

.about-premium-page .story-values {
    margin-top: 30px;

    padding-top: 23px;

    border-top: 1px solid #eeeeee;
}

.about-premium-page .story-value-item {
    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 13px 0;
}

.about-premium-page .story-value-item > span {
    flex: 0 0 auto;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
}

.about-premium-page .story-value-item strong {
    display: block;

    margin-bottom: 4px;

    color: #222222;

    font-size: 15px;
}

.about-premium-page .story-value-item small {
    display: block;

    color: #888888;

    font-size: 12px;
}


/* ============================================================
   04. LIGHTING + APPLIANCES SHOWCASE
============================================================ */

.about-premium-page .about-segments-section {
    position: relative;

    background: #111111;
}

.about-premium-page .segment-card {
    position: relative;

    width: 100%;
    min-height: 680px;

    overflow: hidden;

    background: #111111;
}

.about-premium-page .segment-card > img {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.about-premium-page .segment-card:hover > img {
    transform: scale(1.05);
}

.about-premium-page .segment-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        0deg,
        rgba(0,0,0,.94) 0%,
        rgba(0,0,0,.60) 42%,
        rgba(0,0,0,.12) 100%
    );
}

.about-premium-page .segment-content {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4;

    padding: 55px;
}

.about-premium-page .segment-content > span {
    display: block;

    margin-bottom: 15px;

    color: #e31e24;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.about-premium-page .segment-content h2 {
    max-width: 520px;

    margin: 0 0 20px;

    color: #ffffff !important;

    font-size: 42px;
    line-height: 1.15;

    font-weight: 600;
}

.about-premium-page .segment-content h2 strong {
    display: block;

    color: #ffffff !important;

    font-weight: 700;
}

.about-premium-page .segment-content p {
    max-width: 520px;

    margin-bottom: 24px;

    color: rgba(255,255,255,.75) !important;

    font-size: 14px;
    line-height: 1.75;
}

.about-premium-page .segment-tags {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}

.about-premium-page .segment-tags span {
    display: inline-block;

    padding: 8px 12px;

    background: rgba(255,255,255,.08);

    border: 1px solid rgba(255,255,255,.25);

    color: #ffffff;

    font-size: 11px;
}


/* ============================================================
   05. WHY JEEVAN
============================================================ */

.about-premium-page .about-why-premium {
    padding: 110px 0;

    background: #f7f7f7;
}

.about-premium-page .why-main-heading {
    max-width: 650px;

    margin: 0;

    color: #181818 !important;

    font-size: 46px;
    line-height: 1.15;

    font-weight: 700;
}

.about-premium-page .why-main-heading span {
    color: #e31e24 !important;
}

.about-premium-page .why-intro {
    margin: 0;

    color: #737373;

    font-size: 14px;
    line-height: 1.8;
}


/* Feature Cards */

.about-premium-page .premium-feature-card {
    position: relative;

    height: 100%;
    min-height: 300px;

    padding: 32px 28px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e9e9e9;

    transition: all .35s ease;
}

.about-premium-page .premium-feature-card:hover {
    transform: translateY(-8px);

    border-color: transparent;

    box-shadow: 0 20px 45px rgba(0,0,0,.08);
}

.about-premium-page .feature-number {
    position: absolute;

    top: 3px;
    right: 15px;

    color: #f1f1f1;

    font-size: 60px;
    line-height: 1;

    font-weight: 800;
}

.about-premium-page .premium-feature-icon {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    margin-bottom: 38px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 22px;
}

.about-premium-page .premium-feature-card h4 {
    position: relative;

    z-index: 3;

    margin: 0 0 13px;

    color: #202020 !important;

    font-size: 18px;
    font-weight: 600;
}

.about-premium-page .premium-feature-card p {
    position: relative;

    z-index: 3;

    margin: 0;

    color: #777777 !important;

    font-size: 13px;
    line-height: 1.7;
}


/* ============================================================
   06. VISION + MISSION
============================================================ */

.about-premium-page .vision-mission-premium {
    padding: 110px 0;

    background: #ffffff;
}

.about-premium-page .vision-mission-wrapper {
    overflow: hidden;

    box-shadow: 0 22px 60px rgba(0,0,0,.10);
}

.about-premium-page .vm-card {
    position: relative;

    min-height: 430px;

    padding: 55px;

    overflow: hidden;
}

.about-premium-page .vm-dark {
    background: #171717;
}

.about-premium-page .vm-red {
    background: #e31e24;
}

.about-premium-page .vm-number {
    position: absolute;

    right: 20px;
    top: -20px;

    color: rgba(255,255,255,.08);

    font-size: 140px;
    line-height: 1;

    font-weight: 800;
}

.about-premium-page .vm-label {
    position: relative;

    z-index: 2;

    display: block;

    margin-bottom: 55px;

    color: rgba(255,255,255,.70);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.about-premium-page .vm-card h2 {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0 0 22px;

    color: #ffffff !important;

    font-size: 35px;
    line-height: 1.2;

    font-weight: 600;
}

.about-premium-page .vm-card p {
    position: relative;

    z-index: 2;

    max-width: 520px;

    margin: 0;

    color: rgba(255,255,255,.75) !important;

    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   07. BRAND PROMISE
============================================================ */

.about-premium-page .brand-promise-section {
    padding: 0 0 110px;

    background: #ffffff;
}

.about-premium-page .brand-promise-inner {
    position: relative;

    padding: 85px 45px;

    overflow: hidden;

    text-align: center;

    background: #f5f5f5;
}

.about-premium-page .brand-promise-small {
    display: block;

    margin-bottom: 17px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.about-premium-page .brand-promise-inner h2 {
    max-width: 900px;

    margin: 0 auto 22px;

    color: #171717 !important;

    font-size: 53px;
    line-height: 1.1;

    font-weight: 700;

    letter-spacing: -1px;
}

.about-premium-page .brand-promise-inner h2 span {
    color: #e31e24 !important;
}

.about-premium-page .brand-promise-inner p {
    max-width: 650px;

    margin: 0 auto 30px;

    color: #777777 !important;

    font-size: 14px;
    line-height: 1.8;
}

.about-premium-page .brand-promise-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 24px;

    background: #171717;

    color: #ffffff !important;

    text-decoration: none !important;

    font-size: 12px;
    font-weight: 600;

    transition: all .3s ease;
}

.about-premium-page .brand-promise-btn:hover {
    background: #e31e24;

    color: #ffffff !important;

    transform: translateY(-3px);
}


/* ============================================================
   08. TABLET
============================================================ */

@media (max-width: 991.98px) {

    .about-premium-page .about-premium-hero,
    .about-premium-page .min-vh-75 {
        min-height: 590px;
    }

    .about-premium-page .about-hero-content h1 {
        font-size: 51px;
    }

    .about-premium-page .about-story-section,
    .about-premium-page .about-why-premium,
    .about-premium-page .vision-mission-premium {
        padding: 75px 0;
    }

    .about-premium-page .about-story-content {
        padding-left: 0;
    }

    .about-premium-page .about-story-content h2 {
        font-size: 39px;
    }

    .about-premium-page .segment-card {
        min-height: 600px;
    }

    .about-premium-page .segment-content {
        padding: 40px;
    }

    .about-premium-page .why-main-heading {
        font-size: 39px;
    }

    .about-premium-page .why-intro {
        margin-top: 20px;
    }
}


/* ============================================================
   09. MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .about-premium-page .about-premium-hero,
    .about-premium-page .min-vh-75 {
        min-height: 560px;
    }

    .about-premium-page .about-hero-bg {
        background-position: 65% center;
    }

    .about-premium-page .about-hero-overlay {
        background: rgba(10,10,10,.82);
    }

    .about-premium-page .about-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .about-premium-page .about-hero-content > p {
        font-size: 14px;
    }

    .about-premium-page .about-hero-number {
        right: 10px;
        bottom: -20px;

        font-size: 100px;
    }

    .about-premium-page .about-story-section {
        padding: 60px 0;
    }

    .about-premium-page .about-story-image {
        padding: 0 15px 15px 0;
    }

    .about-premium-page .about-story-image > img {
        height: 420px;
    }

    .about-premium-page .story-floating-card {
        right: 0;
        bottom: 35px;

        width: 205px;

        padding: 18px;
    }

    .about-premium-page .about-story-content h2 {
        font-size: 32px;
    }

    .about-premium-page .segment-card {
        min-height: 530px;
    }

    .about-premium-page .segment-content {
        padding: 30px 22px;
    }

    .about-premium-page .segment-content h2 {
        font-size: 31px;
    }

    .about-premium-page .about-why-premium {
        padding: 60px 0;
    }

    .about-premium-page .why-main-heading {
        font-size: 32px;
    }

    .about-premium-page .premium-feature-card {
        min-height: auto;
    }

    .about-premium-page .vision-mission-premium {
        padding: 60px 0;
    }

    .about-premium-page .vm-card {
        min-height: 360px;

        padding: 35px 25px;
    }

    .about-premium-page .vm-label {
        margin-bottom: 40px;
    }

    .about-premium-page .vm-card h2 {
        font-size: 27px;
    }

    .about-premium-page .brand-promise-section {
        padding-bottom: 60px;
    }

    .about-premium-page .brand-promise-inner {
        padding: 55px 22px;
    }

    .about-premium-page .brand-promise-inner h2 {
        font-size: 36px;
    }
}


/* ============================================================
   10. SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .about-premium-page .about-hero-content h1 {
        font-size: 34px;
    }

    .about-premium-page .about-hero-actions {
        gap: 15px;
    }

    .about-premium-page .about-hero-tagline {
        width: 100%;
    }

    .about-premium-page .about-story-image > img {
        height: 360px;
    }

    .about-premium-page .segment-card {
        min-height: 500px;
    }

    .about-premium-page .segment-content h2 {
        font-size: 28px;
    }

    .about-premium-page .brand-promise-inner h2 {
        font-size: 30px;
    }
}



/* HERO BACKGROUND IMAGE */
.about-premium-page .about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background-image: url("../images/about-hero-bg.png");
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;

    z-index: 1;
}

/* BLACK GRADIENT OVERLAY */
.about-premium-page .about-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 0, 0, 0.94) 30%,
        rgba(0, 0, 0, 0.78) 48%,
        rgba(0, 0, 0, 0.42) 70%,
        rgba(0, 0, 0, 0.20) 100%
    );

    z-index: 2;
}

/* CONTENT IMAGE KE UPAR RAHE */
.about-premium-page .about-premium-hero .container {
    position: relative;
    z-index: 5;
}
























/* ============================================================
   JEEVAN SMART LIFE - COMPANY PROFILE PAGE
============================================================ */

.company-profile-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.company-profile-page *,
.company-profile-page *::before,
.company-profile-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.company-profile-page .profile-hero {
    position: relative;
    min-height: 630px;
    overflow: hidden;
    background: #111;
}

.company-profile-page .profile-hero-bg {
    position: absolute;
    inset: 0;

    background:
        url("../images/company-profile-hero.png")
        center right / cover no-repeat;

    z-index: 1;
}

.company-profile-page .profile-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(8,8,8,.98) 0%,
        rgba(8,8,8,.94) 32%,
        rgba(8,8,8,.76) 52%,
        rgba(8,8,8,.32) 78%,
        rgba(8,8,8,.10) 100%
    );
}

.company-profile-page .profile-hero .container {
    position: relative;
    z-index: 5;
}

.company-profile-page .profile-hero-row {
    min-height: 630px;
}

.company-profile-page .profile-hero-content {
    max-width: 760px;
}

.company-profile-page .profile-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 23px;

    color: rgba(255,255,255,.72);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.company-profile-page .profile-kicker > span {
    width: 38px;
    height: 2px;
    background: #e31e24;
}

.company-profile-page .profile-hero-content h1 {
    margin: 0 0 25px;

    color: #fff;

    font-size: 63px;
    line-height: 1.06;
    font-weight: 700;

    letter-spacing: -2px;
}

.company-profile-page .profile-hero-content h1 strong {
    display: block;
    color: #e31e24;
}

.company-profile-page .profile-hero-content p {
    max-width: 640px;

    margin-bottom: 32px;

    color: rgba(255,255,255,.72);

    font-size: 16px;
    line-height: 1.8;
}

.company-profile-page .profile-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 25px;
}

.company-profile-page .profile-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 24px;

    background: #e31e24;

    border: 1px solid #e31e24;

    color: #fff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: .3s ease;
}

.company-profile-page .profile-primary-btn:hover {
    background: #fff;
    border-color: #fff;
    color: #111;

    transform: translateY(-2px);
}

.company-profile-page .profile-tagline {
    color: rgba(255,255,255,.58);
    font-size: 12px;
}

.company-profile-page .profile-hero-mark {
    position: absolute;

    right: 25px;
    bottom: -45px;

    z-index: 3;

    color: rgba(255,255,255,.04);

    font-size: 190px;
    line-height: 1;
    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   COMMON HEADINGS
============================================================ */

.company-profile-page .profile-section-label {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.company-profile-page .profile-main-heading {
    margin: 0;

    color: #171717;

    font-size: 45px;
    line-height: 1.15;
    font-weight: 700;
}

.company-profile-page .profile-main-heading span {
    color: #e31e24;
}

.company-profile-page .profile-section-intro {
    margin: 0;

    color: #747474;

    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   02. COMPANY OVERVIEW
============================================================ */

.company-profile-page .profile-overview-section {
    padding: 110px 0;
    background: #fff;
}

.company-profile-page .profile-overview-content h2 {
    margin: 0 0 25px;

    color: #171717;

    font-size: 47px;
    line-height: 1.15;
    font-weight: 700;
}

.company-profile-page .profile-overview-content h2 span {
    color: #e31e24;
}

.company-profile-page .profile-overview-content p {
    color: #696969;

    font-size: 14px;
    line-height: 1.85;
}

.company-profile-page .profile-overview-content .profile-lead {
    color: #333;

    font-size: 17px;
    line-height: 1.8;
}

.company-profile-page .profile-info-panel {
    padding: 42px;

    background: #f6f6f6;

    border-top: 4px solid #e31e24;
}

.company-profile-page .profile-info-top {
    margin-bottom: 28px;
}

.company-profile-page .profile-info-top span {
    display: block;

    margin-bottom: 7px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.company-profile-page .profile-info-top strong {
    color: #181818;
    font-size: 25px;
}

.company-profile-page .profile-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}

.company-profile-page .profile-info-item {
    display: flex;
    gap: 13px;

    padding-top: 18px;

    border-top: 1px solid #ddd;
}

.company-profile-page .profile-info-item > span {
    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
}

.company-profile-page .profile-info-item strong {
    display: block;

    margin-bottom: 5px;

    color: #242424;

    font-size: 14px;
}

.company-profile-page .profile-info-item small {
    display: block;

    color: #888;

    font-size: 11px;
    line-height: 1.55;
}


/* ============================================================
   03. BUSINESS VERTICALS
============================================================ */

.company-profile-page .profile-business-section {
    padding: 110px 0;

    background: #f7f7f7;
}

.company-profile-page .business-profile-card {
    height: 100%;

    background: #fff;

    border: 1px solid #e9e9e9;

    transition: .35s ease;
}

.company-profile-page .business-profile-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 18px 45px rgba(0,0,0,.08);
}

.company-profile-page .business-profile-image {
    height: 360px;

    overflow: hidden;
}

.company-profile-page .business-profile-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .6s ease;
}

.company-profile-page .business-profile-card:hover img {
    transform: scale(1.05);
}

.company-profile-page .business-profile-content {
    position: relative;

    padding: 35px;
}

.company-profile-page .business-no {
    position: absolute;

    right: 24px;
    top: 10px;

    color: #f1f1f1;

    font-size: 64px;
    line-height: 1;
    font-weight: 800;
}

.company-profile-page .business-label {
    display: block;

    margin-bottom: 11px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.company-profile-page .business-profile-content h3 {
    position: relative;
    z-index: 2;

    max-width: 450px;

    margin-bottom: 15px;

    color: #1c1c1c;

    font-size: 27px;
    line-height: 1.3;
    font-weight: 650;
}

.company-profile-page .business-profile-content p {
    color: #737373;

    font-size: 13px;
    line-height: 1.75;
}

.company-profile-page .business-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 20px;
}

.company-profile-page .business-tags span {
    padding: 7px 10px;

    background: #f6f6f6;

    border: 1px solid #eee;

    color: #555;

    font-size: 10px;
}


/* ============================================================
   04. WHAT DEFINES US
============================================================ */

.company-profile-page .profile-defines-section {
    padding: 110px 0;

    background: #fff;
}

.company-profile-page .profile-heading-center {
    max-width: 780px;
    margin: 0 auto;
}

.company-profile-page .profile-heading-center h2 {
    margin: 0;

    color: #171717;

    font-size: 45px;
    line-height: 1.15;
    font-weight: 700;
}

.company-profile-page .profile-heading-center h2 span {
    color: #e31e24;
}

.company-profile-page .profile-value-card {
    position: relative;

    height: 100%;
    min-height: 280px;

    padding: 30px 25px;

    overflow: hidden;

    background: #f8f8f8;

    border: 1px solid #ededed;

    transition: .35s ease;
}

.company-profile-page .profile-value-card:hover {
    background: #171717;

    transform: translateY(-6px);
}

.company-profile-page .profile-value-number {
    position: absolute;

    right: 15px;
    top: 6px;

    color: #ececec;

    font-size: 56px;
    font-weight: 800;

    transition: .35s ease;
}

.company-profile-page .profile-value-icon {
    position: relative;
    z-index: 3;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 35px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 21px;
}

.company-profile-page .profile-value-card h4 {
    position: relative;
    z-index: 3;

    margin-bottom: 12px;

    color: #202020;

    font-size: 17px;
    font-weight: 600;
}

.company-profile-page .profile-value-card p {
    position: relative;
    z-index: 3;

    margin: 0;

    color: #777;

    font-size: 12px;
    line-height: 1.7;
}

.company-profile-page .profile-value-card:hover h4 {
    color: #fff;
}

.company-profile-page .profile-value-card:hover p {
    color: rgba(255,255,255,.68);
}

.company-profile-page .profile-value-card:hover .profile-value-number {
    color: rgba(255,255,255,.06);
}


/* ============================================================
   05. COMMITMENT
============================================================ */

.company-profile-page .profile-commitment-section {
    padding: 0 0 110px;

    background: #fff;
}

.company-profile-page .profile-commitment-box {
    padding: 70px;

    background: #171717;
}

.company-profile-page .profile-dark-label {
    display: block;

    margin-bottom: 15px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.company-profile-page .profile-commitment-box h2 {
    margin-bottom: 25px;

    color: #fff;

    font-size: 43px;
    line-height: 1.15;
    font-weight: 700;
}

.company-profile-page .profile-commitment-box h2 span {
    color: #e31e24;
}

.company-profile-page .profile-commitment-box p {
    color: rgba(255,255,255,.65);

    font-size: 14px;
    line-height: 1.8;
}

.company-profile-page .commitment-list {
    padding-left: 30px;

    border-left: 1px solid rgba(255,255,255,.12);
}

.company-profile-page .commitment-item {
    display: flex;
    align-items: center;

    gap: 13px;

    padding: 15px 0;

    color: rgba(255,255,255,.82);

    border-bottom: 1px solid rgba(255,255,255,.08);

    font-size: 13px;
}

.company-profile-page .commitment-item i {
    color: #e31e24;

    font-size: 18px;
}


/* ============================================================
   06. APPLICATION AREAS
============================================================ */

.company-profile-page .profile-applications-section {
    padding: 110px 0;

    background: #f7f7f7;
}

.company-profile-page .application-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 15px;
}

.company-profile-page .application-item {
    display: flex;
    align-items: center;

    gap: 14px;

    padding: 24px;

    background: #fff;

    border: 1px solid #e9e9e9;

    color: #292929;

    font-size: 14px;
    font-weight: 600;

    transition: .3s ease;
}

.company-profile-page .application-item i {
    color: #e31e24;

    font-size: 22px;
}

.company-profile-page .application-item:hover {
    border-color: #e31e24;

    transform: translateY(-3px);
}


/* ============================================================
   07. GROWTH VISION
============================================================ */

.company-profile-page .profile-growth-section {
    padding: 110px 0;

    background: #fff;
}

.company-profile-page .profile-growth-inner {
    padding: 65px;

    background: #e31e24;
}

.company-profile-page .profile-growth-inner > .row > div > span {
    display: block;

    margin-bottom: 14px;

    color: rgba(255,255,255,.72);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.company-profile-page .profile-growth-inner h2 {
    margin-bottom: 15px;

    color: #fff;

    font-size: 42px;
    line-height: 1.15;
    font-weight: 600;
}

.company-profile-page .profile-growth-inner h2 strong {
    font-weight: 700;
}

.company-profile-page .profile-growth-inner p {
    max-width: 650px;

    margin: 0;

    color: rgba(255,255,255,.75);

    font-size: 14px;
    line-height: 1.8;
}

.company-profile-page .profile-growth-btn {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 14px 23px;

    background: #fff;

    color: #171717;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.company-profile-page .profile-growth-btn:hover {
    background: #171717;

    color: #fff;

    transform: translateY(-3px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .company-profile-page .profile-hero,
    .company-profile-page .profile-hero-row {
        min-height: 580px;
    }

    .company-profile-page .profile-hero-content h1 {
        font-size: 49px;
    }

    .company-profile-page .profile-overview-section,
    .company-profile-page .profile-business-section,
    .company-profile-page .profile-defines-section,
    .company-profile-page .profile-applications-section,
    .company-profile-page .profile-growth-section {
        padding: 75px 0;
    }

    .company-profile-page .profile-overview-content h2,
    .company-profile-page .profile-main-heading,
    .company-profile-page .profile-heading-center h2 {
        font-size: 38px;
    }

    .company-profile-page .profile-info-panel {
        padding: 32px;
    }

    .company-profile-page .profile-commitment-box {
        padding: 50px 40px;
    }

    .company-profile-page .commitment-list {
        padding-left: 0;
        padding-top: 25px;

        border-left: 0;

        border-top: 1px solid rgba(255,255,255,.12);
    }

    .company-profile-page .application-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .company-profile-page .profile-hero,
    .company-profile-page .profile-hero-row {
        min-height: 540px;
    }

    .company-profile-page .profile-hero-bg {
        background-position: 68% center;
    }

    .company-profile-page .profile-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(8,8,8,.94) 0%,
            rgba(8,8,8,.88) 55%,
            rgba(8,8,8,.55) 100%
        );
    }

    .company-profile-page .profile-hero-content h1 {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .company-profile-page .profile-hero-content p {
        font-size: 14px;
    }

    .company-profile-page .profile-hero-mark {
        font-size: 100px;
    }

    .company-profile-page .profile-overview-section,
    .company-profile-page .profile-business-section,
    .company-profile-page .profile-defines-section,
    .company-profile-page .profile-applications-section,
    .company-profile-page .profile-growth-section {
        padding: 60px 0;
    }

    .company-profile-page .profile-overview-content h2,
    .company-profile-page .profile-main-heading,
    .company-profile-page .profile-heading-center h2 {
        font-size: 31px;
    }

    .company-profile-page .profile-info-grid {
        grid-template-columns: 1fr;
    }

    .company-profile-page .business-profile-image {
        height: 300px;
    }

    .company-profile-page .business-profile-content {
        padding: 25px;
    }

    .company-profile-page .profile-commitment-section {
        padding-bottom: 60px;
    }

    .company-profile-page .profile-commitment-box {
        padding: 38px 25px;
    }

    .company-profile-page .profile-commitment-box h2 {
        font-size: 31px;
    }

    .company-profile-page .application-grid {
        grid-template-columns: 1fr;
    }

    .company-profile-page .profile-growth-inner {
        padding: 42px 25px;
    }

    .company-profile-page .profile-growth-inner h2 {
        font-size: 31px;
    }
}

















/* ======================================
        OUR STORY
======================================== */
/* ============================================================
   JEEVAN SMART LIFE - OUR STORY PAGE
============================================================ */

.our-story-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.our-story-page *,
.our-story-page *::before,
.our-story-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.our-story-page .our-story-hero {
    position: relative;

    min-height: 630px;

    overflow: hidden;

    background: #111111;
}

.our-story-page .our-story-hero-bg {
    position: absolute;
    inset: 0;

    background-image:
        url("../images/our-story-hero.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    z-index: 1;
}

.our-story-page .our-story-hero-overlay {
    position: absolute;
    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(7,7,7,.98) 0%,
        rgba(7,7,7,.94) 32%,
        rgba(7,7,7,.78) 50%,
        rgba(7,7,7,.38) 75%,
        rgba(7,7,7,.10) 100%
    );
}

.our-story-page .our-story-hero .container {
    position: relative;

    z-index: 5;
}

.our-story-page .our-story-hero-row {
    min-height: 630px;
}

.our-story-page .our-story-hero-content {
    max-width: 760px;
}

.our-story-page .our-story-kicker {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: rgba(255,255,255,.7);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.our-story-page .our-story-kicker > span {
    width: 38px;
    height: 2px;

    background: #e31e24;
}

.our-story-page .our-story-hero-content h1 {
    margin: 0 0 25px;

    color: #fff;

    font-size: 63px;
    line-height: 1.05;

    font-weight: 700;

    letter-spacing: -2px;
}

.our-story-page .our-story-hero-content h1 strong {
    display: block;

    color: #e31e24;
}

.our-story-page .our-story-hero-content p {
    max-width: 650px;

    margin-bottom: 32px;

    color: rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.8;
}

.our-story-page .our-story-hero-actions {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 25px;
}

.our-story-page .story-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    background: #e31e24;

    border: 1px solid #e31e24;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: .3s ease;
}

.our-story-page .story-primary-btn:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}

.our-story-page .story-tagline {
    color: rgba(255,255,255,.58);

    font-size: 12px;
}

.our-story-page .our-story-watermark {
    position: absolute;

    right: 20px;
    bottom: -38px;

    z-index: 3;

    color: rgba(255,255,255,.04);

    font-size: 160px;

    line-height: 1;

    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   COMMON
============================================================ */

.our-story-page .story-section-label {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.our-story-page .story-main-heading {
    margin: 0;

    color: #171717;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;
}

.our-story-page .story-main-heading span {
    color: #e31e24;
}

.our-story-page .story-section-intro {
    margin: 0;

    color: #777;

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   02. BEGINNING
============================================================ */

.our-story-page .story-beginning-section {
    padding: 110px 0;

    background: #ffffff;
}

.our-story-page .story-main-image {
    position: relative;

    padding: 0 35px 35px 0;
}

.our-story-page .story-main-image > img {
    position: relative;

    z-index: 3;

    width: 100%;

    height: 580px;

    object-fit: cover;
}

.our-story-page .story-image-border {
    position: absolute;

    right: 0;

    bottom: 0;

    width: 80%;

    height: 82%;

    background: #e31e24;

    z-index: 1;
}

.our-story-page .story-image-card {
    position: absolute;

    right: -5px;

    bottom: 60px;

    z-index: 5;

    width: 230px;

    padding: 22px;

    background: #ffffff;

    box-shadow:
        0 18px 45px rgba(0,0,0,.14);
}

.our-story-page .story-image-card span {
    display: block;

    margin-bottom: 8px;

    color: #e31e24;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 2px;
}

.our-story-page .story-image-card strong {
    color: #181818;

    font-size: 16px;

    line-height: 1.5;
}

.our-story-page .story-beginning-content {
    padding-left: 30px;
}

.our-story-page .story-beginning-content h2 {
    margin-bottom: 25px;

    color: #171717;

    font-size: 47px;

    line-height: 1.15;

    font-weight: 700;
}

.our-story-page .story-beginning-content h2 span {
    color: #e31e24;
}

.our-story-page .story-beginning-content p {
    color: #6d6d6d;

    font-size: 14px;

    line-height: 1.85;
}

.our-story-page .story-beginning-content .story-lead {
    color: #333333;

    font-size: 17px;

    line-height: 1.8;
}


/* ============================================================
   03. QUOTE
============================================================ */

.our-story-page .story-quote-section {
    padding: 100px 0;

    background: #171717;
}

.our-story-page .story-quote-inner {
    max-width: 900px;

    margin: auto;

    text-align: center;
}

.our-story-page .quote-icon {
    display: block;

    margin-bottom: 20px;

    color: #e31e24;

    font-size: 45px;
}

.our-story-page .story-quote-inner h2 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 43px;

    line-height: 1.3;

    font-weight: 500;
}

.our-story-page .story-quote-inner h2 span {
    color: #e31e24;
}

.our-story-page .story-quote-inner p {
    max-width: 650px;

    margin: auto;

    color: rgba(255,255,255,.62);

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   04. TIMELINE
============================================================ */

.our-story-page .story-evolution-section {
    padding: 110px 0;

    background: #f7f7f7;
}

.our-story-page .story-timeline {
    position: relative;

    margin-top: 60px;
}

.our-story-page .story-timeline::before {
    content: "";

    position: absolute;

    left: 34px;

    top: 0;

    bottom: 0;

    width: 1px;

    background: #dddddd;
}

.our-story-page .story-timeline-item {
    position: relative;

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 30px;

    padding-bottom: 50px;
}

.our-story-page .story-timeline-number {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 68px;

    height: 68px;

    background: #ffffff;

    border: 1px solid #e31e24;

    color: #e31e24;

    font-size: 12px;

    font-weight: 700;
}

.our-story-page .story-timeline-content {
    padding: 5px 0 0;
}

.our-story-page .story-timeline-content > span {
    display: block;

    margin-bottom: 8px;

    color: #e31e24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.our-story-page .story-timeline-content h3 {
    margin-bottom: 12px;

    color: #202020;

    font-size: 24px;

    font-weight: 600;
}

.our-story-page .story-timeline-content p {
    max-width: 680px;

    margin: 0;

    color: #777;

    font-size: 13px;

    line-height: 1.75;
}


/* ============================================================
   05. TWO WORLDS
============================================================ */

.our-story-page .story-two-worlds {
    background: #111111;
}

.our-story-page .story-world-card {
    position: relative;

    min-height: 650px;

    overflow: hidden;
}

.our-story-page .story-world-card > img {
    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.our-story-page .story-world-card:hover > img {
    transform: scale(1.05);
}

.our-story-page .story-world-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background:
        linear-gradient(
            0deg,
            rgba(0,0,0,.92) 0%,
            rgba(0,0,0,.55) 45%,
            rgba(0,0,0,.10) 100%
        );
}

.our-story-page .story-world-content {
    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 4;

    padding: 50px;
}

.our-story-page .story-world-content > span {
    display: block;

    margin-bottom: 13px;

    color: #e31e24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

.our-story-page .story-world-content h2 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 40px;

    line-height: 1.15;

    font-weight: 600;
}

.our-story-page .story-world-content h2 strong {
    display: block;

    color: #ffffff;

    font-weight: 700;
}

.our-story-page .story-world-content p {
    max-width: 470px;

    margin: 0;

    color: rgba(255,255,255,.7);

    font-size: 13px;

    line-height: 1.75;
}


/* ============================================================
   06. VALUES
============================================================ */

.our-story-page .story-values-section {
    padding: 110px 0;

    background: #ffffff;
}

.our-story-page .story-values-heading {
    max-width: 750px;

    margin: auto;
}

.our-story-page .story-values-heading h2 {
    margin: 0;

    color: #171717;

    font-size: 45px;

    line-height: 1.15;

    font-weight: 700;
}

.our-story-page .story-values-heading h2 span {
    color: #e31e24;
}

.our-story-page .story-value-card {
    position: relative;

    height: 100%;

    min-height: 280px;

    padding: 32px 26px;

    background: #f8f8f8;

    border: 1px solid #ececec;

    overflow: hidden;

    transition: .35s ease;
}

.our-story-page .story-value-card > span {
    position: absolute;

    right: 15px;

    top: 4px;

    color: #ececec;

    font-size: 58px;

    font-weight: 800;
}

.our-story-page .story-value-card > i {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    margin-bottom: 35px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 21px;
}

.our-story-page .story-value-card h4 {
    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    color: #222;

    font-size: 17px;

    font-weight: 600;
}

.our-story-page .story-value-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #777;

    font-size: 12px;

    line-height: 1.7;
}

.our-story-page .story-value-card:hover {
    background: #171717;

    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.09);
}

.our-story-page .story-value-card:hover h4 {
    color: #ffffff;
}

.our-story-page .story-value-card:hover p {
    color: rgba(255,255,255,.65);
}


/* ============================================================
   07. FUTURE
============================================================ */

.our-story-page .story-future-section {
    padding: 0 0 110px;

    background: #ffffff;
}

.our-story-page .story-future-inner {
    padding: 80px 50px;

    text-align: center;

    background: #e31e24;
}

.our-story-page .story-future-inner > span {
    display: block;

    margin-bottom: 16px;

    color: rgba(255,255,255,.75);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

.our-story-page .story-future-inner h2 {
    margin-bottom: 22px;

    color: #ffffff;

    font-size: 48px;

    line-height: 1.15;

    font-weight: 600;
}

.our-story-page .story-future-inner h2 strong {
    font-weight: 700;
}

.our-story-page .story-future-inner p {
    max-width: 720px;

    margin: 0 auto 12px;

    color: rgba(255,255,255,.74);

    font-size: 14px;

    line-height: 1.8;
}

.our-story-page .story-future-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 20px;

    padding: 14px 24px;

    background: #ffffff;

    color: #171717;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}

.our-story-page .story-future-btn:hover {
    background: #171717;

    color: #ffffff;

    transform: translateY(-3px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .our-story-page .our-story-hero,
    .our-story-page .our-story-hero-row {
        min-height: 580px;
    }

    .our-story-page .our-story-hero-content h1 {
        font-size: 49px;
    }

    .our-story-page .story-beginning-section,
    .our-story-page .story-evolution-section,
    .our-story-page .story-values-section {
        padding: 75px 0;
    }

    .our-story-page .story-beginning-content {
        padding-left: 0;
    }

    .our-story-page .story-beginning-content h2,
    .our-story-page .story-main-heading,
    .our-story-page .story-values-heading h2 {
        font-size: 38px;
    }

    .our-story-page .story-world-card {
        min-height: 560px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .our-story-page .our-story-hero,
    .our-story-page .our-story-hero-row {
        min-height: 540px;
    }

    .our-story-page .our-story-hero-bg {
        background-position: 68% center;
    }

    .our-story-page .our-story-hero-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(7,7,7,.94),
                rgba(7,7,7,.65)
            );
    }

    .our-story-page .our-story-hero-content h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .our-story-page .our-story-hero-content p {
        font-size: 14px;
    }

    .our-story-page .story-tagline {
        width: 100%;
    }

    .our-story-page .our-story-watermark {
        font-size: 80px;
    }

    .our-story-page .story-beginning-section,
    .our-story-page .story-evolution-section,
    .our-story-page .story-values-section {
        padding: 60px 0;
    }

    .our-story-page .story-main-image {
        padding: 0 15px 15px 0;
    }

    .our-story-page .story-main-image > img {
        height: 400px;
    }

    .our-story-page .story-image-card {
        right: 0;

        bottom: 30px;

        width: 195px;
    }

    .our-story-page .story-beginning-content h2,
    .our-story-page .story-main-heading,
    .our-story-page .story-values-heading h2 {
        font-size: 31px;
    }

    .our-story-page .story-quote-section {
        padding: 70px 0;
    }

    .our-story-page .story-quote-inner h2 {
        font-size: 31px;
    }

    .our-story-page .story-timeline-item {
        grid-template-columns: 52px 1fr;

        gap: 18px;
    }

    .our-story-page .story-timeline::before {
        left: 25px;
    }

    .our-story-page .story-timeline-number {
        width: 52px;

        height: 52px;
    }

    .our-story-page .story-world-card {
        min-height: 500px;
    }

    .our-story-page .story-world-content {
        padding: 30px 22px;
    }

    .our-story-page .story-world-content h2 {
        font-size: 30px;
    }

    .our-story-page .story-future-section {
        padding-bottom: 60px;
    }

    .our-story-page .story-future-inner {
        padding: 55px 22px;
    }

    .our-story-page .story-future-inner h2 {
        font-size: 34px;
    }
}





















/* ============================================================
   JEEVAN SMART LIFE
   VISION & MISSION PAGE
============================================================ */

.vision-mission-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.vision-mission-page *,
.vision-mission-page *::before,
.vision-mission-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO SECTION
============================================================ */

.vision-mission-page .vm-hero {
    position: relative;
    min-height: 630px;
    overflow: hidden;
    background: #111111;
}

.vision-mission-page .vm-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image:
        url("../images/vision-mission-hero.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.vision-mission-page .vm-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(7,7,7,.98) 0%,
        rgba(7,7,7,.94) 30%,
        rgba(7,7,7,.78) 50%,
        rgba(7,7,7,.38) 75%,
        rgba(7,7,7,.10) 100%
    );
}

.vision-mission-page .vm-hero .container {
    position: relative;
    z-index: 5;
}

.vision-mission-page .vm-hero-row {
    min-height: 630px;
}

.vision-mission-page .vm-hero-content {
    max-width: 760px;
}

.vision-mission-page .vm-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 23px;

    color: rgba(255,255,255,.72);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vision-mission-page .vm-kicker > span {
    width: 38px;
    height: 2px;
    background: #e31e24;
}

.vision-mission-page .vm-hero-content h1 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: 63px;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -2px;
}

.vision-mission-page .vm-hero-content h1 strong {
    display: block;
    color: #e31e24;
}

.vision-mission-page .vm-hero-content p {
    max-width: 650px;
    margin-bottom: 32px;

    color: rgba(255,255,255,.72);

    font-size: 16px;
    line-height: 1.8;
}

.vision-mission-page .vm-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 24px;

    background: #e31e24;
    border: 1px solid #e31e24;

    color: #ffffff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: all .3s ease;
}

.vision-mission-page .vm-primary-btn:hover {
    background: #ffffff;
    border-color: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}

.vision-mission-page .vm-hero-mark {
    position: absolute;

    right: 25px;
    bottom: -45px;

    z-index: 3;

    color: rgba(255,255,255,.04);

    font-size: 190px;
    line-height: 1;
    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   02. COMMON TYPOGRAPHY
============================================================ */

.vision-mission-page .vm-section-label {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vision-mission-page .vm-main-heading {
    margin: 0;

    color: #171717;

    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
}

.vision-mission-page .vm-main-heading span {
    color: #e31e24;
}

.vision-mission-page .vm-section-intro {
    margin: 0;

    color: #777777;

    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   03. PURPOSE
============================================================ */

.vision-mission-page .vm-purpose-section {
    padding: 110px 0;
    background: #ffffff;
}

.vision-mission-page .vm-purpose-heading {
    margin: 0;

    color: #171717;

    font-size: 47px;
    line-height: 1.15;
    font-weight: 700;
}

.vision-mission-page .vm-purpose-heading span {
    display: block;
    color: #e31e24;
}

.vision-mission-page .vm-purpose-content {
    padding-left: 45px;

    border-left: 1px solid #e5e5e5;
}

.vision-mission-page .vm-purpose-content p {
    color: #6d6d6d;

    font-size: 14px;
    line-height: 1.85;
}

.vision-mission-page .vm-purpose-content .vm-lead {
    color: #333333;

    font-size: 17px;
}


/* ============================================================
   04. OUR VISION
============================================================ */

.vision-mission-page .vm-vision-section {
    background: #171717;
}

.vision-mission-page .vm-vision-image {
    position: relative;

    width: 100%;
    min-height: 650px;

    overflow: hidden;
}

.vision-mission-page .vm-vision-image img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .7s ease;
}

.vision-mission-page .vm-vision-image:hover img {
    transform: scale(1.04);
}

.vision-mission-page .vm-image-number {
    position: absolute;

    left: 30px;
    bottom: -25px;

    color: rgba(255,255,255,.16);

    font-size: 140px;
    line-height: 1;
    font-weight: 800;
}

.vision-mission-page .vm-vision-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 650px;

    padding: 70px;
}

.vision-mission-page .vm-light-label {
    display: block;

    margin-bottom: 18px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vision-mission-page .vm-vision-content h2 {
    max-width: 600px;

    margin-bottom: 26px;

    color: #ffffff;

    font-size: 46px;
    line-height: 1.15;
    font-weight: 600;
}

.vision-mission-page .vm-vision-content h2 strong {
    display: block;

    color: #e31e24;
    font-weight: 700;
}

.vision-mission-page .vm-vision-content > p {
    max-width: 600px;

    color: rgba(255,255,255,.65);

    font-size: 14px;
    line-height: 1.8;
}

.vision-mission-page .vm-highlight {
    display: flex;
    align-items: flex-start;
    gap: 18px;

    max-width: 580px;

    margin-top: 20px;
    padding-top: 25px;

    border-top: 1px solid rgba(255,255,255,.12);
}

.vision-mission-page .vm-highlight > span {
    flex: 0 0 auto;

    width: 4px;
    height: 45px;

    background: #e31e24;
}

.vision-mission-page .vm-highlight p {
    margin: 0;

    color: #ffffff;

    font-size: 15px;
    line-height: 1.7;
}


/* ============================================================
   05. OUR MISSION
============================================================ */

.vision-mission-page .vm-mission-section {
    padding: 110px 0;

    background: #ffffff;
}

.vision-mission-page .vm-mission-content h2 {
    margin-bottom: 24px;

    color: #171717;

    font-size: 47px;
    line-height: 1.15;
    font-weight: 700;
}

.vision-mission-page .vm-mission-content h2 span {
    display: block;
    color: #e31e24;
}

.vision-mission-page .vm-mission-content > p {
    color: #6e6e6e;

    font-size: 14px;
    line-height: 1.85;
}

.vision-mission-page .vm-mission-list {
    margin-top: 32px;
}

.vision-mission-page .vm-mission-item {
    display: flex;
    gap: 20px;

    padding: 18px 0;

    border-top: 1px solid #eeeeee;
}

.vision-mission-page .vm-mission-item > span {
    flex: 0 0 auto;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
}

.vision-mission-page .vm-mission-item h4 {
    margin-bottom: 5px;

    color: #222222;

    font-size: 16px;
    font-weight: 600;
}

.vision-mission-page .vm-mission-item p {
    max-width: 470px;

    margin: 0;

    color: #777777;

    font-size: 12px;
    line-height: 1.7;
}


/* Mission Image */

.vision-mission-page .vm-mission-image {
    position: relative;

    padding: 0 35px 35px 0;
}

.vision-mission-page .vm-mission-image > img {
    position: relative;
    z-index: 3;

    display: block;

    width: 100%;
    height: 610px;

    object-fit: cover;
}

.vision-mission-page .vm-red-block {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 82%;
    height: 82%;

    background: #e31e24;

    z-index: 1;
}

.vision-mission-page .vm-mission-card {
    position: absolute;

    right: -5px;
    bottom: 65px;

    z-index: 5;

    width: 235px;

    padding: 23px;

    background: #ffffff;

    box-shadow: 0 18px 50px rgba(0,0,0,.15);
}

.vision-mission-page .vm-mission-card span {
    display: block;

    margin-bottom: 8px;

    color: #e31e24;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vision-mission-page .vm-mission-card strong {
    display: block;

    color: #181818;

    font-size: 16px;
    line-height: 1.5;
}


/* ============================================================
   06. PRINCIPLES
============================================================ */

.vision-mission-page .vm-principles-section {
    padding: 110px 0;

    background: #f7f7f7;
}

.vision-mission-page .vm-principle-card {
    position: relative;

    height: 100%;
    min-height: 285px;

    padding: 30px 25px;

    overflow: hidden;

    background: #ffffff;
    border: 1px solid #e9e9e9;

    transition: all .35s ease;
}

.vision-mission-page .vm-card-number {
    position: absolute;

    right: 15px;
    top: 5px;

    color: #f0f0f0;

    font-size: 58px;
    line-height: 1;
    font-weight: 800;
}

.vision-mission-page .vm-card-icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 38px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 21px;
}

.vision-mission-page .vm-principle-card h4 {
    position: relative;
    z-index: 2;

    margin-bottom: 12px;

    color: #202020;

    font-size: 17px;
    font-weight: 600;
}

.vision-mission-page .vm-principle-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: #777777;

    font-size: 12px;
    line-height: 1.7;
}

.vision-mission-page .vm-principle-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-7px);

    box-shadow: 0 18px 40px rgba(0,0,0,.10);
}

.vision-mission-page .vm-principle-card:hover h4 {
    color: #ffffff;
}

.vision-mission-page .vm-principle-card:hover p {
    color: rgba(255,255,255,.65);
}

.vision-mission-page .vm-principle-card:hover .vm-card-number {
    color: rgba(255,255,255,.05);
}


/* ============================================================
   07. PRODUCT PURPOSE
============================================================ */

.vision-mission-page .vm-product-purpose {
    padding: 110px 0;

    background: #ffffff;
}

.vision-mission-page .vm-product-wrapper {
    overflow: hidden;

    box-shadow: 0 20px 55px rgba(0,0,0,.10);
}

.vision-mission-page .vm-product-block {
    position: relative;

    min-height: 390px;

    padding: 55px;

    overflow: hidden;
}

.vision-mission-page .vm-product-dark {
    background: #171717;
}

.vision-mission-page .vm-product-red {
    background: #e31e24;
}

.vision-mission-page .vm-product-block > span {
    display: block;

    margin-bottom: 40px;

    color: rgba(255,255,255,.65);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vision-mission-page .vm-product-block > i {
    display: block;

    margin-bottom: 22px;

    color: #ffffff;

    font-size: 37px;
}

.vision-mission-page .vm-product-block h3 {
    margin-bottom: 15px;

    color: #ffffff;

    font-size: 30px;
    font-weight: 600;
}

.vision-mission-page .vm-product-block p {
    max-width: 470px;

    margin: 0;

    color: rgba(255,255,255,.68);

    font-size: 13px;
    line-height: 1.75;
}


/* ============================================================
   08. FUTURE
============================================================ */

.vision-mission-page .vm-future-section {
    padding: 0 0 110px;

    background: #ffffff;
}

.vision-mission-page .vm-future-content {
    padding: 85px 50px;

    background: #f5f5f5;

    text-align: center;
}

.vision-mission-page .vm-future-content > span {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vision-mission-page .vm-future-content h2 {
    max-width: 850px;

    margin: 0 auto 22px;

    color: #171717;

    font-size: 48px;
    line-height: 1.15;
    font-weight: 600;
}

.vision-mission-page .vm-future-content h2 strong {
    display: block;

    color: #e31e24;

    font-weight: 700;
}

.vision-mission-page .vm-future-content p {
    max-width: 680px;

    margin: 0 auto 28px;

    color: #777777;

    font-size: 14px;
    line-height: 1.8;
}

.vision-mission-page .vm-future-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 24px;

    background: #171717;

    color: #ffffff;
    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: all .3s ease;
}

.vision-mission-page .vm-future-btn:hover {
    background: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .vision-mission-page .vm-hero,
    .vision-mission-page .vm-hero-row {
        min-height: 580px;
    }

    .vision-mission-page .vm-hero-content h1 {
        font-size: 49px;
    }

    .vision-mission-page .vm-purpose-section,
    .vision-mission-page .vm-mission-section,
    .vision-mission-page .vm-principles-section,
    .vision-mission-page .vm-product-purpose {
        padding: 75px 0;
    }

    .vision-mission-page .vm-purpose-heading,
    .vision-mission-page .vm-main-heading,
    .vision-mission-page .vm-mission-content h2 {
        font-size: 38px;
    }

    .vision-mission-page .vm-purpose-content {
        padding-left: 0;

        border-left: 0;
    }

    .vision-mission-page .vm-vision-content {
        min-height: auto;

        padding: 60px 40px;
    }

    .vision-mission-page .vm-vision-content h2 {
        font-size: 38px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .vision-mission-page .vm-hero,
    .vision-mission-page .vm-hero-row {
        min-height: 540px;
    }

    .vision-mission-page .vm-hero-bg {
        background-position: 68% center;
    }

    .vision-mission-page .vm-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(7,7,7,.94),
            rgba(7,7,7,.62)
        );
    }

    .vision-mission-page .vm-hero-content h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .vision-mission-page .vm-hero-content p {
        font-size: 14px;
    }

    .vision-mission-page .vm-hero-mark {
        right: 10px;

        font-size: 90px;
    }

    .vision-mission-page .vm-purpose-section,
    .vision-mission-page .vm-mission-section,
    .vision-mission-page .vm-principles-section,
    .vision-mission-page .vm-product-purpose {
        padding: 60px 0;
    }

    .vision-mission-page .vm-purpose-heading,
    .vision-mission-page .vm-main-heading,
    .vision-mission-page .vm-mission-content h2 {
        font-size: 31px;
    }

    .vision-mission-page .vm-vision-image {
        min-height: 430px;
    }

    .vision-mission-page .vm-vision-content {
        padding: 50px 24px;
    }

    .vision-mission-page .vm-vision-content h2 {
        font-size: 31px;
    }

    .vision-mission-page .vm-mission-image {
        padding: 0 15px 15px 0;
    }

    .vision-mission-page .vm-mission-image > img {
        height: 430px;
    }

    .vision-mission-page .vm-mission-card {
        right: 0;
        bottom: 35px;

        width: 200px;

        padding: 18px;
    }

    .vision-mission-page .vm-product-block {
        min-height: 340px;

        padding: 40px 25px;
    }

    .vision-mission-page .vm-future-section {
        padding-bottom: 60px;
    }

    .vision-mission-page .vm-future-content {
        padding: 55px 22px;
    }

    .vision-mission-page .vm-future-content h2 {
        font-size: 34px;
    }
}
































/* ============================================================
   JEEVAN SMART LIFE - DIRECTOR MESSAGE PAGE
============================================================ */

.director-message-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.director-message-page *,
.director-message-page *::before,
.director-message-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.director-message-page .director-hero {
    position: relative;
    min-height: 620px;
    overflow: hidden;
    background: #111111;
}

.director-message-page .director-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background-image:
        url("../images/director-hero.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
}

.director-message-page .director-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(7,7,7,.98) 0%,
        rgba(7,7,7,.94) 32%,
        rgba(7,7,7,.78) 50%,
        rgba(7,7,7,.40) 74%,
        rgba(7,7,7,.12) 100%
    );
}

.director-message-page .director-hero .container {
    position: relative;
    z-index: 5;
}

.director-message-page .director-hero-row {
    min-height: 620px;
}

.director-message-page .director-hero-content {
    max-width: 740px;
}

.director-message-page .director-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 23px;

    color: rgba(255,255,255,.70);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.director-message-page .director-kicker > span {
    width: 38px;
    height: 2px;
    background: #e31e24;
}

.director-message-page .director-hero-content h1 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: 62px;
    line-height: 1.06;
    font-weight: 700;

    letter-spacing: -2px;
}

.director-message-page .director-hero-content h1 strong {
    display: block;
    color: #e31e24;
}

.director-message-page .director-hero-content p {
    max-width: 620px;

    margin-bottom: 32px;

    color: rgba(255,255,255,.70);

    font-size: 16px;
    line-height: 1.8;
}

.director-message-page .director-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 24px;

    background: #e31e24;
    border: 1px solid #e31e24;

    color: #ffffff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: .3s ease;
}

.director-message-page .director-primary-btn:hover {
    background: #ffffff;
    border-color: #ffffff;
    color: #111111;

    transform: translateY(-3px);
}

.director-message-page .director-hero-mark {
    position: absolute;

    right: 20px;
    bottom: -40px;

    z-index: 3;

    color: rgba(255,255,255,.04);

    font-size: 180px;
    line-height: 1;
    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   COMMON
============================================================ */

.director-message-page .director-section-label {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.director-message-page .director-main-heading {
    margin: 0;

    color: #171717;

    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
}

.director-message-page .director-main-heading span {
    color: #e31e24;
}

.director-message-page .director-section-intro {
    margin: 0;

    color: #777777;

    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   02. DIRECTOR MESSAGE
============================================================ */

.director-message-page .director-message-section {
    padding: 110px 0;

    background: #ffffff;
}


/* Image */

.director-message-page .director-image-wrap {
    position: relative;

    padding: 0 32px 35px 0;
}

.director-message-page .director-image-wrap > img {
    position: relative;

    z-index: 3;

    display: block;

    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center top;
}

.director-message-page .director-red-shape {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 82%;
    height: 82%;

    background: #e31e24;

    z-index: 1;
}

.director-message-page .director-name-card {
    position: absolute;

    left: 35px;
    right: 0;
    bottom: -20px;

    z-index: 5;

    max-width: 300px;

    padding: 24px 28px;

    background: #171717;

    box-shadow: 0 18px 45px rgba(0,0,0,.18);
}

.director-message-page .director-name-card span {
    display: block;

    margin-bottom: 7px;

    color: #e31e24;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.director-message-page .director-name-card h4 {
    margin: 0 0 5px;

    color: #ffffff;

    font-size: 19px;
    font-weight: 600;
}

.director-message-page .director-name-card p {
    margin: 0;

    color: rgba(255,255,255,.58);

    font-size: 11px;
}


/* Message Content */

.director-message-page .director-content {
    padding-left: 30px;
}

.director-message-page .director-content h2 {
    max-width: 650px;

    margin: 0 0 23px;

    color: #171717;

    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
}

.director-message-page .director-content h2 span {
    color: #e31e24;
}

.director-message-page .director-quote-icon {
    color: #e31e24;

    font-size: 40px;

    line-height: 1;
}

.director-message-page .director-content p {
    color: #6d6d6d;

    font-size: 14px;
    line-height: 1.85;
}

.director-message-page .director-content .director-lead {
    margin-top: 5px;

    color: #333333;

    font-size: 17px;
    line-height: 1.8;
}


/* Signature */

.director-message-page .director-signature {
    margin-top: 32px;

    padding-top: 23px;

    border-top: 1px solid #eeeeee;
}

.director-message-page .director-signature > span {
    display: block;

    margin-bottom: 6px;

    color: #777;

    font-size: 12px;
}

/* .director-message-page .director-signature h4 {
    margin: 0 0 4px;

    color: #171717;

    font-size: 21px;
    font-weight: 600;
    font-family: "Caveat", cursive;
    transform: rotate(-45deg);
} */



 .director-message-page .director-signature h4 {
    margin: 5px 0 6px;

    color: #171717;

    font-family: "Caveat", cursive;
    font-size: 32px;
    font-weight: 600;
    line-height: 1;

    display: inline-block;

    transform: rotate(-4deg);
    transform-origin: left center;

    letter-spacing: 0.5px;
}



.director-message-page .director-signature p {
    margin: 0;

    color: #e31e24;

    font-size: 11px;
    font-weight: 600;
}


/* ============================================================
   03. LEADERSHIP BELIEF
============================================================ */

.director-message-page .director-belief-section {
    padding: 100px 0;

    background: #171717;
}

.director-message-page .director-belief-inner {
    max-width: 950px;

    margin: auto;

    text-align: center;
}

.director-message-page .director-belief-label {
    display: block;

    margin-bottom: 20px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.director-message-page .director-belief-inner h2 {
    margin: 0;

    color: #ffffff;

    font-size: 42px;
    line-height: 1.35;
    font-weight: 400;
}

.director-message-page .director-belief-inner h2 strong {
    color: #e31e24;

    font-weight: 600;
}


/* ============================================================
   04. PRINCIPLES
============================================================ */

.director-message-page .director-principles-section {
    padding: 110px 0;

    background: #f7f7f7;
}

.director-message-page .director-principle-card {
    position: relative;

    height: 100%;
    min-height: 285px;

    padding: 30px 25px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e9e9e9;

    transition: .35s ease;
}

.director-message-page .director-card-number {
    position: absolute;

    top: 5px;
    right: 15px;

    color: #f0f0f0;

    font-size: 58px;
    line-height: 1;

    font-weight: 800;
}

.director-message-page .director-card-icon {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    margin-bottom: 38px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 21px;
}

.director-message-page .director-principle-card h4 {
    position: relative;

    z-index: 2;

    margin-bottom: 12px;

    color: #202020;

    font-size: 17px;

    font-weight: 600;
}

.director-message-page .director-principle-card p {
    position: relative;

    z-index: 2;

    margin: 0;

    color: #777777;

    font-size: 12px;

    line-height: 1.7;
}

.director-message-page .director-principle-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-7px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10);
}

.director-message-page .director-principle-card:hover h4 {
    color: #ffffff;
}

.director-message-page .director-principle-card:hover p {
    color: rgba(255,255,255,.65);
}

.director-message-page .director-principle-card:hover .director-card-number {
    color: rgba(255,255,255,.05);
}


/* ============================================================
   05. CLOSING
============================================================ */

.director-message-page .director-closing-section {
    padding: 110px 0;

    background: #ffffff;
}

.director-message-page .director-closing-inner {
    padding: 85px 50px;

    background: #e31e24;

    text-align: center;
}

.director-message-page .director-closing-inner > span {
    display: block;

    margin-bottom: 17px;

    color: rgba(255,255,255,.72);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 2px;
}

.director-message-page .director-closing-inner h2 {
    max-width: 900px;

    margin: 0 auto 22px;

    color: #ffffff;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 600;
}

.director-message-page .director-closing-inner h2 strong {
    display: block;

    color: #ffffff;

    font-weight: 700;
}

.director-message-page .director-closing-inner p {
    max-width: 670px;

    margin: 0 auto 28px;

    color: rgba(255,255,255,.72);

    font-size: 14px;

    line-height: 1.8;
}

.director-message-page .director-closing-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    background: #ffffff;

    color: #171717;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}

.director-message-page .director-closing-btn:hover {
    background: #171717;

    color: #ffffff;

    transform: translateY(-3px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .director-message-page .director-hero,
    .director-message-page .director-hero-row {
        min-height: 580px;
    }

    .director-message-page .director-hero-content h1 {
        font-size: 49px;
    }

    .director-message-page .director-message-section,
    .director-message-page .director-principles-section,
    .director-message-page .director-closing-section {
        padding: 75px 0;
    }

    .director-message-page .director-content {
        padding-left: 0;

        margin-top: 35px;
    }

    .director-message-page .director-content h2,
    .director-message-page .director-main-heading {
        font-size: 38px;
    }

    .director-message-page .director-image-wrap {
        max-width: 580px;

        margin: auto;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .director-message-page .director-hero,
    .director-message-page .director-hero-row {
        min-height: 540px;
    }

    .director-message-page .director-hero-bg {
        background-position: 70% center;
    }

    .director-message-page .director-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(7,7,7,.94),
            rgba(7,7,7,.64)
        );
    }

    .director-message-page .director-hero-content h1 {
        font-size: 38px;

        letter-spacing: -1px;
    }

    .director-message-page .director-hero-content p {
        font-size: 14px;
    }

    .director-message-page .director-hero-mark {
        font-size: 90px;
    }

    .director-message-page .director-message-section,
    .director-message-page .director-principles-section,
    .director-message-page .director-closing-section {
        padding: 60px 0;
    }

    .director-message-page .director-image-wrap {
        padding: 0 15px 35px 0;
    }

    .director-message-page .director-image-wrap > img {
        height: 500px;
    }

    .director-message-page .director-name-card {
        left: 15px;

        padding: 20px;

        max-width: 250px;
    }

    .director-message-page .director-content h2,
    .director-message-page .director-main-heading {
        font-size: 31px;
    }

    .director-message-page .director-belief-section {
        padding: 70px 0;
    }

    .director-message-page .director-belief-inner h2 {
        font-size: 30px;
    }

    .director-message-page .director-closing-inner {
        padding: 55px 22px;
    }

    .director-message-page .director-closing-inner h2 {
        font-size: 33px;
    }
}




















/* ============================================================
   JEEVAN SMART LIFE - CAREER PAGE
============================================================ */

.career-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.career-page *,
.career-page *::before,
.career-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.career-page .career-hero {
    position: relative;

    min-height: 620px;

    overflow: hidden;

    background: #111111;
}

.career-page .career-hero-bg {
    position: absolute;

    inset: 0;

    background-image:
        url("../images/career-hero.png");

    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;

    z-index: 1;
}

.career-page .career-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(7,7,7,.98) 0%,
        rgba(7,7,7,.94) 32%,
        rgba(7,7,7,.78) 50%,
        rgba(7,7,7,.38) 75%,
        rgba(7,7,7,.10) 100%
    );
}

.career-page .career-hero .container {
    position: relative;

    z-index: 5;
}

.career-page .career-hero-row {
    min-height: 620px;
}

.career-page .career-hero-content {
    max-width: 760px;
}

.career-page .career-kicker {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;

    color: rgba(255,255,255,.72);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.career-page .career-kicker > span {
    width: 38px;

    height: 2px;

    background: #e31e24;
}

.career-page .career-hero-content h1 {
    margin: 0 0 25px;

    color: #ffffff;

    font-size: 62px;
    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -2px;
}

.career-page .career-hero-content h1 strong {
    display: block;

    color: #e31e24;
}

.career-page .career-hero-content p {
    max-width: 620px;

    margin-bottom: 32px;

    color: rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.8;
}

.career-page .career-primary-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    background: #e31e24;

    border: 1px solid #e31e24;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: .3s ease;
}

.career-page .career-primary-btn:hover {
    background: #ffffff;

    border-color: #ffffff;

    color: #111111;

    transform: translateY(-3px);
}

.career-page .career-hero-mark {
    position: absolute;

    right: 20px;

    bottom: -35px;

    z-index: 3;

    color: rgba(255,255,255,.035);

    font-size: 135px;

    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   02. COMMON
============================================================ */

.career-page .career-section-label {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}


/* ============================================================
   03. INTRO
============================================================ */

.career-page .career-intro-section {
    padding: 100px 0;

    background: #ffffff;
}

.career-page .career-intro-section h2 {
    margin: 0;

    color: #171717;

    font-size: 46px;

    line-height: 1.15;

    font-weight: 700;
}

.career-page .career-intro-section h2 span {
    display: block;

    color: #e31e24;
}

.career-page .career-intro-content {
    padding-left: 40px;

    border-left: 1px solid #e4e4e4;
}

.career-page .career-intro-content p {
    color: #6e6e6e;

    font-size: 14px;

    line-height: 1.8;
}

.career-page .career-intro-content .career-lead {
    color: #333333;

    font-size: 17px;
}


/* ============================================================
   04. BENEFITS
============================================================ */

.career-page .career-benefits-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.career-page .career-heading-center {
    max-width: 760px;

    margin: auto;
}

.career-page .career-heading-center h2 {
    margin: 0;

    color: #171717;

    font-size: 44px;

    font-weight: 700;
}

.career-page .career-heading-center h2 span {
    color: #e31e24;
}

.career-page .career-benefit-card {
    position: relative;

    height: 100%;

    min-height: 270px;

    padding: 30px 25px;

    background: #ffffff;

    border: 1px solid #e9e9e9;

    overflow: hidden;

    transition: .35s ease;
}

.career-page .career-benefit-card > span {
    position: absolute;

    right: 15px;

    top: 4px;

    color: #f0f0f0;

    font-size: 58px;

    font-weight: 800;
}

.career-page .career-benefit-icon {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 54px;

    height: 54px;

    margin-bottom: 35px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 22px;
}

.career-page .career-benefit-card h4 {
    position: relative;

    z-index: 2;

    color: #202020;

    font-size: 17px;

    font-weight: 600;
}

.career-page .career-benefit-card p {
    position: relative;

    z-index: 2;

    color: #777777;

    font-size: 12px;

    line-height: 1.7;
}

.career-page .career-benefit-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-7px);
}

.career-page .career-benefit-card:hover h4 {
    color: #ffffff;
}

.career-page .career-benefit-card:hover p {
    color: rgba(255,255,255,.65);
}


/* ============================================================
   05. APPLICATION
============================================================ */

.career-page .career-application-section {
    padding: 110px 0;

    background: #ffffff;
}

.career-page .career-application-info {
    position: sticky;

    top: 150px;
}

.career-page .career-application-info h2 {
    margin-bottom: 22px;

    color: #171717;

    font-size: 44px;

    line-height: 1.15;

    font-weight: 700;
}

.career-page .career-application-info h2 span {
    display: block;

    color: #e31e24;
}

.career-page .career-application-info > p {
    margin-bottom: 35px;

    color: #717171;

    font-size: 14px;

    line-height: 1.8;
}


/* Info Items */

.career-page .career-info-item {
    display: flex;

    align-items: flex-start;

    gap: 15px;

    padding: 20px 0;

    border-top: 1px solid #eeeeee;
}

.career-page .career-info-icon {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 45px;

    height: 45px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 19px;
}

.career-page .career-info-item strong {
    display: block;

    margin-bottom: 4px;

    color: #222222;

    font-size: 14px;
}

.career-page .career-info-item span {
    display: block;

    color: #888888;

    font-size: 11px;

    line-height: 1.6;
}


/* ============================================================
   FORM
============================================================ */

.career-page .career-form-wrapper {
    padding: 45px;

    background: #f7f7f7;

    border-top: 4px solid #e31e24;
}

.career-page .career-form-heading {
    margin-bottom: 35px;
}

.career-page .career-form-heading > span {
    display: block;

    margin-bottom: 8px;

    color: #e31e24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}

.career-page .career-form-heading h3 {
    margin: 0;

    color: #171717;

    font-size: 30px;

    font-weight: 700;
}

.career-page .career-form-label {
    margin-bottom: 8px;

    color: #333333;

    font-size: 12px;

    font-weight: 600;
}

.career-page .career-form-label span {
    color: #e31e24;
}

.career-page .career-form-control {
    min-height: 52px;

    padding: 12px 15px;

    background: #ffffff;

    border: 1px solid #dddddd;

    border-radius: 0;

    color: #333333;

    font-size: 13px;

    box-shadow: none !important;
}

.career-page textarea.career-form-control {
    min-height: 130px;

    resize: vertical;
}

.career-page .career-form-control:focus {
    border-color: #e31e24;
}


/* ============================================================
   FILE UPLOAD
============================================================ */

.career-page .career-file-upload {
    position: relative;
}

.career-page .career-file-upload input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}

.career-page .career-file-upload label {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 25px;

    cursor: pointer;

    text-align: center;

    background: #ffffff;

    border: 1px dashed #cccccc;

    transition: .3s ease;
}

.career-page .career-file-upload label:hover {
    border-color: #e31e24;

    background: #fffafa;
}

.career-page .career-file-upload i {
    margin-bottom: 10px;

    color: #e31e24;

    font-size: 32px;
}

.career-page .career-file-upload strong {
    margin-bottom: 6px;

    color: #222222;

    font-size: 14px;
}

.career-page .career-file-upload span {
    color: #888888;

    font-size: 11px;
}

.career-page .career-file-note {
    display: block;

    margin-top: 7px;

    color: #888888;

    font-size: 10px;
}


/* Consent */

.career-page .career-check {
    font-size: 11px;

    color: #666666;
}

.career-page .career-check .form-check-input:checked {
    background-color: #e31e24;

    border-color: #e31e24;
}


/* Button */

.career-page .career-submit-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 15px 28px;

    background: #171717;

    border: 0;

    color: #ffffff;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}

.career-page .career-submit-btn:hover {
    background: #e31e24;

    transform: translateY(-3px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .career-page .career-hero,
    .career-page .career-hero-row {
        min-height: 570px;
    }

    .career-page .career-hero-content h1 {
        font-size: 49px;
    }

    .career-page .career-intro-section,
    .career-page .career-benefits-section,
    .career-page .career-application-section {
        padding: 75px 0;
    }

    .career-page .career-intro-content {
        padding-left: 0;

        border-left: 0;
    }

    .career-page .career-application-info {
        position: static;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .career-page .career-hero,
    .career-page .career-hero-row {
        min-height: 520px;
    }

    .career-page .career-hero-bg {
        background-position: 68% center;
    }

    .career-page .career-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(7,7,7,.94),
            rgba(7,7,7,.62)
        );
    }

    .career-page .career-hero-content h1 {
        font-size: 37px;

        letter-spacing: -1px;
    }

    .career-page .career-hero-content p {
        font-size: 14px;
    }

    .career-page .career-hero-mark {
        font-size: 70px;
    }

    .career-page .career-intro-section,
    .career-page .career-benefits-section,
    .career-page .career-application-section {
        padding: 60px 0;
    }

    .career-page .career-intro-section h2,
    .career-page .career-heading-center h2,
    .career-page .career-application-info h2 {
        font-size: 31px;
    }

    .career-page .career-form-wrapper {
        padding: 30px 20px;
    }

    .career-page .career-form-heading h3 {
        font-size: 25px;
    }

    .career-page .career-submit-btn {
        width: 100%;
    }
}































/* ============================================================
   JEEVAN SMART LIFE - CONTACT PAGE
============================================================ */

.contact-page {
    width: 100%;
    overflow-x: hidden;
    background: #fff;
}

.contact-page *,
.contact-page *::before,
.contact-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.contact-page .contact-hero {
    position: relative;
    min-height: 600px;
    overflow: hidden;
    background: #111;
}

.contact-page .contact-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        url("../images/contact-hero.png")
        center right / cover no-repeat;
}

.contact-page .contact-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(7,7,7,.98) 0%,
        rgba(7,7,7,.94) 32%,
        rgba(7,7,7,.78) 52%,
        rgba(7,7,7,.38) 76%,
        rgba(7,7,7,.10) 100%
    );
}

.contact-page .contact-hero .container {
    position: relative;
    z-index: 5;
}

.contact-page .contact-hero-row {
    min-height: 600px;
}

.contact-page .contact-hero-content {
    max-width: 740px;
}

.contact-page .contact-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 23px;

    color: rgba(255,255,255,.72);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-page .contact-kicker > span {
    width: 38px;
    height: 2px;

    background: #e31e24;
}

.contact-page .contact-hero-content h1 {
    margin: 0 0 24px;

    color: #fff;

    font-size: 60px;
    line-height: 1.06;

    font-weight: 700;

    letter-spacing: -2px;
}

.contact-page .contact-hero-content h1 strong {
    display: block;

    color: #e31e24;
}

.contact-page .contact-hero-content p {
    max-width: 620px;

    margin-bottom: 30px;

    color: rgba(255,255,255,.72);

    font-size: 16px;
    line-height: 1.8;
}

.contact-page .contact-primary-btn,
.contact-page .contact-submit-btn,
.contact-page .contact-final-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    border: 0;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.contact-page .contact-primary-btn {
    background: #e31e24;
    color: #fff;
}

.contact-page .contact-primary-btn:hover {
    background: #fff;
    color: #171717;

    transform: translateY(-3px);
}

.contact-page .contact-hero-mark {
    position: absolute;

    right: 20px;
    bottom: -35px;

    z-index: 3;

    color: rgba(255,255,255,.035);

    font-size: 125px;
    font-weight: 800;

    pointer-events: none;
}


/* ============================================================
   COMMON
============================================================ */

.contact-page .contact-section-label {
    display: block;

    margin-bottom: 16px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-page .contact-main-heading {
    margin: 0;

    color: #171717;

    font-size: 45px;
    line-height: 1.15;

    font-weight: 700;
}

.contact-page .contact-main-heading span {
    color: #e31e24;
}

.contact-page .contact-section-intro {
    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   02. INFO CARDS
============================================================ */

.contact-page .contact-info-section {
    padding: 100px 0;

    background: #fff;
}

.contact-page .contact-info-card {
    height: 100%;
    min-height: 255px;

    padding: 30px 25px;

    background: #f7f7f7;

    border: 1px solid #ececec;

    transition: .35s ease;
}

.contact-page .contact-info-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-6px);
}

.contact-page .contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    margin-bottom: 28px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 21px;
}

.contact-page .contact-info-card > span {
    display: block;

    margin-bottom: 7px;

    color: #e31e24;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-page .contact-info-card h4 {
    margin-bottom: 10px;

    color: #202020;

    font-size: 16px;
    font-weight: 600;

    word-break: break-word;
}

.contact-page .contact-info-card p {
    margin: 0;

    color: #777;

    font-size: 12px;
    line-height: 1.7;
}

.contact-page .contact-info-card:hover h4 {
    color: #fff;
}

.contact-page .contact-info-card:hover p {
    color: rgba(255,255,255,.65);
}


/* ============================================================
   03. CONTACT FORM SECTION
============================================================ */

.contact-page .contact-form-section {
    padding: 110px 0;

    background: #f7f7f7;
}

.contact-page .contact-form-info {
    position: sticky;
    top: 150px;
}

.contact-page .contact-form-info h2 {
    margin-bottom: 22px;

    color: #171717;

    font-size: 44px;
    line-height: 1.15;

    font-weight: 700;
}

.contact-page .contact-form-info h2 span {
    display: block;

    color: #e31e24;
}

.contact-page .contact-form-info > p {
    margin-bottom: 32px;

    color: #6f6f6f;

    font-size: 14px;
    line-height: 1.8;
}

.contact-page .contact-support-item {
    display: flex;
    align-items: flex-start;

    gap: 15px;

    padding: 18px 0;

    border-top: 1px solid #ddd;
}

.contact-page .contact-support-item > i {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 45px;
    height: 45px;

    background: #fff0f0;

    color: #e31e24;

    font-size: 18px;
}

.contact-page .contact-support-item strong {
    display: block;

    margin-bottom: 4px;

    color: #222;

    font-size: 14px;
}

.contact-page .contact-support-item span {
    display: block;

    color: #888;

    font-size: 11px;
    line-height: 1.6;
}


/* Form */

.contact-page .contact-form-wrapper {
    padding: 45px;

    background: #fff;

    border-top: 4px solid #e31e24;

    box-shadow: 0 15px 45px rgba(0,0,0,.05);
}

.contact-page .contact-form-heading {
    margin-bottom: 35px;
}

.contact-page .contact-form-heading > span {
    display: block;

    margin-bottom: 8px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-page .contact-form-heading h3 {
    margin: 0;

    color: #171717;

    font-size: 29px;
    font-weight: 700;
}

.contact-page .contact-form-label {
    margin-bottom: 8px;

    color: #333;

    font-size: 12px;
    font-weight: 600;
}

.contact-page .contact-form-label span {
    color: #e31e24;
}

.contact-page .contact-form-control {
    min-height: 52px;

    padding: 12px 15px;

    background: #f9f9f9;

    border: 1px solid #ddd;

    border-radius: 0;

    box-shadow: none !important;

    font-size: 13px;
}

.contact-page textarea.contact-form-control {
    min-height: 145px;

    resize: vertical;
}

.contact-page .contact-form-control:focus {
    border-color: #e31e24;

    background: #fff;
}

.contact-page .contact-check {
    color: #666;

    font-size: 11px;
}

.contact-page .contact-check .form-check-input:checked {
    background-color: #e31e24;

    border-color: #e31e24;
}

.contact-page .contact-submit-btn {
    background: #171717;

    color: #fff;
}

.contact-page .contact-submit-btn:hover {
    background: #e31e24;

    color: #fff;

    transform: translateY(-3px);
}


/* ============================================================
   04. LOCATION
============================================================ */

.contact-page .contact-location-section {
    padding: 110px 0;

    background: #fff;
}

.contact-page .contact-location-wrapper {
    overflow: hidden;

    box-shadow: 0 20px 55px rgba(0,0,0,.08);
}

.contact-page .contact-location-content {
    height: 100%;

    padding: 55px 45px;

    background: #171717;
}

.contact-page .contact-location-content > span {
    display: block;

    margin-bottom: 15px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-page .contact-location-content h2 {
    margin-bottom: 20px;

    color: #fff;

    font-size: 39px;
    line-height: 1.15;
}

.contact-page .contact-location-content h2 strong {
    display: block;

    color: #e31e24;
}

.contact-page .contact-location-content > p {
    margin-bottom: 30px;

    color: rgba(255,255,255,.65);

    font-size: 13px;
    line-height: 1.75;
}

.contact-page .location-detail {
    display: flex;
    align-items: flex-start;

    gap: 14px;

    padding: 17px 0;

    border-top: 1px solid rgba(255,255,255,.10);
}

.contact-page .location-detail > i {
    color: #e31e24;

    font-size: 19px;
}

.contact-page .location-detail strong {
    display: block;

    margin-bottom: 4px;

    color: #fff;

    font-size: 13px;
}

.contact-page .location-detail span {
    display: block;

    color: rgba(255,255,255,.58);

    font-size: 11px;
    line-height: 1.6;
}

.contact-page .contact-map {
    width: 100%;
    height: 100%;
    min-height: 520px;
}

.contact-page .contact-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    min-height: 520px;
}


/* ============================================================
   05. FINAL CTA
============================================================ */

.contact-page .contact-final-section {
    padding: 0 0 110px;

    background: #fff;
}

.contact-page .contact-final-inner {
    padding: 80px 45px;

    background: #e31e24;

    text-align: center;
}

.contact-page .contact-final-inner > span {
    display: block;

    margin-bottom: 16px;

    color: rgba(255,255,255,.72);

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.contact-page .contact-final-inner h2 {
    max-width: 850px;

    margin: 0 auto 20px;

    color: #fff;

    font-size: 46px;
    line-height: 1.15;

    font-weight: 600;
}

.contact-page .contact-final-inner h2 strong {
    display: block;

    color: #fff;

    font-weight: 700;
}

.contact-page .contact-final-inner p {
    max-width: 680px;

    margin: 0 auto 28px;

    color: rgba(255,255,255,.74);

    font-size: 14px;
    line-height: 1.8;
}

.contact-page .contact-final-btn {
    background: #fff;

    color: #171717;
}

.contact-page .contact-final-btn:hover {
    background: #171717;

    color: #fff;

    transform: translateY(-3px);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .contact-page .contact-hero,
    .contact-page .contact-hero-row {
        min-height: 560px;
    }

    .contact-page .contact-hero-content h1 {
        font-size: 48px;
    }

    .contact-page .contact-info-section,
    .contact-page .contact-form-section,
    .contact-page .contact-location-section {
        padding: 75px 0;
    }

    .contact-page .contact-form-info {
        position: static;
    }

    .contact-page .contact-main-heading,
    .contact-page .contact-form-info h2 {
        font-size: 37px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .contact-page .contact-hero,
    .contact-page .contact-hero-row {
        min-height: 520px;
    }

    .contact-page .contact-hero-bg {
        background-position: 70% center;
    }

    .contact-page .contact-hero-overlay {
        background: linear-gradient(
            90deg,
            rgba(7,7,7,.95),
            rgba(7,7,7,.64)
        );
    }

    .contact-page .contact-hero-content h1 {
        font-size: 37px;

        letter-spacing: -1px;
    }

    .contact-page .contact-hero-content p {
        font-size: 14px;
    }

    .contact-page .contact-hero-mark {
        font-size: 65px;
    }

    .contact-page .contact-info-section,
    .contact-page .contact-form-section,
    .contact-page .contact-location-section {
        padding: 60px 0;
    }

    .contact-page .contact-main-heading,
    .contact-page .contact-form-info h2 {
        font-size: 31px;
    }

    .contact-page .contact-form-wrapper {
        padding: 30px 20px;
    }

    .contact-page .contact-location-content {
        padding: 40px 25px;
    }

    .contact-page .contact-location-content h2 {
        font-size: 31px;
    }

    .contact-page .contact-map,
    .contact-page .contact-map iframe {
        min-height: 380px;
    }

    .contact-page .contact-final-section {
        padding-bottom: 60px;
    }

    .contact-page .contact-final-inner {
        padding: 55px 22px;
    }

    .contact-page .contact-final-inner h2 {
        font-size: 33px;
    }

    .contact-page .contact-submit-btn {
        width: 100%;
    }
}












@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
        z-index: 9999;
        border: 1px solid lightgray;
    }
}


























































/* ============================================================
   JEEVAN SMART LIFE - LED BULBS PAGE
============================================================ */

.jsl-led-bulbs-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.jsl-led-bulbs-page *,
.jsl-led-bulbs-page *::before,
.jsl-led-bulbs-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.jsl-led-bulbs-page .led-hero {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #151515;
}

.jsl-led-bulbs-page .led-hero-bg {
    position: absolute;
    inset: 0;

    background:
        url("../images/led-hero-bg.png")
        center right / cover no-repeat;

    z-index: 1;
}

.jsl-led-bulbs-page .led-hero-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(
        90deg,
        rgba(9,9,9,.98),
        rgba(9,9,9,.87) 45%,
        rgba(9,9,9,.45) 72%,
        rgba(9,9,9,.18)
    );

    z-index: 2;
}

.jsl-led-bulbs-page .led-hero .container {
    position: relative;
    z-index: 5;
}

.jsl-led-bulbs-page .led-hero-row {
    min-height: 520px;
}


/* Breadcrumb */

.jsl-led-bulbs-page .led-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);

    font-size: 12px;
}

.jsl-led-bulbs-page .led-breadcrumb a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
}

.jsl-led-bulbs-page .led-breadcrumb strong {
    color: #ffffff;
}


/* Hero Heading */

.jsl-led-bulbs-page .led-hero-content h1 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 68px;
    line-height: 1;

    font-weight: 700;
}

.jsl-led-bulbs-page .led-hero-content h1 span {
    color: #e31e24;
}

.jsl-led-bulbs-page .led-hero-content h3 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 23px;
    font-weight: 500;
}

.jsl-led-bulbs-page .led-hero-content p {
    max-width: 570px;

    color: rgba(255,255,255,.72);

    font-size: 15px;
    line-height: 1.8;
}


/* Hero Product */

.jsl-led-bulbs-page .led-hero-product {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 420px;
}

.jsl-led-bulbs-page .led-hero-product img {
    max-width: 340px;
    width: 100%;

    filter: drop-shadow(0 22px 20px rgba(0,0,0,.35));

    transition: transform .4s ease;
}

.jsl-led-bulbs-page .led-hero-product img:hover {
    transform: translateY(-8px) scale(1.02);
}


/* Buttons */

.jsl-led-bulbs-page .led-primary-btn,
.jsl-led-bulbs-page .led-dark-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.jsl-led-bulbs-page .led-primary-btn {
    margin-top: 10px;

    background: #e31e24;

    color: #ffffff;
}

.jsl-led-bulbs-page .led-primary-btn:hover {
    background: #ffffff;

    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   02. OVERVIEW
============================================================ */

.jsl-led-bulbs-page .led-overview-section {
    padding: 100px 0 80px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8f8f8
        );
}

.jsl-led-bulbs-page .led-section-label,
.jsl-led-bulbs-page .led-small-label {
    display: block;

    margin-bottom: 10px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.8px;
}

.jsl-led-bulbs-page .led-overview-content h2 {
    margin-bottom: 24px;

    color: #171717;

    font-size: 43px;
    line-height: 1.1;

    font-weight: 700;
}

.jsl-led-bulbs-page .led-overview-content h2 span {
    color: #e31e24;
}


/* Feature List */

.jsl-led-bulbs-page .led-feature-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jsl-led-bulbs-page .led-feature-list li {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 14px;

    color: #444;

    font-size: 14px;
}

.jsl-led-bulbs-page .led-feature-list li i {
    color: #e31e24;
}


/* ============================================================
   COLOR OPTIONS
============================================================ */

.jsl-led-bulbs-page .led-color-section {
    margin-top: 40px;
}

.jsl-led-bulbs-page .led-color-group {
    display: flex;

    gap: 8px;

    margin-top: 15px;
}

.jsl-led-bulbs-page .led-color {
    display: block;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    border: 3px solid #ffffff;

    box-shadow:
        0 2px 10px rgba(0,0,0,.15);
}

.jsl-led-bulbs-page .led-color.blue {
    background: #1686dc;
}

.jsl-led-bulbs-page .led-color.yellow {
    background: #ffd900;
}

.jsl-led-bulbs-page .led-color.white {
    background: #eeeeee;
}

.jsl-led-bulbs-page .led-color.green {
    background: #17a772;
}

.jsl-led-bulbs-page .led-color.red {
    background: #df3939;
}


/* Product Display */

.jsl-led-bulbs-page .led-product-display {
    display: flex;

    align-items: flex-end;

    justify-content: center;

    gap: 30px;

    min-height: 380px;

    margin-top: 20px;
}

.jsl-led-bulbs-page .led-product-display img {
    object-fit: contain;

    filter:
        drop-shadow(0 15px 15px rgba(0,0,0,.12));
}

.jsl-led-bulbs-page .led-small-bulb {
    width: 120px;
}

.jsl-led-bulbs-page .led-large-bulb {
    width: 230px;
}


/* ============================================================
   TECH INFO
============================================================ */

.jsl-led-bulbs-page .led-tech-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 28px;
}

.jsl-led-bulbs-page .led-tech-item {
    display: flex;

    align-items: center;

    gap: 10px;
}

.jsl-led-bulbs-page .tech-circle {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 19px;
}

.jsl-led-bulbs-page .led-tech-item strong {
    display: block;

    color: #222;

    font-size: 10px;
}

.jsl-led-bulbs-page .led-tech-item span {
    display: block;

    color: #777;

    font-size: 9px;
}


/* ============================================================
   TABLE
============================================================ */

.jsl-led-bulbs-page .led-product-table-wrap {
    overflow-x: auto;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.jsl-led-bulbs-page .led-product-table {
    margin: 0;

    min-width: 620px;
}

.jsl-led-bulbs-page .led-product-table thead th {
    padding: 15px;

    background: #e31e24;

    border: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}

.jsl-led-bulbs-page .led-product-table thead th:first-child {
    text-align: left;
}

.jsl-led-bulbs-page .led-product-table tbody td {
    padding: 15px;

    border-color: #eeeeee;

    color: #424242;

    font-size: 13px;

    text-align: center;
}

.jsl-led-bulbs-page .led-product-table tbody td:first-child {
    text-align: left;

    font-weight: 500;
}

.jsl-led-bulbs-page .led-product-table tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.jsl-led-bulbs-page .led-product-table tbody tr:hover {
    background: #fff2f2;
}


/* ============================================================
   03. BENEFITS
============================================================ */

.jsl-led-bulbs-page .led-benefits-section {
    border-top: 1px solid #eeeeee;

    border-bottom: 1px solid #eeeeee;

    background: #ffffff;
}

.jsl-led-bulbs-page .led-benefit-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 25px 10px;

    text-align: center;

    border-right: 1px solid #404040;

    transition: .3s ease;
}

.jsl-led-bulbs-page .led-benefit-item i {
    margin-bottom: 12px;

    color: #515960;

    font-size: 31px;

    transition: .3s ease;
}

.jsl-led-bulbs-page .led-benefit-item span {
    color: #515960;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}

.jsl-led-bulbs-page .led-benefit-item:hover {
    background: #e31e24;
}

.jsl-led-bulbs-page .led-benefit-item:hover i,
.jsl-led-bulbs-page .led-benefit-item:hover span {
    color: #ffffff;
}


/* ============================================================
   04. LIFESTYLE
============================================================ */

.jsl-led-bulbs-page .led-lifestyle-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.jsl-led-bulbs-page .led-lifestyle-content h2 {
    max-width: 580px;

    margin-bottom: 22px;

    color: #171717;

    font-size: 46px;
    line-height: 1.12;

    font-weight: 700;
}

.jsl-led-bulbs-page .led-lifestyle-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-led-bulbs-page .led-lifestyle-content p {
    max-width: 590px;

    margin-bottom: 25px;

    color: #6f6f6f;

    font-size: 14px;

    line-height: 1.8;
}

.jsl-led-bulbs-page .led-dark-btn {
    background: #171717;

    color: #ffffff;
}

.jsl-led-bulbs-page .led-dark-btn:hover {
    background: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}

.jsl-led-bulbs-page .led-lifestyle-image {
    overflow: hidden;
}

.jsl-led-bulbs-page .led-lifestyle-image img {
    width: 100%;

    min-height: 420px;

    object-fit: cover;

    transition: transform .6s ease;
}

.jsl-led-bulbs-page .led-lifestyle-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   05. SUPPORT STRIP
============================================================ */

.jsl-led-bulbs-page .led-support-strip {
    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}

.jsl-led-bulbs-page .led-support-item {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 70px;

    border-right: 1px solid #e5e5e5;
}

.jsl-led-bulbs-page .led-support-item i {
    color: #171717;

    font-size: 29px;
}

.jsl-led-bulbs-page .led-support-item strong,
.jsl-led-bulbs-page .led-support-item span {
    display: block;
}

.jsl-led-bulbs-page .led-support-item strong {
    color: #222222;

    font-size: 12px;

    text-transform: uppercase;
}

.jsl-led-bulbs-page .led-support-item span {
    color: #777777;

    font-size: 10px;

    text-transform: uppercase;
}


/* ============================================================
   RESPONSIVE - TABLET
============================================================ */

@media (max-width: 991.98px) {

    .jsl-led-bulbs-page .led-hero-content h1 {
        font-size: 55px;
    }

    .jsl-led-bulbs-page .led-hero-product img {
        max-width: 260px;
    }

    .jsl-led-bulbs-page .led-overview-section,
    .jsl-led-bulbs-page .led-lifestyle-section {
        padding: 75px 0;
    }

    .jsl-led-bulbs-page .led-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jsl-led-bulbs-page .led-overview-content h2,
    .jsl-led-bulbs-page .led-lifestyle-content h2 {
        font-size: 38px;
    }
}


/* ============================================================
   RESPONSIVE - MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .jsl-led-bulbs-page .led-hero,
    .jsl-led-bulbs-page .led-hero-row {
        min-height: auto;
    }

    .jsl-led-bulbs-page .led-hero-row {
        padding: 80px 0 45px;
    }

    .jsl-led-bulbs-page .led-hero-content h1 {
        font-size: 46px;
    }

    .jsl-led-bulbs-page .led-hero-content h3 {
        font-size: 19px;
    }

    .jsl-led-bulbs-page .led-hero-product {
        min-height: auto;

        padding-top: 35px;
    }

    .jsl-led-bulbs-page .led-hero-product img {
        max-width: 220px;
    }

    .jsl-led-bulbs-page .led-overview-section,
    .jsl-led-bulbs-page .led-lifestyle-section {
        padding: 60px 0;
    }

    .jsl-led-bulbs-page .led-overview-content h2,
    .jsl-led-bulbs-page .led-lifestyle-content h2 {
        font-size: 31px;
    }

    .jsl-led-bulbs-page .led-product-display {
        min-height: 300px;

        gap: 15px;
    }

    .jsl-led-bulbs-page .led-small-bulb {
        width: 85px;
    }

    .jsl-led-bulbs-page .led-large-bulb {
        width: 175px;
    }

    .jsl-led-bulbs-page .led-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-led-bulbs-page .led-benefit-item {
        min-height: 125px;
    }

    .jsl-led-bulbs-page .led-lifestyle-image img {
        min-height: 320px;
    }

    .jsl-led-bulbs-page .led-support-item {
        justify-content: flex-start;

        padding: 15px 10px;

        border-bottom: 1px solid #eeeeee;
    }
}






















/* ============================================================
   JEEVAN SMART LIFE - LED TUBE LIGHT PAGE
============================================================ */

.jsl-tube-light-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}


/* ============================================================
   01. HERO
============================================================ */

.jsl-tube-light-page .tube-hero {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    background: #151515;
}

.jsl-tube-light-page .tube-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        url("../images/tube-light-hero-bg.png")
        center right / cover no-repeat;
}

.jsl-tube-light-page .tube-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(9,9,9,.98) 0%,
        rgba(9,9,9,.90) 42%,
        rgba(9,9,9,.50) 72%,
        rgba(9,9,9,.15) 100%
    );
}

.jsl-tube-light-page .tube-hero .container {
    position: relative;
    z-index: 5;
}

.jsl-tube-light-page .tube-hero-row {
    min-height: 520px;
}

.jsl-tube-light-page .tube-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.jsl-tube-light-page .tube-breadcrumb a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
}

.jsl-tube-light-page .tube-breadcrumb strong {
    color: #ffffff;
}

.jsl-tube-light-page .tube-hero-content h1 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 62px;
    line-height: 1.02;
    font-weight: 700;

    letter-spacing: -2px;
}

.jsl-tube-light-page .tube-hero-content h1 span {
    display: block;
    color: #e31e24;
}

.jsl-tube-light-page .tube-hero-content h3 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 23px;
    font-weight: 500;
}

.jsl-tube-light-page .tube-hero-content p {
    max-width: 570px;

    color: rgba(255,255,255,.72);

    font-size: 15px;
    line-height: 1.8;
}

.jsl-tube-light-page .tube-primary-btn,
.jsl-tube-light-page .tube-dark-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.jsl-tube-light-page .tube-primary-btn {
    margin-top: 10px;

    background: #e31e24;
    color: #ffffff;
}

.jsl-tube-light-page .tube-primary-btn:hover {
    background: #ffffff;
    color: #171717;

    transform: translateY(-3px);
}

.jsl-tube-light-page .tube-hero-product {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 420px;
}

.jsl-tube-light-page .tube-hero-product img {
    width: 100%;
    max-width: 470px;

    object-fit: contain;

    filter: drop-shadow(0 20px 20px rgba(0,0,0,.35));

    transition: .4s ease;
}

.jsl-tube-light-page .tube-hero-product img:hover {
    transform: translateY(-7px) scale(1.02);
}


/* ============================================================
   02. OVERVIEW
============================================================ */

.jsl-tube-light-page .tube-overview-section {
    padding: 100px 0 80px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8f8f8
        );
}

.jsl-tube-light-page .tube-section-label {
    display: block;

    margin-bottom: 10px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.jsl-tube-light-page .tube-overview-content h2 {
    margin-bottom: 24px;

    color: #171717;

    font-size: 43px;
    line-height: 1.1;
    font-weight: 700;
}

.jsl-tube-light-page .tube-overview-content h2 span {
    color: #e31e24;
}

.jsl-tube-light-page .tube-feature-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jsl-tube-light-page .tube-feature-list li {
    display: flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 14px;

    color: #444;

    font-size: 14px;
}

.jsl-tube-light-page .tube-feature-list li i {
    color: #e31e24;
}


/* Product Images */

.jsl-tube-light-page .tube-product-display {
    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 25px;

    min-height: 350px;

    margin-top: 35px;
}

.jsl-tube-light-page .tube-product-display img {
    width: 100%;

    object-fit: contain;

    filter: drop-shadow(0 12px 14px rgba(0,0,0,.12));
}

.jsl-tube-light-page .tube-small-product {
    max-width: 390px;
}

.jsl-tube-light-page .tube-large-product {
    max-width: 430px;
}


/* ============================================================
   TECH BADGES
============================================================ */

.jsl-tube-light-page .tube-tech-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 28px;
}

.jsl-tube-light-page .tube-tech-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.jsl-tube-light-page .tube-tech-circle {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 18px;
}

.jsl-tube-light-page .tube-tech-item strong {
    display: block;

    color: #222;

    font-size: 10px;
}

.jsl-tube-light-page .tube-tech-item span {
    display: block;

    color: #777;

    font-size: 9px;
}


/* ============================================================
   PRODUCT TABLE
============================================================ */

.jsl-tube-light-page .tube-product-table-wrap {
    overflow-x: auto;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.jsl-tube-light-page .tube-product-table {
    margin: 0;

    min-width: 760px;
}

.jsl-tube-light-page .tube-product-table thead th {
    padding: 15px 12px;

    background: #e31e24;

    border: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}

.jsl-tube-light-page .tube-product-table thead th:first-child {
    text-align: left;
}

.jsl-tube-light-page .tube-product-table tbody td {
    padding: 15px 12px;

    color: #424242;

    border-color: #eeeeee;

    font-size: 13px;

    text-align: center;
}

.jsl-tube-light-page .tube-product-table tbody td:first-child {
    text-align: left;

    font-weight: 500;
}

.jsl-tube-light-page .tube-product-table tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.jsl-tube-light-page .tube-product-table tbody tr:hover {
    background: #fff2f2;
}


/* ============================================================
   03. BENEFITS
============================================================ */

.jsl-tube-light-page .tube-benefits-section {
    background: #ffffff;

    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.jsl-tube-light-page .tube-benefit-item {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 25px 10px;

    text-align: center;

    border-right: 1px solid #eeeeee;

    transition: .3s ease;
}

.jsl-tube-light-page .tube-benefit-item i {
    margin-bottom: 12px;

    color: #171717;

    font-size: 31px;

    transition: .3s ease;
}

.jsl-tube-light-page .tube-benefit-item span {
    color: #333333;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}

.jsl-tube-light-page .tube-benefit-item:hover {
    background: #e31e24;
}

.jsl-tube-light-page .tube-benefit-item:hover i,
.jsl-tube-light-page .tube-benefit-item:hover span {
    color: #ffffff;
}


/* ============================================================
   04. LIFESTYLE
============================================================ */

.jsl-tube-light-page .tube-lifestyle-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.jsl-tube-light-page .tube-lifestyle-content h2 {
    max-width: 580px;

    margin-bottom: 22px;

    color: #171717;

    font-size: 46px;
    line-height: 1.12;

    font-weight: 700;
}

.jsl-tube-light-page .tube-lifestyle-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-tube-light-page .tube-lifestyle-content p {
    max-width: 590px;

    margin-bottom: 25px;

    color: #6f6f6f;

    font-size: 14px;
    line-height: 1.8;
}

.jsl-tube-light-page .tube-dark-btn {
    background: #171717;
    color: #ffffff;
}

.jsl-tube-light-page .tube-dark-btn:hover {
    background: #e31e24;
    color: #ffffff;

    transform: translateY(-3px);
}

.jsl-tube-light-page .tube-lifestyle-image {
    overflow: hidden;
}

.jsl-tube-light-page .tube-lifestyle-image img {
    width: 100%;
    min-height: 420px;

    object-fit: cover;

    transition: .6s ease;
}

.jsl-tube-light-page .tube-lifestyle-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   05. SUPPORT STRIP
============================================================ */

.jsl-tube-light-page .tube-support-strip {
    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}

.jsl-tube-light-page .tube-support-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 70px;

    border-right: 1px solid #e5e5e5;
}

.jsl-tube-light-page .tube-support-item i {
    color: #171717;

    font-size: 29px;
}

.jsl-tube-light-page .tube-support-item strong,
.jsl-tube-light-page .tube-support-item span {
    display: block;
}

.jsl-tube-light-page .tube-support-item strong {
    color: #222222;

    font-size: 12px;

    text-transform: uppercase;
}

.jsl-tube-light-page .tube-support-item span {
    color: #777777;

    font-size: 10px;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .jsl-tube-light-page .tube-hero-content h1 {
        font-size: 52px;
    }

    .jsl-tube-light-page .tube-hero-product img {
        max-width: 390px;
    }

    .jsl-tube-light-page .tube-overview-section,
    .jsl-tube-light-page .tube-lifestyle-section {
        padding: 75px 0;
    }

    .jsl-tube-light-page .tube-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jsl-tube-light-page .tube-overview-content h2,
    .jsl-tube-light-page .tube-lifestyle-content h2 {
        font-size: 38px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .jsl-tube-light-page .tube-hero,
    .jsl-tube-light-page .tube-hero-row {
        min-height: auto;
    }

    .jsl-tube-light-page .tube-hero-row {
        padding: 80px 0 45px;
    }

    .jsl-tube-light-page .tube-hero-content h1 {
        font-size: 42px;

        letter-spacing: -1px;
    }

    .jsl-tube-light-page .tube-hero-content h3 {
        font-size: 19px;
    }

    .jsl-tube-light-page .tube-hero-product {
        min-height: auto;

        padding-top: 35px;
    }

    .jsl-tube-light-page .tube-hero-product img {
        max-width: 320px;
    }

    .jsl-tube-light-page .tube-overview-section,
    .jsl-tube-light-page .tube-lifestyle-section {
        padding: 60px 0;
    }

    .jsl-tube-light-page .tube-overview-content h2,
    .jsl-tube-light-page .tube-lifestyle-content h2 {
        font-size: 31px;
    }

    .jsl-tube-light-page .tube-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-tube-light-page .tube-product-display {
        min-height: auto;

        padding: 20px 0;
    }

    .jsl-tube-light-page .tube-benefit-item {
        min-height: 125px;
    }

    .jsl-tube-light-page .tube-lifestyle-image img {
        min-height: 320px;
    }

    .jsl-tube-light-page .tube-support-item {
        justify-content: flex-start;

        padding: 15px 10px;

        border-bottom: 1px solid #eeeeee;
    }
}












































/* ============================================================
   JEEVAN SMART LIFE
   LED CONCEALED LIGHT PAGE
============================================================ */

.jsl-concealed-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.jsl-concealed-page *,
.jsl-concealed-page *::before,
.jsl-concealed-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.jsl-concealed-page .concealed-hero {
    position: relative;

    min-height: 520px;

    overflow: hidden;

    background: #151515;
}

.jsl-concealed-page .concealed-hero-bg {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        url("../images/concealed-hero-bg.png")
        center right / cover no-repeat;
}

.jsl-concealed-page .concealed-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(9,9,9,.98) 0%,
        rgba(9,9,9,.90) 43%,
        rgba(9,9,9,.50) 73%,
        rgba(9,9,9,.15) 100%
    );
}

.jsl-concealed-page .concealed-hero .container {
    position: relative;

    z-index: 5;
}

.jsl-concealed-page .concealed-hero-row {
    min-height: 520px;
}


/* Breadcrumb */

.jsl-concealed-page .concealed-breadcrumb {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);

    font-size: 12px;
}

.jsl-concealed-page .concealed-breadcrumb a {
    color: rgba(255,255,255,.65);

    text-decoration: none;
}

.jsl-concealed-page .concealed-breadcrumb strong {
    color: #ffffff;
}


/* Hero Heading */

.jsl-concealed-page .concealed-hero-content h1 {
    margin: 0 0 12px;

    color: #ffffff;

    font-size: 62px;

    line-height: 1.03;

    font-weight: 700;

    letter-spacing: -2px;
}

.jsl-concealed-page .concealed-hero-content h1 span {
    display: block;

    color: #e31e24;
}

.jsl-concealed-page .concealed-hero-content h3 {
    margin-bottom: 18px;

    color: #ffffff;

    font-size: 23px;

    font-weight: 500;
}

.jsl-concealed-page .concealed-hero-content p {
    max-width: 580px;

    color: rgba(255,255,255,.72);

    font-size: 15px;

    line-height: 1.8;
}


/* Hero Product */

.jsl-concealed-page .concealed-hero-product {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 420px;
}

.jsl-concealed-page .concealed-hero-product img {
    width: 100%;

    max-width: 390px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 25px rgba(0,0,0,.35)
        );

    transition: .4s ease;
}

.jsl-concealed-page .concealed-hero-product img:hover {
    transform:
        translateY(-7px)
        scale(1.02);
}


/* Buttons */

.jsl-concealed-page .concealed-primary-btn,
.jsl-concealed-page .concealed-dark-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}

.jsl-concealed-page .concealed-primary-btn {
    margin-top: 10px;

    background: #e31e24;

    color: #ffffff;
}

.jsl-concealed-page .concealed-primary-btn:hover {
    background: #ffffff;

    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   02. OVERVIEW
============================================================ */

.jsl-concealed-page .concealed-overview-section {
    padding: 100px 0 80px;

    background: linear-gradient(
        135deg,
        #ffffff,
        #f8f8f8
    );
}

.jsl-concealed-page .concealed-section-label {
    display: block;

    margin-bottom: 10px;

    color: #e31e24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.jsl-concealed-page .concealed-overview-content h2 {
    margin-bottom: 24px;

    color: #171717;

    font-size: 43px;

    line-height: 1.1;

    font-weight: 700;
}

.jsl-concealed-page .concealed-overview-content h2 span {
    display: block;

    color: #e31e24;
}


/* Features */

.jsl-concealed-page .concealed-feature-list {
    margin: 0;

    padding: 0;

    list-style: none;
}

.jsl-concealed-page .concealed-feature-list li {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 14px;

    color: #444444;

    font-size: 14px;

    line-height: 1.6;
}

.jsl-concealed-page .concealed-feature-list li i {
    margin-top: 4px;

    color: #e31e24;
}


/* ============================================================
   PRODUCT DISPLAY
============================================================ */

.jsl-concealed-page .concealed-product-display {
    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 360px;

    margin-top: 30px;
}

.jsl-concealed-page .concealed-product-display img {
    object-fit: contain;

    filter:
        drop-shadow(
            0 15px 18px rgba(0,0,0,.13)
        );
}

.jsl-concealed-page .concealed-front-product {
    position: relative;

    z-index: 3;

    width: 245px;
}

.jsl-concealed-page .concealed-back-product {
    position: absolute;

    right: 15px;

    bottom: 25px;

    z-index: 2;

    width: 195px;

    transform: rotate(8deg);
}


/* ============================================================
   TECH INFO
============================================================ */

.jsl-concealed-page .concealed-tech-grid {
    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 28px;
}

.jsl-concealed-page .concealed-tech-item {
    display: flex;

    align-items: center;

    gap: 10px;
}

.jsl-concealed-page .concealed-tech-circle {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 46px;

    height: 46px;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 18px;
}

.jsl-concealed-page .concealed-tech-item strong {
    display: block;

    color: #222222;

    font-size: 10px;
}

.jsl-concealed-page .concealed-tech-item span {
    display: block;

    color: #777777;

    font-size: 9px;
}


/* ============================================================
   TABLE
============================================================ */

.jsl-concealed-page .concealed-table-wrap {
    overflow-x: auto;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.jsl-concealed-page .concealed-product-table {
    margin: 0;

    min-width: 760px;
}

.jsl-concealed-page
.concealed-product-table
thead th {
    padding: 15px 12px;

    background: #e31e24;

    border: 0;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    text-align: center;
}

.jsl-concealed-page
.concealed-product-table
thead th:first-child {
    text-align: left;
}

.jsl-concealed-page
.concealed-product-table
tbody td {
    padding: 15px 12px;

    color: #424242;

    border-color: #eeeeee;

    font-size: 13px;

    text-align: center;
}

.jsl-concealed-page
.concealed-product-table
tbody td:first-child {
    text-align: left;

    font-weight: 500;
}

.jsl-concealed-page
.concealed-product-table
tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.jsl-concealed-page
.concealed-product-table
tbody tr:hover {
    background: #fff2f2;
}


/* Table Note */

.jsl-concealed-page .concealed-table-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-top: 18px;

    padding: 15px;

    background: #f8f8f8;

    border-left: 3px solid #e31e24;
}

.jsl-concealed-page .concealed-table-note i {
    color: #e31e24;
}

.jsl-concealed-page .concealed-table-note p {
    margin: 0;

    color: #777777;

    font-size: 11px;

    line-height: 1.6;
}


/* ============================================================
   03. BENEFITS
============================================================ */

.jsl-concealed-page .concealed-benefits-section {
    background: #ffffff;

    border-top: 1px solid #eeeeee;

    border-bottom: 1px solid #eeeeee;
}

.jsl-concealed-page .concealed-benefit-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 25px 10px;

    text-align: center;

    border-right: 1px solid #eeeeee;

    transition: .3s ease;
}

.jsl-concealed-page .concealed-benefit-item i {
    margin-bottom: 12px;

    color: #171717;

    font-size: 31px;

    transition: .3s ease;
}

.jsl-concealed-page .concealed-benefit-item span {
    color: #333333;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;
}

.jsl-concealed-page .concealed-benefit-item:hover {
    background: #e31e24;
}

.jsl-concealed-page
.concealed-benefit-item:hover i,
.jsl-concealed-page
.concealed-benefit-item:hover span {
    color: #ffffff;
}


/* ============================================================
   04. LIFESTYLE
============================================================ */

.jsl-concealed-page .concealed-lifestyle-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.jsl-concealed-page
.concealed-lifestyle-content h2 {
    max-width: 580px;

    margin-bottom: 22px;

    color: #171717;

    font-size: 46px;

    line-height: 1.12;

    font-weight: 700;
}

.jsl-concealed-page
.concealed-lifestyle-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-concealed-page
.concealed-lifestyle-content p {
    max-width: 590px;

    margin-bottom: 18px;

    color: #6f6f6f;

    font-size: 14px;

    line-height: 1.8;
}

.jsl-concealed-page .concealed-dark-btn {
    margin-top: 10px;

    background: #171717;

    color: #ffffff;
}

.jsl-concealed-page .concealed-dark-btn:hover {
    background: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}


/* Lifestyle Image */

.jsl-concealed-page .concealed-lifestyle-image {
    overflow: hidden;
}

.jsl-concealed-page
.concealed-lifestyle-image img {
    width: 100%;

    min-height: 420px;

    object-fit: cover;

    transition: .6s ease;
}

.jsl-concealed-page
.concealed-lifestyle-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   05. APPLICATIONS
============================================================ */

.jsl-concealed-page
.concealed-applications-section {
    padding: 100px 0;

    background: #ffffff;
}

.jsl-concealed-page .concealed-app-heading {
    max-width: 750px;

    margin: auto;
}

.jsl-concealed-page
.concealed-app-heading h2 {
    margin: 0;

    color: #171717;

    font-size: 42px;

    font-weight: 700;
}

.jsl-concealed-page
.concealed-app-heading h2 span {
    color: #e31e24;
}

.jsl-concealed-page .concealed-app-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 20px;

    background: #f8f8f8;

    border: 1px solid #eeeeee;

    text-align: center;

    transition: .3s ease;
}

.jsl-concealed-page .concealed-app-card i {
    margin-bottom: 12px;

    color: #e31e24;

    font-size: 29px;
}

.jsl-concealed-page .concealed-app-card span {
    color: #333333;

    font-size: 12px;

    font-weight: 600;
}

.jsl-concealed-page .concealed-app-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-5px);
}

.jsl-concealed-page .concealed-app-card:hover span {
    color: #ffffff;
}


/* ============================================================
   06. SUPPORT STRIP
============================================================ */

.jsl-concealed-page .concealed-support-strip {
    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}

.jsl-concealed-page .concealed-support-item {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 70px;

    border-right: 1px solid #e5e5e5;
}

.jsl-concealed-page .concealed-support-item i {
    color: #171717;

    font-size: 29px;
}

.jsl-concealed-page
.concealed-support-item strong,
.jsl-concealed-page
.concealed-support-item span {
    display: block;
}

.jsl-concealed-page
.concealed-support-item strong {
    color: #222222;

    font-size: 12px;

    text-transform: uppercase;
}

.jsl-concealed-page
.concealed-support-item span {
    color: #777777;

    font-size: 10px;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .jsl-concealed-page
    .concealed-hero-content h1 {
        font-size: 52px;
    }

    .jsl-concealed-page
    .concealed-hero-product img {
        max-width: 330px;
    }

    .jsl-concealed-page
    .concealed-overview-section,
    .jsl-concealed-page
    .concealed-lifestyle-section,
    .jsl-concealed-page
    .concealed-applications-section {
        padding: 75px 0;
    }

    .jsl-concealed-page
    .concealed-tech-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .jsl-concealed-page
    .concealed-overview-content h2,
    .jsl-concealed-page
    .concealed-lifestyle-content h2 {
        font-size: 38px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .jsl-concealed-page .concealed-hero,
    .jsl-concealed-page .concealed-hero-row {
        min-height: auto;
    }

    .jsl-concealed-page
    .concealed-hero-row {
        padding: 80px 0 45px;
    }

    .jsl-concealed-page
    .concealed-hero-content h1 {
        font-size: 42px;

        letter-spacing: -1px;
    }

    .jsl-concealed-page
    .concealed-hero-content h3 {
        font-size: 19px;
    }

    .jsl-concealed-page
    .concealed-hero-product {
        min-height: auto;

        padding-top: 35px;
    }

    .jsl-concealed-page
    .concealed-hero-product img {
        max-width: 280px;
    }

    .jsl-concealed-page
    .concealed-overview-section,
    .jsl-concealed-page
    .concealed-lifestyle-section,
    .jsl-concealed-page
    .concealed-applications-section {
        padding: 60px 0;
    }

    .jsl-concealed-page
    .concealed-overview-content h2,
    .jsl-concealed-page
    .concealed-lifestyle-content h2,
    .jsl-concealed-page
    .concealed-app-heading h2 {
        font-size: 31px;
    }

    .jsl-concealed-page
    .concealed-tech-grid {
        grid-template-columns:
            1fr 1fr;
    }

    .jsl-concealed-page
    .concealed-product-display {
        min-height: 310px;
    }

    .jsl-concealed-page
    .concealed-front-product {
        width: 195px;
    }

    .jsl-concealed-page
    .concealed-back-product {
        width: 150px;
    }

    .jsl-concealed-page
    .concealed-benefit-item {
        min-height: 125px;
    }

    .jsl-concealed-page
    .concealed-lifestyle-image img {
        min-height: 320px;
    }

    .jsl-concealed-page
    .concealed-support-item {
        justify-content: flex-start;

        padding: 15px 10px;

        border-bottom: 1px solid #eeeeee;
    }
}






















/* ============================================================
   JEEVAN SMART LIFE - CEILING FAN PAGE
============================================================ */

.jsl-ceiling-fan-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.jsl-ceiling-fan-page *,
.jsl-ceiling-fan-page *::before,
.jsl-ceiling-fan-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO SECTION
============================================================ */

.jsl-ceiling-fan-page .fan-hero {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    background: #151515;
}

.jsl-ceiling-fan-page .fan-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        url("../images/ceiling-fan-hero-bg.png")
        center right / cover no-repeat;
}

.jsl-ceiling-fan-page .fan-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(9,9,9,.98) 0%,
        rgba(9,9,9,.91) 43%,
        rgba(9,9,9,.55) 72%,
        rgba(9,9,9,.15) 100%
    );
}

.jsl-ceiling-fan-page .fan-hero .container {
    position: relative;
    z-index: 5;
}

.jsl-ceiling-fan-page .fan-hero-row {
    min-height: 530px;
}


/* Breadcrumb */

.jsl-ceiling-fan-page .fan-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.jsl-ceiling-fan-page .fan-breadcrumb a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
}

.jsl-ceiling-fan-page .fan-breadcrumb strong {
    color: #ffffff;
}


/* Kicker */

.jsl-ceiling-fan-page .fan-kicker {
    display: block;

    margin-bottom: 14px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* Hero Heading */

.jsl-ceiling-fan-page .fan-hero-content h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 61px;
    line-height: 1.04;
    font-weight: 700;

    letter-spacing: -2px;
}

.jsl-ceiling-fan-page .fan-hero-content h1 span {
    display: block;
    color: #e31e24;
}

.jsl-ceiling-fan-page .fan-hero-content p {
    max-width: 585px;

    margin-bottom: 28px;

    color: rgba(255,255,255,.72);

    font-size: 15px;
    line-height: 1.8;
}


/* Hero Product */

.jsl-ceiling-fan-page .fan-hero-product {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 430px;
}

.jsl-ceiling-fan-page .fan-hero-product img {
    width: 100%;
    max-width: 500px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 25px rgba(0,0,0,.35)
        );

    transition: .4s ease;
}

.jsl-ceiling-fan-page .fan-hero-product img:hover {
    transform:
        translateY(-7px)
        rotate(-2deg);
}


/* Buttons */

.jsl-ceiling-fan-page .fan-primary-btn,
.jsl-ceiling-fan-page .fan-dark-btn {
    display: inline-flex;
    align-items: center;

    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.jsl-ceiling-fan-page .fan-primary-btn {
    background: #e31e24;
    color: #ffffff;
}

.jsl-ceiling-fan-page .fan-primary-btn:hover {
    background: #ffffff;
    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   02. COMMON
============================================================ */

.jsl-ceiling-fan-page .fan-section-label {
    display: block;

    margin-bottom: 10px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.jsl-ceiling-fan-page .fan-main-heading {
    margin: 0;

    color: #171717;

    font-size: 45px;
    line-height: 1.12;
    font-weight: 700;
}

.jsl-ceiling-fan-page .fan-main-heading span {
    color: #e31e24;
}

.jsl-ceiling-fan-page .fan-section-intro {
    margin: 0;

    color: #777777;

    font-size: 14px;
    line-height: 1.8;
}


/* ============================================================
   03. OVERVIEW
============================================================ */

.jsl-ceiling-fan-page .fan-overview-section {
    padding: 100px 0 85px;

    background: linear-gradient(
        135deg,
        #ffffff,
        #f8f8f8
    );
}

.jsl-ceiling-fan-page .fan-overview-content h2 {
    margin-bottom: 22px;

    color: #171717;

    font-size: 43px;
    line-height: 1.1;
    font-weight: 700;
}

.jsl-ceiling-fan-page .fan-overview-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-ceiling-fan-page .fan-overview-lead {
    max-width: 540px;

    color: #6d6d6d;

    font-size: 14px;
    line-height: 1.8;
}


/* Specifications */

.jsl-ceiling-fan-page .fan-specification-box {
    margin-top: 30px;

    padding: 26px;

    background: #ffffff;

    border-left: 4px solid #e31e24;

    box-shadow:
        0 15px 35px rgba(0,0,0,.05);
}

.jsl-ceiling-fan-page .fan-specification-box > span {
    display: block;

    margin-bottom: 17px;

    color: #171717;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.jsl-ceiling-fan-page .fan-specification-box ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jsl-ceiling-fan-page .fan-specification-box li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 12px;

    color: #555;

    font-size: 13px;
    line-height: 1.6;
}

.jsl-ceiling-fan-page .fan-specification-box li:last-child {
    margin-bottom: 0;
}

.jsl-ceiling-fan-page .fan-specification-box i {
    margin-top: 3px;

    color: #e31e24;
}


/* ============================================================
   TECH GRID
============================================================ */

.jsl-ceiling-fan-page .fan-tech-grid {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 12px;

    margin-bottom: 28px;
}

.jsl-ceiling-fan-page .fan-tech-item {
    display: flex;
    align-items: center;

    gap: 9px;
}

.jsl-ceiling-fan-page .fan-tech-circle {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 18px;
}

.jsl-ceiling-fan-page .fan-tech-item strong {
    display: block;

    color: #222;

    font-size: 9px;
}

.jsl-ceiling-fan-page .fan-tech-item span {
    display: block;

    color: #777;

    font-size: 9px;
}


/* ============================================================
   PRODUCT TABLE
============================================================ */

.jsl-ceiling-fan-page .fan-product-table-wrap {
    overflow-x: auto;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.jsl-ceiling-fan-page .fan-product-table {
    min-width: 620px;

    margin: 0;
}

.jsl-ceiling-fan-page .fan-product-table thead th {
    padding: 15px;

    background: #e31e24;

    border: 0;

    color: #ffffff;

    font-size: 13px;
    font-weight: 600;

    text-align: center;
}

.jsl-ceiling-fan-page .fan-product-table thead th:first-child {
    text-align: left;
}

.jsl-ceiling-fan-page .fan-product-table tbody td {
    padding: 15px;

    border-color: #eeeeee;

    color: #424242;

    font-size: 13px;

    text-align: center;
}

.jsl-ceiling-fan-page .fan-product-table tbody td:first-child {
    text-align: left;

    font-weight: 500;
}

.jsl-ceiling-fan-page .fan-product-table tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.jsl-ceiling-fan-page .fan-product-table tbody tr:hover {
    background: #fff2f2;
}


/* ============================================================
   COLORS
============================================================ */

.jsl-ceiling-fan-page .fan-color-section {
    margin-top: 30px;
}

.jsl-ceiling-fan-page .fan-color-title {
    display: block;

    margin-bottom: 14px;

    color: #555555;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.jsl-ceiling-fan-page .fan-color-options {
    display: flex;

    gap: 25px;
}

.jsl-ceiling-fan-page .fan-color-option {
    text-align: center;
}

.jsl-ceiling-fan-page .fan-color {
    display: block;

    width: 68px;
    height: 38px;

    margin-bottom: 7px;

    border: 2px solid #eeeeee;

    box-shadow:
        0 4px 10px rgba(0,0,0,.08);
}

.jsl-ceiling-fan-page .fan-color.brown {
    background: #813500;
}

.jsl-ceiling-fan-page .fan-color.white {
    background: #ffffff;
}

.jsl-ceiling-fan-page .fan-color.ivory {
    background: #fff6bd;
}

.jsl-ceiling-fan-page .fan-color-option small {
    color: #777;

    font-size: 10px;
    text-transform: uppercase;
}


/* ============================================================
   04. FAN RANGE
============================================================ */

.jsl-ceiling-fan-page .fan-range-section {
    padding: 100px 0;

    background: #ffffff;
}

.jsl-ceiling-fan-page .fan-product-card {
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eeeeee;

    transition: .35s ease;
}

.jsl-ceiling-fan-page .fan-card-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 265px;

    padding: 25px;

    background: #f7f7f7;

    overflow: hidden;
}

.jsl-ceiling-fan-page .fan-card-image img {
    max-width: 100%;
    max-height: 220px;

    object-fit: contain;

    transition: transform .4s ease;
}

.jsl-ceiling-fan-page .fan-card-content {
    padding: 24px;
}

.jsl-ceiling-fan-page .fan-card-content > span {
    display: block;

    margin-bottom: 7px;

    color: #e31e24;

    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.jsl-ceiling-fan-page .fan-card-content h4 {
    margin-bottom: 6px;

    color: #202020;

    font-size: 19px;
    font-weight: 700;
}

.jsl-ceiling-fan-page .fan-card-content p {
    margin-bottom: 13px;

    color: #777;

    font-size: 11px;
}

.jsl-ceiling-fan-page .fan-card-content strong {
    color: #171717;

    font-size: 17px;
}

.jsl-ceiling-fan-page .fan-product-card:hover {
    transform: translateY(-7px);

    border-color: #dddddd;

    box-shadow:
        0 20px 45px rgba(0,0,0,.08);
}

.jsl-ceiling-fan-page .fan-product-card:hover img {
    transform: scale(1.05) rotate(-2deg);
}


/* ============================================================
   05. BENEFITS
============================================================ */

.jsl-ceiling-fan-page .fan-benefits-section {
    background: #ffffff;

    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.jsl-ceiling-fan-page .fan-benefit-item {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 25px 10px;

    border-right: 1px solid #eeeeee;

    text-align: center;

    transition: .3s ease;
}

.jsl-ceiling-fan-page .fan-benefit-item i {
    margin-bottom: 12px;

    color: #171717;

    font-size: 31px;

    transition: .3s ease;
}

.jsl-ceiling-fan-page .fan-benefit-item span {
    color: #333333;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}

.jsl-ceiling-fan-page .fan-benefit-item:hover {
    background: #e31e24;
}

.jsl-ceiling-fan-page .fan-benefit-item:hover i,
.jsl-ceiling-fan-page .fan-benefit-item:hover span {
    color: #ffffff;
}


/* ============================================================
   06. LIFESTYLE
============================================================ */

.jsl-ceiling-fan-page .fan-lifestyle-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.jsl-ceiling-fan-page .fan-lifestyle-content h2 {
    max-width: 580px;

    margin-bottom: 22px;

    color: #171717;

    font-size: 46px;
    line-height: 1.12;

    font-weight: 700;
}

.jsl-ceiling-fan-page .fan-lifestyle-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-ceiling-fan-page .fan-lifestyle-content p {
    max-width: 590px;

    margin-bottom: 16px;

    color: #6f6f6f;

    font-size: 14px;
    line-height: 1.8;
}

.jsl-ceiling-fan-page .fan-dark-btn {
    margin-top: 8px;

    background: #171717;

    color: #ffffff;
}

.jsl-ceiling-fan-page .fan-dark-btn:hover {
    background: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}

.jsl-ceiling-fan-page .fan-lifestyle-image {
    overflow: hidden;
}

.jsl-ceiling-fan-page .fan-lifestyle-image img {
    width: 100%;

    min-height: 430px;

    object-fit: cover;

    transition: transform .6s ease;
}

.jsl-ceiling-fan-page .fan-lifestyle-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   07. APPLICATIONS
============================================================ */

.jsl-ceiling-fan-page .fan-applications-section {
    padding: 100px 0;

    background: #ffffff;
}

.jsl-ceiling-fan-page .fan-app-heading {
    max-width: 730px;

    margin: auto;
}

.jsl-ceiling-fan-page .fan-app-heading h2 {
    margin: 0;

    color: #171717;

    font-size: 42px;
    font-weight: 700;
}

.jsl-ceiling-fan-page .fan-app-heading h2 span {
    color: #e31e24;
}

.jsl-ceiling-fan-page .fan-app-card {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 20px;

    background: #f8f8f8;

    border: 1px solid #eeeeee;

    text-align: center;

    transition: .3s ease;
}

.jsl-ceiling-fan-page .fan-app-card i {
    margin-bottom: 12px;

    color: #e31e24;

    font-size: 29px;
}

.jsl-ceiling-fan-page .fan-app-card span {
    color: #333333;

    font-size: 12px;
    font-weight: 600;
}

.jsl-ceiling-fan-page .fan-app-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-5px);
}

.jsl-ceiling-fan-page .fan-app-card:hover span {
    color: #ffffff;
}


/* ============================================================
   08. SUPPORT STRIP
============================================================ */

.jsl-ceiling-fan-page .fan-support-strip {
    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}

.jsl-ceiling-fan-page .fan-support-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 70px;

    border-right: 1px solid #e5e5e5;
}

.jsl-ceiling-fan-page .fan-support-item i {
    color: #171717;

    font-size: 29px;
}

.jsl-ceiling-fan-page .fan-support-item strong,
.jsl-ceiling-fan-page .fan-support-item span {
    display: block;
}

.jsl-ceiling-fan-page .fan-support-item strong {
    color: #222222;

    font-size: 12px;

    text-transform: uppercase;
}

.jsl-ceiling-fan-page .fan-support-item span {
    color: #777777;

    font-size: 10px;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .jsl-ceiling-fan-page .fan-hero-content h1 {
        font-size: 50px;
    }

    .jsl-ceiling-fan-page .fan-hero-product img {
        max-width: 400px;
    }

    .jsl-ceiling-fan-page .fan-overview-section,
    .jsl-ceiling-fan-page .fan-range-section,
    .jsl-ceiling-fan-page .fan-lifestyle-section,
    .jsl-ceiling-fan-page .fan-applications-section {
        padding: 75px 0;
    }

    .jsl-ceiling-fan-page .fan-tech-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .jsl-ceiling-fan-page .fan-overview-content h2,
    .jsl-ceiling-fan-page .fan-main-heading,
    .jsl-ceiling-fan-page .fan-lifestyle-content h2 {
        font-size: 38px;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .jsl-ceiling-fan-page .fan-hero,
    .jsl-ceiling-fan-page .fan-hero-row {
        min-height: auto;
    }

    .jsl-ceiling-fan-page .fan-hero-row {
        padding: 80px 0 45px;
    }

    .jsl-ceiling-fan-page .fan-hero-content h1 {
        font-size: 40px;
        letter-spacing: -1px;
    }

    .jsl-ceiling-fan-page .fan-hero-product {
        min-height: auto;
        padding-top: 35px;
    }

    .jsl-ceiling-fan-page .fan-hero-product img {
        max-width: 320px;
    }

    .jsl-ceiling-fan-page .fan-overview-section,
    .jsl-ceiling-fan-page .fan-range-section,
    .jsl-ceiling-fan-page .fan-lifestyle-section,
    .jsl-ceiling-fan-page .fan-applications-section {
        padding: 60px 0;
    }

    .jsl-ceiling-fan-page .fan-overview-content h2,
    .jsl-ceiling-fan-page .fan-main-heading,
    .jsl-ceiling-fan-page .fan-lifestyle-content h2,
    .jsl-ceiling-fan-page .fan-app-heading h2 {
        font-size: 31px;
    }

    .jsl-ceiling-fan-page .fan-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-ceiling-fan-page .fan-color-options {
        gap: 14px;
    }

    .jsl-ceiling-fan-page .fan-color {
        width: 55px;
        height: 32px;
    }

    .jsl-ceiling-fan-page .fan-benefit-item {
        min-height: 125px;
    }

    .jsl-ceiling-fan-page .fan-lifestyle-image img {
        min-height: 320px;
    }

    .jsl-ceiling-fan-page .fan-support-item {
        justify-content: flex-start;

        padding: 15px 10px;

        border-bottom: 1px solid #eeeeee;
    }
}





/* ============================================================
   JEEVAN SMART LIFE - ROOM HEATER PAGE
============================================================ */

.jsl-room-heater-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.jsl-room-heater-page *,
.jsl-room-heater-page *::before,
.jsl-room-heater-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.jsl-room-heater-page .heater-hero {
    position: relative;
    min-height: 530px;
    overflow: hidden;
    background: #151515;
}

.jsl-room-heater-page .heater-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;

    background:
        url("../images/room-heater-hero-bg.png")
        center right / cover no-repeat;
}

.jsl-room-heater-page .heater-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(9,9,9,.98) 0%,
        rgba(9,9,9,.91) 43%,
        rgba(9,9,9,.54) 73%,
        rgba(9,9,9,.15) 100%
    );
}

.jsl-room-heater-page .heater-hero .container {
    position: relative;
    z-index: 5;
}

.jsl-room-heater-page .heater-hero-row {
    min-height: 530px;
}


/* Breadcrumb */

.jsl-room-heater-page .heater-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);
    font-size: 12px;
}

.jsl-room-heater-page .heater-breadcrumb a {
    color: rgba(255,255,255,.65);
    text-decoration: none;
}

.jsl-room-heater-page .heater-breadcrumb strong {
    color: #ffffff;
}


/* Hero content */

.jsl-room-heater-page .heater-kicker {
    display: block;

    margin-bottom: 14px;

    color: #e31e24;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.jsl-room-heater-page .heater-hero-content h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 60px;
    line-height: 1.04;

    font-weight: 700;

    letter-spacing: -2px;
}

.jsl-room-heater-page .heater-hero-content h1 span {
    display: block;
    color: #e31e24;
}

.jsl-room-heater-page .heater-hero-content p {
    max-width: 590px;

    margin-bottom: 28px;

    color: rgba(255,255,255,.72);

    font-size: 15px;
    line-height: 1.8;
}


/* Hero Product */

.jsl-room-heater-page .heater-hero-product {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 430px;
}

.jsl-room-heater-page .heater-hero-product img {
    width: 100%;
    max-width: 390px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 28px rgba(0,0,0,.38)
        );

    transition: .4s ease;
}

.jsl-room-heater-page .heater-hero-product img:hover {
    transform: translateY(-7px) scale(1.02);
}


/* ============================================================
   BUTTONS
============================================================ */

.jsl-room-heater-page .heater-primary-btn,
.jsl-room-heater-page .heater-dark-btn,
.jsl-room-heater-page .heater-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 12px;
    font-weight: 600;

    transition: .3s ease;
}

.jsl-room-heater-page .heater-primary-btn {
    background: #e31e24;
    color: #ffffff;
}

.jsl-room-heater-page .heater-primary-btn:hover {
    background: #ffffff;
    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   COMMON
============================================================ */

.jsl-room-heater-page .heater-section-label {
    display: block;

    margin-bottom: 10px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}


/* ============================================================
   02. OVERVIEW
============================================================ */

.jsl-room-heater-page .heater-overview-section {
    padding: 100px 0;

    background: linear-gradient(
        135deg,
        #ffffff,
        #f7f7f7
    );
}

.jsl-room-heater-page .heater-overview-content h2 {
    margin-bottom: 22px;

    color: #171717;

    font-size: 43px;
    line-height: 1.1;

    font-weight: 700;
}

.jsl-room-heater-page .heater-overview-content h2 span {
    display: block;
    color: #e31e24;
}

.jsl-room-heater-page .heater-overview-lead {
    max-width: 540px;

    color: #6f6f6f;

    font-size: 14px;
    line-height: 1.8;
}


/* Specification Box */

.jsl-room-heater-page .heater-specification-box {
    margin-top: 30px;

    padding: 27px;

    background: #ffffff;

    border-left: 4px solid #e31e24;

    box-shadow:
        0 15px 35px rgba(0,0,0,.05);
}

.jsl-room-heater-page .heater-specification-box > span {
    display: block;

    margin-bottom: 17px;

    color: #171717;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

.jsl-room-heater-page .heater-specification-box ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.jsl-room-heater-page .heater-specification-box li {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 13px;

    color: #555;

    font-size: 13px;
    line-height: 1.6;
}

.jsl-room-heater-page .heater-specification-box li:last-child {
    margin-bottom: 0;
}

.jsl-room-heater-page .heater-specification-box i {
    margin-top: 3px;

    color: #e31e24;
}


/* ============================================================
   TECH GRID
============================================================ */

.jsl-room-heater-page .heater-tech-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 32px;
}

.jsl-room-heater-page .heater-tech-item {
    display: flex;
    align-items: center;

    gap: 10px;
}

.jsl-room-heater-page .heater-tech-circle {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 19px;
}

.jsl-room-heater-page .heater-tech-item strong {
    display: block;

    color: #222;

    font-size: 10px;
}

.jsl-room-heater-page .heater-tech-item span {
    display: block;

    color: #777;

    font-size: 9px;
}


/* ============================================================
   PRODUCT DISPLAY
============================================================ */

.jsl-room-heater-page .heater-product-display {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 400px;

    padding: 30px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    box-shadow:
        0 20px 45px rgba(0,0,0,.05);
}

.jsl-room-heater-page .heater-product-display img {
    width: 100%;

    max-width: 350px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 17px 18px rgba(0,0,0,.15)
        );

    transition: transform .4s ease;
}

.jsl-room-heater-page .heater-product-display:hover img {
    transform: scale(1.04);
}


/* ============================================================
   03. BENEFITS
============================================================ */

.jsl-room-heater-page .heater-benefits-section {
    background: #ffffff;

    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.jsl-room-heater-page .heater-benefit-item {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 150px;

    padding: 25px 10px;

    text-align: center;

    border-right: 1px solid #eeeeee;

    transition: .3s ease;
}

.jsl-room-heater-page .heater-benefit-item i {
    margin-bottom: 12px;

    color: #171717;

    font-size: 31px;

    transition: .3s ease;
}

.jsl-room-heater-page .heater-benefit-item span {
    color: #333333;

    font-size: 11px;
    font-weight: 600;

    text-transform: uppercase;
}

.jsl-room-heater-page .heater-benefit-item:hover {
    background: #e31e24;
}

.jsl-room-heater-page .heater-benefit-item:hover i,
.jsl-room-heater-page .heater-benefit-item:hover span {
    color: #ffffff;
}


/* ============================================================
   04. LIFESTYLE
============================================================ */

.jsl-room-heater-page .heater-lifestyle-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.jsl-room-heater-page .heater-lifestyle-content h2 {
    max-width: 580px;

    margin-bottom: 22px;

    color: #171717;

    font-size: 46px;
    line-height: 1.12;

    font-weight: 700;
}

.jsl-room-heater-page .heater-lifestyle-content h2 span {
    display: block;
    color: #e31e24;
}

.jsl-room-heater-page .heater-lifestyle-content p {
    max-width: 590px;

    margin-bottom: 16px;

    color: #6f6f6f;

    font-size: 14px;
    line-height: 1.8;
}

.jsl-room-heater-page .heater-dark-btn {
    margin-top: 8px;

    background: #171717;

    color: #ffffff;
}

.jsl-room-heater-page .heater-dark-btn:hover {
    background: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}

.jsl-room-heater-page .heater-lifestyle-image {
    overflow: hidden;
}

.jsl-room-heater-page .heater-lifestyle-image img {
    width: 100%;

    min-height: 430px;

    object-fit: cover;

    transition: .6s ease;
}

.jsl-room-heater-page .heater-lifestyle-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   05. APPLICATIONS
============================================================ */

.jsl-room-heater-page .heater-applications-section {
    padding: 100px 0;

    background: #ffffff;
}

.jsl-room-heater-page .heater-app-heading {
    max-width: 750px;

    margin: auto;
}

.jsl-room-heater-page .heater-app-heading h2 {
    margin: 0;

    color: #171717;

    font-size: 42px;
    font-weight: 700;
}

.jsl-room-heater-page .heater-app-heading h2 span {
    color: #e31e24;
}

.jsl-room-heater-page .heater-app-card {
    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 155px;

    padding: 20px;

    background: #f8f8f8;

    border: 1px solid #eeeeee;

    text-align: center;

    transition: .3s ease;
}

.jsl-room-heater-page .heater-app-card i {
    margin-bottom: 13px;

    color: #e31e24;

    font-size: 30px;
}

.jsl-room-heater-page .heater-app-card span {
    color: #333333;

    font-size: 12px;
    font-weight: 600;
}

.jsl-room-heater-page .heater-app-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-5px);
}

.jsl-room-heater-page .heater-app-card:hover span {
    color: #ffffff;
}


/* ============================================================
   06. CTA
============================================================ */

.jsl-room-heater-page .heater-cta-section {
    padding: 0 0 100px;

    background: #ffffff;
}

.jsl-room-heater-page .heater-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding: 55px;

    background: #171717;
}

.jsl-room-heater-page .heater-cta-inner > div > span {
    display: block;

    margin-bottom: 9px;

    color: #e31e24;

    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.jsl-room-heater-page .heater-cta-inner h2 {
    margin: 0;

    color: #ffffff;

    font-size: 35px;
    font-weight: 600;
}

.jsl-room-heater-page .heater-cta-inner h2 strong {
    color: #e31e24;
}

.jsl-room-heater-page .heater-cta-btn {
    flex: 0 0 auto;

    background: #e31e24;

    color: #ffffff;
}

.jsl-room-heater-page .heater-cta-btn:hover {
    background: #ffffff;

    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   07. SUPPORT
============================================================ */

.jsl-room-heater-page .heater-support-strip {
    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}

.jsl-room-heater-page .heater-support-item {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    min-height: 70px;

    border-right: 1px solid #e5e5e5;
}

.jsl-room-heater-page .heater-support-item i {
    color: #171717;

    font-size: 29px;
}

.jsl-room-heater-page .heater-support-item strong,
.jsl-room-heater-page .heater-support-item span {
    display: block;
}

.jsl-room-heater-page .heater-support-item strong {
    color: #222222;

    font-size: 12px;

    text-transform: uppercase;
}

.jsl-room-heater-page .heater-support-item span {
    color: #777777;

    font-size: 10px;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .jsl-room-heater-page .heater-hero-content h1 {
        font-size: 50px;
    }

    .jsl-room-heater-page .heater-hero-product img {
        max-width: 320px;
    }

    .jsl-room-heater-page .heater-overview-section,
    .jsl-room-heater-page .heater-lifestyle-section,
    .jsl-room-heater-page .heater-applications-section {
        padding: 75px 0;
    }

    .jsl-room-heater-page .heater-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-room-heater-page .heater-overview-content h2,
    .jsl-room-heater-page .heater-lifestyle-content h2 {
        font-size: 38px;
    }

    .jsl-room-heater-page .heater-cta-inner {
        padding: 40px;

        flex-direction: column;

        align-items: flex-start;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .jsl-room-heater-page .heater-hero,
    .jsl-room-heater-page .heater-hero-row {
        min-height: auto;
    }

    .jsl-room-heater-page .heater-hero-row {
        padding: 80px 0 45px;
    }

    .jsl-room-heater-page .heater-hero-content h1 {
        font-size: 40px;

        letter-spacing: -1px;
    }

    .jsl-room-heater-page .heater-hero-product {
        min-height: auto;

        padding-top: 35px;
    }

    .jsl-room-heater-page .heater-hero-product img {
        max-width: 270px;
    }

    .jsl-room-heater-page .heater-overview-section,
    .jsl-room-heater-page .heater-lifestyle-section,
    .jsl-room-heater-page .heater-applications-section {
        padding: 60px 0;
    }

    .jsl-room-heater-page .heater-overview-content h2,
    .jsl-room-heater-page .heater-lifestyle-content h2,
    .jsl-room-heater-page .heater-app-heading h2 {
        font-size: 31px;
    }

    .jsl-room-heater-page .heater-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-room-heater-page .heater-product-display {
        min-height: 320px;

        padding: 20px;
    }

    .jsl-room-heater-page .heater-benefit-item {
        min-height: 125px;
    }

    .jsl-room-heater-page .heater-lifestyle-image img {
        min-height: 320px;
    }

    .jsl-room-heater-page .heater-cta-section {
        padding-bottom: 60px;
    }

    .jsl-room-heater-page .heater-cta-inner {
        padding: 35px 25px;
    }

    .jsl-room-heater-page .heater-cta-inner h2 {
        font-size: 27px;
    }

    .jsl-room-heater-page .heater-support-item {
        justify-content: flex-start;

        padding: 15px 10px;

        border-bottom: 1px solid #eeeeee;
    }
}





















/* ============================================================
   JEEVAN SMART LIFE - ELECTRIC KETTLE PAGE
============================================================ */

.jsl-electric-kettle-page {
    width: 100%;
    overflow-x: hidden;
    background: #ffffff;
}

.jsl-electric-kettle-page *,
.jsl-electric-kettle-page *::before,
.jsl-electric-kettle-page *::after {
    box-sizing: border-box;
}


/* ============================================================
   01. HERO
============================================================ */

.jsl-electric-kettle-page .kettle-hero {
    position: relative;

    min-height: 530px;

    overflow: hidden;

    background: #151515;
}

.jsl-electric-kettle-page .kettle-hero-bg {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        url("../images/electric-kettle-hero-bg.png")
        center right / cover no-repeat;
}

.jsl-electric-kettle-page .kettle-hero-overlay {
    position: absolute;

    inset: 0;

    z-index: 2;

    background: linear-gradient(
        90deg,
        rgba(9,9,9,.98) 0%,
        rgba(9,9,9,.92) 43%,
        rgba(9,9,9,.52) 72%,
        rgba(9,9,9,.13) 100%
    );
}

.jsl-electric-kettle-page .kettle-hero .container {
    position: relative;

    z-index: 5;
}

.jsl-electric-kettle-page .kettle-hero-row {
    min-height: 530px;
}


/* Breadcrumb */

.jsl-electric-kettle-page .kettle-breadcrumb {
    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 22px;

    color: rgba(255,255,255,.55);

    font-size: 12px;
}

.jsl-electric-kettle-page .kettle-breadcrumb a {
    color: rgba(255,255,255,.65);

    text-decoration: none;
}

.jsl-electric-kettle-page .kettle-breadcrumb strong {
    color: #ffffff;
}


/* Hero Text */

.jsl-electric-kettle-page .kettle-kicker {
    display: block;

    margin-bottom: 14px;

    color: #e31e24;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;
}

.jsl-electric-kettle-page .kettle-hero-content h1 {
    margin: 0 0 18px;

    color: #ffffff;

    font-size: 58px;

    line-height: 1.04;

    font-weight: 700;

    letter-spacing: -2px;
}

.jsl-electric-kettle-page .kettle-hero-content h1 span {
    display: block;

    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-hero-content p {
    max-width: 590px;

    margin-bottom: 28px;

    color: rgba(255,255,255,.72);

    font-size: 15px;

    line-height: 1.8;
}


/* Hero Product */

.jsl-electric-kettle-page .kettle-hero-product {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 430px;
}

.jsl-electric-kettle-page .kettle-hero-product img {
    width: 100%;

    max-width: 370px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 22px 28px rgba(0,0,0,.38)
        );

    transition: .4s ease;
}

.jsl-electric-kettle-page .kettle-hero-product img:hover {
    transform: translateY(-7px) scale(1.02);
}


/* ============================================================
   BUTTONS
============================================================ */

.jsl-electric-kettle-page .kettle-primary-btn,
.jsl-electric-kettle-page .kettle-dark-btn,
.jsl-electric-kettle-page .kettle-cta-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 14px 24px;

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    transition: .3s ease;
}

.jsl-electric-kettle-page .kettle-primary-btn {
    background: #e31e24;

    color: #ffffff;
}

.jsl-electric-kettle-page .kettle-primary-btn:hover {
    background: #ffffff;

    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   COMMON HEADING
============================================================ */

.jsl-electric-kettle-page .kettle-section-label {
    display: block;

    margin-bottom: 10px;

    color: #e31e24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;
}

.jsl-electric-kettle-page .kettle-main-heading {
    margin: 0;

    color: #171717;

    font-size: 44px;

    line-height: 1.12;

    font-weight: 700;
}

.jsl-electric-kettle-page .kettle-main-heading span {
    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-section-intro {
    margin: 0;

    color: #777777;

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   02. OVERVIEW
============================================================ */

.jsl-electric-kettle-page .kettle-overview-section {
    padding: 100px 0;

    background: linear-gradient(
        135deg,
        #ffffff,
        #f7f7f7
    );
}

.jsl-electric-kettle-page .kettle-overview-content h2 {
    margin-bottom: 22px;

    color: #171717;

    font-size: 43px;

    line-height: 1.1;

    font-weight: 700;
}

.jsl-electric-kettle-page .kettle-overview-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-overview-lead {
    max-width: 540px;

    color: #6f6f6f;

    font-size: 14px;

    line-height: 1.8;
}


/* ============================================================
   SPECIFICATION BOX
============================================================ */

.jsl-electric-kettle-page .kettle-specification-box {
    margin-top: 30px;

    padding: 27px;

    background: #ffffff;

    border-left: 4px solid #e31e24;

    box-shadow:
        0 15px 35px rgba(0,0,0,.05);
}

.jsl-electric-kettle-page .kettle-specification-box > span {
    display: block;

    margin-bottom: 17px;

    color: #171717;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.jsl-electric-kettle-page .kettle-specification-box ul {
    margin: 0;

    padding: 0;

    list-style: none;
}

.jsl-electric-kettle-page .kettle-specification-box li {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 13px;

    color: #555;

    font-size: 13px;

    line-height: 1.6;
}

.jsl-electric-kettle-page .kettle-specification-box li:last-child {
    margin-bottom: 0;
}

.jsl-electric-kettle-page .kettle-specification-box i {
    margin-top: 3px;

    color: #e31e24;
}


/* ============================================================
   TECH GRID
============================================================ */

.jsl-electric-kettle-page .kettle-tech-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 15px;

    margin-bottom: 32px;
}

.jsl-electric-kettle-page .kettle-tech-item {
    display: flex;

    align-items: center;

    gap: 10px;
}

.jsl-electric-kettle-page .kettle-tech-circle {
    flex: 0 0 auto;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #fff0f0;

    color: #e31e24;

    font-size: 19px;
}

.jsl-electric-kettle-page .kettle-tech-item strong {
    display: block;

    color: #222;

    font-size: 10px;
}

.jsl-electric-kettle-page .kettle-tech-item span {
    display: block;

    color: #777;

    font-size: 9px;
}


/* ============================================================
   MAIN PRODUCT IMAGE
============================================================ */

.jsl-electric-kettle-page .kettle-product-display {
    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 410px;

    padding: 35px;

    background: #ffffff;

    border: 1px solid #eeeeee;

    box-shadow:
        0 20px 45px rgba(0,0,0,.05);
}

.jsl-electric-kettle-page .kettle-product-display img {
    width: 100%;

    object-fit: contain;

    filter:
        drop-shadow(
            0 18px 18px rgba(0,0,0,.14)
        );

    transition: transform .4s ease;
}

.jsl-electric-kettle-page .kettle-product-display:hover img {
    transform: translateY(-5px) scale(1.04);
}


/* ============================================================
   03. MODEL SECTION
============================================================ */

.jsl-electric-kettle-page .kettle-model-section {
    padding: 100px 0;

    background: #ffffff;
}


/* Data note */

.jsl-electric-kettle-page .kettle-data-note {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 25px;

    padding: 15px 18px;

    background: #fff7f7;

    border-left: 3px solid #e31e24;
}

.jsl-electric-kettle-page .kettle-data-note i {
    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-data-note p {
    margin: 0;

    color: #666;

    font-size: 11px;

    line-height: 1.6;
}


/* ============================================================
   PRODUCT TABLE
============================================================ */

.jsl-electric-kettle-page .kettle-product-table-wrap {
    overflow-x: auto;

    background: #ffffff;

    box-shadow:
        0 15px 40px rgba(0,0,0,.06);
}

.jsl-electric-kettle-page .kettle-product-table {
    min-width: 720px;

    margin: 0;
}

.jsl-electric-kettle-page .kettle-product-table thead th {
    padding: 15px;

    background: #e31e24;

    border: 0;

    color: #ffffff;

    font-size: 13px;

    font-weight: 600;

    text-align: center;
}

.jsl-electric-kettle-page .kettle-product-table thead th:first-child {
    text-align: left;
}

.jsl-electric-kettle-page .kettle-product-table tbody td {
    padding: 15px;

    border-color: #eeeeee;

    color: #424242;

    font-size: 13px;

    text-align: center;
}

.jsl-electric-kettle-page .kettle-product-table tbody td:first-child {
    text-align: left;

    font-weight: 500;
}

.jsl-electric-kettle-page .kettle-product-table tbody tr:nth-child(odd) {
    background: #f8f8f8;
}

.jsl-electric-kettle-page .kettle-product-table tbody tr:hover {
    background: #fff2f2;
}


/* ============================================================
   04. BENEFITS
============================================================ */

.jsl-electric-kettle-page .kettle-benefits-section {
    background: #ffffff;

    border-top: 1px solid #eeeeee;

    border-bottom: 1px solid #eeeeee;
}

.jsl-electric-kettle-page .kettle-benefit-item {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 150px;

    padding: 25px 10px;

    text-align: center;

    border-right: 1px solid #eeeeee;

    transition: .3s ease;
}

.jsl-electric-kettle-page .kettle-benefit-item i {
    margin-bottom: 12px;

    color: #171717;

    font-size: 31px;

    transition: .3s ease;
}

.jsl-electric-kettle-page .kettle-benefit-item span {
    color: #333333;

    font-size: 11px;

    font-weight: 600;

    text-transform: uppercase;
}

.jsl-electric-kettle-page .kettle-benefit-item:hover {
    background: #e31e24;
}

.jsl-electric-kettle-page .kettle-benefit-item:hover i,
.jsl-electric-kettle-page .kettle-benefit-item:hover span {
    color: #ffffff;
}


/* ============================================================
   05. LIFESTYLE
============================================================ */

.jsl-electric-kettle-page .kettle-lifestyle-section {
    padding: 100px 0;

    background: #f7f7f7;
}

.jsl-electric-kettle-page .kettle-lifestyle-content h2 {
    max-width: 590px;

    margin-bottom: 22px;

    color: #171717;

    font-size: 46px;

    line-height: 1.12;

    font-weight: 700;
}

.jsl-electric-kettle-page .kettle-lifestyle-content h2 span {
    display: block;

    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-lifestyle-content p {
    max-width: 590px;

    margin-bottom: 16px;

    color: #6f6f6f;

    font-size: 14px;

    line-height: 1.8;
}

.jsl-electric-kettle-page .kettle-dark-btn {
    margin-top: 8px;

    background: #171717;

    color: #ffffff;
}

.jsl-electric-kettle-page .kettle-dark-btn:hover {
    background: #e31e24;

    color: #ffffff;

    transform: translateY(-3px);
}

.jsl-electric-kettle-page .kettle-lifestyle-image {
    overflow: hidden;
}

.jsl-electric-kettle-page .kettle-lifestyle-image img {
    width: 100%;

    min-height: 430px;

    object-fit: cover;

    transition: .6s ease;
}

.jsl-electric-kettle-page .kettle-lifestyle-image:hover img {
    transform: scale(1.04);
}


/* ============================================================
   06. APPLICATIONS
============================================================ */

.jsl-electric-kettle-page .kettle-applications-section {
    padding: 100px 0;

    background: #ffffff;
}

.jsl-electric-kettle-page .kettle-app-heading {
    max-width: 750px;

    margin: auto;
}

.jsl-electric-kettle-page .kettle-app-heading h2 {
    margin: 0;

    color: #171717;

    font-size: 42px;

    font-weight: 700;
}

.jsl-electric-kettle-page .kettle-app-heading h2 span {
    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-app-card {
    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 155px;

    padding: 20px;

    background: #f8f8f8;

    border: 1px solid #eeeeee;

    text-align: center;

    transition: .3s ease;
}

.jsl-electric-kettle-page .kettle-app-card i {
    margin-bottom: 13px;

    color: #e31e24;

    font-size: 30px;
}

.jsl-electric-kettle-page .kettle-app-card span {
    color: #333333;

    font-size: 12px;

    font-weight: 600;
}

.jsl-electric-kettle-page .kettle-app-card:hover {
    background: #171717;

    border-color: #171717;

    transform: translateY(-5px);
}

.jsl-electric-kettle-page .kettle-app-card:hover span {
    color: #ffffff;
}


/* ============================================================
   07. CTA
============================================================ */

.jsl-electric-kettle-page .kettle-cta-section {
    padding: 0 0 100px;

    background: #ffffff;
}

.jsl-electric-kettle-page .kettle-cta-inner {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 55px;

    background: #171717;
}

.jsl-electric-kettle-page .kettle-cta-inner > div > span {
    display: block;

    margin-bottom: 9px;

    color: #e31e24;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.7px;
}

.jsl-electric-kettle-page .kettle-cta-inner h2 {
    margin: 0;

    color: #ffffff;

    font-size: 35px;

    font-weight: 600;
}

.jsl-electric-kettle-page .kettle-cta-inner h2 strong {
    color: #e31e24;
}

.jsl-electric-kettle-page .kettle-cta-btn {
    flex: 0 0 auto;

    background: #e31e24;

    color: #ffffff;
}

.jsl-electric-kettle-page .kettle-cta-btn:hover {
    background: #ffffff;

    color: #171717;

    transform: translateY(-3px);
}


/* ============================================================
   08. SUPPORT STRIP
============================================================ */

.jsl-electric-kettle-page .kettle-support-strip {
    padding: 30px 0;

    background: #ffffff;

    border-top: 1px solid #eeeeee;
}

.jsl-electric-kettle-page .kettle-support-item {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    min-height: 70px;

    border-right: 1px solid #e5e5e5;
}

.jsl-electric-kettle-page .kettle-support-item i {
    color: #171717;

    font-size: 29px;
}

.jsl-electric-kettle-page .kettle-support-item strong,
.jsl-electric-kettle-page .kettle-support-item span {
    display: block;
}

.jsl-electric-kettle-page .kettle-support-item strong {
    color: #222222;

    font-size: 12px;

    text-transform: uppercase;
}

.jsl-electric-kettle-page .kettle-support-item span {
    color: #777777;

    font-size: 10px;

    text-transform: uppercase;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .jsl-electric-kettle-page .kettle-hero-content h1 {
        font-size: 49px;
    }

    .jsl-electric-kettle-page .kettle-hero-product img {
        max-width: 310px;
    }

    .jsl-electric-kettle-page .kettle-overview-section,
    .jsl-electric-kettle-page .kettle-model-section,
    .jsl-electric-kettle-page .kettle-lifestyle-section,
    .jsl-electric-kettle-page .kettle-applications-section {
        padding: 75px 0;
    }

    .jsl-electric-kettle-page .kettle-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-electric-kettle-page .kettle-overview-content h2,
    .jsl-electric-kettle-page .kettle-main-heading,
    .jsl-electric-kettle-page .kettle-lifestyle-content h2 {
        font-size: 38px;
    }

    .jsl-electric-kettle-page .kettle-cta-inner {
        padding: 40px;

        flex-direction: column;

        align-items: flex-start;
    }
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .jsl-electric-kettle-page .kettle-hero,
    .jsl-electric-kettle-page .kettle-hero-row {
        min-height: auto;
    }

    .jsl-electric-kettle-page .kettle-hero-row {
        padding: 80px 0 45px;
    }

    .jsl-electric-kettle-page .kettle-hero-content h1 {
        font-size: 39px;

        letter-spacing: -1px;
    }

    .jsl-electric-kettle-page .kettle-hero-product {
        min-height: auto;

        padding-top: 35px;
    }

    .jsl-electric-kettle-page .kettle-hero-product img {
        max-width: 260px;
    }

    .jsl-electric-kettle-page .kettle-overview-section,
    .jsl-electric-kettle-page .kettle-model-section,
    .jsl-electric-kettle-page .kettle-lifestyle-section,
    .jsl-electric-kettle-page .kettle-applications-section {
        padding: 60px 0;
    }

    .jsl-electric-kettle-page .kettle-overview-content h2,
    .jsl-electric-kettle-page .kettle-main-heading,
    .jsl-electric-kettle-page .kettle-lifestyle-content h2,
    .jsl-electric-kettle-page .kettle-app-heading h2 {
        font-size: 31px;
    }

    .jsl-electric-kettle-page .kettle-tech-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jsl-electric-kettle-page .kettle-product-display {
        min-height: 320px;

        padding: 20px;
    }

    .jsl-electric-kettle-page .kettle-benefit-item {
        min-height: 125px;
    }

    .jsl-electric-kettle-page .kettle-lifestyle-image img {
        min-height: 320px;
    }

    .jsl-electric-kettle-page .kettle-cta-section {
        padding-bottom: 60px;
    }

    .jsl-electric-kettle-page .kettle-cta-inner {
        padding: 35px 25px;
    }

    .jsl-electric-kettle-page .kettle-cta-inner h2 {
        font-size: 27px;
    }

    .jsl-electric-kettle-page .kettle-support-item {
        justify-content: flex-start;

        padding: 15px 10px;

        border-bottom: 1px solid #eeeeee;
    }
}





































.legal-content {
    max-width: 1050px;
    margin: 0 auto;
    padding: 80px 25px 100px;
    color: #555;
    font-size: 15px;
    line-height: 1.85;
}

.legal-content h1 {
    margin-bottom: 35px;
    color: #171717;
    font-size: 48px;
    font-weight: 700;
    letter-spacing: -1px;
}

.legal-content h1::after {
    content: "";
    display: block;
    width: 65px;
    height: 4px;
    margin-top: 17px;
    background: #e31e24;
}

.legal-content h2 {
    margin: 42px 0 14px;
    color: #171717;
    font-size: 23px;
    font-weight: 650;
}

.legal-content p {
    margin-bottom: 16px;
}

.legal-content ul {
    margin: 10px 0 24px;
    padding-left: 22px;
}

.legal-content li {
    margin-bottom: 9px;
}

.legal-content li::marker {
    color: #e31e24;
}

.legal-content strong {
    color: #222;
}

.legal-content a {
    color: #e31e24;
    text-decoration: none;
}

.legal-content a:hover {
    text-decoration: underline;
}

.legal-updated {
    margin-top: 55px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
    color: #888;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

@media (max-width: 767.98px) {

    .legal-content {
        padding: 55px 18px 70px;
        font-size: 14px;
    }

    .legal-content h1 {
        font-size: 36px;
    }

    .legal-content h2 {
        margin-top: 32px;
        font-size: 20px;
    }

}





















































.jsl-feedback-page {
    background: #ffffff;
}

.feedback-hero {
    padding: 100px 0 80px;
    background: #171717;
}

.feedback-hero-content {
    max-width: 760px;
}

.feedback-kicker,
.feedback-section-label {
    display: block;
    margin-bottom: 12px;
    color: #e31e24;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.feedback-hero h1 {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 54px;
    line-height: 1.05;
    font-weight: 700;
}

.feedback-hero h1 span {
    display: block;
    color: #e31e24;
}

.feedback-hero p {
    max-width: 650px;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.8;
}

.feedback-form-section {
    padding: 100px 0;
    background: #f7f7f7;
}

.feedback-info h2 {
    margin-bottom: 18px;
    color: #171717;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
}

.feedback-info h2 span {
    color: #e31e24;
}

.feedback-info > p {
    color: #6f6f6f;
    line-height: 1.8;
}

.feedback-info-box {
    display: flex;
    gap: 15px;
    margin-top: 24px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #eeeeee;
}

.feedback-info-box i {
    color: #e31e24;
    font-size: 24px;
}

.feedback-info-box strong,
.feedback-info-box span {
    display: block;
}

.feedback-info-box strong {
    margin-bottom: 4px;
    color: #222;
    font-size: 13px;
}

.feedback-info-box span {
    color: #777;
    font-size: 12px;
    line-height: 1.6;
}

.feedback-form-card {
    padding: 35px;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(0,0,0,.05);
}

.feedback-form-card label {
    margin-bottom: 7px;
    color: #333;
    font-size: 12px;
    font-weight: 600;
}

.feedback-form-card .form-control,
.feedback-form-card .form-select {
    min-height: 48px;
    border-radius: 0;
    border: 1px solid #dddddd;
    font-size: 13px;
}

.feedback-form-card textarea.form-control {
    min-height: 140px;
}

.feedback-form-card .form-control:focus,
.feedback-form-card .form-select:focus {
    border-color: #e31e24;
    box-shadow: none;
}

.feedback-rating {
    display: flex;
    gap: 10px;
    margin-bottom: 8px;
}

.feedback-rating input {
    display: none;
}

.feedback-rating span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid #dddddd;
    cursor: pointer;
    transition: .3s;
}

.feedback-rating input:checked + span,
.feedback-rating span:hover {
    background: #e31e24;
    border-color: #e31e24;
    color: #ffffff;
}

.form-note,
.feedback-form-card small {
    color: #888;
    font-size: 10px;
}

.feedback-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 14px 24px;
    background: #e31e24;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    transition: .3s;
}

.feedback-submit-btn:hover {
    background: #171717;
}

@media (max-width: 767.98px) {

    .feedback-hero {
        padding: 70px 0 60px;
    }

    .feedback-hero h1 {
        font-size: 39px;
    }

    .feedback-form-section {
        padding: 60px 0;
    }

    .feedback-info h2 {
        font-size: 31px;
    }

    .feedback-form-card {
        padding: 25px 18px;
    }

}














.jsl-warranty-page {
    background: #ffffff;
}

.warranty-hero {
    padding: 100px 0 80px;
    background: #171717;
}

.warranty-hero-content {
    max-width: 760px;
}

.warranty-kicker,
.warranty-section-label {
    display: block;
    margin-bottom: 12px;
    color: #e31e24;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.warranty-hero h1 {
    margin: 0 0 20px;
    color: #ffffff;
    font-size: 54px;
    line-height: 1.05;
    font-weight: 700;
}

.warranty-hero h1 span {
    display: block;
    color: #e31e24;
}

.warranty-hero p {
    max-width: 640px;
    color: rgba(255,255,255,.72);
    font-size: 15px;
    line-height: 1.8;
}

.warranty-section {
    padding: 100px 0;
    background: #f7f7f7;
}

.warranty-info h2 {
    margin-bottom: 18px;
    color: #171717;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
}

.warranty-info h2 span {
    color: #e31e24;
}

.warranty-info > p {
    color: #6f6f6f;
    line-height: 1.8;
}

.warranty-step {
    display: flex;
    gap: 16px;
    margin-top: 24px;
}

.warranty-step > span {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    background: #e31e24;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.warranty-step strong {
    display: block;
    color: #222;
    font-size: 13px;
}

.warranty-step p {
    margin: 5px 0 0;
    color: #777;
    font-size: 12px;
    line-height: 1.6;
}

.warranty-important {
    display: flex;
    gap: 10px;
    margin-top: 30px;
    padding: 18px;
    background: #fff4f4;
    border-left: 3px solid #e31e24;
}

.warranty-important i {
    color: #e31e24;
}

.warranty-important p {
    margin: 0;
    color: #666;
    font-size: 11px;
    line-height: 1.65;
}

.warranty-form-card {
    padding: 35px;
    background: #ffffff;
    box-shadow: 0 20px 45px rgba(0,0,0,.05);
}

.warranty-form-card label {
    margin-bottom: 7px;
    color: #333333;
    font-size: 12px;
    font-weight: 600;
}

.warranty-form-card .form-control,
.warranty-form-card .form-select {
    min-height: 48px;
    border-radius: 0;
    border: 1px solid #dddddd;
    font-size: 13px;
}

.warranty-form-card textarea.form-control {
    min-height: 140px;
}

.warranty-form-card .form-control:focus,
.warranty-form-card .form-select:focus {
    border-color: #e31e24;
    box-shadow: none;
}

.warranty-form-card small {
    color: #888;
    font-size: 10px;
}

.warranty-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 0;
    padding: 14px 24px;
    background: #e31e24;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    transition: .3s;
}

.warranty-submit-btn:hover {
    background: #171717;
}

.warranty-conditions {
    padding: 100px 0;
    background: #ffffff;
}

.warranty-condition-heading {
    max-width: 650px;
    margin-bottom: 40px;
}

.warranty-condition-heading h2 {
    color: #171717;
    font-size: 42px;
    font-weight: 700;
}

.warranty-condition-card {
    height: 100%;
    padding: 28px;
    background: #f8f8f8;
    border: 1px solid #eeeeee;
}

.warranty-condition-card i {
    display: inline-block;
    margin-bottom: 17px;
    color: #e31e24;
    font-size: 28px;
}

.warranty-condition-card h4 {
    color: #222222;
    font-size: 17px;
    font-weight: 700;
}

.warranty-condition-card p {
    margin: 0;
    color: #777;
    font-size: 12px;
    line-height: 1.7;
}

.warranty-note {
    margin-top: 35px;
    padding: 20px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
}

.warranty-note p {
    margin: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.75;
}

@media (max-width: 767.98px) {

    .warranty-hero {
        padding: 70px 0 60px;
    }

    .warranty-hero h1 {
        font-size: 39px;
    }

    .warranty-section,
    .warranty-conditions {
        padding: 60px 0;
    }

    .warranty-info h2,
    .warranty-condition-heading h2 {
        font-size: 31px;
    }

    .warranty-form-card {
        padding: 25px 18px;
    }

}





/* ==================================
   PRODUCT IMAGE CAROUSEL
================================== */

.led-product-display {
    width: 100%;
    margin-top: 32px;
    position: relative;
}

.led-product-carousel {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
    border: 1px solid rgba(0, 0, 0, 0.07);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.led-product-carousel .carousel-inner {
    width: 100%;
    aspect-ratio: 3 / 2;
}

.led-product-carousel .carousel-item {
    width: 100%;
    height: 100%;
}

.led-product-carousel .carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #ffffff;
    padding: 12px;
}

/* Previous and next buttons */

.led-product-carousel .carousel-control-prev,
.led-product-carousel .carousel-control-next {
    width: 58px;
    opacity: 1;
}

.product-carousel-control {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background-color: #e31e24;
    box-shadow: 0 5px 15px rgba(227, 30, 36, 0.3);
    transition: all 0.3s ease;
}

.product-carousel-control i {
    font-size: 20px;
    line-height: 1;
}

.led-product-carousel .carousel-control-prev:hover 
.product-carousel-control,
.led-product-carousel .carousel-control-next:hover 
.product-carousel-control {
    background-color: #111111;
    transform: scale(1.08);
}

/* Indicators */

.led-product-carousel .carousel-indicators {
    margin-bottom: 12px;
}

.led-product-carousel .carousel-indicators button {
    width: 9px;
    height: 9px;
    margin: 0 4px;
    border: 0;
    border-radius: 50%;
    background-color: #b5b5b5;
    opacity: 1;
}

.led-product-carousel .carousel-indicators button.active {
    width: 25px;
    border-radius: 10px;
    background-color: #e31e24;
}

/* Mobile responsive */

@media (max-width: 767.98px) {
    .led-product-display {
        margin-top: 24px;
    }

    .led-product-carousel {
        border-radius: 14px;
    }

    .led-product-carousel .carousel-item img {
        padding: 8px;
    }

    .led-product-carousel .carousel-control-prev,
    .led-product-carousel .carousel-control-next {
        width: 48px;
    }

    .product-carousel-control {
        width: 36px;
        height: 36px;
    }

    .product-carousel-control i {
        font-size: 17px;
    }
}







/* Jeevan Smart Life Catalogue Section */
.jsl-catalogue-section {
    position: relative;
    padding: 75px 20px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 25%, rgba(255,255,255,.14), transparent 28%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,.11), transparent 25%),
        linear-gradient(135deg, #b90e16 0%, #e31e24 48%, #ff3b30 100%);
}

.jsl-catalogue-section::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    background-image:
        linear-gradient(45deg, transparent 48%, #fff 49%, #fff 51%, transparent 52%);
    background-size: 38px 38px;
}

.jsl-catalogue-shape {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
}

.shape-one {
    width: 320px;
    height: 320px;
    top: -180px;
    right: 10%;
}

.shape-two {
    width: 220px;
    height: 220px;
    left: -80px;
    bottom: -130px;
}

.jsl-catalogue-card {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    padding: 36px 40px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 26px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 25px 60px rgba(70,0,0,.25);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.catalogue-icon {
    width: 88px;
    height: 88px;
    display: grid;
    place-items: center;
    border-radius: 22px;
    color: #e31e24;
    background: #fff;
    box-shadow: 0 15px 35px rgba(81,0,0,.22);
    transform: rotate(-4deg);
    transition: .35s ease;
}

.jsl-catalogue-card:hover .catalogue-icon {
    transform: rotate(0deg) translateY(-5px);
}

.catalogue-icon svg {
    width: 43px;
    height: 43px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.catalogue-label {
    display: inline-block;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.2px;
    color: rgba(255,255,255,.78);
}

.catalogue-content h2 {
    margin: 0 0 10px;
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1.15;
    font-weight: 700;
    color: #fff;
}

.catalogue-content p {
    max-width: 650px;
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.7;
}

.catalogue-action {
    min-width: 245px;
    text-align: center;
}

.catalogue-download-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 13px 16px;
    overflow: hidden;
    color: #171717;
    text-decoration: none;
    text-align: left;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 14px 30px rgba(74,0,0,.22);
    transition: .3s ease;
}

.catalogue-download-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -130%;
    width: 70%;
    height: 100%;
    transform: skewX(-25deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(227,30,36,.12),
        transparent
    );
    transition: .6s ease;
}

.catalogue-download-btn:hover::before {
    left: 140%;
}

.catalogue-download-btn:hover {
    color: #e31e24;
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(74,0,0,.3);
}

.download-btn-icon {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: #e31e24;
}

.download-btn-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.download-btn-text {
    flex: 1;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
}

.download-btn-text small {
    display: block;
    margin-bottom: 4px;
    color: #8b8b8b;
    font-size: 9px;
    letter-spacing: 1.4px;
}

.download-arrow {
    font-size: 22px;
    transition: transform .3s ease;
}

.catalogue-download-btn:hover .download-arrow {
    transform: translateX(4px);
}

.catalogue-file-info {
    display: block;
    margin-top: 11px;
    color: rgba(255,255,255,.73);
    font-size: 11px;
    letter-spacing: .3px;
}

/* Tablet */
@media (max-width: 991px) {
    .jsl-catalogue-card {
        grid-template-columns: auto 1fr;
    }

    .catalogue-action {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 360px;
        margin: 5px auto 0;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .jsl-catalogue-section {
        padding: 50px 14px;
    }

    .jsl-catalogue-card {
        display: flex;
        flex-direction: column;
        padding: 30px 20px;
        text-align: center;
        border-radius: 22px;
    }

    .catalogue-icon {
        width: 76px;
        height: 76px;
    }

    .catalogue-content h2 {
        font-size: 27px;
    }

    .catalogue-content p {
        font-size: 14px;
    }

    .catalogue-action {
        min-width: 100%;
    }

    .catalogue-download-btn {
        max-width: 330px;
        margin: auto;
    }
}