.hero-products-section .container {
    background: linear-gradient(45deg, #ededed, #d2dcf7);
}

#header-img {
    height: 81px;
    margin-bottom: 2rem;
}

/* .hero-products-section .banner-content {
    top: 30% !important;
} */

.banner-content {
    margin-top: 13rem;
    text-align: center;
    position: relative !important;
    top: 0 !important;
    max-width: 1000px;
    left: 0px !important;
}

#total-supps {
    display: inline !important;
}

#personalizedHowMany {
    text-underline-offset: 4px; 
}
/* MOBILE FIRST*/

.hero-products-section .banner-title {
    color: #363636;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    font-family: 'Basis Grotesque', sans-serif;
}
.banner-content p {
    margin: 1rem auto;
    font-size:12px;
    line-height: 16px;
    letter-spacing: 0px;
    font-family: 'Basis Grotesque', sans-serif;
    color: #6A6A6A;
    font-weight: 400;
	max-width: 350px;
}

#btn-container {
    display: flex;
    gap: 10px;
    margin: 0 auto;
    justify-content: center;
	flex-wrap: wrap;
	margin-top: 16px;
}

#btn-container button {
    /* flex: 1; */
    width: 186px;
    height: 40px;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    letter-spacing: 1.6px;
    font-family: 'Basis Grotesque', sans-serif;
}

#add-pack-btn {
    color: #FFFEF2;
    background-color: #363636;
    border-radius: 100px;
    padding: 10px 20px;
    border: none;
}

#add-more-btn {
    color: #363636;
    background-color: transparent;
    border-radius: 100px;
    border: 1px solid #BBBBBB;
    padding: 10px 20px;
    font-size: 12px;
    text-align: center;
}

.banner-content p span {
    text-decoration: underline;
}

.remove-btn {
    text-decoration: underline;
    color: #737373;
    cursor: pointer;
}

@media (min-width: 768px) {
	.hero-products-section .banner-title {
		font-size: 32px;
		line-height: 40px;
	}
	.banner-content p {
		margin: 1rem auto;
		font-size:16px;
		line-height: 24px;
		letter-spacing: 0px;
		max-width: 600px;
	}

}

@media (min-width: 1200px) {
    .all-products-joi-section .product-grid {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}
@media (min-width: 1650px) {
	.remove-btn {
		margin-top: 10px;
	}
}


/* START confirom remove modal */
.modal-header {
    border-bottom: none;
}

.modal-body {
    text-align: center;
}

.modal-footer {
    border-top: none;
    display: flex;
    flex-direction: column;
}

.confirm-delete {
    background-color: #8D4735;
    color: #FFFEF2; 
    border-radius: 100px;
    border: none;
    width: 170px;
    height: 32px;
    font-size: 12px;
}

.dismiss-delete {
    background: transparent;
    color: #363636;
    border-radius: 100px;
    border: 1px solid #363636;
    width: 170px;
    height: 32px;
    font-size: 12px;
}

#confirmRemoveModal .personalized-modal {
    width: 420px !important;
    height: 530px;
    align-items: center;
}

#removeAlert {
    position: fixed;
    top: 150px;
    right: 20px;
    z-index: 9999;
    height: 48px;
    padding: 0 18px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    box-shadow: 4px 5px 15px 3px rgba(0, 0, 0, 0.18);
}

/* END confirom remove modal */

/* START alert */

.end-10rem {
    right: 10rem;
}

.alert button {
    filter: invert(1);
}

.alert-dismissible .btn-close {
    position: relative;
    top: -1px !important;
}

.alert-close-btn {
    margin-top: 3px;
}



/* END alert */

.all-products-joi-section .product-category {
    margin-bottom: 0 !important;
}

/* overrides until i can figure out what actually governs header colors */
/* body:has(#main-content):has(.hero-video-section) header:not(.filled) .logo img, body:has(#main-content):has(.hero-products-section) header:not(.filled) .logo img {
    filter: invert(0);
}
#mega-menu, #mega-sub-menu {
    filter: invert(1);
}

/* #searchToggle img {
    filter: invert(1);
} */

/* body:has(#main-content):has(.hero-video-section) header:not(.filled) .mobile-and-search-menu a img, body:has(#main-content):has(.hero-video-section) header:not(.filled) .mobile-and-search-menu button img, body:has(#main-content):has(.hero-products-section) header:not(.filled) .mobile-and-search-menu a img, body:has(#main-content):has(.hero-products-section) header:not(.filled) .mobile-and-search-menu button img {
    filter:invert(1);
} */

/* body:has(#main-content):has(.hero-video-section) header:not(.filled) .nav.mega-menu a, body:has(#main-content):has(.hero-products-section) header:not(.filled) .nav.mega-menu a {
    color: black !important;
}  */

body:has(#main-content):has(.hero-video-section) header:not(.filled) .mobile-and-search-menu a img, body:has(#main-content):has(.hero-video-section) header:not(.filled) .mobile-and-search-menu button img, body:has(#main-content):has(.hero-products-section) header:not(.filled) .mobile-and-search-menu a img, body:has(#main-content):has(.hero-products-section) header:not(.filled) .mobile-and-search-menu button img {
    filter: invert(1);
}

body:has(#main-content):has(.hero-video-section) header:not(.filled) .logo img, body:has(#main-content):has(.hero-products-section) header:not(.filled) .logo img {
    filter: invert(0);
}

body:has(#main-content):has(.hero-video-section) header:not(.filled) .nav.mega-menu a, body:has(#main-content):has(.hero-products-section) header:not(.filled) .nav.mega-menu a {
    color: black;
}

.product-badge {
    width: fit-content;
    margin-top: 15px;
    z-index: 0 !important;
}

.all-products-joi-section .product-card {
    max-width: 428px !important;
}

@media (min-width: 1260px) {
	.all-products-joi-section .product-grid {
		max-width: 1254px !important;
	}
}