/* Center all H1 elements on all my pages */
h1 {
    text-align: center;
}
h2 {
    text-align: center;
}
/*this is to align the paragraph on the services page only to center */
.service-tagline{
    text-align: center;
}
/* This scaled my image on my home page */
.hero-image {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    margin: 15px auto;
}
/* This is for the title on the main page */
.main-title {
    text-align: center;
    font-style: italic;
    font-weight: bold;
}
/* This is added to mage the messabe box bigger on the contact page */
.message-box {
    width: 100%;
    min-height: 180px;
    padding: 10px;
    box-sizing: border-box;
    resize: vertical;
}
/* color scheme for the pages */
body {
    background-color: #dddddd ;
}

nav {
    text-align: center;
    margin: 15px 0;
}
/* This centers the paragraph on the contacts page */

.tagline {
    text-align: center;
}
/* this makes all fonts in the body tags all the same  */
body {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #222;
}
/* This adds padding so the paragraph text does not span the whole page */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}
/* ==========================================
   PRICING & HOSTING ADVANTAGES STYLES
   ========================================== */

/* Section spacing */
#hosting-advantages {
    margin: 40px auto;
    max-width: 1000px;
    padding: 0 20px;
}

/* Grid layout for cards (2 columns on desktop, 1 on mobile) */
.advantage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

/* Individual card styling */
.card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.card h3 {
    margin-bottom: 10px;
    color: #1e293b;
}

.card p {
    line-height: 1.5;
    color: #475569;
}
/* =================================================================
   PRICING PAGE STYLES
   ================================================================= */

/* Container Spacing */
#pricing-packages,
#hosting-advantages {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
}

.pricing-intro {
    color: #475569;
    font-size: 1.1rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* --- PRICING TABLE STYLES --- */

/* Responsive Table Wrapper */
.table-container {
    overflow-x: auto; /* Allows smooth horizontal scrolling on phone screens */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    margin-bottom: 50px;
}

.pricing-table {
    width: 100%;
    border-collapse: collapse; /* Eliminates double borders */
    background-color: #ffffff;
    text-align: left; /* Aligns text cleanly to the left */
    font-size: 1rem;
}

/* Header Row Styling (Fixes header spacing!) */
.pricing-table thead tr {
    background-color: #1e293b; /* Dark navy background */
    color: #ffffff;
}

.pricing-table th, 
.pricing-table td {
    padding: 16px 24px; /* Generous padding gives columns breathing room */
    border-bottom: 1px solid #e2e8f0;
}

/* Alternating row colors for easy scanning */
.pricing-table tbody tr:nth-of-type(even) {
    background-color: #f8f9fa;
}

/* Hover highlight on rows */
.pricing-table tbody tr:hover {
    background-color: #f1f5f9;
}

/* Price column emphasis */
.pricing-table .price {
    font-weight: bold;
    color: #2563eb;
    font-size: 1.1rem;
}

/* Table Footer (Additional pages) */
.pricing-table tfoot tr {
    background-color: #f1f5f9;
    font-weight: 500;
    border-top: 2px solid #cbd5e1;
}

/* --- ADVANTAGE CARDS GRID --- */

.advantage-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 2 columns on desktop, 1 on mobile */
    gap: 20px;
    margin-top: 25px;
}

.card {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.card h3 {
    margin-bottom: 12px;
    color: #1e293b;
}

.card p {
    line-height: 1.5;
    color: #475569;
}