*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#f5f7fb;
}

/* ======================
Navbar
====================== */

.navbar{
padding:18px 0;
transition:.4s;
}

.navbar.scrolled{
background:rgba(255,255,255,.95);
backdrop-filter:blur(20px);
box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.navbar-brand{
font-size:30px;
font-weight:800;
letter-spacing:.5px;
}

.navbar-brand span{
color:#4F46E5;
}

.nav-link{
font-size:15px;
font-weight:600;
color:#222 !important;
margin:0 8px;
position:relative;
}

.nav-link::after{
content:"";
position:absolute;
left:0;
bottom:-6px;
width:0;
height:2px;
background:#4F46E5;
transition:.35s;
}

.nav-link:hover::after{
width:100%;
}

.dropdown-menu{
border:none;
border-radius:18px;
padding:12px;
box-shadow:0 20px 50px rgba(0,0,0,.12);
}

.dropdown-item{
padding:12px 18px;
border-radius:12px;
font-weight:500;
}

.dropdown-item:hover{
background:#EEF2FF;
color:#4F46E5;
}

.navbar-toggler{
border:none;
box-shadow:none!important;
font-size:28px;
}

.offcanvas{
width:280px;
}

.offcanvas-title{
font-weight:700;
font-size:28px;
}

.offcanvas-title span{
color:#4F46E5;
}

.mobile-link{
padding:14px 0;
display:block;
font-weight:600;
text-decoration:none;
color:#222;
border-bottom:1px solid #eee;
}

.mobile-link:hover{
color:#4F46E5;
  
}
/*===================================

HERO SECTION

===================================*/

.hero{

position:relative;

padding:180px 0 120px;

overflow:hidden;

}

.hero-circle{

position:absolute;

border-radius:50%;

filter:blur(80px);

opacity:.25;

}

.hero-circle-1{

width:400px;

height:400px;

background:#6D5BFF;

top:-150px;

left:-150px;

}

.hero-circle-2{

width:500px;

height:500px;

background:#00C2FF;

right:-220px;

bottom:-180px;

}

.hero-tag{

display:inline-block;

padding:12px 22px;

background:#EEF2FF;

border-radius:50px;

font-size:14px;

font-weight:600;

color:#4F46E5;

margin-bottom:25px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.1;

margin-bottom:25px;

color:#111827;

}

.hero h1 span{

display:block;

color:#4F46E5;

}

.hero p{

font-size:18px;

line-height:34px;

color:#64748B;

margin-bottom:35px;

}

.hero-btn{

padding:15px 34px;

background:#4F46E5;

color:white;

border-radius:14px;

font-weight:600;

}

.hero-btn:hover{

background:#392dd6;

color:white;

}

.hero-link{

margin-left:25px;

text-decoration:none;

font-weight:700;

color:#111827;

}

.hero-clients{

display:flex;

gap:15px;

margin-top:45px;

}

.client{

width:55px;

height:55px;

background:white;

border-radius:15px;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.hero-image{

position:relative;

padding:30px;

}

.dashboard-card{

background:white;

padding:35px;

border-radius:28px;

box-shadow:0 25px 60px rgba(0,0,0,.08);

}

.income small{

color:#888;

}

.income h2{

font-size:42px;

font-weight:700;

margin:10px 0;

}

.income span{

color:#22C55E;

font-weight:700;

}

.chart{

height:220px;

margin-top:30px;

border-radius:20px;

background:linear-gradient(135deg,#4F46E5,#00C2FF);

}

.floating-card{

position:absolute;

background:white;

padding:18px 22px;

border-radius:18px;

box-shadow:0 15px 40px rgba(0,0,0,.1);

}

.one{

left:-20px;

top:80px;

}

.two{

right:-20px;

bottom:40px;

}

.floating-card h5{

font-size:15px;

margin-bottom:6px;

}

.floating-card strong{

font-size:22px;

color:#4F46E5;

}
/*====================

SERVICES

=====================*/

.services{

padding:120px 0;

background:#fff;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title span{

color:#4F46E5;

font-weight:700;

letter-spacing:2px;

font-size:14px;

}

.section-title h2{

font-size:52px;

font-weight:800;

margin:18px 0;

color:#111827;

}

.section-title p{

max-width:700px;

margin:auto;

color:#64748B;

line-height:32px;

}

.service-card{

background:white;

padding:40px 35px;

border-radius:24px;

transition:.4s;

height:100%;

border:1px solid #eef2f7;

position:relative;

overflow:hidden;

}

.service-card::before{

content:"";

position:absolute;

width:180px;

height:180px;

background:#EEF2FF;

border-radius:50%;

right:-90px;

top:-90px;

transition:.4s;

}

.service-card:hover::before{

transform:scale(1.3);

}

.service-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 50px rgba(0,0,0,.08);

}

.icon{

width:70px;

height:70px;

background:#4F46E5;

color:white;

font-size:28px;

display:flex;

align-items:center;

justify-content:center;

border-radius:18px;

margin-bottom:25px;

position:relative;

z-index:2;

}

.service-card h4{

font-size:24px;

font-weight:700;

margin-bottom:15px;

position:relative;

z-index:2;

}

.service-card p{

color:#64748B;

line-height:30px;

position:relative;

z-index:2;

}

.service-card a{

text-decoration:none;

font-weight:700;

color:#4F46E5;

position:relative;

z-index:2;

}
/*========================

WHY LOTOPY

=========================*/

.why-lotopy{

padding:120px 0;

background:#f8fbff;

}

.section-tag{

display:inline-block;

padding:10px 18px;

background:#EEF2FF;

border-radius:40px;

font-size:14px;

font-weight:700;

color:#4F46E5;

margin-bottom:20px;

}

.why-lotopy h2{

font-size:48px;

font-weight:800;

line-height:1.2;

margin-bottom:20px;

}

.why-text{

font-size:17px;

line-height:32px;

color:#64748B;

margin-bottom:40px;

}

.why-image{

position:relative;

}

.image-placeholder{

height:520px;

border-radius:30px;

background:linear-gradient(135deg,#4F46E5,#00C2FF);

display:flex;

justify-content:center;

align-items:center;

color:white;

font-size:90px;

box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.experience-card{

position:absolute;

left:-30px;

top:40px;

background:white;

padding:25px 35px;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.1);

z-index:5;

}

.experience-card h2{

margin:0;

font-size:42px;

color:#4F46E5;

}

.experience-card p{

margin:0;

}

.feature-box{

display:flex;

gap:20px;

padding:22px;

background:white;

border-radius:20px;

margin-bottom:20px;

transition:.35s;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.feature-box:hover{

transform:translateX(10px);

}

.feature-icon{

width:60px;

height:60px;

background:#4F46E5;

color:white;

display:flex;

align-items:center;

justify-content:center;

border-radius:16px;

font-size:24px;

flex-shrink:0;

}

.feature-box h5{

font-weight:700;

margin-bottom:8px;

}

.feature-box p{

margin:0;

color:#64748B;

}

@media(max-width:991px){

.why-lotopy h2{

font-size:36px;

}

.image-placeholder{

height:380px;

}

.experience-card{

position:static;

margin-bottom:20px;

display:inline-block;

}

}
/*========================

BLOG SECTION

=========================*/

.blog-section{

padding:120px 0;

background:#fff;

}

.blog-card{

background:#fff;

border-radius:22px;

overflow:hidden;

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

transition:.35s;

height:100%;

}

.blog-card:hover{

transform:translateY(-10px);

}

.blog-card img{

width:100%;

height:240px;

object-fit:cover;

}

.blog-content{

padding:25px;

}

.blog-category{

display:inline-block;

background:#EEF2FF;

color:#4F46E5;

padding:6px 14px;

border-radius:40px;

font-size:13px;

font-weight:600;

margin-bottom:18px;

}

.blog-content h4{

font-size:24px;

font-weight:700;

margin-bottom:12px;

}

.blog-content p{

color:#64748B;

margin-bottom:20px;

}

.blog-content a{

text-decoration:none;

font-weight:700;

color:#4F46E5;

}