/*!----------------services page css---------------*/
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.serif-heading {
    font-family: 'Playfair Display', serif;
}

.sans-body {
    font-family: 'Manrope', sans-serif;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.reveal {
    animation: fadeIn 0.8s ease-out forwards;
}

.active-nav {
    background-color: #ffffff;
    color: #00446b;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    padding-left: 1.5rem;
}
/* Pure CSS Sidebar Highlighting */

/* Base style for nav links */
aside nav a {
    transition: all 0.3s ease;
    position: relative;
}

/* Highlight Logic: Use :has() to detect which section is targeted in the URL */
/* This highlights the corresponding link in the sidebar without any JavaScript */

body:not(:has(:target)) .link-longtermcare,
body:has(#longtermcare:target) .link-longtermcare,
body:has(#adherence:target) .link-adherence,
body:has(#synchronization:target) .link-synchronization,
body:has(#facility:target) .link-facility,
body:has(#delivery:target) .link-delivery,
body:has(#education:target) .link-education,
body:has(#immunization:target) .link-immunization,
body:has(#diabetes:target) .link-diabetes,
body:has(#vitamins:target) .link-vitamins,
body:has(#compounding:target) .link-compounding {
    background-color: white !important;
    box-shadow: 0 4px 12px -2px rgba(0, 68, 107, 0.15) !important;
    color: #00446b !important;
    font-weight: 700 !important;
    border-radius: 9999px 0 0 9999px !important;
    margin-right: -1.5rem !important;
    padding-right: 1.5rem !important;
    transform: translateX(4px);
}

    /* Ensure icons in the active link also change color */
    body:not(:has(:target)) .link-longtermcare span,
    body:has(#longtermcare:target) .link-longtermcare span,
    body:has(#adherence:target) .link-adherence span,
    body:has(#synchronization:target) .link-synchronization span,
    body:has(#facility:target) .link-facility span,
    body:has(#delivery:target) .link-delivery span,
    body:has(#education:target) .link-education span,
    body:has(#immunization:target) .link-immunization span,
    body:has(#diabetes:target) .link-diabetes span,
    body:has(#vitamins:target) .link-vitamins span,
    body:has(#compounding:target) .link-compounding span {
        color: #00446b !important;
    }
/*!----------------packaging page(compasion gallery) ---------------*/

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.masonry-grid {
    columns: 1;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .masonry-grid {
        columns: 2;
    }
}

@media (min-width: 1024px) {
    .masonry-grid {
        columns: 3;
    }
}

.masonry-item {
    break-inside: avoid;
    margin-bottom: 1.5rem;
}

/* Fix input & select design */
form input,
form select {
    width: 100%;
    background: rgba(255,255,255,0.6);
    border: none;
    border-radius: 16px;
    padding: 14px 18px;
    font-size: 14px;
    color: #1f2937;
    outline: none;
    transition: all 0.2s ease;
}

    /* Focus effect (important for UI feel) */
    form input:focus,
    form select:focus {
        box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.15);
    }

/* Fix select arrow spacing */
form select {
    appearance: none;
    cursor: pointer;
}

/* Checkbox spacing fix */
form input[type="checkbox"] {
    width: auto;
    margin-right: 6px;
}

/*!----------------mobile view  ---------------*/

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}