/*==================================================
FOUNDATION
==================================================*/

:root{

--primary:#2563eb;
--primary-dark:#1d4ed8;
--secondary:#4f46e5;

--dark:#0f172a;
--text:#475569;
--muted:#64748b;

--background:#f5f7fb;
--card:#ffffff;

--border:#e2e8f0;

--radius:16px;

--shadow-sm:
0 2px 8px rgba(15,23,42,.05);

--shadow:
0 8px 24px rgba(15,23,42,.08);

--shadow-lg:
0 16px 40px rgba(15,23,42,.12);

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:
Inter,
"Segoe UI",
sans-serif;

background:var(--background);

color:var(--text);

font-size:.96rem;

line-height:1.55;

overflow-x:hidden;

}

a{

text-decoration:none;

transition:.2s;

}

img{

max-width:100%;
display:block;

}

.support-page{

padding:28px 0 45px;

}

.container{

max-width:1180px;

}

.support-section{

margin-top:30px;

}

.section-title{

margin-bottom:20px;
text-align:center;

}

.section-title h2{

font-size:1.55rem;

font-weight:700;

color:var(--dark);

margin-bottom:6px;

}

.section-title p{

margin:0;

font-size:.95rem;

color:var(--muted);

}

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

.support-hero{

position:relative;

overflow:hidden;

padding:34px;

border-radius:22px;

background:

linear-gradient(
135deg,
#2563eb,
#4f46e5
);

box-shadow:var(--shadow);

color:#fff;

}

.support-hero::before{

content:"";

position:absolute;

top:-80px;

right:-80px;

width:180px;

height:180px;

border-radius:50%;

background:

rgba(255,255,255,.08);

}

.support-hero-content{

position:relative;

z-index:2;

max-width:760px;

margin:auto;

text-align:center;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:6px 14px;

margin-bottom:12px;

border-radius:999px;

background:

rgba(255,255,255,.14);

font-size:.82rem;

font-weight:600;

}

.support-hero h1{

margin:0 0 10px;

font-size:2.2rem;

font-weight:800;

line-height:1.15;

}

.support-hero p{

margin:0 auto 22px;

max-width:620px;

font-size:.97rem;

line-height:1.7;

color:

rgba(255,255,255,.92);

}

/*==================================================
SEARCH
==================================================*/

.support-search{

position:relative;

max-width:520px;

margin:auto;

}

.support-search i{

position:absolute;

top:50%;

left:16px;

transform:translateY(-50%);

color:#94a3b8;

font-size:1rem;

}

.support-search input{

width:100%;

height:46px;

padding:0 18px 0 44px;

border:none;

border-radius:999px;

background:#fff;

font-size:.92rem;

color:var(--dark);

box-shadow:

0 4px 16px rgba(15,23,42,.10);

transition:.2s;

}

.support-search input::placeholder{

color:#94a3b8;

}

.support-search input:focus{

outline:none;

box-shadow:

0 0 0 4px

rgba(255,255,255,.18);

}

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

@media(max-width:768px){

.support-page{

padding:18px 0 35px;

}

.support-hero{

padding:24px 18px;

border-radius:18px;

}

.support-hero h1{

font-size:1.7rem;

}

.support-hero p{

font-size:.9rem;

margin-bottom:18px;

}

.hero-badge{

font-size:.78rem;

padding:5px 12px;

}

.support-search{

max-width:100%;

}

.support-search input{

height:42px;

font-size:.88rem;

}

.section-title h2{

font-size:1.35rem;

}

}


/*==================================================
SUPPORT CARDS
==================================================*/

.support-card{

display:flex;

align-items:flex-start;

gap:16px;

padding:18px;

height:100%;

background:var(--card);

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

border-radius:16px;

box-shadow:var(--shadow-sm);

transition:all .25s ease;

cursor:pointer;

}

.support-card:hover{

transform:translateY(-2px);

border-color:#bfdbfe;

box-shadow:var(--shadow);

}

.support-icon{

width:50px;

height:50px;

flex-shrink:0;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

background:linear-gradient(
135deg,
#eff6ff,
#dbeafe
);

font-size:1.4rem;

transition:.25s;

}

.support-card:hover .support-icon{

transform:scale(1.08);

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color:#fff;

}

.support-card h3{

margin:0 0 6px;

font-size:1rem;

font-weight:700;

color:var(--dark);

line-height:1.25;

}

.support-card p{

margin:0;

font-size:.87rem;

line-height:1.5;

color:var(--muted);

}

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

.support-section .row{

--bs-gutter-x:1rem;

--bs-gutter-y:1rem;

}

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

.support-card{

opacity:0;

transform:translateY(18px);

transition:

opacity .35s ease,

transform .35s ease,

box-shadow .25s ease,

border-color .25s ease;

}

.support-card.show-card{

opacity:1;

transform:none;

}

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

@media(max-width:992px){

.support-card{

padding:16px;

gap:14px;

}

}

@media(max-width:768px){

.support-card{

padding:15px;

}

.support-icon{

width:46px;

height:46px;

font-size:1.25rem;

}

.support-card h3{

font-size:.95rem;

}

.support-card p{

font-size:.83rem;

}

}

@media(max-width:576px){

.support-card{

padding:14px;

gap:12px;

border-radius:14px;

}

.support-icon{

width:42px;

height:42px;

font-size:1.1rem;

}

}


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

.support-form-card{

padding:24px;

background:var(--card);

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

border-radius:18px;

box-shadow:var(--shadow-sm);

}

.support-form-card .row{

--bs-gutter-x:1rem;

--bs-gutter-y:1rem;

}

.form-label{

display:flex;

align-items:center;

gap:6px;

margin-bottom:6px;

font-size:.9rem;

font-weight:600;

color:var(--dark);

}

.required{

color:#ef4444;

font-size:.9rem;

}

.support-input,

.support-textarea,

.support-form-card .form-select,

.support-form-card .form-control{

height:44px;

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

border-radius:12px;

padding:0 14px;

font-size:.9rem;

background:#fff;

box-shadow:none;

transition:all .2s ease;

}

.support-textarea{

height:auto;

min-height:130px;

padding:12px 14px;

resize:vertical;

}

.support-input:focus,

.support-textarea:focus,

.support-form-card .form-select:focus,

.support-form-card .form-control:focus{

border-color:var(--primary);

box-shadow:

0 0 0 3px

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

outline:none;

}

.support-upload{

padding:14px;

border:2px dashed #dbe2ea;

border-radius:14px;

background:#f8fafc;

text-align:center;

transition:.2s;

}

.support-upload:hover{

background:#eff6ff;

border-color:#93c5fd;

}

.support-upload input[type=file]{

font-size:.88rem;

}

.upload-note{

margin-top:8px;

font-size:.82rem;

color:var(--muted);

}

.support-submit-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

height:44px;

padding:0 22px;

border:none;

border-radius:999px;

background:

linear-gradient(

135deg,

#2563eb,

#4f46e5

);

color:#fff;

font-size:.92rem;

font-weight:600;

transition:.25s;

}

.support-submit-btn:hover{

transform:translateY(-2px);

box-shadow:

0 10px 24px

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

}

.support-submit-btn:active{

transform:scale(.98);

}

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

.support-form-card input::placeholder,

.support-form-card textarea::placeholder{

color:#94a3b8;

}

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

@media(max-width:768px){

.support-form-card{

padding:18px;

}

.support-input,

.support-form-card .form-select,

.support-form-card .form-control{

height:42px;

font-size:.88rem;

}

.support-textarea{

min-height:110px;

}

.support-submit-btn{

width:100%;

}

}


/*==================================================
FAQ
==================================================*/

.support-faq-card{

padding:18px 22px;

background:var(--card);

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

border-radius:16px;

box-shadow:var(--shadow-sm);

}

.faq-content{

display:flex;

align-items:center;

gap:18px;

}

.faq-icon{

width:52px;

height:52px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

border-radius:14px;

background:

linear-gradient(

135deg,

#eff6ff,

#dbeafe

);

font-size:1.4rem;

}

.faq-text{

flex:1;

min-width:0;

}

.faq-text h3{

margin:0 0 4px;

font-size:1rem;

font-weight:700;

color:var(--dark);

}

.faq-text p{

margin:0;

font-size:.87rem;

line-height:1.5;

color:var(--muted);

}

.support-outline-btn{

height:42px;

padding:0 18px;

display:flex;

align-items:center;

justify-content:center;

border-radius:999px;

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

background:#fff;

color:var(--primary);

font-size:.88rem;

font-weight:600;

transition:.2s;

white-space:nowrap;

}

.support-outline-btn:hover{

background:var(--primary);

color:#fff;

}

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

.support-info-card{

display:flex;

align-items:center;

gap:14px;

padding:16px;

height:100%;

background:var(--card);

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

border-radius:16px;

box-shadow:var(--shadow-sm);

transition:.2s;

}

.support-info-card:hover{

transform:translateY(-2px);

box-shadow:var(--shadow);

}

.support-info-icon{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

border-radius:14px;

background:

linear-gradient(

135deg,

#eff6ff,

#dbeafe

);

font-size:1.25rem;

}

.support-info-content{

flex:1;

min-width:0;

}

.support-info-content h3{

margin:0 0 4px;

font-size:.95rem;

font-weight:700;

color:var(--dark);

}

.support-info-content p{

margin:0;

font-size:.86rem;

color:var(--muted);

word-break:break-word;

}

/*==================================================
RESPONSE TIME
==================================================*/

.support-status-card{

display:flex;

align-items:center;

justify-content:space-between;

gap:18px;

padding:16px 20px;

background:

linear-gradient(

135deg,

#ffffff,

#f8fafc

);

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

border-radius:16px;

box-shadow:var(--shadow-sm);

}

.support-status-icon{

width:48px;

height:48px;

display:flex;

align-items:center;

justify-content:center;

flex-shrink:0;

border-radius:14px;

background:#dcfce7;

font-size:1.2rem;

}

.support-status-content{

flex:1;

min-width:0;

}

.support-status-content h3{

margin:0 0 4px;

font-size:1rem;

font-weight:700;

color:var(--dark);

}

.support-status-content p{

margin:0;

font-size:.87rem;

color:var(--muted);

}

.support-status-badge{

padding:8px 14px;

border-radius:999px;

background:#dcfce7;

color:#15803d;

font-size:.82rem;

font-weight:700;

white-space:nowrap;

}

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

@media(max-width:768px){

.faq-content{

flex-direction:column;

align-items:flex-start;

}

.support-outline-btn{

width:100%;

}

.support-status-card{

flex-direction:column;

align-items:flex-start;

}

.support-status-badge{

width:100%;

text-align:center;

}

}

@media(max-width:576px){

.support-faq-card,

.support-info-card,

.support-status-card{

padding:14px;

}

.faq-icon,

.support-info-icon,

.support-status-icon{

width:42px;

height:42px;

font-size:1.1rem;

}

.faq-text h3,

.support-status-content h3{

font-size:.95rem;

}

.faq-text p,

.support-info-content p,

.support-status-content p{

font-size:.82rem;

}

}


/*==================================================
PREMIUM ANIMATIONS
==================================================*/

.support-card,
.support-form-card,
.support-faq-card,
.support-info-card,
.support-status-card{

animation:

fadeUp .45s ease both;

}

.support-card:nth-child(1){animation-delay:.03s;}
.support-card:nth-child(2){animation-delay:.06s;}
.support-card:nth-child(3){animation-delay:.09s;}
.support-card:nth-child(4){animation-delay:.12s;}
.support-card:nth-child(5){animation-delay:.15s;}
.support-card:nth-child(6){animation-delay:.18s;}

@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(16px);

}

to{

opacity:1;

transform:none;

}

}

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

.support-card,
.support-info-card,
.support-faq-card,
.support-status-card{

transition:

transform .25s ease,

box-shadow .25s ease,

border-color .25s ease,

background .25s ease;

}

.support-card:hover,
.support-info-card:hover,
.support-faq-card:hover,
.support-status-card:hover{

border-color:#bfdbfe;

box-shadow:

0 10px 24px

rgba(15,23,42,.08);

}

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

.support-submit-btn,
.support-outline-btn{

transition:

all .2s ease;

}

.support-submit-btn:active,
.support-outline-btn:active{

transform:scale(.97);

}

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

.support-form-card input,
.support-form-card textarea,
.support-form-card select{

transition:

border-color .2s,

box-shadow .2s,

background .2s;

}

.support-form-card input:hover,
.support-form-card textarea:hover,
.support-form-card select:hover{

border-color:#cbd5e1;

}

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

::selection{

background:#2563eb;

color:#fff;

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

width:8px;

height:8px;

}

::-webkit-scrollbar-track{

background:#edf2f7;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

#2563eb,

#4f46e5

);

border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

background:

linear-gradient(

180deg,

#1d4ed8,

#4338ca

);

}

/* Firefox */

*{

scrollbar-width:thin;

scrollbar-color:

#2563eb

#edf2f7;

}

/*==================================================
SMALL DEVICES
==================================================*/

@media(max-width:576px){

.section-title{

margin-bottom:16px;

}

.support-section{

margin-top:22px;

}

.support-page{

padding-bottom:28px;

}

}

/*==================================================
LARGE DESKTOP
==================================================*/

@media(min-width:1400px){

.container{

max-width:1240px;

}

}


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

.support-send-btn{

display:inline-flex;

align-items:center;

justify-content:center;

gap:8px;

height:44px;

padding:0 22px;

border:none;

border-radius:999px;

background:linear-gradient(
135deg,
#2563eb,
#4f46e5
);

color:#fff;

font-size:.92rem;

font-weight:600;

transition:.25s;

}

.support-send-btn,
.support-send-btn:hover,
.support-send-btn:focus,
.support-send-btn:active{

color:#fff;

text-decoration:none;

}

.support-send-btn i{

color:#fff;

}

.support-send-btn:hover{

transform:translateY(-2px);

box-shadow:0 10px 24px rgba(37,99,235,.20);

}

.support-send-btn:active{

transform:scale(.98);

}


/*==================================================
SUPPORT ALERT
==================================================*/

.support-alert{

border:none;

border-radius:16px;

padding:18px 22px;

box-shadow:0 6px 18px rgba(15,23,42,.08);

margin-bottom:25px;

}

.support-alert.alert-success{

background:#ecfdf5;

color:#166534;

}

.support-alert.alert-danger{

background:#fef2f2;

color:#b91c1c;

}