/* Hero Container Styles */
.hero-container {
    background-color: #F24D4A !important;
    padding: 33px 25px 33px 25px; /* 33px top bottom padding matches ios */
}

/* Desktop padding for hero container */
@media (min-width: 768px) {
    .hero-container {
        padding: 50px 25px 50px 25px;
    }
}

.hero-container p {
    line-height: 1.3;
}

@media (max-width: 767px) {
    /* thinner paragraph text for mobile */
    .hero-container p {
        font-size: 1rem;
        font-weight: 400;
    }
    /* bolder title for mobile */
    .hero-container h1 {
        font-size: 30px; /* hero title 30px matches ios */
    }
}

@media (min-width: 768px) {
    /* bolder paragraph text for desktop */
    .hero-container p {
        font-size: 1.25rem;
        font-weight: 300;
    }
    /* thinner title for desktop */
    .hero-container h1 {
        font-weight: 300;
    }
}

/* Swiffy Container */
#swiffycontainer {
    width: 150px;
    height: 100px;
    margin: 0 auto 10px;
}

/* Button Styles for hero container */
.hero-container .btn-primary,
.hero-container .btn-outline-primary {
    background-color: white !important;
    border-color: white !important;
    color: #333 !important;
}

.hero-container .btn-primary.active,
.hero-container .btn-outline-primary.active {
    background-color: #2c3e50 !important;
    border-color: #2c3e50 !important;
    color: white !important;
}

.hero-container .btn-primary:hover,
.hero-container .btn-outline-primary:hover {
    background-color: #f8f9fa !important;
    border-color: #f8f9fa !important;
    color: #333 !important;
}

/* if a page has hero section, we auto change bg color to red. this looks better so the hero of red blends to background of red perfectly */
/* for pages without hero section, e.g. home page, faq page etc, bg color will be white by default */
body {
    background-color: #F24D4A !important;
}