/* ==========================================
   DEXTOR STORES
========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

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

background:#050505;

color:#fff;

overflow-x:hidden;

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:40px 20px;

}

/* Animated Background */

.bg{

position:fixed;

inset:0;

z-index:-2;

background:
radial-gradient(circle at top left,
rgba(255,255,255,.06),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(255,255,255,.05),
transparent 35%),

#050505;

overflow:hidden;

}

.bg::before{

content:"";

position:absolute;

width:700px;
height:700px;

background:
radial-gradient(circle,
rgba(255,255,255,.08),
transparent 70%);

left:-250px;
top:-250px;

filter:blur(120px);

animation:moveOne 18s infinite ease-in-out;

}

.bg::after{

content:"";

position:absolute;

width:650px;
height:650px;

background:
radial-gradient(circle,
rgba(255,255,255,.05),
transparent 70%);

right:-220px;
bottom:-220px;

filter:blur(120px);

animation:moveTwo 15s infinite ease-in-out;

}

@keyframes moveOne{

50%{

transform:
translate(120px,80px);

}

}

@keyframes moveTwo{

50%{

transform:
translate(-100px,-60px);

}

}

.wrapper{

width:100%;

max-width:1000px;

}

.glass{

background:
rgba(255,255,255,.04);

backdrop-filter:
blur(18px);

border:

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

border-radius:28px;

padding:45px;

box-shadow:

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

position:relative;

overflow:hidden;

}

/* glowing border */

.glass::before{

content:"";

position:absolute;

inset:0;

padding:1px;

border-radius:28px;

background:

linear-gradient(

135deg,

rgba(255,255,255,.15),

transparent,

rgba(255,255,255,.12)

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

pointer-events:none;

}

/* Logo */

.logo-area{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

margin-bottom:18px;

}

.logo{

width:95px;

height:95px;

object-fit:contain;

margin-bottom:18px;

filter:

drop-shadow(0 0 25px rgba(255,255,255,.15));

}

.logo-area h2{

font-size:18px;

letter-spacing:.35em;

font-weight:700;

}

.glow-line{

display:flex;

justify-content:center;

margin:28px 0;

}

.glow-line span{

width:90px;

height:1px;

background:

rgba(255,255,255,.15);

}

/* Hero */

.hero{

text-align:center;

margin-bottom:35px;

}

.hero h3{

font-size:16px;

font-weight:500;

color:#bfbfbf;

margin-bottom:12px;

}

.hero h1{

font-size:48px;

font-weight:800;

margin-bottom:20px;

line-height:1.1;

}

.hero p{

max-width:700px;

margin:auto;

line-height:1.9;

font-size:16px;

color:#9d9d9d;

}

hr{

border:none;

height:1px;

background:

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

margin:35px 0;

}

/* CONTACT HEADER */

.contact-title{

display:flex;

align-items:center;

gap:18px;

margin-bottom:28px;

}

.contact-icon{

width:58px;

height:58px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

background:#111;

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

font-size:22px;

}

.contact-title h2{

font-size:24px;

font-weight:700;

margin-bottom:5px;

}

.contact-title p{

color:#9c9c9c;

line-height:1.6;

}

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

.contact-grid{

display:grid;

grid-template-columns:1fr;

gap:18px;

margin-bottom:35px;

}

.contact-card{

display:grid;

grid-template-columns:65px 1fr 25px;

align-items:center;

gap:18px;

padding:20px 24px;

background:#111;

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

border-radius:20px;

text-decoration:none;

color:#fff;

transition:.35s ease;

position:relative;

overflow:hidden;

}

.contact-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:80%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

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

transparent

);

transition:.7s;

}

.contact-card:hover::before{

left:130%;

}

.contact-card:hover{

transform:translateY(-5px);

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

background:#171717;

box-shadow:

0 15px 35px rgba(0,0,0,.35);

}

.card-icon{

width:58px;

height:58px;

border-radius:18px;

display:flex;

justify-content:center;

align-items:center;

background:#1b1b1b;

font-size:23px;

transition:.35s;

}

.contact-card:hover .card-icon{

background:#fff;

color:#000;

}

.contact-card h3{

font-size:21px;

font-weight:600;

}

.arrow{

justify-self:end;

font-size:18px;

opacity:.6;

transition:.35s;

}

.contact-card:hover .arrow{

opacity:1;

transform:translateX(6px);

}

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

.footer-line{

margin:35px 0 25px;

}

footer{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

flex-wrap:wrap;

}

.footer-brand{

display:flex;

align-items:center;

gap:12px;

}

.footer-brand img{

width:42px;

height:42px;

object-fit:contain;

}

.footer-brand span{

font-weight:700;

letter-spacing:.15em;

font-size:15px;

}

.footer-status{

display:flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:999px;

background:#111;

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

font-size:14px;

}

.dot{

width:8px;

height:8px;

background:#fff;

border-radius:50%;

box-shadow:0 0 12px #fff;

}

.copyright{

font-size:14px;

color:#777;

text-align:right;

line-height:1.6;

}

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

@media(max-width:768px){

body{

padding:20px;

}

.glass{

padding:28px;

border-radius:22px;

}

.logo{

width:80px;

height:80px;

}

.hero h1{

font-size:34px;

}

.hero p{

font-size:15px;

}

.contact-title{

flex-direction:column;

text-align:center;

}

.contact-card{

grid-template-columns:55px 1fr 18px;

padding:16px;

gap:14px;

}

.card-icon{

width:50px;

height:50px;

font-size:20px;

}

.contact-card h3{

font-size:18px;

}

footer{

flex-direction:column;

justify-content:center;

text-align:center;

}

.footer-brand{

justify-content:center;

}

.copyright{

text-align:center;

}

}

/* ==========================================
   SMALL PHONES
========================================== */

@media(max-width:480px){

.hero h1{

font-size:28px;

}

.hero p{

font-size:14px;

line-height:1.7;

}

.logo{

width:70px;

height:70px;

}

.glass{

padding:22px;

}

.contact-card{

grid-template-columns:48px 1fr 16px;

}

.card-icon{

width:45px;

height:45px;

font-size:18px;

}

.contact-card h3{

font-size:17px;

}

}