/* Custom styles for project pages */

/* Shared header */
.shared-header {
    background: linear-gradient(to right, rgba(2, 36, 91, 1) 0%, rgba(2, 36, 91, 0) 110%), url(/assets/images/backgrounds/construction-project-management.webp) center center no-repeat;
    background-size: cover;
}

/* Rainbow border button */
.rainbow-border-btn {
    border-radius: 2rem !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(60, 155, 160, 0.10);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.rainbow-border-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 2rem;
    padding: 2px;
    background: linear-gradient(270deg,
        #368591, #26cfe9, #43d9ad, #3296a5,
        #368591, #26cfe9, #43d9ad, #3296a5,
        #368591, #26cfe9, #43d9ad, #3296a5,
        #368591, #26cfe9, #43d9ad, #3296a5,
        #368591, #26cfe9, #43d9ad, #3296a5,
        #368591, #26cfe9, #43d9ad, #3296a5
    );
    background-size: 800% 100%; /* larger for smoother loop */
    animation: rainbow-border-move 6s linear infinite;
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}

@keyframes rainbow-border-move {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* CTA Section */
.cta-section {
    background: linear-gradient(90deg, #e3f6f9 0%, #f8fafc 100%);
    border-radius: 2rem;
    box-shadow: 0 4px 32px rgba(60,155,160,0.08);
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
}
.cta-section h2 {
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--primary, #3296a5);
}
.cta-section .btn {
    border-radius: 2rem !important;
    font-weight: 600;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(60, 155, 160, 0.10);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

/* Card styles */
.card-img-top {
    aspect-ratio: 4 / 3;
    width: 100%;
    height: auto;
    max-height: 220px;
    object-fit: cover;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    background: #e3f6f9;
}