body {min-height: 100vh;background: linear-gradient(to bottom, #7dafc2, #335354);}

.custom-rounded {border-radius: 36px;}

/*.name {
    font-family: "Montserrat Alternates", serif;
    font-weight: 400;
    font-style: normal;
    color: #4d5659;
} */

.services-title {font-family: "Caveat", cursive;font-optical-sizing: auto;font-weight: 400;font-style: normal;color: #6d8792;}

.quote {color: #808686;}

.service-button {width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0.75rem;border-radius: 0.5rem;background-color: #edeeee;transition: all 0.2s;border: none;cursor: pointer;}
.service-icon-container {width: 2rem;height: 2rem;background-color: white;border-radius: 9999px;display: flex;align-items: center;justify-content: center;margin-right: 0.75rem;}
.service-icon {width: 1rem;height: 1rem;color: #4d5659;}
.service-name {font-size: 0.875rem;font-weight: 500;color: #4d5659;}
.service-content {display: flex;align-items: center;}
.service-description {overflow: hidden;transition: all 0.3s ease-in-out;max-height: 0;opacity: 0;}
.service-description.expanded {max-height: 10rem;opacity: 1;}
.description-text {padding: 0.75rem 1rem;font-size: 0.875rem;background-color: white;box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);}
.contact-btn {width: 100%;display: flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem;border-radius: 9999px;background-color: white;border: 2px solid #3e5c5c;color: #3e5c5c;box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);}

/* Style for the circular document button */
.contact-btn.rounded-full {width: 51px;height: 51px;padding: 0;display: flex;align-items: center;justify-content: center;min-width: unset;}

/* Container for email and document buttons */
.flex.gap-3 {display: flex;align-items: center;gap: 0.75rem;}

/* Ensure the email button takes remaining space */
.contact-btn.flex-1 {flex: 1;}
.contact-btn:hover, .contact-btn:active {background-color: #3e5c5c;color: white;transition: all 0.3s ease;}
.contact-btn:hover svg, .contact-btn:active svg {color: white;}

/* For touch devices */
@media (hover: none) {
    .contact-btn:active {
        background-color: #3e5c5c;
        color: white;
    }
    
    .contact-btn:active svg {
        color: white;
        fill: white;
    }
}

#island {height: 120px;overflow: hidden;will-change: height;background-color: white;}
.logo-wrapper {padding: 2rem 1rem 0;}
.content-wrapper {padding: 1.5rem;padding-top: 0.5rem;opacity: 0;transform: translateY(-10px);transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.4, 0, 0.2, 1);transition-delay: 0.4s;will-change: opacity, transform;}
#island.expanded .content-wrapper {opacity: 1;transform: translateY(0);}