/*==================================================
  PORTFOLIO CONTACT
==================================================*/

.portfolio-contact{

    position:relative;

    padding:160px 0 120px;

    overflow:hidden;

}


/*==================================================
  AMBIENT ORBS
==================================================*/

.portfolio-contact-orb{

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--primary),
            transparent 68%
        );

    opacity:.035;

    filter:blur(30px);

    pointer-events:none;

    animation:
        portfolioContactOrb
        8s
        ease-in-out
        infinite;

}


.portfolio-contact-orb-one{

    top:-250px;

    left:-180px;

}


.portfolio-contact-orb-two{

    right:-220px;

    bottom:-250px;

    animation-delay:-4s;

}


@keyframes portfolioContactOrb{

    0%,
    100%{

        transform:
            scale(.9)
            translate(0,0);

    }

    50%{

        transform:
            scale(1.1)
            translate(30px,-20px);

    }

}


/*==================================================
  CONTAINER
==================================================*/

.portfolio-contact-container{

    width:100%;

    max-width:var(--container-width);

    margin:auto;

    padding:0 30px;

    position:relative;

    z-index:2;

}


/*==================================================
  HEADER
==================================================*/

.portfolio-contact-header{

    max-width:800px;

    margin:0 auto 80px;

    text-align:center;

}


.portfolio-contact-title{

    margin:25px 0 22px;

    font-family:var(--heading-font);

    font-size:clamp(
        3rem,
        6vw,
        5.5rem
    );

    line-height:1;

    letter-spacing:-3px;

    font-weight:var(--fw-black);

}


.portfolio-contact-intro{

    max-width:620px;

    margin:auto;

    color:var(--text-muted);

    font-size:1rem;

    line-height:1.85;

}


/*==================================================
  CONTACT SYSTEM
==================================================*/

.portfolio-contact-system{

    display:grid;

    grid-template-columns:
        1.15fr
        .85fr;

    gap:20px;

}


/*==================================================
  MAIN CTA PANEL
==================================================*/

.portfolio-contact-panel{

    position:relative;

    min-height:520px;

    padding:55px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    overflow:hidden;

    border:1px solid var(--border-primary);

    background:
        linear-gradient(
            145deg,
            var(--glass-strong),
            var(--glass)
        );

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

}


/*==================================================
  PANEL GRID
==================================================*/

.contact-panel-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            var(--border-primary) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            var(--border-primary) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    opacity:.035;

    pointer-events:none;

}


/*==================================================
  PANEL GLOW
==================================================*/

.contact-panel-glow{

    position:absolute;

    width:380px;

    height:380px;

    left:45%;

    top:45%;

    transform:
        translate(-50%,-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--primary),
            transparent 70%
        );

    opacity:.07;

    filter:blur(20px);

    animation:
        portfolioContactCore
        5s
        ease-in-out
        infinite;

}


@keyframes portfolioContactCore{

    0%,
    100%{

        transform:
            translate(-50%,-50%)
            scale(.8);

        opacity:.04;

    }

    50%{

        transform:
            translate(-50%,-50%)
            scale(1.15);

        opacity:.1;

    }

}


/*==================================================
  PANEL CONTENT
==================================================*/

.contact-panel-content{

    position:relative;

    z-index:2;

    max-width:600px;

}


.contact-panel-label{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:30px;

    color:var(--primary-light);

    font-size:.58rem;

    font-weight:var(--fw-bold);

    letter-spacing:2px;

}


.contact-panel-label i{

    filter:
        drop-shadow(
            0 0 7px var(--primary)
        );

}


.contact-panel-content h3{

    margin:0 0 25px;

    color:var(--text-light);

    font-family:var(--heading-font);

    font-size:clamp(
        2.3rem,
        4vw,
        4rem
    );

    line-height:1.05;

    letter-spacing:-1.5px;

}


.contact-panel-content p{

    max-width:520px;

    margin:0;

    color:var(--text-muted);

    font-size:.92rem;

    line-height:1.85;

}


/*==================================================
  CONTACT BUTTON
==================================================*/

.portfolio-contact-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    min-width:220px;

    margin-top:35px;

    padding:15px 18px 15px 22px;

    border:1px solid var(--border-primary);

    background:var(--glass);

    color:var(--text-light);

    text-decoration:none;

    font-size:.62rem;

    font-weight:var(--fw-bold);

    letter-spacing:1.2px;

    overflow:hidden;

    transition:
        border-color .4s ease,
        background .4s ease,
        box-shadow .4s ease;

}


.portfolio-contact-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--glass-strong),
            transparent
        );

    transition:
        left .7s ease;

}


.portfolio-contact-btn:hover::before{

    left:100%;

}


.portfolio-contact-btn i{

    position:relative;

    z-index:2;

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border-primary);

    color:var(--primary-light);

    transition:
        transform .4s ease;

}


.portfolio-contact-btn span{

    position:relative;

    z-index:2;

}


.portfolio-contact-btn:hover{

    border-color:var(--primary);

    box-shadow:
        0 0 30px rgba(0,217,255,.08);

}


.portfolio-contact-btn:hover i{

    transform:
        translateX(4px);

}


/*==================================================
  PANEL STATUS
==================================================*/

.contact-panel-status{

    position:absolute;

    left:55px;

    right:55px;

    bottom:28px;

    z-index:3;

    padding-top:18px;

    border-top:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    color:var(--text-muted);

    font-size:.48rem;

    letter-spacing:1.5px;

}


.contact-panel-status span{

    display:flex;

    align-items:center;

    gap:8px;

}


.contact-panel-status span i{

    color:var(--primary);

    font-size:.35rem;

    filter:
        drop-shadow(
            0 0 5px var(--primary)
        );

}


.contact-panel-status strong{

    color:var(--primary-light);

}


/*==================================================
  CONTACT INFO
==================================================*/

.portfolio-contact-info{

    display:flex;

    flex-direction:column;

    gap:12px;

}


/*==================================================
  INFO CARD
==================================================*/

.contact-info-card{

    position:relative;

    min-height:119px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:18px;

    border:1px solid var(--border);

    background:
        linear-gradient(
            145deg,
            var(--glass-strong),
            var(--glass)
        );

    color:var(--text-light);

    text-decoration:none;

    overflow:hidden;

    transition:
        border-color .4s ease,
        transform .4s ease,
        box-shadow .4s ease;

}


.contact-info-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            transparent 55%
        );

    opacity:0;

    transition:
        opacity .4s ease;

}


.contact-info-card:hover{

    border-color:var(--border-primary);

    transform:
        translateX(6px);

    box-shadow:
        0 15px 40px rgba(0,0,0,.2);

}


.contact-info-card:hover::before{

    opacity:.035;

}


/*==================================================
  INFO ICON
==================================================*/

.contact-info-icon{

    position:relative;

    z-index:2;

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid var(--border-primary);

    background:var(--glass);

    color:var(--primary-light);

    font-size:1rem;

}


.contact-info-icon i{

    filter:
        drop-shadow(
            0 0 7px var(--primary)
        );

}


/*==================================================
  INFO TEXT
==================================================*/

.contact-info-card > div:nth-child(2){

    position:relative;

    z-index:2;

    display:flex;

    flex-direction:column;

    gap:7px;

    min-width:0;

}


.contact-info-card span{

    color:var(--text-muted);

    font-size:.48rem;

    letter-spacing:1.5px;

}


.contact-info-card strong{

    color:var(--text-light);

    font-size:.75rem;

    letter-spacing:.5px;

    word-break:break-word;

}


/*==================================================
  INFO ARROW
==================================================*/

.contact-info-arrow{

    position:relative;

    z-index:2;

    margin-left:auto;

    color:var(--border-primary);

    font-size:.65rem;

    transition:
        color .3s ease,
        transform .3s ease;

}


.contact-info-card:hover
.contact-info-arrow{

    color:var(--primary-light);

    transform:
        translate(3px,-3px);

}


/*==================================================
  FOOTER SYSTEM
==================================================*/

.portfolio-contact-footer{

    margin-top:55px;

    padding-top:24px;

    border-top:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    color:var(--text-muted);

    font-size:.5rem;

    letter-spacing:1.5px;

}


.portfolio-contact-footer div{

    display:flex;

    align-items:center;

    gap:8px;

}


.portfolio-contact-footer i{

    color:var(--primary);

    font-size:.55rem;

    filter:
        drop-shadow(
            0 0 5px var(--primary)
        );

}