/* ============================================================
   CONTACT SECTION — Mobile-First Responsive CSS
   Breakpoints: Mobile(0-480) | SmTab(481-600) | MedTab(601-768)
              | LgTab(769-1024) | SmDesk(1025-1280) | MedDesk(1281-1440)
              | LgDesk(1441-1920) | XL(1921+)
   Units : clamp() + vw — zero px in property values
   Colors: ONLY from .white-contact / .blue-contact
============================================================ */


/* ============================================================
   1. BASE LAYOUT — Mobile (no colors, no px)
============================================================ */

.contact-section-page {
    margin-top: clamp(2rem, 8vw, 3.5rem);
}

.contact-section {
    position: relative;
}

.contact-container {
    max-width: clamp(18rem, 90vw, 71.25rem);
    margin: 0 auto;
    padding: clamp(0.8rem, 3vw, 1.5rem) clamp(0.8rem, 4vw, 1.5rem);
}

/* SVG Divider */
.contact-section svg {
    position: absolute;
    right: 0;
    left: 0;
    height: clamp(0.8rem, 2vw, 1.5rem);
    width: 100%;
}

/* ---- Header ---- */
.contact-section-header {
    text-align: center;
    margin-bottom: clamp(1rem, 4vw, 1.5rem);
}

.contact-section-title {
    display: inline-block;
    font-size: clamp(1.4rem, 5vw, 2rem);
    font-weight: 700;
    margin-block: clamp(0.6rem, 2vw, 1rem);
    position: relative;
}

.contact-section-title::after {
    content: "";
    position: absolute;
    width: 100%;
    height: clamp(0.18rem, 0.4vw, 0.32rem);
    border-radius: clamp(1rem, 3vw, 1.5rem);
    bottom: -10%;
    left: 0;
}

/* ---- Contact Info Card ---- */
.contact-info {
    display: flex;
    flex-direction: column;
    padding: clamp(0.8rem, 3vw, 1.5rem);
    height: 100%;
    border-radius: clamp(0.8rem, 3vw, 1.5rem);
    
}

.f-col {
    flex-direction: column;
}

/* ---- Info Items ---- */
.info-item {
    display: flex;
    align-items: flex-start;
    gap: clamp(0.5rem, 2vw, 0.85rem);
    padding: clamp(0.7rem, 2.5vw, 1.1rem);
    border-bottom: 0.03em dashed;
}

.info-item .info {
    width: 100%;
    display: flex;
    gap: clamp(0.4rem, 1.5vw, 0.7rem);
}

.info p {
    letter-spacing: clamp(0.05em, 0.2vw, 0.1em);
}

.info-icon i {
    font-size: clamp(1.2rem, 4vw, 1.6rem);
    text-align: center;
}

.info-item h4 {
    margin: 0 0 clamp(0.25rem, 1vw, 0.45rem);
    font-size: clamp(1rem, 3.5vw, 1.3rem);
    font-weight: 700;
}

.info-item a {
    position: relative;
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: clamp(0.9rem, 3vw, 1.1rem);
}

.info-item a::after {
    content: "";
    position: absolute;
    bottom: clamp(-0.2rem, -0.4vw, -0.15rem);
    left: 0;
    width: 100%;
    height: clamp(0.08rem, 0.15vw, 0.13rem);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.info-item a:hover::after {
    transform: scaleX(1);
}

.info-item a:hover {
    text-shadow: 0 clamp(0.15rem, 0.4vw, 0.3rem) clamp(0.25rem, 0.6vw, 0.45rem) rgba(0, 0, 0, 0.3);
}

.info-item p {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
}

/* ---- Social Links ---- */
.contact-right {
    display: none;
    margin-top: clamp(0.8rem, 3vw, 1.5rem);
    justify-content: center;
    align-items: center;
    gap: clamp(0.5rem, 2vw, 0.85rem);
}

.contact-socials a {
    text-decoration: none;
    font-size: clamp(1.4rem, 5vw, 1.9rem);
    margin-left: clamp(0.4rem, 1.5vw, 0.7rem);
    transition: opacity 0.3s ease;
}

.contact-socials a:hover {
    opacity: 0.75;
}

/* ---- Contact Form ---- */
.contact-form {
    border-radius: clamp(0.8rem, 3vw, 1.5rem);
    padding: clamp(1.2rem, 4vw, 2rem);
    height: 100%;
    display: flex;
    justify-content: center;
    gap: clamp(0.8rem, 2.5vw, 1.2rem);
}

.contact-form img {
    width: 100%;
    aspect-ratio: 1 / 1;
}

/* ---- Map / Address Section ---- */
.address-container {
    margin: auto;
    width: clamp(16rem, 90vw, 90%);
   
}

.address-container:hover {
    transform: scale(1.01);
}

.address-title {
    text-align: center;
    align-content: center;
    width: fit-content;
    margin: 0 auto clamp(1.2rem, 4vw, 2rem) auto;
    border-bottom: clamp(0.18rem, 0.35vw, 0.28rem) solid;
}

.address-title h1 {
    font-size: clamp(1.4rem, 5vw, 2.5rem);
}

.address-title p {
    font-size: clamp(0.9rem, 3vw, 1.5rem);
}


/* ============================================================
   2. BREAKPOINTS — min-width only, small → large
============================================================ */

/* Small Tablet — 481px → 600px */
@media (min-width: 481px) {
    .contact-socials a {
        font-size: clamp(1.5rem, 4vw, 2rem);
        margin-left: clamp(0.3rem, 1vw, 0.6rem);
        padding: clamp(0.1rem, 0.3vw, 0.2rem) clamp(0.15rem, 0.4vw, 0.25rem);
    }
}

/* Medium Tablet — 601px → 768px */
@media (min-width: 601px) {
    .contact-section-title {
        font-size: clamp(1.6rem, 4vw, 2.2rem);
    }

    .info-item h4 {
        font-size: clamp(1.1rem, 3vw, 1.4rem);
    }

    .info-item a,
    .info-item p {
        font-size: clamp(0.95rem, 2.5vw, 1.15rem);
    }

}

/* Large Tablet — 769px → 1024px */
@media (min-width: 769px) {
    .contact-section-page {
        margin-top: clamp(2.5rem, 6vw, 4rem);
    }

    .contact-container {
        padding: clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2rem);
    }

    .contact-section-header {
        margin-bottom: clamp(1.2rem, 3.5vw, 2rem);
    }

    .contact-section-title {
        font-size: clamp(1.8rem, 4vw, 2.4rem);
    }

    .info-item {
        padding: clamp(0.8rem, 2vw, 1.3rem);
    }

    .address-title h1 {
        font-size: clamp(1.8rem, 4vw, 2.8rem);
    }
}

/* Small Desktop — 1025px → 1280px */
@media (min-width: 1025px) {
    .contact-section-page {
        margin-top: clamp(3rem, 5vw, 4.5rem);
    }

    .contact-section-title {
        font-size: clamp(1.8rem, 3vw, 2.5rem);
    }

    .info-item h4 {
        font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    }

    .info-item a,
    .info-item p {
        font-size: clamp(1rem, 1.5vw, 1.3rem);
    }

    .info-icon i {
        font-size: clamp(1.3rem, 2vw, 1.8rem);
    }

    .contact-socials a {
        font-size: clamp(1.5rem, 2.2vw, 2rem);
    }

    .contact-info {
        border-radius: clamp(0.8rem, 1.5vw, 1.3rem);
    }

    .contact-form {
        border-radius: clamp(0.8rem, 1.5vw, 1.3rem);
        box-shadow: 0 clamp(0.3em, 0.8vw, 0.6em) clamp(0.8em, 2vw, 1.4em) rgba(0, 0, 0, 0.12);
    }
}

/* Medium Desktop — 1281px → 1440px */
@media (min-width: 1281px) {
    .contact-container {
        padding: clamp(1.5rem, 2.5vw, 2.5rem) clamp(1.2rem, 2vw, 2rem);
    }

    .contact-section-title {
        font-size: clamp(2rem, 2.5vw, 2.8rem);
    }
}

/* Large Desktop — 1441px → 1920px */
@media (min-width: 1441px) {
    .contact-section-title {
        font-size: clamp(2rem, 2vw, 3rem);
    }

    .info-item h4 {
        font-size: clamp(1.2rem, 1.4vw, 1.6rem);
    }

    .info-item a,
    .info-item p {
        font-size: clamp(1.1rem, 1.2vw, 1.4rem);
    }
}

/* Extra Large — 1921px+ */
@media (min-width: 1921px) {
    .contact-container {
        max-width: clamp(71rem, 75vw, 90rem);
    }

    .contact-section-title {
        font-size: clamp(2.2rem, 2vw, 3.5rem);
    }
}



.white-contact,
.blue-contact {
    background-color: var(--white);
}

/* ============================================================
   BLUE THEME
============================================================ */
.contact-section {
    background-color: var(--lightHelper);
}
.blue-contact .contact-section-title {
    color: var(--white);
}

.blue-contact .contact-section-title::after {
    background-image: linear-gradient(90deg, var(--white) 0%, var(--white) 100%);
}

.blue-contact .contact-section svg {
    fill: var(--lightHelper);
}

.blue-contact .contact-info {
   
    border: 0.06em solid var(--white);
}

.blue-contact .info-item {
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.blue-contact .info-icon i {
    color: var(--white);
}

.blue-contact .info-item h4 {
    color: var(--white);
}

.blue-contact .info-item a {
    color: var(--white);
}

.blue-contact .info-item a::after {
    background: var(--white);
}

.blue-contact .contact-form {
    background-color: var(--white);
    border: 0.06em solid var(--white);
}

.blue-contact .address-title h1 {
    color: var(--helperColor);
}

.blue-contact .address-title p {
    color: var(--lightHelper);
}

.blue-contact .address-title {
    border-bottom-color: var(--lightHelper);
}

/* ============================================================
   WHITE THEME
============================================================ */


.white-contact .contact-section-title {
    color: var(--lightHelper);
}

.white-contact .contact-section-title::after {
    background-image: linear-gradient(90deg, var(--lightHelper) 0%, var(--lightHelper) 100%);
}

.white-contact .contact-section svg {
    fill: var(--lightHelper);
}

.white-contact .contact-info {
    background-color: var(--white);
    border: 0.06em solid var(--lightHelper);
}

.white-contact .info-item {
    color: var(--lightHelper);
    border-bottom-color: var(--lightHelper);
}

.white-contact .info-icon i {
    color: var(--lightHelper);
}

.white-contact .info-item h4 {
    color: var(--helperColor);
}

.white-contact .info-item a {
    color: var(--lightHelper);
}

.white-contact .info-item a::after {
    background: var(--lightHelper);
}

.white-contact .contact-form {
    background-color: var(--white);
    border: 0.06em solid var(--lightHelper);
}

.white-contact .address-title h1 {
    color: var(--helperColor);
}

.white-contact .address-title p {
    color: var(--lightHelper);
}

.white-contact .address-title {
    border-bottom-color: var(--lightHelper);
}


@media (min-width: 1025px) {
    .white-contact .contact-info:hover {
        box-shadow: 0 clamp(0.3em, 0.8vw, 0.6em) clamp(0.8em, 2vw, 1.4em) rgba(0, 0, 0, 0.1);
    }

    .blue-contact .contact-info:hover {
        box-shadow: 0 clamp(0.3em, 0.8vw, 0.6em) clamp(0.8em, 2vw, 1.4em) rgba(0, 0, 0, 0.2);
    }
}