/* Anavrin Media Brand Styles */

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


body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #ffffff;
    color: #222222;
    line-height: 1.6;
}


/* Navigation */

header {
    background-color: #0B1F3A;
    padding: 20px 60px;
}


nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.logo {
    display: flex;
    align-items: center;
}


.logo img {
    width: 220px;
    height: auto;
}


nav ul {
    list-style: none;
    display: flex;
    gap: 25px;
}


nav a {
    color: white;
    text-decoration: none;
    font-size: 16px;
}


nav a:hover {
    color: #2563EB;
}


.nav-button {
    background-color: #2563EB;
    padding: 10px 18px;
    border-radius: 8px;
}


/* Hero */

.hero {
    background-color: #0B1F3A;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
    padding: 100px 10%;
}


.hero-content {
    max-width: 650px;
}


.hero h1 {
    font-size: 55px;
    line-height: 1.1;
    margin-bottom: 25px;
}


.hero p {
    font-size: 22px;
    margin-bottom: 35px;
}


button {
    background-color:#2563EB;
    color:white;
    border:none;
    padding:15px 35px;
    font-size:18px;
    border-radius:8px;
    cursor:pointer;
}


.hero-visual {
    width:400px;
}


/* AI Card */

.ai-card {

    background:white;
    color:#0B1F3A;
    padding:30px;
    border-radius:15px;
    width:350px;
    box-shadow:0 20px 40px rgba(0,0,0,.15);

}


.ai-message {

    background:#E5E7EB;
    padding:14px;
    border-radius:10px;
    margin-top:15px;

}


.ai-status {

    background:#DCFCE7;
    color:#166534;
    padding:12px;
    border-radius:10px;
    margin-top:20px;
    text-align:center;

}


/* Sections */

section {

    padding:80px 20px;
    text-align:center;

}


section h2 {

    color:#0B1F3A;
    font-size:36px;
    margin-bottom:20px;

}


section p {

    max-width:800px;
    margin:15px auto;
    font-size:18px;

}


/* Cards */

.service-container,
.benefit-container,
.approach-container,
.industry-container {

    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    margin-top:40px;

}


.service-card,
.benefit-card,
.approach-card,
.industry-card {

    background:white;
    color:#0B1F3A;
    width:300px;
    padding:35px;
    border-radius:15px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);

}


.service-card:hover,
.industry-card:hover {

    transform:translateY(-8px);

}


/* Industries */

.industries {

    background:#0B1F3A;
    color:white;
    padding:80px 10%;

}


.industries h2,
.industries p {

    color:white;

}


.industry-card {

    width:250px;

}


/* Approach */

.approach {

    background:#F1F5F9;
    padding:80px 10%;

}


/* Demo */

.chat-demo {

    max-width:700px;
    margin:40px auto;

}


.message {

    padding:25px;
    margin:20px 0;
    border-radius:15px;
    text-align:left;
    box-shadow:0 10px 25px rgba(0,0,0,.1);

}


.message h3 {

    color:#0B1F3A;
    margin-bottom:10px;

}


.customer {

    background:#F1F5F9;

}


.ai {

    background:#E8F0FF;
    border-left:5px solid #2563EB;

}


/* Contact Page */

.contact-form {

    max-width:600px;
    margin:40px auto;
    display:flex;
    flex-direction:column;
    gap:15px;

}


.contact-form label {

    text-align:left;
    font-weight:bold;
    color:#0B1F3A;

}


.contact-form input,
.contact-form textarea {

    width:100%;
    padding:15px;
    font-size:16px;
    border:1px solid #ccc;
    border-radius:8px;

}


.contact-form textarea {

    height:150px;
    resize:none;

}


.contact-form button {

    align-self:center;

}


/* Footer */

footer {

    background:#0B1F3A;
    color:white;
    text-align:center;
    padding:25px 20px;

}
/* Demo Hero Centering */

.hero-content {

    margin: 0 auto;
    text-align: center;

}

/* Mobile */

@media(max-width:768px) {


header {

    padding:15px 20px;

}


nav {

    flex-direction:column;

}


nav ul {

    flex-wrap:wrap;
    justify-content:center;

}


.logo img {

    width:170px;

}


.hero {

    flex-direction:column;
    text-align:center;
    padding:60px 20px;

}


.hero h1 {

    font-size:36px;

}


.hero-visual {

    width:100%;

}


.ai-card {

    width:100%;
    max-width:320px;

}


.service-card,
.benefit-card,
.approach-card,
.industry-card {

    width:100%;
    max-width:350px;

}

}/* Industry Card Fix */

.industry-card {
    background: white;
    color: #0B1F3A;
    width: 250px;
    padding: 30px 25px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,.1);
    text-align: center;
}


.industry-card h3 {
    color: #0B1F3A;
    font-size: 22px;
    margin-bottom: 15px;
}


.industry-card p {
    color: #444;
    font-size: 16px;
    line-height: 1.6;
    margin-top: 10px;
}


.service-icon {
    font-size: 40px;
    margin-bottom: 15px;
}/* ==========================
   DEMO DASHBOARD
========================== */


.demo-section {

text-align:center;

padding:60px 20px;

}



.chat-demo {

max-width:600px;

margin:40px auto;

background:white;

padding:30px;

border-radius:15px;

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

}




#service-options button {

margin:8px;

padding:12px 20px;

border-radius:8px;

border:none;

cursor:pointer;

}




.message {

margin:15px 0;

padding:15px;

border-radius:12px;

text-align:left;

}



.message.customer {

background:#e5f0ff;

}



.message.ai {

background:#f4f4f4;

}





.lead-dashboard {

text-align:center;

padding:60px 20px;

}



.dashboard-card {

max-width:500px;

margin:40px auto;

background:white;

padding:30px;

border-radius:15px;

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

text-align:left;

}




.dashboard-header {

display:flex;

justify-content:space-between;

align-items:center;

}



.lead-badge {

background:#22c55e;

color:white;

padding:6px 15px;

border-radius:20px;

font-weight:bold;

}



.lead-info p {

margin:12px 0;

}



.lead-status {

font-weight:bold;

}



.dashboard-buttons {

display:flex;

gap:15px;

margin-top:25px;

}



.dashboard-buttons button {

padding:12px 18px;

border:none;

border-radius:8px;

cursor:pointer;

}