/* ==========================================================
   Lumira Landing Page
   Version : 1.0
   Author  : PT Lumiera Mitra Integra
==========================================================*/


/* ==========================================================
   ROOT VARIABLES
==========================================================*/

:root{

    --primary:#7B1E3A;
    --primary-dark:#5B1027;
    --secondary:#F5F7FA;
    --dark:#1D2433;
    --text:#4B5563;
    --white:#FFFFFF;

    --border:#E8EAF1;

    --success:#22C55E;

    --shadow-sm:0 10px 25px rgba(0,0,0,.05);
    --shadow-md:0 18px 45px rgba(0,0,0,.08);
    --shadow-lg:0 30px 70px rgba(0,0,0,.12);

    --radius:18px;
    --radius-lg:28px;

    --transition:.35s ease;

}


/* ==========================================================
   RESET
==========================================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Poppins',sans-serif;
    color:var(--text);
    background:#fff;
    overflow-x:hidden;
    line-height:1.7;

}

img{

    max-width:100%;
    display:block;

}

a{

    text-decoration:none;
    transition:var(--transition);

}

section{

    position:relative;

}

.container{

    position:relative;
    z-index:2;

}


/* ==========================================================
   TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4,h5{

    font-family:'Outfit',sans-serif;
    color:var(--dark);
    font-weight:700;

}

.hero-title{

    font-size:58px;
    line-height:1.1;
    margin:25px 0;

}

.hero-subtitle{

    font-size:22px;

    font-weight:500;

    color:#FFD7E2;

    margin-bottom:20px;

}

.hero-description{

    font-size:18px;
    color:#667085;
    max-width:580px;

}

.hero-social-proof{

    margin-top:70px;

}

.hero-social-proof p{

    color:#BFC5CF;

    font-size:17px;

}

.hero-social-proof strong{

    color:#fff;

}

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

.navbar{

    padding:20px 0;
    transition:.4s;

    background:rgba(20,20,20,.15);

    backdrop-filter:blur(12px);

}

.navbar-brand img{

    height:44px;

}

.nav-link{

    color:#fff !important;
    margin-left:18px;
    font-weight:500;

}

.nav-link:hover{

    color:#FFD9E5 !important;

}

.navbar .btn{

    border-radius:999px;
}


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

.hero-section{

    min-height:auto;

    display:flex;

    align-items:center;

    overflow-x:hidden;
    overflow-y:visible;

    background:
    radial-gradient(circle at top right,#B3234E35 0%,transparent 35%),
    radial-gradient(circle at left,#7B1E3A18 0%,transparent 45%),
    linear-gradient(135deg,#2A2335 0%,#14243B 100%);

    color:#fff;

    padding-top:140px;

    padding-bottom:140px;

}

.hero-label{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

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

    color:#fff;

    font-size:14px;

    letter-spacing:1px;

    text-transform:uppercase;

}

.hero-title{

    color:#fff;

}

.hero-description{

    color:#d5d5d5;

}


/* ==========================================================
   HERO BADGE
==========================================================*/

.hero-badge-group{

display:flex;
flex-wrap:wrap;

gap:14px;

margin:28px 0 40px;

}

.hero-badge-group span{

display:flex;

align-items:center;

white-space:nowrap;

padding:10px 18px;

}

.hero-badge-group i{

    color:#47D16A;

    margin-right:6px;

}


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

.btn-primary{

    background:var(--primary);

    border:none;

    transition:.3s;

}

.btn-primary:hover{

    background:#922447;

    transform:translateY(-5px) scale(1.02);

    box-shadow:var(--shadow-md);

}

.btn-outline-light:hover{

    color:#111;

}

.btn-outline-light{

    color:#fff;
    border:1px solid rgba(255,255,255,.4);

}

.btn-outline-light:hover{

    background:#fff;
    color:#222;

}


/* ==========================================================
   TRUST BADGE
==========================================================*/

.trust-badge{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:30px;

}

.trust-badge span{

    color:#fff;

    font-size:14px;

}

.trust-badge i{

    color:#45D26B;

    margin-right:6px;

}


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

.hero-image{

    animation:floatImage 5s ease-in-out infinite;

    filter:drop-shadow(0 40px 60px rgba(0,0,0,.35));

    width:100%;
    
    max-width:560px;
    
    height:auto;
    
    margin:auto;

}


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

.hero-image-wrapper{

    position:relative;

    padding:60px;

}

.floating-card{

    position:absolute;

    background:#fff;

    color:#333;

    padding:18px;

    border-radius:18px;

    box-shadow:var(--shadow-md);

    display:flex;

    gap:15px;

    align-items:center;

    min-width:220px;

}

.floating-card .icon{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#F7E9EE;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.card-one{

    top:20px;
    left:0;

}

.card-two{

    bottom:80px;
    right:0;

}

.card-three{

    bottom:0;
    left:30px;

}


/* ==========================================================
   HERO STATS
==========================================================*/

.hero-stats{

    margin-top:80px;

    margin-bottom:90px;

}

.stat-box{

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

    backdrop-filter:blur(10px);

    padding:35px;

    text-align:center;

    border-radius:20px;

    box-shadow:var(--shadow-sm);

    transition:.3s;

}

.stat-box:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-lg);

}

.stat-box h2{

    color:var(--primary);

    font-size:29px;

}

.stat-box p{

    color:#6c757d !important;

    font-size:.95rem;

    margin:0;

    line-height:1.5;

}

.stat-box i{

    font-size:1.8rem;

    color:var(--primary-color);

    margin-bottom:15px;

    display:block;

}


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

.scroll-indicator{

    position:absolute;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

}

.scroll-indicator a{

    color:#fff;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    font-size:13px;

}

.scroll-indicator i{

    animation:bounce 2s infinite;

}


/* ==========================================================
   FLOATING WHATSAPP
==========================================================*/

.floating-whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    display:flex;

    align-items:center;

    gap:12px;

    background:#25D366;

    color:#fff;

    padding:14px 22px;

    border-radius:999px;

    font-weight:600;

    box-shadow:var(--shadow-lg);

    z-index:1045;
    
    animation:pulse 2s infinite;

}

/* ==========================================
   Partnership Process
========================================== */

.process-timeline{

    display:flex;

    justify-content:space-between;

    align-items:center;

    position:relative;

    margin-top:50px;

    gap:20px;

}

.process-timeline::before{

    content:"";

    position:absolute;

    top:22px;

    left:8%;

    right:8%;

    height:3px;

    background:#e5e7eb;

    z-index:0;

}

.process-item{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    flex:1;

    z-index:2;

}

.process-circle{

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary-color);

    color:#202020;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:700;

    font-size:1rem;

    margin-bottom:12px;

    box-shadow:0 8px 20px rgba(120,22,52,.25);

}

.process-item span{

    font-size:.95rem;

    font-weight:600;

    color:#444;

    text-align:center;

    line-height:1.4;

}


/* ==========================================================
   ANIMATION
==========================================================*/

@keyframes floatImage{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-12px);

    }

}

@keyframes bounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

@keyframes pulse{

    0%{

        box-shadow:0 0 0 0 rgba(37,211,102,.5);

    }

    70%{

        box-shadow:0 0 0 18px rgba(37,211,102,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(37,211,102,0);

    }

}


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

@media(max-width:991px){

    .hero-title{

        font-size:42px;

    }

    .hero-image{

        margin-top:60px;

    }

    .floating-card{

        display:none;

    }

    .hero-stats{

        margin-top:50px;

    }

    .process-timeline{

    flex-wrap:wrap;

    }

    .process-timeline::before{

        display:none;

    }

    .process-item{

        width:33.33%;

        margin-bottom:35px;

    }

}

@media(max-width:768px){

    .hero-title{

        font-size:34px;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-badge-group{

        justify-content:flex-start;

    }

    .hero-button-group{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

    }

    .hero-button-group .btn{

        width:100%;

    }

    .process-item{

    width:50%;

    }

}

/* ==========================================================
   SECTION (GLOBAL)
==========================================================*/

.section-label{

    display:inline-block;

    padding:10px 22px;

    background:rgba(123,30,58,.08);

    color:var(--primary);

    border-radius:999px;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    margin-bottom:18px;

}

.section-title{

    font-size:48px;

    margin-bottom:20px;

}

.section-description{

    font-size:18px;

    color:#6B7280;

    max-width:720px;

    margin:auto;

}


/* ==========================================================
   PROBLEM SECTION
==========================================================*/

.problem-section{

    padding:120px 0;

    background:#ffffff;

    position:relative;

}

.problem-section::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    background:#F8F3F5;

    border-radius:50%;

    top:-220px;

    right:-220px;

    z-index:0;

}

.problem-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:var(--primary);

border-radius:20px;

transform:scaleY(0);

transition:.35s;

}

.problem-card:hover::before{

transform:scaleY(1);

}

.problem-card{

    position:relative;

    z-index:2;

    background:#fff;

    border:1px solid #ECECEC;

    border-radius:24px;

    padding:40px;

    transition:.35s;

    height:100%;

    overflow:hidden;

}

.problem-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

    border-color:rgba(123,30,58,.15);

}

.problem-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    background:#F8E8ED;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    color:var(--primary);

    margin-bottom:25px;

}

.problem-card h4{

    margin-bottom:18px;

}

.problem-highlight{

    background:linear-gradient(135deg,#7B1E3A,#A82E54);

    color:#fff;

    padding:60px;

    border-radius:30px;

    margin-top:80px;

    overflow:hidden;

    position:relative;

}

.problem-highlight::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    border-radius:50%;

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

    right:-70px;

    top:-70px;

}

.problem-highlight h3{

    color:#fff;

    margin-bottom:18px;

}

.problem-highlight p{

    margin:0;

    color:#F3F3F3;

}


/* ==========================================================
   SOLUTION SECTION
==========================================================*/

.solution-section{

    padding:120px 0;

    background:#F7F8FB;

}

.solution-card{

    background:#fff;

    border-radius:28px;

    padding:45px;

    transition:.35s;

    box-shadow:var(--shadow-sm);

    border:1px solid transparent;

}

.solution-card:hover{

    transform:translateY(-10px);

    box-shadow:var(--shadow-lg);

    border-color:#E7D4DA;

}

.solution-icon{

    width:74px;

    height:74px;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#F8E8ED;

    color:var(--primary);

    font-size:30px;

    margin-bottom:30px;

    transition:.35s;

}

.solution-card:hover .solution-icon{

transform:rotate(-8deg) scale(1.08);

}

.solution-card h3{

    margin-bottom:20px;

}

.solution-card p{

    color:#6B7280;

}

.solution-card ul{

    margin-top:30px;

    padding-left:0;

    list-style:none;

}

.solution-card ul li{

    padding:12px 0;

    border-bottom:1px solid #F2F2F2;

    position:relative;

    padding-left:28px;

}

.solution-card ul li:last-child{

    border:none;

}

.solution-card ul li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:#22C55E;

    font-weight:700;

}


/* ==========================================================
   SOLUTION CTA
==========================================================*/

.solution-banner{

    margin-top:90px;

    background:#fff;

    border-radius:30px;

    padding:55px;

    box-shadow:var(--shadow-md);

    border:1px solid #EFEFEF;

}

.solution-banner h3{

    margin-bottom:15px;

}

.solution-banner p{

    color:#6B7280;

    margin-bottom:0;

}


/* ==========================================================
   RESPONSIVE PART 2
==========================================================*/

@media(max-width:991px){

    .section-title{

        font-size:38px;

    }

    .problem-highlight{

        padding:40px;

    }

    .solution-card{

        padding:35px;

    }

}

@media(max-width:768px){

    .problem-section,

    .solution-section{

        padding:80px 0;

    }

    .section-title{

        font-size:30px;

    }

    .section-description{

        font-size:16px;

    }

    .problem-card,

    .solution-card{

        padding:30px;

    }

    .problem-highlight,

    .solution-banner{

        padding:30px;

    }

}