/* ===========================================================
   CONTACT PAGE - PART 1
   Global + Hero + Contact Cards
=========================================================== */

:root{

--bg:#0b1120;
--bg2:#111827;
--card:#182234;
--card2:#1e293b;

--primary:#2563eb;
--primary2:#3b82f6;

--gold:#facc15;
--gold2:#f59e0b;

--success:#22c55e;
--danger:#ef4444;

--white:#ffffff;

--text:#e5e7eb;
--muted:#94a3b8;

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

--radius:22px;

--shadow:
0 18px 45px rgba(0,0,0,.35);

--transition:.30s ease;

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:

Inter,
Segoe UI,
Roboto,
Arial,
sans-serif;

background:

linear-gradient(
180deg,
#020617,
#0f172a,
#111827
);

color:var(--text);

line-height:1.7;

overflow-x:hidden;

}

/* MAIN CONTENT */

.main-content{

padding:35px;

}

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

.contact-hero{

max-width:950px;

margin:auto;

text-align:center;

padding:75px 30px;

border-radius:30px;

background:

linear-gradient(
135deg,
rgba(37,99,235,.16),
rgba(124,58,237,.14)
);

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

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

.contact-hero::before{

content:"";

position:absolute;

width:300px;

height:300px;

border-radius:50%;

background:

rgba(250,204,21,.08);

top:-140px;

right:-120px;

filter:blur(20px);

}

.contact-hero::after{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:

rgba(59,130,246,.10);

bottom:-120px;

left:-120px;

filter:blur(25px);

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

border-radius:999px;

font-size:14px;

font-weight:700;

color:#fff;

background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:

0 10px 28px rgba(37,99,235,.35);

margin-bottom:25px;

}

.contact-hero h1{

font-size:52px;

font-weight:800;

line-height:1.15;

margin-bottom:20px;

background:

linear-gradient(
135deg,
#ffffff,
#cbd5e1
);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.contact-hero p{

max-width:760px;

margin:auto;

font-size:18px;

color:var(--muted);

}

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

.contact-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

margin-top:55px;

}

.contact-card{

background:

linear-gradient(
180deg,
#162033,
#1f2937
);

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

border-radius:var(--radius);

padding:35px;

text-align:center;

box-shadow:var(--shadow);

transition:var(--transition);

position:relative;

overflow:hidden;

}

.contact-card::before{

content:"";

position:absolute;

top:0;

left:0;

width:100%;

height:4px;

background:

linear-gradient(
90deg,
#2563eb,
#7c3aed,
#facc15
);

}

.contact-card:hover{

transform:

translateY(-8px);

border-color:

rgba(59,130,246,.45);

box-shadow:

0 20px 45px

rgba(37,99,235,.25);

}

.contact-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:42px;

background:

linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:

0 15px 35px

rgba(37,99,235,.30);

}

.contact-card h2{

font-size:24px;

margin-bottom:15px;

font-weight:700;

color:#fff;

}

.contact-card p{

font-size:15px;

color:var(--muted);

margin-bottom:25px;

min-height:70px;

}

/* EMAIL */

.email-link{

display:inline-block;

text-decoration:none;

font-size:16px;

font-weight:700;

color:#60a5fa;

margin-bottom:22px;

word-break:break-word;

transition:.25s;

}

.email-link:hover{

color:#ffffff;

}

/* COPY BUTTON */

.copy-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 28px;

font-size:15px;

font-weight:700;

color:#fff;

border:none;

border-radius:14px;

cursor:pointer;

background:

linear-gradient(
135deg,
#2563eb,
#3b82f6
);

transition:.25s;

box-shadow:

0 10px 25px

rgba(37,99,235,.30);

}

.copy-btn:hover{

transform:

translateY(-2px);

background:

linear-gradient(
135deg,
#1d4ed8,
#2563eb
);

}

.copy-btn:active{

transform:scale(.97);

}

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

.section-header{

text-align:center;

margin-bottom:45px;

}

.section-badge{

display:inline-block;

padding:10px 18px;

border-radius:999px;

background:

rgba(37,99,235,.15);

color:#93c5fd;

font-size:14px;

font-weight:700;

margin-bottom:18px;

}

.section-header h2{

font-size:42px;

margin-bottom:15px;

font-weight:800;

color:#fff;

}

.section-header p{

max-width:720px;

margin:auto;

color:var(--muted);

font-size:17px;

}

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

@media(max-width:1100px){

.contact-grid{

grid-template-columns:

repeat(2,1fr);

}

.contact-hero h1{

font-size:42px;

}

}

@media(max-width:768px){

.main-content{

padding:20px;

}

.contact-hero{

padding:50px 20px;

}

.contact-hero h1{

font-size:34px;

}

.contact-hero p{

font-size:16px;

}

.contact-grid{

grid-template-columns:1fr;

gap:22px;

}

.contact-card{

padding:28px;

}

.contact-icon{

width:75px;

height:75px;

font-size:34px;

}

.section-header h2{

font-size:32px;

}

}

@media(max-width:480px){

.contact-hero{

padding:40px 18px;

border-radius:22px;

}

.hero-badge{

font-size:13px;

padding:10px 18px;

}

.contact-hero h1{

font-size:28px;

}

.copy-btn{

width:100%;

}

}
/* ===========================================================
   CONTACT PAGE - PART 2
   CONTACT FORM
=========================================================== */

.contact-form-section{

margin-top:90px;

padding:70px 45px;

background:linear-gradient(
180deg,
#111827,
#182234
);

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

border-radius:30px;

box-shadow:var(--shadow);

}

.contact-form{

max-width:1000px;

margin:auto;

}

.form-row{

display:grid;

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

gap:25px;

margin-bottom:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

font-size:15px;

font-weight:700;

color:#fff;

margin-bottom:10px;

}

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

width:100%;

padding:16px 18px;

border-radius:16px;

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

background:#0f172a;

color:#fff;

font-size:15px;

outline:none;

transition:.30s ease;

font-family:inherit;

}

.form-group textarea{

resize:vertical;

min-height:180px;

}

.form-group input::placeholder,
.form-group textarea::placeholder{

color:#94a3b8;

}

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

border-color:#3b82f6;

box-shadow:

0 0 0 4px rgba(37,99,235,.15);

background:#111c30;

}

.form-group select{

cursor:pointer;

appearance:none;

-webkit-appearance:none;

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

background-repeat:no-repeat;

background-position:right 18px center;

padding-right:55px;

}

.form-note{

margin:18px 0 30px;

padding:16px 18px;

border-radius:16px;

background:rgba(59,130,246,.10);

border:1px solid rgba(59,130,246,.20);

color:#cbd5e1;

font-size:14px;

line-height:1.7;

}

.submit-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:17px 38px;

border:none;

border-radius:16px;

cursor:pointer;

font-size:16px;

font-weight:700;

color:#fff;

background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:

0 16px 35px rgba(37,99,235,.35);

transition:.30s ease;

}

.submit-btn:hover{

transform:translateY(-3px);

box-shadow:

0 20px 45px rgba(37,99,235,.40);

}

.submit-btn:active{

transform:scale(.97);

}

.submit-btn:disabled{

opacity:.6;

cursor:not-allowed;

transform:none;

}

.form-success{

margin-top:20px;

padding:16px;

border-radius:16px;

background:rgba(34,197,94,.12);

border:1px solid rgba(34,197,94,.25);

color:#bbf7d0;

font-weight:600;

}

.form-error{

margin-top:20px;

padding:16px;

border-radius:16px;

background:rgba(239,68,68,.10);

border:1px solid rgba(239,68,68,.20);

color:#fecaca;

font-weight:600;

}

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

@media(max-width:900px){

.contact-form-section{

padding:50px 25px;

}

.form-row{

grid-template-columns:1fr;

gap:20px;

}

}

@media(max-width:600px){

.contact-form-section{

padding:35px 18px;

margin-top:70px;

border-radius:22px;

}

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

padding:15px;

font-size:15px;

}

.submit-btn{

width:100%;

}

.form-note{

font-size:13px;

}

}
/* ===========================================================
   CONTACT PAGE - PART 3
   FAQ + SUPPORT + SECURITY
=========================================================== */

/* FAQ */

.faq-section{

margin-top:90px;

padding:70px 45px;

background:linear-gradient(
180deg,
#111827,
#182234
);

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

border-radius:30px;

box-shadow:var(--shadow);

}

.faq-container{

display:grid;

gap:22px;

margin-top:40px;

}

.faq-item{

background:linear-gradient(
180deg,
#182234,
#1e293b
);

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

border-radius:20px;

padding:28px;

transition:.30s ease;

}

.faq-item:hover{

transform:translateY(-5px);

border-color:rgba(37,99,235,.35);

box-shadow:0 18px 35px rgba(37,99,235,.18);

}

.faq-item h3{

font-size:20px;

color:#fff;

margin-bottom:14px;

font-weight:700;

}

.faq-item p{

font-size:15px;

color:var(--muted);

line-height:1.8;

}

/* SUPPORT */

.support-section{

margin-top:90px;

padding:70px 45px;

background:linear-gradient(
180deg,
#111827,
#182234
);

border-radius:30px;

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

box-shadow:var(--shadow);

}

.support-grid{

display:grid;

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

gap:25px;

margin-top:45px;

}

.support-card{

background:linear-gradient(
180deg,
#182234,
#1f2937
);

border-radius:22px;

padding:35px;

text-align:center;

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

transition:.30s ease;

}

.support-card:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(37,99,235,.18);

border-color:rgba(37,99,235,.35);

}

.support-icon{

width:80px;

height:80px;

margin:auto;

margin-bottom:22px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:38px;

background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:0 12px 30px rgba(37,99,235,.30);

}

.support-card h3{

font-size:22px;

margin-bottom:12px;

color:#fff;

}

.support-card p{

color:var(--muted);

font-size:15px;

line-height:1.7;

}

/* SECURITY */

.security-section{

margin-top:90px;

}

.security-card{

padding:60px 45px;

background:linear-gradient(
135deg,
rgba(37,99,235,.12),
rgba(124,58,237,.12)
);

border:1px solid rgba(59,130,246,.20);

border-radius:30px;

box-shadow:var(--shadow);

text-align:center;

position:relative;

overflow:hidden;

}

.security-card::before{

content:"";

position:absolute;

top:-120px;

right:-120px;

width:260px;

height:260px;

border-radius:50%;

background:rgba(250,204,21,.08);

filter:blur(20px);

}

.security-icon{

width:90px;

height:90px;

margin:auto;

margin-bottom:25px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

font-size:42px;

background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:0 15px 35px rgba(37,99,235,.30);

}

.security-card h2{

font-size:36px;

font-weight:800;

margin-bottom:20px;

color:#fff;

}

.security-card p{

max-width:850px;

margin:auto;

font-size:16px;

line-height:1.9;

color:var(--muted);

}

.security-card strong{

color:#ffffff;

}

/* CTA */

.contact-footer{

margin-top:90px;

padding:70px 30px;

text-align:center;

}

.contact-footer h2{

font-size:42px;

font-weight:800;

margin-bottom:18px;

color:#fff;

}

.contact-footer p{

max-width:760px;

margin:auto;

font-size:17px;

color:var(--muted);

line-height:1.8;

}

/* RESPONSIVE */

@media(max-width:992px){

.support-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.faq-section,
.support-section,
.security-card{

padding:40px 22px;

}

.security-card h2{

font-size:30px;

}

.contact-footer{

padding:50px 15px;

}

.contact-footer h2{

font-size:32px;

}

}

@media(max-width:480px){

.faq-item{

padding:22px;

}

.support-card{

padding:28px;

}

.support-icon{

width:70px;

height:70px;

font-size:32px;

}

.security-icon{

width:75px;

height:75px;

font-size:34px;

}

.security-card h2{

font-size:26px;

}

.contact-footer h2{

font-size:28px;

}

}
/* ===========================================================
   CONTACT PAGE - PART 4
   OFFICE • SOCIAL • LEGAL • FOOTER
=========================================================== */

/* ===========================
   OFFICE
=========================== */

.office-section{

margin-top:90px;

padding:70px 45px;

background:linear-gradient(
180deg,
#111827,
#182234
);

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

border-radius:30px;

box-shadow:var(--shadow);

}

.office-grid{

display:grid;

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

gap:28px;

margin-top:45px;

}

.office-card{

background:linear-gradient(
180deg,
#182234,
#1f2937
);

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

border-radius:22px;

padding:35px;

text-align:center;

transition:.30s ease;

}

.office-card:hover{

transform:translateY(-6px);

border-color:rgba(37,99,235,.35);

box-shadow:0 18px 40px rgba(37,99,235,.18);

}

.office-icon{

width:82px;

height:82px;

margin:auto;

margin-bottom:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:38px;

border-radius:50%;

background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:0 12px 30px rgba(37,99,235,.30);

}

.office-card h3{

font-size:22px;

font-weight:700;

margin-bottom:15px;

color:#fff;

}

.office-card p{

font-size:15px;

line-height:1.8;

color:var(--muted);

}

.office-card ul{

list-style:none;

padding:0;

margin:0;

}

.office-card li{

padding:8px 0;

color:var(--muted);

word-break:break-word;

}

.office-card a{

color:#60a5fa;

text-decoration:none;

font-weight:600;

word-break:break-all;

transition:.25s;

}

.office-card a:hover{

color:#fff;

}

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

.social-section{

margin-top:90px;

padding:70px 45px;

background:linear-gradient(
180deg,
#111827,
#182234
);

border-radius:30px;

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

box-shadow:var(--shadow);

}

.social-grid{

display:grid;

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

gap:25px;

margin-top:45px;

}

.social-card{

display:flex;

align-items:center;

justify-content:center;

gap:15px;

padding:24px;

text-decoration:none;

font-size:18px;

font-weight:700;

color:#fff;

background:linear-gradient(
180deg,
#182234,
#1f2937
);

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

border-radius:18px;

transition:.30s ease;

}

.social-card:hover{

transform:translateY(-6px);

background:linear-gradient(
135deg,
#2563eb,
#7c3aed
);

box-shadow:0 18px 40px rgba(37,99,235,.25);

}

.social-card span{

font-size:16px;

}

/* ===========================
   LEGAL
=========================== */

.legal-section{

margin-top:90px;

padding:70px 45px;

background:linear-gradient(
180deg,
#111827,
#182234
);

border-radius:30px;

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

box-shadow:var(--shadow);

}

.legal-card{

padding:35px;

border-radius:22px;

background:linear-gradient(
180deg,
#182234,
#1f2937
);

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

}

.legal-card p{

font-size:16px;

line-height:1.9;

color:var(--muted);

margin-bottom:35px;

}

.legal-card strong{

color:#fff;

}

.legal-links{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:18px;

}

.legal-links a{

padding:14px 26px;

text-decoration:none;

font-weight:700;

border-radius:14px;

background:linear-gradient(
135deg,
#2563eb,
#3b82f6
);

color:#fff;

transition:.30s ease;

}

.legal-links a:hover{

transform:translateY(-3px);

background:linear-gradient(
135deg,
#1d4ed8,
#2563eb
);

}

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

.contact-page-footer{

margin-top:70px;

padding:35px 20px;

border-top:1px solid rgba(255,255,255,.08);

text-align:center;

}

.contact-page-footer p{

color:#94a3b8;

font-size:15px;

margin:8px 0;

}

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

@media(max-width:992px){

.office-grid{

grid-template-columns:1fr;

}

.social-grid{

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

}

}

@media(max-width:768px){

.office-section,
.social-section,
.legal-section{

padding:40px 22px;

}

.social-grid{

grid-template-columns:1fr;

}

.office-card,
.legal-card{

padding:28px;

}

.office-icon{

width:70px;

height:70px;

font-size:32px;

}

.legal-links{

flex-direction:column;

}

.legal-links a{

width:100%;

text-align:center;

}

}

@media(max-width:480px){

.office-section,
.social-section,
.legal-section{

padding:30px 16px;

border-radius:22px;

}

.office-card{

padding:22px;

}

.social-card{

padding:18px;

font-size:16px;

}

.social-card span{

font-size:15px;

}

.contact-page-footer{

padding:25px 10px;

}

.contact-page-footer p{

font-size:14px;

}

}