style.css

body {
    background: #F8F8FF;
}

/* Base H1 size for XS devices */
h1 {
    font-size: 1.3125rem;

    /* Adjusted base size for XS screens */
    font-weight: 700;
}

/* Gradually increase font size for smaller screens */
@media (min-width: 361px) {
    h1 {
        font-size: 1.5625rem;

        /* Moderate increase for slightly larger screens */
    }
}

/* Adjusting H1 size for SM devices (576px) and up */
@media (min-width: 576px) {
    h1 {
        font-size: 2.125rem;

        /* Adjusted size for SM screens */
    }
}

/* Further adjustments for medium breakpoints */
@media (min-width: 768px) {
    h1 {
        font-size: 2.3125rem;

        /* Original size for MD screens and up */
    }
}

/* Further adjustments for larger breakpoints */
@media (min-width: 992px) {
    h1 {
        font-size: 3rem;

        /* Original size for MD screens and up */
    }
}

/* Further adjustments for extra large breakpoints */
@media (min-width: 1200px) {
    h1 {
        font-size: 3.5rem;

        /* Original size for MD screens and up */
    }
}

/* Further adjustments for extra extra large breakpoints */
@media (min-width: 1400px) {
    h1 {
        font-size: 4rem;

        /* Original size for MD screens and up */
    }
}

/* Base H1 size for XS devices */
h2 {
    font-size: 1.3125rem;

    /* Adjusted base size for XS screens */
    font-weight: 700;
}

/* Gradually increase font size for smaller screens */
@media (min-width: 361px) {
    h2 {
        font-size: 1.5625rem;

        /* Moderate increase for slightly larger screens */
    }
}

/* Adjusting H1 size for SM devices (576px) and up */
@media (min-width: 576px) {
    h2 {
        font-size: 1.875rem;

        /* Adjusted size for SM screens */
    }
}

/* Further adjustments for medium breakpoints */
@media (min-width: 768px) {
    h2 {
        font-size: 2rem;

        /* Original size for MD screens and up */
    }
}

/* Further adjustments for larger breakpoints */
@media (min-width: 992px) {
    h2 {
        font-size: 2.5rem;

        /* Original size for MD screens and up */
    }
}

/* Further adjustments for extra large breakpoints */
@media (min-width: 1200px) {
    h2 {
        font-size: 2.75rem;

        /* Original size for MD screens and up */
    }
}

/* Further adjustments for extra extra large breakpoints */
@media (min-width: 1400px) {
    h2 {
        font-size: 3rem;

        /* Original size for MD screens and up */
    }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Base styling for .lead */
.lead {
    font-size: 0.9375rem;

    /* Converted font size */
    color: #332929;

    /* Example of a light emphasis color, adjust as needed */
    /* Include other styling for text-light-emphasis as necessary */
}

/* Specific adjustment for devices with a max-width of 360px */
@media (min-width: 361px) {
    .lead {
        font-size: 1.125rem;

        /* Slightly smaller for very small screens */
    }
}

/* Adjusting .lead size for SM devices (576px) and up */
@media (min-width: 576px) {
    .lead {
        font-size: 1.125rem;

        /* Adjusted size back to normal for SM screens */
    }
}

@media (min-width: 768px) {
    .lead {
        font-size: 1.1875rem;

        /* Adjust if necessary for larger screens */
    }
}

@media (min-width: 992px) {
    .lead {
        font-size: 1.3125rem;

        /* Adjust if necessary for larger screens */
    }
}

@media (min-width:1400px) {
    .lead {
        font-size: 1.375rem;

        /* Adjust if necessary for larger screens */
    }
}

p {
    font-size: 0.75rem;
    color: #332929;

    /* Suitable for screens smaller than 360px */
    /* Add any other base styles for the paragraph element here */
}

/* Slightly larger screens (typically smartphones in portrait and landscape orientations) */
@media (min-width: 361px) {
    p {
        font-size: 0.875rem;

        /* Adjust font size for devices wider than 360px */
    }
}

/* Small devices (small screen size) */
@media (min-width: 576px) {
    p {
        font-size: 1rem;

        /* Adjust font size for tablets */
    }
}

/* Medium devices (tablets in portrait orientation) */
@media (min-width: 768px) {
    p {
        font-size: 1rem;

        /* Adjust font size for tablets */
    }
}

.small {
    font-size: 0.6875rem;
    color: #332929;

    /* Suitable for screens smaller than 360px */
    /* Add any other base styles for the paragraph element here */
}

/* Slightly larger screens (typically smartphones in portrait and landscape orientations) */
@media (min-width: 361px) {
    .small {
        font-size: 0.875rem;

        /* Adjust font size for devices wider than 360px */
    }
}

/* Slightly larger screens (typically smartphones in portrait and landscape orientations) */
@media (min-width: 768px) {
    .small {
        font-size: 0.9375rem;

        /* Adjust font size for devices wider than 360px */
    }
}

.newsletter-subscription .col-md-6:first-child {
    padding: 20px;
}

.newsletter-subscription p {
    margin-bottom: 20px;
}

.newsletter-subscription form {
    margin-bottom: 20px;
}

.newsletter-subscription input {
    width: 100%;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Archivo Black', sans-serif;
}

.newsletter-subscription button {
    background-color: #000;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 4px;
    font-family: 'Archivo Black', sans-serif;
}