@charset "utf-8";

/*==================================================
GLOBULAR RECORDS
CONTACT PAGE
PART 2A
==================================================*/


/*==================================================
ROOT
==================================================*/

:root{

--contact-width:1650px;

--contact-purple:#A54CC4;
--contact-orange:#F47A08;
--contact-white:#ffffff;
--contact-gray:#bdbdbd;
--contact-dark:#090909;
--contact-panel:#111111;

--radius:18px;

--transition:.35s ease;

}


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

.contact-hero{

position:relative;

width:100%;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

overflow:hidden;

background:

linear-gradient(
180deg,
#000000,
#060606 35%,
#090909 100%);

padding:170px 40px 120px;

}


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

.contact-bg-icon{

position:absolute;

left:50%;
top:50%;

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

font-size:42rem;

color:

rgba(165,76,196,.055);

pointer-events:none;

animation:

floatMic 8s ease-in-out infinite;

}


@keyframes floatMic{

0%{

transform:
translate(-50%,-50%)
rotate(-4deg);

}

50%{

transform:
translate(-50%,-54%)
rotate(4deg);

}

100%{

transform:
translate(-50%,-50%)
rotate(-4deg);

}

}


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

.contact-glow{

position:absolute;

left:50%;

top:50%;

width:700px;

height:700px;

transform:

translate(-50%,-50%);

border-radius:50%;

background:

radial-gradient(circle,

rgba(165,76,196,.16),

rgba(165,76,196,.07),

transparent 72%);

filter:blur(65px);

pointer-events:none;

animation:

glowPulse 6s ease-in-out infinite;

}


@keyframes glowPulse{

0%{

opacity:.45;

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

}

50%{

opacity:.9;

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

}

100%{

opacity:.45;

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

}

}


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

.contact-container{

position:relative;

z-index:10;

width:min(var(--contact-width),92%);

margin:auto;

display:flex;

flex-direction:column;

align-items:center;

text-align:center;

}


/*==================================================
SUBTITLE
==================================================*/

.contact-subtitle{

display:inline-block;

font-family:

'Oswald',

sans-serif;

font-size:15px;

letter-spacing:7px;

font-weight:500;

color:

var(--contact-purple);

margin-bottom:28px;

text-transform:uppercase;

}


/*==================================================
TITLE
==================================================*/

.contact-container h1{

font-family:

'Anton',

sans-serif;

font-size:

clamp(90px,9vw,190px);

line-height:.88;

font-weight:400;

letter-spacing:2px;

text-transform:uppercase;

color:#fff;

max-width:1200px;

margin-bottom:35px;

}


/*==================================================
DESCRIPTION
==================================================*/

.contact-container p{

max-width:700px;

font-family:

'Oswald',

sans-serif;

font-size:25px;

font-weight:300;

line-height:1.9;

color:

var(--contact-gray);

margin-bottom:55px;

}


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

.contact-scroll{

display:inline-flex;

align-items:center;

justify-content:center;

padding:

20px 48px;

border-radius:60px;

border:

2px solid

rgba(165,76,196,.35);

font-family:

'Oswald',

sans-serif;

font-size:16px;

letter-spacing:3px;

text-transform:uppercase;

color:#fff;

background:

rgba(255,255,255,.02);

backdrop-filter:

blur(10px);

transition:

var(--transition);

}


.contact-scroll:hover{

background:

var(--contact-purple);

transform:

translateY(-5px);

box-shadow:

0 0 40px

rgba(165,76,196,.45);

}


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

.contact-section{

position:relative;

padding: 160px 0;

background:

#070707;

overflow:hidden;

}


/*==================================================
WRAPPER
==================================================*/

.contact-wrapper{

width:

min(1600px,92%);

margin:3%;

display:grid;

grid-template-columns:

1.15fr .85fr;

gap:90px;

align-items:start;

}


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

.contact-form-column{

position:relative;

}


/*==================================================
SMALL TITLE
==================================================*/

.section-small{

display:inline-block;

font-family:

'Oswald',

sans-serif;

font-size:14px;

letter-spacing:5px;

text-transform:uppercase;

color:

var(--contact-purple);

margin-bottom:18px;

}


/*==================================================
SECTION TITLE
==================================================*/

.contact-form-column h2{

font-family:

'Anton',

sans-serif;

font-size:

clamp(60px,5vw,110px);

font-weight:400;

line-height:.9;

text-transform:uppercase;

margin-bottom:9px;

color:#fff;

}


/*==================================================
INTRO
==================================================*/

.contact-form-column>p{

font-family:

'Oswald',

sans-serif;

font-size:22px;

font-weight:300;

line-height:1.9;

color:

#bfbfbf;

max-width:720px;

margin-bottom:60px;

}


/*==================================================
BACKGROUND PARTICLES
==================================================*/
/*
.contact-section::before{

content:"";

position:absolute;

inset:0;

pointer-events:none;

opacity:.04;

background-image:

radial-gradient(

#ffffff 1px,

transparent 1px);

background-size:

26px 26px;

animation:

particleMove 35s linear infinite;

}*/


@keyframes particleMove{

from{

transform:

translateY(0);

}

to{

transform:

translateY(-220px);

}

}


/*==================================================
TOP LINE
==================================================*/
/*
.contact-section::after{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:2px;

background:

linear-gradient(

90deg,

transparent,

#A54CC4,

#ffffff,

#A54CC4,

transparent);

animation:

lineMove 6s linear infinite;

}*/


@keyframes lineMove{

0%{

transform:

translateX(-100%);

}

100%{

transform:

translateX(100%);

}

}

/*==================================================
PART 2B
CONTACT FORM
==================================================*/


/*==================================
FORM
===================================*/

#contactForm{

display:flex;

flex-direction:column;

gap:8px;

}


/*==================================
GROUP
===================================*/

.form-group{

position:relative;

}


/*==================================
LABEL
===================================*/

.form-group label{

display:block;

margin-bottom:2px;

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

font-size:14px;

letter-spacing:3px;

text-transform:uppercase;

color:#A54CC4;

}


/*==================================
INPUTS
===================================*/



.form-group input,

.form-group textarea,

.form-group select{

width:min(420px,100%);

background:transparent;

/*border:none;*/

border-bottom:2px solid rgba(255,255,255,.15);

padding:10px 5px;

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

font-size:-20px;

font-weight:300;

color:#ffffff;

outline:none;

transition:.35s ease;

}


/*==================================
SELECT
===================================*/

.form-group select{
	background:#111;
color:#ffffff;

cursor:pointer;

appearance:none;

-webkit-appearance:none;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='black'%3E%3Cpath d='M4 7l5 5 5-5'/%3E%3C/svg%3E");

background-repeat:no-repeat;

background-position:right center;

padding-right:40px;

}

.form-group select option{

background:#111;
color:#ffffff;
padding:10px;

}


/*==================================
TEXTAREA
===================================*/

.form-group textarea{

resize:vertical;

min-height:10px;

max-height:220px;

line-height:1.8;

}


/*==================================
FOCUS
===================================*/

.form-group input:focus,

.form-group textarea:focus,

.form-group select:focus{

border-color:#A54CC4;

box-shadow:

0 8px 0 -6px rgba(165,76,196,.45);

}


/*==================================
PLACEHOLDER
===================================*/

::placeholder{

color:#666;

opacity:1;

}


/*==================================
COUNTER
===================================*/

.counter{

margin-top:12px;

text-align:LEFT;

font-size:14px;

letter-spacing:2px;

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

color:#777;

}

.counter span{

color:#A54CC4;

}


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

.send-button{

margin-top:9px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:14px;

padding:12px 35px;

border:none;

border-radius:60px;

background:#A54CC4;

color:#fff;

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

font-size:12px;
  width:220px;
letter-spacing:4px;

text-transform:uppercase;

cursor:pointer;

transition:.4s ease;

box-shadow:

0 0 35px rgba(165,76,196,.25);

}


.send-button:hover{

transform:translateY(-6px);

background:#B45AD5;

box-shadow:

0 0 55px rgba(165,76,196,.55);

}


.send-button i{

transition:.35s;

}

.send-button:hover i{

transform:translateX(6px);

}


/*==================================
HONEYPOT
===================================*/

.hidden-field{

display:none!important;

}


/*==================================================
CONTACT INFORMATION
==================================================*/

.contact-info-column{

position:sticky;

top:80px;

}


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

.contact-card{

background:#111111;

border:1px solid rgba(255,255,255,.05);

border-radius:22px;

padding:55px;

overflow:hidden;

position:relative;

box-shadow:

0 35px 80px rgba(0,0,0,.45);

}


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

.contact-card::before{

content:"";

position:absolute;

left:-150px;

top:-150px;

width:300px;

height:300px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(165,76,196,.20),

transparent 72%);

filter:blur(35px);

transition:.5s;

}

.contact-card:hover::before{

transform:scale(1.4);

}


/*==================================
TITLE
===================================*/

.contact-card h3{

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

font-size:30px;

font-weight:400;

letter-spacing:2px;

margin-bottom:45px;

text-transform:uppercase;

color:#fff;

}


/*==================================
ITEM
===================================*/

.info-item{

display:flex;

align-items:flex-start;

gap:25px;

padding:10px 0;

border-bottom:1px solid rgba(255,255,255,.06);

}


.info-item:last-child{

border-bottom:none;

}


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

.info-item i{

width:56px;

height:56px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#191919;

font-size:22px;

color:#A54CC4;

transition:.35s;

}


.info-item:hover i{

background:#A54CC4;

color:#fff;

transform:rotate(12deg);

}


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

.info-item h4{

font-family:'League Gothic',sans-serif;

font-size:34px;

font-weight:400;

letter-spacing:1px;

margin-bottom:8px;

color:#fff;

text-transform:uppercase;

}


.info-item p{

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

font-size:18px;

font-weight:300;

line-height:1.8;

color:#cfcfcf;

}


/*==================================================
SOCIAL
==================================================*/

.social-links{

display:flex;

gap:18px;

margin-top:50px;

flex-wrap:wrap;

}


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

.social-links a{

width:58px;

height:58px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

background:#1a1a1a;

font-size:22px;

color:#fff;

transition:.4s ease;

position:relative;

overflow:hidden;

}


/*==================================
RING
===================================*/

.social-links a::after{

content:"";

position:absolute;

inset:0;

border-radius:50%;

border:2px solid rgba(165,76,196,.35);

transform:scale(.6);

opacity:0;

}


.social-links a:hover::after{

animation:ring .8s ease;

}


@keyframes ring{

0%{

opacity:1;

transform:scale(.5);

}

100%{

opacity:0;

transform:scale(1.7);

}

}


/*==================================
HOVER
===================================*/

.social-links a:hover{

background:#A54CC4;

transform:translateY(-6px);

box-shadow:

0 0 35px rgba(165,76,196,.45);

}

/*==================================================
PART 2C
ANIMATIONS + RESPONSIVE
==================================================*/


/*==================================
SCROLL REVEAL
===================================*/

.contact-hero,
.contact-form-column,
.contact-info-column{

opacity:0;

transform:translateY(80px);

transition:

opacity 1s ease,

transform 1s ease;

}

.contact-visible{

opacity:1;

transform:none;

}


/*==================================
STAGGER
===================================*/

.contact-form-column{

transition-delay:.15s;

}

.contact-info-column{

transition-delay:.35s;

}


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

.form-group{

opacity:0;

transform:translateY(25px);

animation:formFade .8s forwards;

}

.form-group:nth-child(1){animation-delay:.15s;}
.form-group:nth-child(2){animation-delay:.25s;}
.form-group:nth-child(3){animation-delay:.35s;}
.form-group:nth-child(4){animation-delay:.45s;}
.form-group:nth-child(5){animation-delay:.55s;}
.form-group:nth-child(6){animation-delay:.65s;}

@keyframes formFade{

from{

opacity:0;

transform:translateY(35px);

}

to{

opacity:1;

transform:none;

}

}


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

.send-button{

animation:buttonPulse 5s infinite;

}

@keyframes buttonPulse{

0%{

box-shadow:

0 0 0 rgba(165,76,196,0);

}

50%{

box-shadow:

0 0 35px rgba(165,76,196,.35);

}

100%{

box-shadow:

0 0 0 rgba(165,76,196,0);

}

}


/*==================================
SOCIAL FLOAT
===================================*/

.social-links a{

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

}

.social-links a:nth-child(2){

animation-delay:.2s;

}

.social-links a:nth-child(3){

animation-delay:.4s;

}

.social-links a:nth-child(4){

animation-delay:.6s;

}

.social-links a:nth-child(5){

animation-delay:.8s;

}

@keyframes socialFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-5px);

}

100%{

transform:translateY(0);

}

}


/*==================================
INPUT HOVER
===================================*/

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

border-color:

rgba(165,76,196,.45);

}


/*==================================
CARD HOVER
===================================*/

.contact-card{

transition:

transform .45s,

box-shadow .45s,

border-color .45s;

}

.contact-card:hover{

transform:translateY(-8px);

border-color:

rgba(165,76,196,.25);

box-shadow:

0 35px 80px rgba(0,0,0,.65),

0 0 45px rgba(165,76,196,.12);

}


/*==================================
MOUSE LIGHT
===================================*/

.contact-light{

position:fixed;

width:380px;

height:380px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(165,76,196,.18),

transparent 70%);

pointer-events:none;

filter:blur(35px);

opacity:.8;

transform:

translate(-50%,-50%);

transition:

left .08s linear,

top .08s linear,

opacity .3s;

z-index:1;

}


/*==================================
SUCCESS
===================================*/

.form-success{

background:#0f2d17;

border-left:5px solid #42d66c;

padding:22px;

margin-top:30px;

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

font-size:18px;

animation:successSlide .6s ease;

}

@keyframes successSlide{

from{

opacity:0;

transform:translateY(25px);

}

to{

opacity:1;

transform:none;

}

}


/*==================================
ERROR
===================================*/

.form-error{

background:#301212;

border-left:5px solid #ff5656;

padding:22px;

margin-top:30px;

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

font-size:18px;

animation:successSlide .6s ease;

}



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


/*==================================
1600
===================================*/

@media(max-width:1600px){

.contact-container h1{

font-size:160px;

}

.contact-wrapper{

gap:70px;

}

}


/*==================================
1400
===================================*/

@media(max-width:1400px){

.contact-container h1{

font-size:135px;

}

.contact-card{

padding:45px;

}

.contact-card h3{

font-size:30px;

}

}


/*==================================
1200
===================================*/

@media(max-width:1200px){

.contact-wrapper{

grid-template-columns:1fr;

gap:90px;

}

.contact-info-column{

position:relative;

top:auto;

}

.contact-card{

max-width:900px;

margin:auto;

}

.contact-container h1{

font-size:110px;

}

.contact-container p{

font-size:22px;

}

}


/*==================================
992
===================================*/

@media(max-width:992px){

.contact-hero{

padding:170px 30px 100px;

}

.contact-bg-icon{

font-size:24rem;

}

.contact-container h1{

font-size:82px;

}

.contact-form-column h2{

font-size:72px;

}

.contact-card{

padding:40px;

}

.info-item{

gap:18px;

}

}


/*==================================
768
===================================*/

@media(max-width:768px){

.contact-hero{

min-height:auto;

padding:150px 25px 90px;

}

.contact-container h1{

font-size:64px;

}

.contact-container p{

font-size:19px;

line-height:1.8;

}

.contact-form-column h2{

font-size:58px;

}

.contact-form-column>p{

font-size:18px;

}

.contact-card{

padding:35px;

}

.contact-card h3{

font-size:30px;

}

.send-button{

width:100%;

}

}


/*==================================
600
===================================*/

@media(max-width:600px){

.contact-container h1{

font-size:52px;

}

.contact-subtitle{

font-size:13px;

letter-spacing:4px;

}

.contact-bg-icon{

font-size:18rem;

}

.form-group input,

.form-group textarea,

.form-group select{

font-size:17px;

}

.info-item{

flex-direction:column;

align-items:flex-start;

}

.info-item i{

margin-bottom:10px;

}

.social-links{

justify-content:center;

}

}


/*==================================
430
===================================*/

@media(max-width:430px){

.contact-hero{

padding:140px 20px 70px;

}

.contact-container h1{

font-size:42px;

}

.contact-container p{

font-size:17px;

}

.contact-form-column h2{

font-size:44px;

}

.contact-card{

padding:28px;

}

.contact-card h3{

font-size:30px;

}

.info-item h4{

font-size:26px;

}

.info-item p{

font-size:16px;

}

.send-button{

font-size:14px;

letter-spacing:2px;

padding:18px;

}

.social-links a{

width:48px;

height:48px;

font-size:18px;

}

}


/*==================================================
PERFORMANCE
==================================================*/

.contact-container,
.contact-card,
.send-button,
.form-group,
.social-links a{

will-change:

transform,

opacity;

backface-visibility:hidden;

transform-style:preserve-3d;

}


/*==================================
REDUCED MOTION
===================================*/

@media(prefers-reduced-motion:reduce){

*{

animation:none!important;

transition:none!important;

scroll-behavior:auto!important;

}

}