/* Custom Styles for Industries Carousel */ /* Utilities */ .ic-flex-row { display: flex; flex-direction: row; } .ic-flex-col { display: flex; flex-direction: column; } /* General Layout and Spacing */ .ic-carousel-container { position: relative; } .ic-nav-container { display: flex; flex-direction: column; justify-content: space-between; align-items: center; margin-bottom: 2rem; } @media (min-width: 768px) { .ic-nav-container { flex-direction: row; } } .ic-nav-text-container { text-align: center; margin-bottom: 1rem; } @media (min-width: 768px) { .ic-nav-text-container { text-align: left; margin-bottom: 0; } } .ic-nav-buttons { display: flex; gap: 1rem; } /* Navigation Buttons */ .ic-btn-nav { padding: 0.75rem; background-color: #075797; color: white; border-radius: 9999px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); transition: background-color 300ms ease-in-out; border: none; cursor: pointer; } .ic-btn-nav:hover { background-color: #05406d; } .ic-icon { width: 1.5rem; height: 1.5rem; } /* Scroll Container */ .ic-scroll-container { display: flex; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; padding-bottom: 1rem; -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } .ic-scroll-container::-webkit-scrollbar { display: none; /* Chrome, Safari */ } /* Carousel Cards */ .ic-card { position: relative; flex-shrink: 0; width: 85%; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); overflow: hidden; scroll-snap-align: center; } @media (min-width: 640px) { .ic-card { width: 18rem; } } @media (min-width: 768px) { .ic-card { width: 20rem; } } @media (min-width: 1024px) { .ic-card { width: 24rem; } } /* Card Image and Content */ .ic-card-image { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-size: cover; background-position: center; transition: transform 500ms ease-in-out; } .ic-card:hover .ic-card-image { transform: scale(1.1); } .ic-card-content { position: relative; z-index: 10; padding: 1.5rem; color: white; background-image: linear-gradient(to top, rgba(7, 87, 151, 0.9), transparent); display: flex; flex-direction: column; justify-content: center; height: 100%; } @media (min-width: 768px) { .ic-card-content { padding: 2rem; } } /* Card Text */ .ic-card-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; } @media (min-width: 768px) { .ic-card-title { font-size: 2.25rem; } } .ic-card-excerpt { font-size: 1rem; line-height: 1.625; margin-bottom: 2rem; } @media (min-width: 768px) { .ic-card-excerpt { font-size: 1.125rem; } } /* Card Button */ .ic-card-button { display: inline-flex; align-self: flex-start; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background-color: white; color: #075797; font-weight: 600; border-radius: 9999px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); border: 2px solid transparent; text-decoration: none; transition: all 300ms ease-in-out; } @media (min-width: 768px) { .ic-card-button { padding: 1rem 2rem; } } .ic-card-button:hover { background-color: #075797; color: white; border-color: white; transform: scale(1.05); } .ic-card-button-icon { transition: transform 300ms ease-in-out; } .ic-card-button:hover .ic-card-button-icon { transform: translateX(0.25rem); }