/* ====================================
   ECARE SAAS WEBSITE
==================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{

--primary-red:#E53935;
--primary-green:#16A34A;
--dark:#0F172A;
--light:#F8FAFC;
--text:#64748B;
--border:#E2E8F0;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;
background:#ffffff;
color:#1E293B;
overflow-x:hidden;

}

a{
text-decoration:none;
}

ul{
padding:0;
margin:0;
list-style:none;
}

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

.custom-navbar{

padding:15px 0;
background:rgba(255,255,255,.95);
backdrop-filter:blur(10px);
box-shadow:0 5px 20px rgba(0,0,0,.05);
transition:.3s;

}

.navbar-brand img{

max-height:50px;

}

.nav-link{

font-size:15px;
font-weight:500;
color:#1E293B !important;
margin:0 8px;

}

.nav-link:hover{

color:var(--primary-green)!important;

}

.btn-danger{

background:var(--primary-red);
border:none;
border-radius:10px;
padding:12px 25px;
font-weight:600;

}

.btn-danger:hover{

background:#d32f2f;

}

.btn-outline-success{

border:2px solid var(--primary-green);
color:var(--primary-green);
border-radius:10px;
font-weight:600;

}

.btn-outline-success:hover{

background:var(--primary-green);

}

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

.hero-section{

padding-top:150px;
padding-bottom:100px;

background:
linear-gradient(
135deg,
#ffffff,
#f7fff8
);

position:relative;

}

.hero-title{

font-size:58px;
font-weight:800;
line-height:1.2;

}

.hero-text{

font-size:18px;
color:var(--text);
margin-top:20px;
margin-bottom:30px;
line-height:1.8;

}

.hero-buttons{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.hero-dashboard{

padding:20px;
background:#fff;
border-radius:25px;

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

}

.hero-dashboard img{

border-radius:20px;

}

.hero-stats{

display:flex;
gap:15px;
flex-wrap:wrap;

}

.stat-box{

background:#fff;
padding:20px 25px;
border-radius:15px;

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

min-width:120px;
text-align:center;

}

.stat-box h3{

font-size:28px;
font-weight:700;
color:var(--primary-green);

}

.stat-box p{

margin:0;
font-size:14px;

}

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

.section-padding{

padding:100px 0;

}

.section-title{

margin-bottom:60px;

}

.section-title h2{

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

}

.section-title p{

color:var(--text);

}

/* ====================================
   SECTOR CARDS
==================================== */

.sector-card{

background:#fff;

padding:35px 25px;

border-radius:20px;

text-align:center;

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

transition:.3s;

height:100%;

}

.sector-card:hover{

transform:translateY(-8px);

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

}

.sector-card i{

font-size:45px;

margin-bottom:20px;

color:var(--primary-green);

}

.sector-card h4{

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

}

/* ====================================
   MODULE CARDS
==================================== */

.module-card{

background:#fff;

padding:25px;

border-radius:18px;

font-weight:600;

text-align:center;

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

transition:.3s;

height:100%;

}

.module-card:hover{

background:
linear-gradient(
135deg,
var(--primary-green),
#22c55e
);

color:#fff;

transform:translateY(-8px);

}

/* ====================================
   COMPLIANCE
==================================== */

.compliance-section{

padding:100px 0;

background:
linear-gradient(
135deg,
#0F172A,
#1E293B
);

color:#fff;

}

.compliance-section h2{

font-size:48px;
font-weight:700;
margin-bottom:20px;

}

.compliance-section p{

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

opacity:.9;

}

.compliance-section ul li{

margin-bottom:12px;
font-size:18px;

}

.compliance-section img{

border-radius:25px;

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

}

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

.cta-section{

padding:100px 0;

background:
linear-gradient(
135deg,
var(--primary-red),
var(--primary-green)
);

color:#fff;

}

.cta-section h2{

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

}

.cta-section p{

font-size:20px;

margin-top:15px;
margin-bottom:30px;

}

.cta-section .btn{

padding:15px 35px;
font-size:22px;
font-weight:700;
border-radius:12px;

}

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

.footer-section{

background:#0F172A;

padding-top:80px;
padding-bottom:30px;

color:#fff;

}

.footer-text{

opacity:.8;
line-height:1.8;

}

.footer-section h5{

margin-bottom:20px;
font-weight:600;

}

.footer-links li{

margin-bottom:12px;

}

.footer-links a{

color:#CBD5E1;

}

.footer-links a:hover{

color:#fff;

}

.social-icons{

display:flex;
gap:12px;
margin-top:20px;

}

.social-icons a{

width:40px;
height:40px;

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

border-radius:50%;

background:#1E293B;

color:#fff;

}

.footer-divider{

border-color:#334155;
margin:40px 0;

}

.copyright{

margin:0;

}

.footer-contact{

font-weight:600;
margin:0;

}

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

.floating-whatsapp{

position:fixed;

left:20px;
bottom:20px;

width:60px;
height:60px;

border-radius:50%;

background:#25D366;

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

font-size:28px;
color:#fff;

z-index:999;

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

}

.floating-call{

position:fixed;

right:20px;
bottom:20px;

width:60px;
height:60px;

border-radius:50%;

background:var(--primary-red);

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

font-size:24px;
color:#fff;

z-index:999;

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

}

#backToTop{

position:fixed;

right:20px;
bottom:95px;

width:50px;
height:50px;

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

border:none;

background:var(--primary-green);

color:#fff;

border-radius:50%;

z-index:999;

}

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

@media(max-width:991px){

.hero-section{

padding-top:120px;
padding-bottom:60px;

}

.hero-title{

font-size:38px;

}

.section-title h2{

font-size:32px;

}

.compliance-section h2{

font-size:34px;

}

.cta-section h2{

font-size:38px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons .btn{

width:100%;

}

.hero-dashboard{

margin-top:40px;

}

}

@media(max-width:576px){

.hero-title{

font-size:32px;

}

.section-padding{

padding:70px 0;

}

.cta-section h2{

font-size:32px;

}

.stat-box{

width:100%;

}

}