.hero{
    position:relative;
    padding:100px 20px;
    overflow:hidden;
    background:#0f172a;
    color:#fff;
}

.hero-bg{
    position:absolute;
    inset:0;
    background: radial-gradient(circle at 20% 20%, #00C2A8 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, #38bdf8 0%, transparent 40%);
    opacity:0.25;
}

/* LAYOUT */
.hero-container{
    max-width:1200px;
    margin:auto;
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:50px;
    align-items:center;
    position:relative;
    z-index:1;
}

/* BADGE */
.badge{
    display:inline-block;
    padding:6px 14px;
    background:rgba(0,194,168,0.15);
    color:#00C2A8;
    border-radius:30px;
    font-size:13px;
    margin-bottom:15px;
}

/* TEXT */
.hero-content h1{
    font-size:52px;
    line-height:1.2;
}

.hero-content h1 span{
    color:#00C2A8;
}

.hero-content p{
    margin-top:15px;
    color:#cbd5e1;
    line-height:1.7;
}

/* BUTTONS */
.hero-btns{
    margin-top:25px;
    display:flex;
    gap:15px;
}

.btn-primary{
    background:#00C2A8;
    color:#fff;
    padding:12px 22px;
    border-radius:30px;
    text-decoration:none;
    transition:0.3s;
}

.btn-primary:hover{
    transform:translateY(-3px);
}

.btn-outline{
    border:2px solid #00C2A8;
    color:#00C2A8;
    padding:12px 22px;
    border-radius:30px;
    text-decoration:none;
}

.btn-outline:hover{
    background:#00C2A8;
    color:#fff;
}

/* STATS */
.hero-stats{
    display:flex;
    gap:20px;
    margin-top:30px;
}

.stat{
    background:rgba(255,255,255,0.06);
    padding:15px;
    border-radius:15px;
    min-width:120px;
    backdrop-filter:blur(10px);
}

/* DASHBOARD CARD */
.dashboard-card{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:20px;
    padding:20px;
    backdrop-filter:blur(15px);
    transform:perspective(1000px) rotateY(-8deg);
    transition:0.5s;
}

.dashboard-card:hover{
    transform:perspective(1000px) rotateY(0deg) scale(1.02);
}

/* HEADER DOTS */
.dash-header{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:20px;
    color:#cbd5e1;
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%;
}

.red{background:#ef4444;}
.yellow{background:#facc15;}
.green{background:#22c55e;}

/* GRID */
.dash-body{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.dash-box{
    background:rgba(255,255,255,0.08);
    padding:20px;
    border-radius:15px;
    text-align:center;
    transition:0.3s;
}

.dash-box:hover{
    transform:translateY(-5px);
    background:rgba(0,194,168,0.2);
}

.dash-box h2{
    color:#00C2A8;
    margin-top:5px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

    .hero-stats{
        justify-content:center;
    }
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

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

    .hero-btns{
        justify-content:center;
    }
}

/* responsive */
@media(max-width:768px){
    .hero-container{
        grid-template-columns:1fr;
        text-align:center;
    }

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

    .hero-btns{
        justify-content:center;
    }
}
.features{
    padding:90px 20px;
    background:#ffffff;
}

.section-title{
    text-align:center;
    margin-bottom:40px;
}

.section-title h2{
    font-size:36px;
    color:#0F172A;
}

.section-title p{
    color:#64748b;
}

/* GRID */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    max-width:1100px;
    margin:auto;
}

/* CARD */
.feature-card{
    background:#f8fafc;
    border:1px solid rgba(0,194,168,0.15);
    border-radius:16px;
    padding:25px;
    text-align:center;
    transition:0.3s;
}

.feature-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    border-color:#00C2A8;
}


.grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.card{
    background: #fff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    align-items: center;

    height: 220px; /* IMPORTANT: fixed height */
}

.icon{
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border-radius: 50%;
    background: #f2f2f2;
}
/* ================= 3D CARD EFFECT ================= */
.card,
.module-card,
.blog-card,
.value-card,
.why-card,
.step-card,
.info-card,
.form-card {
    transform-style: preserve-3d;
    transition: all 0.35s ease;
    will-change: transform;
}

/* MAIN 3D HOVER */
.card:hover,
.module-card:hover,
.blog-card:hover,
.value-card:hover,
.why-card:hover,
.step-card:hover,
.info-card:hover,
.form-card:hover {
    transform: perspective(1000px) rotateX(6deg) rotateY(-6deg) translateY(-10px);
    box-shadow: 0 25px 50px rgba(0,0,0,0.18);
}

/* ICON FLOAT EFFECT (optional but nice) */
.card i,
.icon,
.icon-box {
    transition: 0.3s ease;
}

.card:hover i,
.card:hover .icon,
.module-card:hover .icon-box,
.value-card:hover .icon {
    transform: translateZ(40px) scale(1.1);
}

/* BUTTON POP INSIDE CARD */
.card:hover h3,
.card:hover p {
    transform: translateZ(20px);
    transition: 0.3s;
}
.feature-card h3{
    color:#00C2A8;
    margin-bottom:8px;
}

.feature-card p{
    font-size:14px;
    color:#475569;
}

/* RESPONSIVE */
@media(max-width:992px){
    .feature-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:600px){
    .feature-grid{
        grid-template-columns:1fr;
    }
}

.testimonials{
    padding:80px 20px;
    background:linear-gradient(180deg,#f8fafc,#ecfeff);
}

/* TITLE */
.section-title{
    text-align:center;
    margin-bottom:40px;
}

.section-title h2{
    font-size:36px;
    font-weight:800;
    color:#0F172A;
}

.section-title p{
    color:#64748b;
    margin-top:8px;
}

/* CARD */
.testi-card{
    max-width:700px;
    margin:auto;
    background:#fff;
    padding:40px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    text-align:center;
}

/* TEXT */
.testi-card p{
    font-size:16px;
    color:#475569;
    line-height:1.8;
    margin-bottom:20px;
}

/* NAME */
.testi-card h4{
    margin:0;
    color:#0F172A;
    font-weight:700;
}

.testi-card span{
    color:#00C2A8;
    font-size:14px;
    font-weight:600;
}

.testimonials{
    padding:40px 0;   /* reduce from large padding */
    background:#f8fafc;
}

.section-title{
    text-align:center;
    margin-bottom:20px;  /* reduce space */
}

.section-title h2{
    font-size:28px;
    margin-bottom:5px;
}

.section-title p{
    font-size:14px;
    color:#666;
}

/* CAROUSEL CARD */
.testi-card{
    max-width:600px;
    margin:0 auto;
    padding:20px;
    text-align:center;
}

/* REDUCE TEXT SIZE */
.testi-card p{
    font-size:15px;
    line-height:1.5;
    margin-bottom:10px;
}

.testi-card h4{
    font-size:18px;
    margin:5px 0 0;
}

.testi-card span{
    font-size:13px;
    color:#777;
}

/* REMOVE EXTRA HEIGHT */
.carousel-item{
    padding:10px 0;
}

/* INDICATORS SMALL */
.carousel-indicators{
    margin-bottom:0;
}

.carousel-control-prev,
.carousel-control-next{
    width:40px;
}
/* CONTROLS COLOR */
.carousel-control-prev-icon,
.carousel-control-next-icon{
    background-color:#00C2A8;
    border-radius:50%;
    padding:15px;
}
/* responsive */
@media(max-width:992px){
    .testimonial-grid{
        grid-template-columns:1fr;
    }
}

.contact{
    padding:100px 20px;
    background:#f8fafc;
}

/* title */
.section-title{
    text-align:center;
    margin-bottom:50px;
}

.section-title h2{
    font-size:38px;
    color:#0F172A;
}

.section-title p{
    color:#64748b;
}

/* layout */
.contact-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    max-width:1100px;
    margin:auto;
}

/* LEFT CARD */
.info-card{
    background:linear-gradient(135deg,#ffffff,#f0fdfa);
    padding:35px;
    border-radius:18px;
    border:1px solid rgba(0,194,168,0.15);
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.info-card h3{
    color:#00C2A8;
    margin-bottom:15px;
}

.company{
    font-weight:600;
    color:#0F172A;
    margin-bottom:20px;
}

.info{
    margin-bottom:12px;
    font-size:14px;
    color:#475569;
    line-height:1.5;
}

/* RIGHT FORM */
.form-card{
    background:#fff;
    padding:35px;
    border-radius:18px;
    border:1px solid rgba(0,194,168,0.15);
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.form-card h3{
    margin-bottom:15px;
    color:#0F172A;
}

.form-card input,
.form-card textarea{
    width:100%;
    padding:12px;
    margin-bottom:15px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    outline:none;
}

.form-card input:focus,
.form-card textarea:focus{
    border-color:#00C2A8;
}

/* button */
.form-card button{
    width:100%;
    padding:12px;
    background:#00C2A8;
    color:#fff;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-size:15px;
    transition:0.3s;
}

.form-card button:hover{
    background:#0ea893;
    transform:translateY(-2px);
}

/* RESPONSIVE */
@media(max-width:992px){
    .contact-wrapper{
        grid-template-columns:1fr;
    }
}
.demo-cta{
    margin-top:50px;
    text-align:center;
    padding:40px;
    background:linear-gradient(135deg,#00C2A8,#14B8A6);
    border-radius:18px;
    color:#fff;
}

.demo-cta h3{
    color:#fff;
    font-size:24px;
    margin-bottom:10px;
}

.demo-cta p{
    color:#f1f5f9;
    font-size:14px;
    margin-bottom:20px;
}

.demo-btn-large{
    display:inline-block;
    padding:12px 25px;
    background:#fff;
    color:#00C2A8;
    border-radius:30px;
    text-decoration:none;
    font-weight:600;
}

.why-choose{
    padding:90px 20px;
    background:#ffffff;
}

/* grid */
.why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    max-width:1100px;
    margin:auto;
}

/* card */
.why-card{
    background:#f8fafc;
    border:1px solid rgba(0,194,168,0.15);
    padding:25px;
    border-radius:16px;
    text-align:center;
    transition:0.3s;
}

.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
    border-color:#00C2A8;
}

/* icon */
.why-card .icon{
    font-size:32px;
    margin-bottom:10px;
}

/* title */
.why-card h3{
    color:#0F172A;
    margin-bottom:8px;
}

/* text */
.why-card p{
    font-size:14px;
    color:#64748b;
    line-height:1.5;
}

/* responsive */
@media(max-width:992px){
    .why-grid{
        grid-template-columns:1fr;
    }
}

.faq{
    padding:90px 20px;
    background:#f8fafc;
}

/* container */
.faq-container{
    max-width:900px;
    margin:auto;
}

/* item */
.faq-item{
    background:#fff;
    border:1px solid rgba(0,194,168,0.15);
    margin-bottom:15px;
    border-radius:12px;
    padding:15px 20px;
    transition:0.3s;
}

/* question */
.faq-item summary{
    cursor:pointer;
    font-weight:600;
    color:#0F172A;
    list-style:none;
}

/* answer */
.faq-item p{
    margin-top:10px;
    font-size:14px;
    color:#64748b;
    line-height:1.5;
}

/* open effect */
.faq-item[open]{
    border-color:#00C2A8;
    box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

.how-it-works{
    padding:90px 20px;
    background:#ffffff;
}

/* grid */
.steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
    max-width:1100px;
    margin:auto;
}

/* card */
.step-card{
    background:#f8fafc;
    border:1px solid rgba(0,194,168,0.15);
    border-radius:16px;
    padding:25px;
    text-align:center;
    transition:0.3s;
    position:relative;
}

.step-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* step number */
.step-number{
    width:40px;
    height:40px;
    margin:auto;
    background:#00C2A8;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    margin-bottom:15px;
}

/* text */
.step-card h3{
    color:#0F172A;
    margin-bottom:8px;
}

.step-card p{
    color:#64748b;
    font-size:14px;
    line-height:1.5;
}

/* responsive */
@media(max-width:992px){
    .steps{
        grid-template-columns:1fr;
    }
}

.footer{
    background:linear-gradient(135deg,#0F172A,#111827);
    color:#fff;
    padding:60px 20px 20px;
    width:100%;
}

.footer-container{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
    gap:30px;
    max-width:1200px;
    margin:auto;
}

.footer-box h2{
    font-size:28px;
    font-weight:800;
}

.footer-box h2 span{
    color:#00C2A8;
}

.footer-box h3{
    color:#00C2A8;
    margin-bottom:15px;
}

.footer-box p{
    font-size:14px;
    color:#cbd5e1;
    line-height:1.7;
}

.footer-box a{
    display:block;
    color:#cbd5e1;
    text-decoration:none;
    margin-bottom:10px;
    font-size:14px;
    transition:0.3s;
}

.footer-box a:hover{
    color:#00C2A8;
    transform:translateX(6px);
}

/* SOCIAL ICONS */
.social{
    margin-top:15px;
}

.social a{
    display:inline-block;
    margin-right:10px;
    font-size:18px;
    color:#cbd5e1;
    transition:0.3s;
}

.social a:hover{
    color:#00C2A8;
    transform:scale(1.2);
}

/* BOTTOM */
.footer-bottom{
    text-align:center;
    margin-top:40px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,0.1);
    font-size:13px;
    color:#94a3b8;
}
.footer{
    margin-top:80px;
}

.container:last-child,
section:last-of-type{
    margin-bottom:40px;
}
/* responsive */
@media(max-width:992px){
    .footer-container{
        grid-template-columns:1fr;
        text-align:center;
    }
}
.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:60px;
    height:60px;
    background:#25D366;
    color:#fff;
    font-size:28px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    z-index:9999;
    transition:0.3s;
}

.whatsapp-float:hover{
    transform:scale(1.1);
}

.modal-content{
    border:none;
    border-radius:20px;
    overflow:hidden;
}

.modal-header{
    background:#00C2A8;
    color:#fff;
}

.modal-title{
    font-weight:700;
}

.form-control{
    border-radius:10px;
    padding:12px;
}

.btn-success{
    background:#00C2A8;
    border:none;
    border-radius:10px;
    padding:12px;
}

.btn-success:hover{
    background:#00a890;
}
.module-card{
    background:#fff;
    padding:30px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
    height:100%;
    transition:.3s;
}

.module-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.12);
}

.module-card h4{
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
    color:#0d6efd;
}

.module-card p{
    color:#666;
    line-height:1.8;
}

.demoModal{
   z-index: 100000000; 
}

.featured{
    background:linear-gradient(135deg,#0d6efd,#4f46e5);
    color:#fff;
}

.featured h4,
.featured p{
    color:#fff;
}

body{
    font-family:Arial;
    background:#f6f8fb;
    margin:0;
}

.container{
    max-width:900px;
    margin:auto;
    padding:60px 20px;
}

.box{
    background:#fff;
    padding:40px;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    text-align:center;
}

h1{color:#025554;}

p{color:#555;}

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

li{padding:8px;}

/* ICON */
.icon{
    width:80px;
    height:80px;
    margin:auto;
    background:#025554;
    border-radius:18px;
    position:relative;
}

.icon-growth::before{
    content:"";
    position:absolute;
    width:45px;
    height:35px;
    border-left:3px solid #fff;
    border-bottom:3px solid #fff;
    top:25px;
    left:18px;
}

.icon-growth::after{
    content:"";
    position:absolute;
    width:8px;
    height:8px;
    background:#fff;
    top:35px;
    left:20px;
    box-shadow:12px -8px 0 #fff, 24px -15px 0 #fff;
    border-radius:50%;
}

.btn{
    display:inline-block;
    margin-top:20px;
    padding:10px 15px;
    background:#025554;
    color:#fff;
    text-decoration:none;
    border-radius:8px;
}