/* === CONTACT SECTION === */
.contact-section { 
    padding: 70px 0; 
    background: var(--bg-secondary); 
}

.contact-subtitle { 
    text-align: center; 
    color: var(--text-muted); 
    margin-bottom: 50px; 
    font-size: 1.1rem; 
}

.contact-wrapper { 
    display: grid; 
    grid-template-columns: 1fr 1.5fr; 
    gap: 50px; 
    background: var(--card-bg); 
    padding: 40px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color); 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

.contact-info { 
    display: flex; 
    flex-direction: column; 
    gap: 30px; 
}

.info-box { 
    display: flex; 
    align-items: flex-start; 
    gap: 20px; 
}

.info-box i { 
    font-size: 1.5rem; 
    color: var(--primary-green); 
    background: rgba(39, 130, 92, 0.1); 
    padding: 15px; 
    border-radius: 50%; 
}

.info-text h3 { 
    font-size: 1.2rem; 
    margin-bottom: 5px; 
}

.info-text p { 
    color: var(--text-muted); 
}

/* === SOCIAL LINKS === */
.social-links { 
    display: flex; 
    gap: 15px; 
    margin-top: 20px; 
}

.social-links a { 
    display: inline-flex; 
    justify-content: center; 
    align-items: center; 
    width: 45px; 
    height: 45px; 
    background: var(--bg-main); 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
    border-radius: 50%; 
    font-size: 1.2rem; 
    transition: var(--transition); 
}

.social-links a:hover { 
    background: var(--primary-green); 
    color: white; 
    border-color: var(--primary-green); 
    transform: translateY(-5px); 
}

/* === FORM SIDE === */
.contact-form { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
}

.contact-form input, 
.contact-form textarea { 
    width: 100%; 
    padding: 16px; 
    background: var(--bg-main); 
    color: var(--text-main); 
    border: 1px solid var(--border-color); 
    border-radius: 8px; 
    font-size: 1rem; 
    outline: none; 
    transition: var(--transition); 
}

.contact-form input:focus, 
.contact-form textarea:focus { 
    border-color: var(--primary-green); 
    box-shadow: 0 0 0 3px rgba(39, 130, 92, 0.1); 
}

/* === MAGIC ANIMATED BUTTON === */
@property --bg-position { syntax: "<number>"; inherits: true; initial-value: 100; }
@property --after-blur { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --after-opacity { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --before-opacity { syntax: "<number>"; inherits: true; initial-value: 0.3; }
@property --btn-offset { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --btn-scale { syntax: "<number>"; inherits: true; initial-value: 1; }

:root { 
    --color-cyan: hsl(180, 100%, 50%); 
    --color-blue: hsl(240, 100%, 50%); 
    --color-purple: hsl(270, 100%, 50%); 
    --color-pink: hsl(330, 40%, 70%); 
    --color-red: hsl(0, 100%, 50%); 
    --color-yellow: hsl(60, 100%, 50%); 
    --color-lime: hsl(90, 100%, 75%); 
}

.magic-btn { 
    --btn-bg: var(--card-bg); 
    --btn-border-width: 1.5; 
    --btn-offset: 1; 
    --btn-scale: 1; 
    --after-bg: linear-gradient(to right, rgb(0 0 0), rgb(0 0 0)); 
    --after-blur: 10; 
    --after-opacity: 1; 
    --after-pos-y: 10; 
    --before-opacity: 0.3; 
    --bg-position: 100; 

    all: unset; 
    background: transparent; 
    border-width: 0; 
    width: 100%; 
    transform: scale(var(--btn-scale)); 
    transition: 
        --bg-position 3s ease, 
        --after-blur 0.3s ease, 
        --before-opacity 0.3s ease, 
        --btn-offset 0.3s ease, 
        --btn-scale 0.2s cubic-bezier(.76,-0.25,.51,1.13); 
    cursor: pointer; 
}

.magic-btn > div { 
    display: block; 
    padding: 16px 1.2em; 
    background: var(--btn-bg); 
    color: var(--text-main); 
    font-weight: bold; 
    border-radius: 8px; 
    font-size: 1.1rem; 
    position: relative; 
    text-align: center; 
    z-index: 1; 
    transition: --after-blur 0.3s ease; 
}

.magic-btn > div > span { 
    background: linear-gradient(
        to right, 
        var(--primary-green), var(--primary-green), 
        var(--color-cyan), var(--color-blue), var(--color-purple), 
        var(--color-pink), var(--color-red), var(--color-yellow), 
        var(--color-lime), var(--primary-green), var(--primary-green)
    ) no-repeat calc(var(--bg-position) * 1%) 0% / 900%; 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent; 
    letter-spacing: 0.15ch; 
    font-weight: 600; 
}

.magic-btn > div:after { 
    display: block; 
    position: absolute; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    border-radius: 8px; 
    background: var(--after-bg) no-repeat calc(var(--bg-position) * 1%) 0% / 900%; 
    transform: translateY(calc(var(--after-pos-y) * 1px)); 
    left: 0; 
    top: 0; 
    z-index: -2; 
    filter: blur(calc(var(--after-blur) * 1px)); 
    opacity: var(--after-opacity); 
}

.magic-btn > div:before { 
    content: ""; 
    display: block; 
    position: absolute; 
    width: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px)); 
    height: calc(100% + calc(calc(var(--btn-border-width) * 2) * 1px)); 
    background: linear-gradient(
        to right, 
        var(--primary-green), var(--primary-green), 
        var(--color-cyan), var(--color-blue), var(--color-purple), 
        var(--color-pink), var(--color-red), var(--color-yellow), 
        var(--color-lime), var(--primary-green), var(--primary-green)
    ) no-repeat calc(var(--bg-position) * 1%) 0% / 900%; 
    border-radius: 9px; 
    z-index: -1; 
    top: calc(var(--btn-border-width) * -1px); 
    left: calc(var(--btn-border-width) * -1px); 
    opacity: var(--before-opacity); 
}

.magic-btn:hover { 
    --btn-scale: 1.02; 
    --bg-position: 0; 
    --after-bg: linear-gradient(
        to right, 
        var(--primary-green), var(--primary-green), 
        var(--color-cyan), var(--color-blue), var(--color-purple), 
        var(--color-pink), var(--color-red), var(--color-yellow), 
        var(--color-lime), var(--primary-green), var(--primary-green)
    ); 
    --after-blur: 30; 
    --after-opacity: 0.3; 
    --after-pos-y: 0; 
    --before-opacity: 1; 
    --btn-offset: 5; 
}

.magic-btn:active { 
    --btn-scale: 0.98; 
    --after-blur: 15; 
}