/* =========================================
   RESET
========================================= */

*{

    margin:0;
    padding:0;

    box-sizing:border-box;
}

body{

    background:#050505;

    font-family:'Space Mono', monospace;

    color:#ffffff;

    overflow-x:hidden;
}

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

.contact-header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:90px;

    padding:0 7%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    z-index:9999;

    overflow:hidden;

    backdrop-filter:blur(16px);

    background:
        rgba(0,0,0,0.45);

    border-bottom:
        1px solid rgba(255,255,255,0.06);
}

/* =========================================
   BLUR
========================================= */

.contact-header-blur{

    position:absolute;

    width:300px;
    height:300px;

    background:#dfff00;

    border-radius:50%;

    filter:blur(120px);

    opacity:0.06;

    top:-150px;
    right:-100px;

    z-index:-1;
}

/* =========================================
   LOGO
========================================= */

.contact-logo{

    display:flex;

    align-items:center;

    text-decoration:none;
}

.contact-logo-image{

    width:130px;

    object-fit:contain;

    transition:0.4s ease;
}

.contact-logo:hover
.contact-logo-image{

    transform:scale(1.04);
}

/* =========================================
   NAV
========================================= */

.contact-nav{

    display:flex;

    align-items:center;

    gap:45px;
}

.contact-nav a{

    position:relative;

    color:
        rgba(255,255,255,0.72);

    text-decoration:none;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    transition:0.35s ease;
}

/* UNDERLINE */

.contact-nav a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0%;

    height:2px;

    background:#dfff00;

    transition:0.35s ease;
}

/* HOVER */

.contact-nav a:hover{

    color:#ffffff;
}

.contact-nav a:hover::after{

    width:100%;
}

/* ACTIVE */

.contact-nav a.active{

    color:#ffffff;
}

.contact-nav a.active::after{

    width:100%;
}

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

.contact-header-btn{

    height:52px;

    padding:0 30px;

    border-radius:60px;

    background:#dfff00;

    color:#000000;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.4s ease;
}

.contact-header-btn:hover{

    transform:
        translateY(-5px);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:992px){

    .contact-nav{

        display:none;
    }
}

@media(max-width:768px){

    .contact-header{

        height:80px;
    }

    .contact-logo-image{

        width:105px;
    }

    .contact-header-btn{

        height:46px;

        padding:0 20px;

        font-size:11px;
    }
}

/* =========================================
   CONTACT HERO SECTION
========================================= */

.contact-hero-section{

    position:relative;

    width:100%;

    min-height:100vh;

    padding:180px 7% 120px;

    background:#050505;

    display:grid;

    grid-template-columns:
        1fr 0.8fr;

    gap:80px;

    align-items:center;

    overflow:hidden;
}

/* =========================================
   BACKGROUND
========================================= */

.contact-hero-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    opacity:0.18;
}

/* GLOW */

.contact-hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(160px);

    opacity:0.06;
}

.contact-hero-glow-1{

    width:450px;
    height:450px;

    background:#dfff00;

    top:-120px;
    left:-120px;
}

.contact-hero-glow-2{

    width:450px;
    height:450px;

    background:#dfff00;

    bottom:-120px;
    right:-120px;
}

/* =========================================
   FLOATING ICONS
========================================= */

.contact-floating-icon{

    position:absolute;

    color:
        rgba(223,255,0,0.12);

    font-size:70px;

    font-family:'Anton', sans-serif;

    animation:
        floatContact 6s ease-in-out infinite;
}

.icon-1{

    top:18%;
    left:8%;
}

.icon-2{

    bottom:15%;
    right:10%;

    animation-delay:2s;
}

.icon-3{

    top:35%;
    right:25%;

    animation-delay:3s;
}

/* =========================================
   LEFT
========================================= */

.contact-hero-left{

    position:relative;

    z-index:5;
}

/* MINI TITLE */

.contact-mini-title{

    color:#dfff00;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:28px;
}

/* TITLE */

.contact-main-title{

    font-family:'Anton', sans-serif;

    font-size:clamp(80px,9vw,170px);

    line-height:0.9;

    text-transform:uppercase;

    margin-bottom:35px;
}

/* DESCRIPTION */

.contact-description{

    max-width:700px;

    color:rgba(255,255,255,0.65);

    font-size:17px;

    line-height:1.9;

    margin-bottom:50px;
}

/* =========================================
   BUTTONS
========================================= */

.contact-buttons{

    display:flex;

    gap:24px;

    flex-wrap:wrap;
}

/* BUTTON */

.contact-btn{

    height:64px;

    padding:0 36px;

    border-radius:60px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.4s ease;
}

/* PRIMARY */

.primary-contact-btn{

    background:#dfff00;

    color:#000000;

    box-shadow:
        0 15px 40px rgba(223,255,0,0.18);
}

.primary-contact-btn:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px rgba(223,255,0,0.28);
}

/* SECONDARY */

.secondary-contact-btn{

    border:
        1px solid rgba(255,255,255,0.12);

    background:
        rgba(255,255,255,0.04);

    color:#ffffff;
}

.secondary-contact-btn:hover{

    background:#ffffff;

    color:#000000;

    transform:
        translateY(-6px);
}

/* =========================================
   RIGHT
========================================= */

.contact-hero-right{

    position:relative;

    z-index:5;

    display:flex;

    flex-direction:column;

    gap:25px;
}

/* CARD */

.contact-info-card{

    position:relative;

    padding:40px;

    border-radius:32px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.05),
            rgba(255,255,255,0.02)
        );

    border:
        1px solid rgba(255,255,255,0.06);

    overflow:hidden;

    backdrop-filter:blur(14px);

    transition:0.45s ease;
}

/* HOVER */

.contact-info-card:hover{

    transform:
        translateY(-8px);

    border-color:
        rgba(223,255,0,0.18);

    box-shadow:
        0 25px 70px rgba(0,0,0,0.35);
}

/* ICON */

.contact-info-icon{

    width:74px;
    height:74px;

    border-radius:22px;

    background:
        rgba(223,255,0,0.08);

    border:
        1px solid rgba(223,255,0,0.12);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#dfff00;

    font-size:30px;

    margin-bottom:25px;

    transition:0.4s ease;
}

/* HOVER */

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

    background:#dfff00;

    color:#000000;

    transform:
        rotate(8deg)
        scale(1.08);
}

/* TITLE */

.contact-info-card h3{

    font-family:'Anton', sans-serif;

    font-size:42px;

    line-height:1;

    text-transform:uppercase;

    margin-bottom:16px;
}

/* TEXT */

.contact-info-card p{

    color:rgba(255,255,255,0.65);

    line-height:1.8;

    font-size:15px;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes floatContact{

    0%{

        transform:
            translateY(0px)
            rotate(0deg);
    }

    50%{

        transform:
            translateY(-18px)
            rotate(5deg);
    }

    100%{

        transform:
            translateY(0px)
            rotate(0deg);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

    .contact-hero-section{

        grid-template-columns:1fr;

        gap:70px;
    }
}

@media(max-width:768px){

    .contact-hero-section{

        padding:150px 7% 100px;
    }

    .contact-main-title{

        font-size:72px;
    }

    .contact-btn{

        width:100%;
    }

    .contact-info-card{

        padding:35px;
    }

    .contact-info-card h3{

        font-size:34px;
    }
}

/* =========================================
   CONTACT FORM SECTION
========================================= */

.contact-form-section{

    position:relative;

    width:100%;

    min-height:100vh;

    padding:140px 7%;

    background:#050505;

    display:grid;

    grid-template-columns:
        0.9fr 1.1fr;

    gap:80px;

    overflow:hidden;
}

/* =========================================
   BACKGROUND
========================================= */

.contact-form-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    opacity:0.18;
}

/* GLOW */

.contact-form-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(160px);

    opacity:0.06;
}

.contact-form-glow-1{

    width:450px;
    height:450px;

    background:#dfff00;

    top:-120px;
    left:-120px;
}

.contact-form-glow-2{

    width:450px;
    height:450px;

    background:#dfff00;

    bottom:-120px;
    right:-120px;
}

/* =========================================
   LEFT
========================================= */

.contact-form-left{

    position:relative;

    z-index:5;
}

/* MINI TITLE */

.contact-form-mini-title{

    color:#dfff00;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:25px;
}

/* TITLE */

.contact-form-main-title{

    font-family:'Anton', sans-serif;

    font-size:clamp(70px,8vw,150px);

    line-height:0.9;

    text-transform:uppercase;

    margin-bottom:35px;
}

/* DESCRIPTION */

.contact-form-description{

    max-width:650px;

    color:rgba(255,255,255,0.65);

    line-height:1.9;

    font-size:17px;

    margin-bottom:45px;
}

/* TAGS */

.contact-tags{

    display:flex;

    flex-wrap:wrap;

    gap:16px;
}

.contact-tags span{

    padding:14px 24px;

    border-radius:60px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.06);

    color:#ffffff;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.35s ease;
}

.contact-tags span:hover{

    background:#dfff00;

    color:#000000;

    transform:translateY(-4px);
}

/* =========================================
   RIGHT
========================================= */

.contact-form-right{

    position:relative;

    z-index:5;
}

/* FORM */

.creative-contact-form{

    display:grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:25px;
}

/* FULL */

.full-width{

    grid-column:1/-1;
}

/* GROUP */

.form-group{

    display:flex;

    flex-direction:column;
}

/* LABEL */

.form-group label{

    color:#dfff00;

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    margin-bottom:14px;
}

/* INPUTS */

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    border:none;

    outline:none;

    padding:22px 24px;

    border-radius:26px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.06);

    color:#ffffff;

    font-size:15px;

    font-family:'Space Mono', monospace;

    transition:0.35s ease;
}

/* TEXTAREA */

.form-group textarea{

    min-height:180px;

    resize:none;
}

/* FOCUS */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{

    border-color:
        rgba(223,255,0,0.35);

    box-shadow:
        0 0 0 4px rgba(223,255,0,0.08);
}

/* BUTTON */

.contact-submit-btn{

    grid-column:1/-1;

    height:68px;

    border:none;

    border-radius:60px;

    background:#dfff00;

    color:#000000;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    cursor:pointer;

    transition:0.4s ease;

    margin-top:10px;

    box-shadow:
        0 15px 40px rgba(223,255,0,0.18);
}

/* HOVER */

.contact-submit-btn:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px rgba(223,255,0,0.28);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1100px){

    .contact-form-section{

        grid-template-columns:1fr;

        gap:70px;
    }
}

@media(max-width:768px){

    .contact-form-section{

        padding:100px 7%;
    }

    .contact-form-main-title{

        font-size:72px;
    }

    .creative-contact-form{

        grid-template-columns:1fr;
    }

    .full-width{

        grid-column:auto;
    }
}

/* =========================================
   CONTACT FINAL SECTION
========================================= */

.contact-final-section{

    position:relative;

    width:100%;

    min-height:100vh;

    padding:160px 7%;

    background:#050505;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
}

/* =========================================
   BACKGROUND
========================================= */

.contact-final-grid{

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.03) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    opacity:0.18;
}

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

.contact-final-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(160px);

    opacity:0.06;
}

.contact-final-glow-1{

    width:500px;
    height:500px;

    background:#dfff00;

    top:-120px;
    left:-120px;
}

.contact-final-glow-2{

    width:500px;
    height:500px;

    background:#dfff00;

    bottom:-120px;
    right:-120px;
}

/* =========================================
   FLOATING SHAPES
========================================= */

.contact-final-shape{

    position:absolute;

    border:
        1px solid rgba(223,255,0,0.08);

    background:
        rgba(223,255,0,0.03);

    backdrop-filter:blur(14px);

    animation:
        finalFloat 8s ease-in-out infinite;
}

/* SHAPE 1 */

.shape-1{

    width:180px;
    height:180px;

    border-radius:36px;

    top:18%;
    left:8%;
}

/* SHAPE 2 */

.shape-2{

    width:120px;
    height:120px;

    border-radius:50%;

    bottom:18%;
    left:18%;

    animation-delay:2s;
}

/* SHAPE 3 */

.shape-3{

    width:220px;
    height:220px;

    border-radius:40px;

    top:20%;
    right:10%;

    animation-delay:3s;
}

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

.contact-final-content{

    position:relative;

    z-index:5;

    max-width:1000px;

    text-align:center;
}

/* MINI TITLE */

.contact-final-mini-title{

    color:#dfff00;

    font-size:14px;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:28px;
}

/* TITLE */

.contact-final-main-title{

    font-family:'Anton', sans-serif;

    font-size:clamp(90px,10vw,190px);

    line-height:0.9;

    text-transform:uppercase;

    margin-bottom:40px;
}

/* DESCRIPTION */

.contact-final-description{

    max-width:760px;

    margin:auto;

    color:rgba(255,255,255,0.65);

    font-size:18px;

    line-height:1.9;

    margin-bottom:60px;
}

/* =========================================
   BUTTONS
========================================= */

.contact-final-buttons{

    display:flex;

    justify-content:center;

    gap:24px;

    flex-wrap:wrap;

    margin-bottom:60px;
}

/* BUTTON */

.contact-final-btn{

    height:64px;

    padding:0 38px;

    border-radius:60px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.4s ease;
}

/* PRIMARY */

.primary-final-btn{

    background:#dfff00;

    color:#000000;

    box-shadow:
        0 15px 40px rgba(223,255,0,0.18);
}

.primary-final-btn:hover{

    transform:
        translateY(-6px);

    box-shadow:
        0 25px 60px rgba(223,255,0,0.28);
}

/* SECONDARY */

.secondary-final-btn{

    border:
        1px solid rgba(255,255,255,0.12);

    background:
        rgba(255,255,255,0.04);

    color:#ffffff;
}

.secondary-final-btn:hover{

    background:#ffffff;

    color:#000000;

    transform:
        translateY(-6px);
}

/* =========================================
   SOCIALS
========================================= */

.contact-social-links{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:50px;
}

/* LINK */

.contact-social-links a{

    padding:16px 28px;

    border-radius:60px;

    background:
        rgba(255,255,255,0.04);

    border:
        1px solid rgba(255,255,255,0.06);

    color:#ffffff;

    text-decoration:none;

    font-size:12px;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:0.35s ease;
}

/* HOVER */

.contact-social-links a:hover{

    background:#dfff00;

    color:#000000;

    transform:translateY(-5px);
}

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

.contact-footer{

    color:rgba(255,255,255,0.45);

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;
}

/* =========================================
   ANIMATION
========================================= */

@keyframes finalFloat{

    0%{

        transform:
            translateY(0px)
            rotate(0deg);
    }

    50%{

        transform:
            translateY(-18px)
            rotate(5deg);
    }

    100%{

        transform:
            translateY(0px)
            rotate(0deg);
    }
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

    .contact-final-section{

        padding:120px 7%;
    }

    .contact-final-main-title{

        font-size:82px;
    }

    .contact-final-description{

        font-size:15px;
    }

    .contact-final-btn{

        width:100%;
    }
}