/* CONTACT SECTION */
.contact-section {
    text-align: center;
    padding: 3rem 0;
    background: var(--background-gradient);
    box-shadow: var(--box-shadow-border);
    border-radius: 0 0 25px 25px;
}

/* CONTACT CONTENT */
.contact-content {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* FORM STYLING */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* NAME & EMAIL INPUTS */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

/* FORM INPUTS */
.form-group input {
    flex: 1;
    width: 100%;
    /* Ensure full width on mobile */
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    background: transparent;
    border: 1px solid transparent;
    color: var(--font-primary-clr);
    box-shadow: var(--box-shadow-border);
    font-size: var(--font-size-md);
    transition: all 0.3s ease-in-out;
}

/* DESKTOP VIEW - SIDE-BY-SIDE INPUTS */
@media (min-width: 768px) {
    .form-group {
        flex-direction: row;
        /* Changes layout to side-by-side */
    }

    .form-group input {
        flex: 1;
        /* Makes both inputs take equal space */
    }
}

textarea {
    width: 100%;
    height: 150px;
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    background: transparent;
    border: 1px solid transparent;
    /* Default transparent border */
    color: var(--font-primary-clr);
    box-shadow: var(--box-shadow-border);
    font-size: var(--font-size-md);
    transition: border-color 0.3s ease-in-out;
    resize: none;
}

/* FORM FOCUS EFFECT */
input:focus,
textarea:focus {
    border-color: var(--font-highlight-1);
    /* Change color instead of adding border */
    outline: none;
}

/* SUBMIT BUTTON */
.submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-7);
    text-transform: uppercase;
    background: none;
    border: none;
    box-shadow: var(--box-shadow-border);
    color: var(--font-primary-clr);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* PSEUDO ELEMENT FOR FILL EFFECT */
.submit-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: var(--font-highlight-1);
    /* Highlight color */
    transition: width 0.4s ease-in-out;
    z-index: -1;
    /* Moves it behind the text */
}

/* HOVER EFFECT - FILL FROM LEFT TO RIGHT */
.submit-btn:hover::before {
    width: 100%;
}

/* TEXT REMAINS VISIBLE */
.submit-btn:hover {
    color: var(--font-tertiary-clr);
}












/* CONTACT INFO SECTION */
/* CONTACT INFO SECTION */
/* CONTACT INFO SECTION */
/* CONTACT INFO SECTION */
.contact-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

/* MAKE PHONE & EMAIL SIDE-BY-SIDE */
.contact-info .info-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* STYLE EACH INFO BOX */
.info-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--background-gradient);
    padding: 1rem;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--box-shadow-border);
    transition: border 0.3s ease-in-out, background 0.3s ease-in-out;
    border: 1px solid transparent;
    width: 100%;
    min-height: 60px;
    max-height: 60px;
    text-decoration: none;
}

/* ICON STYLING */
.info-icon {
    width: 24px;
    height: 24px;
    margin-right: 1rem;
    filter: var(--icon-clr-1);
    transition: filter 0.3s ease-in-out;
}

/* TEXT STYLING */
.info-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex-grow: 1;
}

.info-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-6);
    color: var(--font-highlight-1);
}

.info-value {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-7);
    color: var(--font-secondary-clr);
    white-space: nowrap;
}

/* HOVER & FOCUS EFFECT - MATCHES INPUTS */
/* Default State */
.info-box {
    transition: border-color 0.3s ease-in-out, background 0.3s ease-in-out;
}

/* Hover Effect */
.info-box:hover {
    border-color: var(--font-highlight-1);
    cursor: pointer;
}

/* Active Effect (Will be removed after click) */
.info-box.active {
    border-color: var(--font-highlight-1);
}

.info-box img,
.info-box .info-text {
    pointer-events: none;
}

/* RESPONSIVE - DESKTOP VIEW */
@media (min-width: 768px) {
    .contact-info .info-row {
        flex-direction: row;
        /* Side by side */
    }

    .info-box {
        flex: 1;
    }
}