/* STREAMING_CHUNK:Styling the layout */
body {
font-family: 'Inter', sans-serif;
background-color: #fafaf9;
color: #57534e;
overflow-x: hidden;
}
h1, h2, h3, h4, .font-heading {
font-family: 'Montserrat', sans-serif;
}
.scrolled-nav {
background-color: rgba(255, 255, 255, 0.98) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
.image-card {
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.image-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px -10px rgba(30, 58, 138, 0.15);
}
.image-card-img-wrapper {
overflow: hidden;
}
.image-card img {
transition: transform 0.6s ease;
}
.image-card:hover img {
transform: scale(1.05);
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition: all 0.5s ease-out;
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
#toast {
visibility: hidden;
background-color: #1e3a8a;
color: #fff;
text-align: center;
border-radius: 12px;
padding: 16px 24px;
position: fixed;
z-index: 100;
left: 50%;
bottom: -50px;
transform: translateX(-50%);
font-size: 15px;
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3);
opacity: 0;
transition: all 0.4s ease;
}
#toast.show {
visibility: visible;
opacity: 1;
bottom: 40px;
}
.faq-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
.faq-item.open .faq-content {
max-height: 500px;
padding-bottom: 1.25rem;
}
.faq-item.open .faq-icon {
transform: rotate(180deg);
}
.pulse-btn {
animation: pulse-animation 2s infinite;
}
@keyframes pulse-animation {
0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}