.elementor-430 .elementor-element.elementor-element-2417bcb{--display:flex;--margin-top:-20px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-430 .elementor-element.elementor-element-2417bcb:not(.elementor-motion-effects-element-type-background), .elementor-430 .elementor-element.elementor-element-2417bcb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0E0E0E;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-51cac57 *//*==================================================
CONTACT
PART 01
FOUNDATION + HERO
Premium Editorial System
==================================================*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

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

:root{

    --bg:#111111;
    --surface:#121212;
    --surface-hover:#171717;

    --text:#F5F5F5;
    --muted:#8B8B8B;

    --border:rgba(255,255,255,.08);

    --accent:#FF5C1A;

    --radius:18px;

    --container:1120px;

    --transition:.3s cubic-bezier(.4,0,.2,1);

}

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

.contact{

    background:var(--bg);

    color:var(--text);

    padding:140px 7%;

    overflow:hidden;

    font-family:"Space Grotesk",sans-serif;

}

.contact,
.contact *{

    box-sizing:border-box;

}

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

.contact-wrap{

    width:100%;

    max-width:var(--container);

    margin:auto;

}

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

.contact-hero{

    margin-bottom:72px;
    margin-top: -30px;
}

/*==================================================
TAG
==================================================*/

.contact .tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:22px;

    color:var(--accent);

    font-size:12px;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

}

/* Small Orange Dot */

.contact .tag::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--accent);

}

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

.contact-hero h1{

    margin:0;

    font-size:clamp(42px,6vw,78px);

    line-height:1.02;

    font-weight:600;

    letter-spacing:-.05em;

    color:var(--text);

}

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

.contact-hero p{

    max-width:560px;

    margin:26px 0 0;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;

}

/*==================================================
SECTION DIVIDER
==================================================*/

.contact-divider{

    width:100%;

    height:1px;

    margin:70px 0;

    background:var(--border);

}

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

.section-title{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

    color:var(--text);

    font-size:14px;

    font-weight:600;

    letter-spacing:.14em;

    text-transform:uppercase;

}

.section-title::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:var(--accent);

}

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

.contact a{

    color:inherit;

    text-decoration:none;

}

/*==================================================
SELECTION
==================================================*/

.contact ::selection{

    background:var(--accent);

    color:#fff;

}
/*==================================================
CONTACT
PART 02
CONTACT CARDS
Premium Editorial System
==================================================*/

/*==================================================
CONTACT GRID
==================================================*/

.contact-grid{

    display:grid;

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

    gap:18px;

    margin-top:50px;

}

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

.contact-card{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:24px;

    padding:28px;

    background:var(--surface);

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

    border-radius:var(--radius);

    transition:
    transform var(--transition),
    border-color var(--transition),
    background var(--transition);

}

.contact-card:hover{

    transform:scale(1.02);

    border-color:rgba(255,92,26,.18);

    background:var(--surface-hover);

}

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

.contact-content{

    flex:1;

    min-width:0;

}

.contact-label{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:12px;

    color:var(--accent);

    font-size:11px;

    font-weight:600;

    letter-spacing:.18em;

    text-transform:uppercase;

}

.contact-label::before{

    content:"";

    width:5px;

    height:5px;

    border-radius:50%;

    background:var(--accent);

}

.contact-content h3{

    margin:0 0 8px;

    font-size:22px;

    font-weight:600;

    line-height:1.2;

    color:var(--text);

}

.contact-content p{

    margin:0;

    color:var(--muted);

    font-size:15px;

    line-height:1.75;

    max-width:320px;

}

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

.contact-arrow{

    width:48px;

    height:48px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

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

    color:var(--accent);

    font-size:20px;

    font-weight:500;

    transition:
    transform var(--transition),
    border-color var(--transition);

}

.contact-card:hover .contact-arrow{

    transform:scale(1.08);

    border-color:rgba(255,92,26,.25);

}

/*==================================================
OPTIONAL STATUS
==================================================*/

.contact-status{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:14px;

    color:var(--muted);

    font-size:13px;

}

.contact-status::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--accent);

}

/*==================================================
TABLET
==================================================*/

@media (max-width:900px){

    .contact-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
MOBILE
==================================================*/

@media (max-width:600px){

    .contact-card{

        padding:22px;

        gap:18px;

    }

    .contact-content h3{

        font-size:20px;

    }

    .contact-content p{

        font-size:14px;

    }

    .contact-arrow{

        width:42px;

        height:42px;

        font-size:18px;

    }

}
/*==================================================
CONTACT
PART 03
OFFICIAL SOCIALS
Premium Editorial System
==================================================*/

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

.social-section{

    margin-top:90px;

    padding-top:70px;

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

}

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

.social-header{

    max-width:640px;

    margin-bottom:42px;

}

.social-header h2{

    margin:0 0 16px;

    font-size:clamp(30px,4vw,52px);

    line-height:1.08;

    letter-spacing:-.03em;

    font-weight:600;

}

.social-header p{

    margin:0;

    color:var(--muted);

    font-size:16px;

    line-height:1.9;

}

.social-header strong{

    color:var(--text);

    font-weight:500;

}

/*==================================================
USERNAME
==================================================*/

.username-card{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    padding:22px 26px;

    margin-bottom:42px;

    background:var(--surface);

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

    border-radius:var(--radius);

}

.username-card span{

    display:flex;

    align-items:center;

    gap:10px;

    color:var(--muted);

    font-size:13px;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-weight:500;

}

.username-card span::before{

    content:"";

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--accent);

}

.username-card h3{

    margin:0;

    font-size:22px;

    font-weight:600;

    letter-spacing:-.02em;

    color:var(--text);

}

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

.social-grid{

    display:grid;

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

    gap:16px;

}

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

.social-card{

    display:flex;

    align-items:center;

    gap:14px;

    padding:18px;

    min-height:78px;

    background:var(--surface);

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

    border-radius:16px;

    text-decoration:none;

    color:inherit;

    transition:
    transform var(--transition),
    border-color var(--transition);

}

.social-card:hover{

    transform:scale(1.02);

    border-color:rgba(255,92,26,.18);

}

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

.social-card img{

    width:20px;

    height:20px;

    flex-shrink:0;

    filter:brightness(0) invert(1);

}

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

.social-card h4{

    margin:0 0 4px;

    font-size:15px;

    font-weight:500;

    color:var(--text);

}

.social-card p{

    margin:0;

    color:var(--muted);

    font-size:13px;

}

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

@media (max-width:1024px){

    .social-grid{

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

    }

}

@media (max-width:640px){

    .social-section{

        margin-top:70px;

        padding-top:50px;

    }

    .username-card{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }

    .social-grid{

        grid-template-columns:1fr;

    }

}

/*==================================================
CONTACT
PART 04
MICRO INTERACTIONS + RESPONSIVE
Premium Editorial System
==================================================*/

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

.contact a:focus-visible{

    outline:none;

    border-color:var(--accent);

}

/*==================================================
SMOOTH TRANSITIONS
==================================================*/

.contact-card,
.social-card,
.contact-arrow{

    transition:
        transform .28s cubic-bezier(.4,0,.2,1),
        border-color .28s ease,
        background-color .28s ease;

}

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

.contact-card:hover,
.social-card:hover{

    transform:scale(1.02);

}

.contact-card:active,
.social-card:active{

    transform:scale(.99);

}

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

.social-card img{

    display:block;

    object-fit:contain;

    user-select:none;

    -webkit-user-drag:none;

}

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

.contact *::selection{

    background:var(--accent);

    color:#FFFFFF;

}

/*==================================================
RESPONSIVE
Premium Editorial
==================================================*/

/*------------------------------
TABLET
------------------------------*/

@media (max-width:991px){

    .contact{

        padding:110px 6%;

    }

    .contact-wrap{

        max-width:760px;

    }

    .contact-hero{

    min-height:100svh;

    display:flex;

    flex-direction:column;

    justify-content:center;

    max-width:760px;

}

    .contact-hero h1{

        font-size:clamp(42px,7vw,60px);

    }

    .contact-grid{

        grid-template-columns:1fr;

        gap:18px;

    }

    .social-section{

        margin-top:72px;

        padding-top:56px;

    }

    .social-header{

        margin-bottom:36px;

    }

    .social-grid{

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

        gap:16px;

    }

}

/*------------------------------
MOBILE
------------------------------*/

@media (max-width:767px){

    .contact-hero{
    min-height:75svh;
    }

    .contact-hero h1{

        font-size:38px;

        line-height:1.08;

        letter-spacing:-.04em;

    }

    .contact-hero p{

        margin-top:20px;

        font-size:15px;

    }

    .contact-card{

        padding:22px;

    }

    .contact-content h3{

        font-size:20px;

    }

    .contact-content p{

        font-size:14px;

    }

    .contact-arrow{

        width:42px;

        height:42px;

        font-size:18px;

    }

    .username-card{

        flex-direction:column;

        align-items:flex-start;

        gap:8px;

        padding:20px;

    }

    .username-card h3{

        font-size:22px;

    }

}

/*------------------------------
SMALL MOBILE
------------------------------*/

@media (max-width:480px){

    .contact-hero h1{

        font-size:32px;

    }

    .contact-hero p{

        font-size:14px;

    }

    .contact-card{

        padding:20px;

    }

    .contact-content h3{

        font-size:18px;

    }

    .social-grid{

        grid-template-columns:1fr;

    }

    .social-card{

        padding:18px;

        min-height:72px;

    }

}/* End custom CSS */