#left-aside, #right-aside { flex: 1; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #featured-container { flex: 2; } #left-aside { display: flex; flex-direction: column; background-color: #f0c06d; border: solid #f7f7f7; padding: 5px 10px; margin-top: 10px; border-radius: 10px; } #left-aside h2 { border: solid #014038; background-color: #bdd4da; border-radius: 10px; } #perks-feature-container { background-color: #96baa0; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; margin-top: 5px; text-align: center; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } .perk-item { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; white-space: wrap; max-height: 250px; min-height: 250px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); text-align: } #perks-heading { font-family: 'Arial', sans-serif; font-weight: bold; font-size: 1.875rem; /* 30px for title */ box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #featured-container { display: flex; flex-direction: column; text-align: center; margin-right: 40px; margin-top: 10px; } #featured-container h2 { font-size: 1.875rem; text-align: center; text-shadow: 0.5px 0.5px 1px #014038, /* Bottom-right base shadow */ -0.5px -0.5px 1px #014038, /* Top-left base shadow */ -0.5px 0.5px 1px #014038, /* Bottom-left base shadow */ 0.5px -0.5px 1px #014038, /* Top-right base shadow */ 0.5px 0.5px .5px #bdd4da, /* Bottom-right mid shadow */ -0.5px -0.5px .5px #bdd4da, /* Top-left mid shadow */ -0.5px 0.5px .5px #bdd4da, /* Bottom-left mid shadow */ 0.5px -0.5px .5px #bdd4da, /* Top-right mid shadow */ 0.5px 0.5px .5px #f7f7f7, /* Bottom-right top shadow */ -0.5px -0.5px .5px #f7f7f7, /* Top-left top shadow */ -0.5px 0.5px .5px #f7f7f7, /* Bottom-left top shadow */ 0.5px -0.5px .5px #f7f7f7; /* Top-right top shadow */ color: #f7f7f7; background-color: #96baa0; border: solid #f7f7f7; border-radius: 10px; padding-left: 20px; transform: translateX(30px); box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); } #featured-container ul { list-style-type: none; display: flex; flex-direction: column; } #featured-image ul li { align-content: space-between; } #featured-images ul li a { color: #014038; background-color: #f7f7f7; border-radius: 10px; padding: 5px 10px; } #featured-images a { display: block; text-align: center; font-size: 1.4rem; color:#014038; } #featured-images img { display: block; margin: 0 auto; margin-bottom: 10px; margin-right: 45px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #testimonials-feature{ background-color: #96baa0; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; margin-top: 10px; white-space: wrap; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #testimonials-feature h2 { font-size: 1.675rem; text-align: center; } .testimonial { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 5px; padding: 5px 10px; white-space: wrap; min-height: 250px; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); text-align: center; } #right-aside { display: flex; flex-direction: column; align-items: center; background-color: #f0c06d; width: 100%; height: auto; padding: 5px 10px; margin-left: 40px; margin-top: 10px; border: solid #f7f7f7; border-radius: 10px; } #category-nav-container { background-color: #f7f7f7; color: #014038; border: solid #014038; border-radius: 10px; padding: 5px 10px; margin-top: 5px; text-align: center; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } #right-aside h2 { font-size: 1.675rem; background-color: #bdd4da; color: #014038; border: solid #014038; border-radius: 10px; padding: 0 5px; white-space: nowrap; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } .categories ul { display: flex; flex-direction: column; align-items: center; list-style-type: none; } .categories ul li { border: solid #014038; border-radius: 10px; background-color: #96baa0; margin-top: 20px; margin-right: 35px; min-width: 100%; transition: background-color 0.3s ease, color 0.3s ease; box-shadow: 1px 2px 3px 0.5px rgba(0, 0, 0, 0.5); } .categories a { color: #014038; font-size: 1.3rem; font-weight: bold; transition: background-color 0.3s ease, color 0.3s ease; } .categories ul li:hover { background-color: #f7f7f7; color: #014038; box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); }