/* =========================================
DATAVION ANALYTICS - PREMIUM CSS
========================================= */

:root{
--primary:#2563eb;
--primary-dark:#1d4ed8;
--dark:#0f172a;
--text:#334155;
--text-light:#64748b;
--border:#e2e8f0;


--shadow-sm:0 4px 12px rgba(15,23,42,.05);
--shadow-md:0 10px 30px rgba(15,23,42,.08);
--shadow-lg:0 20px 60px rgba(15,23,42,.12);

--radius:20px;


}

/* =========================================
GLOBAL
========================================= */

html{
scroll-behavior:smooth;
}

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

section{
padding:100px 0;
}

.container{
max-width:1280px;
}

img{
max-width:100%;
}

::selection{
background:var(--primary);
color:#fff;
}

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

.navbar{
background:rgba(255,255,255,.95);
backdrop-filter:blur(15px);
border-bottom:1px solid var(--border);
box-shadow:0 2px 20px rgba(0,0,0,.04);
}

.navbar-brand{
font-weight:800;
}

.nav-link{
font-weight:600;
color:#475569 !important;
margin-left:10px;
transition:.3s;
}

.nav-link:hover{
color:var(--primary) !important;
}

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

.hero{
    padding:80px 0;
    background:#f8fafc;
}
.hero-title{
    font-size:clamp(3rem,5vw,4.5rem);
    line-height:1.1;
}

.hero h1{
font-size:3.6rem;
font-weight:800;
line-height:1.15;
color:var(--dark);
margin-bottom:25px;
}

.hero p{
font-size:1.2rem;
color:var(--text-light);
line-height:1.8;
max-width:600px;
margin-bottom:35px;
}

.hero-image{
width:100%;
max-width:620px;
border-radius:24px;
box-shadow:0 30px 80px rgba(15,23,42,.18);
transition:.4s ease;
}

.hero-image:hover{
transform:translateY(-8px);
}

.hero-stats{
display:flex;
gap:50px;
margin-top:40px;
}

.hero-stats h3{
color:var(--primary);
font-weight:800;
margin-bottom:5px;
}

.hero-stats span{
color:var(--text-light);
}

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

.btn-primary{
background:var(--primary);
border:none;
padding:14px 30px;
border-radius:12px;
font-weight:600;
}

.btn-primary:hover{
background:var(--primary-dark);
}

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

.card{
border:none;
border-radius:var(--radius);
overflow:hidden;
box-shadow:var(--shadow-sm);
transition:.35s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
}

/* =========================================
SERVICES
========================================= */

/* Services Grid */
.service-card{
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Smaller image */
.service-card img,
.service-image{
    height: 180px !important;
    width: 100%;
    object-fit: cover;
}

/* Card body */
.service-card .card-body{
    display:flex;
    flex-direction:column;
    padding:20px;
}

/* Title */
.service-card .card-title{
    font-size:1.8rem;
    margin-bottom:10px;
}

/* Description */
.service-card .card-text{
    font-size:.95rem;
    line-height:1.6;
    color:#64748b;

    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient:vertical;
    overflow:hidden;

    min-height:95px;
}

/* Button always bottom */
.service-card .btn{
    margin-top:auto;
}

/* Equal card heights */
.services-grid .col-lg-6,
.services-grid .col-md-6{
    display:flex;
}
/* =========================================
BLOG
========================================= */
/* BLOG DETAIL */

.article-wrapper{
    max-width:900px;
    margin:auto;
}

.article-content{
    font-size:1.15rem;
    line-height:2;
    color:#475569;
}

.article-content h1{
    font-size:2.2rem;
    font-weight:700;
    line-height:1.3;
    margin-bottom:20px;
}

.article-content h2{
    font-size:1.8rem;
}

.article-content h3{
    font-size:1.4rem;
}
.article-content{
    max-width:800px;
    margin:auto;
    font-size:1.1rem;
    line-height:1.9;
}
.article-content p{
    margin-bottom:24px;
}

.article-content ul,
.article-content ol{
    padding-left:30px;
    margin-bottom:25px;
}

.article-content li{
    margin-bottom:12px;
}

.article-content blockquote{
    border-left:4px solid #2563eb;
    padding-left:20px;
    margin:30px 0;
    color:#64748b;
    font-style:italic;
}

.article-card{
    background:#fff;
    border-radius:24px;
    padding:60px;
    box-shadow:0 10px 40px rgba(0,0,0,.06);
}

.blog-card img{
width:100%;
height:260px;
object-fit:cover;
}

/* =========================================
TEAM
========================================= */

.team-card{
border-radius:20px;
overflow:hidden;
box-shadow:var(--shadow-md);
}

.team-card img{
width:100%;
height:340px;
object-fit:cover;
}
.team-image{
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center top;
}
/* =========================================
FORMS
========================================= */

.form-control{
height:55px;
border-radius:12px;
border:1px solid var(--border);
}

.form-control:focus{
border-color:var(--primary);
box-shadow:none;
}

textarea.form-control{
min-height:150px;
}

/* =========================================
CHATBOT
========================================= */

.chat-box{
height:600px;
overflow-y:auto;
padding:30px;
background:#f8fafc;
}

.user-message{
max-width:65%;
margin-left:auto;
background:var(--primary);
color:#fff;
padding:14px 18px;
border-radius:18px 18px 4px 18px;
margin-bottom:20px;
}

.ai-message{
max-width:75%;
background:#fff;
padding:18px 22px;
border-radius:18px 18px 18px 4px;
box-shadow:0 5px 20px rgba(0,0,0,.05);
margin-bottom:20px;
}

/* =========================================
SERVICE DETAILS
========================================= */

.service-content{
    font-size:1.1rem;
    line-height:2;
    color:#475569;
}

.service-content h1,
.service-content h2,
.service-content h3,
.service-content h4{
color:var(--dark);
font-weight:700;
margin-top:2rem;
margin-bottom:1rem;
}

.service-content ul{
padding-left:1.5rem;
}

.service-content li{
margin-bottom:.75rem;
}

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

.footer{
background:#0f172a;
color:#cbd5e1;
padding:90px 0 30px;
}

.footer-title{
color:#fff;
font-weight:700;
margin-bottom:25px;
}

.text-light-50{
color:#94a3b8 !important;
text-decoration:none;
}

.text-light-50:hover{
color:#fff !important;
}

.social-links a{
width:45px;
height:45px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:rgba(255,255,255,.08);
color:#fff;
margin-right:10px;
}

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

@media(max-width:992px){

.hero{
    text-align:center;
    min-height:auto;
    padding:80px 0;
}

.hero h1{
    font-size:3rem;
}

.hero-image{
    margin-top:50px;
}

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


}

@media(max-width:768px){

    section{
        padding:70px 0;
    }

    .hero h1{
        font-size:2.5rem;
    }

    .hero p{
        font-size:1rem;
        margin:auto;
    }

    .hero-stats{
        flex-wrap:wrap;
        gap:25px;
    }

    .team-card img{
        height:280px;
    }

    .blog-card img{
        height:220px;
    }

    .cta-title{
        font-size:1.8rem;
    }

    .cta-subtitle{
        font-size:.95rem;
    }

    
    }
    .service-banner{
        height:280px;
    }

    .service-content-card{
        position:relative;
        top:auto;
        padding:24px;
        margin-top:20px;
}

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

.cta-section{
    background:linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );
    padding:40px 0 !important;
    text-align:center;
}

.cta-title{
    color:#fff;
    font-size:2rem;
    font-weight:700;
    margin-bottom:10px;
}

.cta-subtitle{
    color:rgba(255,255,255,.9);
    font-size:1rem;
    margin-bottom:20px;
}

.cta-btn{
    display:inline-block;
    background:#fff;
    color:#2563eb;
    padding:10px 24px;
    border-radius:10px;
    font-weight:600;
    text-decoration:none;
}

.cta-trust{
    margin-top:15px;
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
    font-size:.9rem;
    color:rgba(255,255,255,.9);
}
.service-banner{
    width:100%;
    height:280px;
    object-fit:contain;
    background:#fff;
    border-radius:20px;
    padding:10px;
}
.service-image-wrapper{
    margin-bottom:15px;
}
.service-content-card{
    padding:50px;
}
/* =========================================
   SERVICE DETAIL PAGE
========================================= */

.service-details{
    background:#f8fafc;
}

.service-image-wrapper{
    margin-bottom:24px;
}

.service-banner{
    width:100%;
    height:420px;
    object-fit:contain; /* better for dashboards */
    background:#ffffff;
    border-radius:20px;
    padding:10px;
}

.service-description-card{
    min-height:400px;
}

.service-content{
    font-size:1.05rem;
    line-height:1.9;
    color:#475569;
}

.service-content h2,
.service-content h3,
.service-content h4{
    color:#0f172a;
    font-weight:700;
    margin-top:2rem;
    margin-bottom:1rem;
}

.service-content ul{
    padding-left:1.5rem;
    margin-bottom:1.5rem;
}

.service-content li{
    margin-bottom:.75rem;
}

/* Sidebar */

.service-content-card{
    position:static;
    top:110px;
    padding:30px;
}
.form-control{
    height: 48px;
}

textarea.form-control{
    height: 100px;
}

.btn-primary{
    padding: 12px;
}

.card-body{
    padding: 1.5rem;
}

.contact-info .d-flex {
    margin-bottom: 1.5rem !important;
}

.contact-info {
    margin-bottom: 20px !important;
}

.card.shadow-sm {
    margin-bottom: 20px;

}
.contact-info .d-flex {
    margin-bottom: 1.5rem !important;
}
.case-study-content ul {
    padding-left: 25px;
    margin: 20px 0;
}

.case-study-content li {
    margin-bottom: 10px;
    line-height: 1.8;
}

.case-study-content h2,
.case-study-content h3,
.case-study-content h4 {
    margin-top: 40px;
    margin-bottom: 20px;
    font-weight: 700;
}
.case-study-content {
    font-size: 18px;
    line-height: 1.8;
    color: #4a5568;
}

.case-study-content p {
    margin-bottom: 20px;
}

.case-study-content ul {
    padding-left: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.case-study-content li {
    margin-bottom: 12px;
}

.case-study-content h3,
.case-study-content h4,
.case-study-content h5 {
    margin-top: 30px;
    margin-bottom: 15px;
    color: #1f2937;
    font-weight: 700;
}

.case-study-content strong {
    font-weight: 700;
}

.case-study-content img {
    max-width: 100%;
    border-radius: 12px;
    margin: 20px 0;
}

.card {
    border-radius: 16px;
}
.founder-content {
    max-width: 1000px;
    margin: 0 auto;
}