/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-color: white;
  color: black;
  font-family: Verdana;
/* ===== GLOBAL ===== */
body {
    margin: 0;
    font-family: "Trebuchet MS", Arial, sans-serif;
    background: linear-gradient(#e8f1ff, #ffffff);
    color: #333;
}

/* ===== HERO ===== */
.hero {
    background: linear-gradient(#0b5ed7, #084298);
    color: white;
    text-align: center;
    padding: 50px 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.hero h1 {
    font-size: 42px;
    margin: 0;
}

.hero p {
    font-size: 20px;
    margin: 15px 0 25px;
}

.hero-btn {
    padding: 14px 32px;
    background: linear-gradient(#ffc107, #e0a800);
    color: #333;
    text-decoration: none;
    border-radius: 30px;
    font-weight: bold;
    box-shadow: inset 0 1px 0 #fff3cd, 0 4px 6px rgba(0,0,0,0.3);
}

/* ===== CONTAINER ===== */
.container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 0 20px;
}

/* ===== PANELS ===== */
.panel {
    background: linear-gradient(#ffffff, #f4f8ff);
    border: 1px solid #cfdcff;
    border-radius: 14px;
    padding: 25px;
    margin-bottom: 40px;
    box-shadow: inset 0 1px 0 #fff, 0 3px 6px rgba(0,0,0,0.15);
}

.panel h2 {
    margin-top: 0;
    color: #0b5ed7;
}

/* ===== SERVICE CARDS ===== */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.service-card {
    background: linear-gradient(#ffffff, #eef4ff);
    border: 1px solid #bcd0ff;
    border-radius: 16px;
    padding: 20px;
    box-shadow: inset 0 1px 0 #fff, 0 4px 8px rgba(0,0,0,0.15);
    text-align: center;
}

.service-card h3 {
    color: #084298;
    margin-top: 0;
}

.service-card p {
    font-size: 15px;
    line-height: 1.5;
}

/* ===== CARD CTA ===== */
.card-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 22px;
    background: linear-gradient(#28a745, #1e7e34);
    color: white;
    text-decoration: none;
    border-radius: 25px;
    font-size: 14px;
    box-shadow: inset 0 1px 0 #9effb8, 0 3px 5px rgba(0,0,0,0.25);
}

/* ===== TRUST LIST ===== */
.trust-list {
    list-style: none;
    padding-left: 0;
}

.trust-list li {
    margin: 10px 0;
    font-size: 16px;
}

/* ===== FINAL CTA ===== */
.final-cta {
    text-align: center;
    padding: 40px 20px;
    background: linear-gradient(#e7f0ff, #ffffff);
    border: 1px solid #cfdcff;
    border-radius: 16px;
}

.final-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 16px 36px;
    background: linear-gradient(#dc3545, #b02a37);
    color: white;
    text-decoration: none;
    font-size: 18px;
    border-radius: 35px;
    box-shadow: inset 0 1px 0 #ffb3b8, 0 4px 6px rgba(0,0,0,0.3);
}

/* ===== FOOTER ===== */
footer {
    text-align: center;
    font-size: 14px;
    color: #666;
    padding: 25px;
}
/* ===== FAQ SECTION ===== */
.faq-item {
    background: linear-gradient(#ffffff, #f0f6ff);
    border: 1px solid #cfdcff;
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 15px;
    box-shadow: inset 0 1px 0 #ffffff, 0 2px 4px rgba(0,0,0,0.12);
}

.faq-item h3 {
    margin-top: 0;
    color: #084298;
    font-size: 17px;
}

.faq-item p {
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.6;
}