body {
    font-family: 'Inter', sans-serif;
}

* {
    box-sizing: border-box;
}

.site-title {
    font-size: 1.5rem; /* Default for mobile */
}

.hero-title {
    font-size: 2.2rem; /* Default for mobile */
}

.section-title {
    font-size: 2.2rem; /* Default for mobile */
}

@media (min-width: 768px) {
    .site-title {
        font-size: 1.9rem; /* Tablet */
    }
    .hero-title {
        font-size: 3rem; /* Tablet */
    }
    .section-title {
        font-size: 3rem; /* Tablet */
    }
}

@media (min-width: 1024px) {
    .site-title {
        font-size: 2.2rem; /* Desktop */
    }
    .hero-title {
        font-size: 4rem; /* Desktop */
    }
    .section-title {
        font-size: 4rem; /* Desktop */
    }
}

.filled-star {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.half-star {
    font-variation-settings: 'FILL' 0.5, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.empty-star {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Ensure buttons don't have underline */
a.inline-block.bg-red-600,
button.bg-red-600,
button.bg-gray-600 {
    text-decoration: none !important;
}
/*
 * Base styles for the main content wrapper.
 * Provides padding for better readability and spacing.
 */
.regShieldWrap {
    padding: 32px 24px; /* Top/Bottom padding: 32px, Left/Right padding: 24px */
    box-sizing: border-box; /* Ensures padding doesn't add to the total width/height */
}

/*
 * Heading styles (h1-h5) within the .regShieldWrap.
 * Font sizes are moderate, not excessively large, with consistent line-heights and bottom margins.
 */
.regShieldWrap h1 {
    font-size: 1.8rem; /* Moderately sized main heading */
    line-height: 1.2;
    margin-top: 0; /* Remove default top margin for consistency */
    margin-bottom: 0.8em; /* Spacing below the heading */
}

.regShieldWrap h2 {
    font-size: 1.5rem; /* Sub-heading */
    line-height: 1.2;
    margin-top: 0;
    margin-bottom: 0.8em;
}

.regShieldWrap h3 {
    font-size: 1.3rem; /* Section heading */
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.8em;
}

.regShieldWrap h4 {
    font-size: 1.1rem; /* Sub-section heading */
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.8em;
}

.regShieldWrap h5 {
    font-size: 1rem; /* Smallest heading, often used for minor titles or emphasis */
    line-height: 1.4;
    margin-top: 0;
    margin-bottom: 0.8em;
}

/*
 * Paragraph styles within the .regShieldWrap.
 * Sets a standard font size, line-height for readability, and bottom margin for separation.
 */
.regShieldWrap p {
    font-size: 1rem; /* Standard paragraph font size */
    line-height: 1.6; /* Good line-height for body text readability */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 1em; /* Spacing between paragraphs */
}

/*
 * Unordered list (ul) styles within the .regShieldWrap.
 * Provides standard bullet points, padding for indentation, and bottom margin.
 */
.regShieldWrap ul {
    list-style-type: disc; /* Standard bullet points */
    padding-left: 24px; /* Indentation for bullet points */
    margin-top: 0; /* Remove default top margin */
    margin-bottom: 1em; /* Spacing below the list */
}

/*
 * List item (li) styles within the .regShieldWrap.
 * Provides spacing between individual list items.
 */
.regShieldWrap li {
    margin-bottom: 0.4em; /* Spacing between list items */
    line-height: 1.5; /* Ensures good line-height for list item text */
}

@media (min-width: 1024px) {
    .lg\:w-1\/2 {
        width: auto !important;
    }
}

@media (max-width: 768px) {
  img.w-full.h-\[300px\].object-cover.rounded-lg.shadow-md.border.border-gray-600 {
    object-fit: contain;
  }
}