/*==================================================
    CONTACT SECTION
==================================================*/
#contact{
    position: relative;
    padding: 140px 0;
    background:
        linear-gradient(
            180deg,
            rgba(6,12,20, 0.72),
            rgba(4,8,14, 0.88)
        );
        
    backdrop-filter:blur(1px);
    border-radius: 33px 33px 0 0;
    z-index:2;
}

/*==================================================
    CONTAINER
==================================================*/
.contactContainer{
    width:min(1200px,92%);
    margin:auto;
    text-align:center;
}
/*
#contact::before{
    content:"";
    position:absolute;
    inset:-200px;
    z-index:-1;
    background:
        radial-gradient(
            circle,
            rgba(100,220,255,.10),
            transparent 70%
        );
    filter:blur(50px);
    pointer-events:none;
}
*/

/*==================================================
    TITLE
==================================================*/
.contactHeading{
    font-family:"Audiowide";
    font-size:clamp(2rem,5vw,3.8rem);
    text-transform:uppercase;
    letter-spacing:.12em;
    margin-bottom:30px;
}

.contactIntro{
    max-width:760px;
    margin:0 auto 70px;
    font-family:"Kode Mono";
    font-size:1.15rem;
    line-height:1.8;
    color:var(--text-secondary);
}

/*==================================================
    GRID
==================================================*/
.contactGrid{
    display:grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap:35px;
}

/*==================================================
    CARD
==================================================*/
.contactCard{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:170px;
    padding:40px;
    text-decoration:none;
    color:inherit;
    border-radius:22px;
    border:1px solid rgba(140,220,255,.14);
    background:rgba(255,255,255,.045);
    backdrop-filter:blur(16px);
    transition:
        transform .35s,
        border-color .35s,
        box-shadow .35s,
        background .35s;
}

.contactCard:hover{
    border-color:rgba(120,220,255,.55);
    background:rgba(255,255,255,.07);
    box-shadow: 0 0 35px rgba(120,220,255,.18);
}

/*==================================================
    CARD TEXT
==================================================*/
.contactCard h3{
    margin-bottom:20px;
    font-family:"Zen Dots";
    font-size:1.25rem;
    color:#7EDBFF;
}

.contactCard p{
    margin:0;
    font-family:"Kode Mono";
    font-size:1rem;
    line-height:1.7;
    word-break:break-word;
}

/*==================================================
    MOBILE
==================================================*/
@media (max-width:768px){
    #contact{
        padding:90px 0;
    }

    .contactGrid{
        gap:22px;
    }

    .contactCard{
        min-height:150px;
        padding:30px;
    }

}