/* =========================================
   Urban Rewear - Premium Launch Page
   Version 1.6
========================================= */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:'Poppins',sans-serif;
    background:#081B33;
    color:#ffffff;
    overflow-x:hidden;

}


/* --------------------------
   Animated Background
---------------------------*/

.background{

    position:fixed;
    inset:0;

    z-index:-5;

    background:linear-gradient(
    135deg,
    #08121F,
    #0A2745,
    #12476B,
    #169E97
);

    background-size:400% 400%;

    animation:bgMove 18s ease infinite;

}

@keyframes bgMove{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}

.background::before{

content:"";

position:absolute;

width:650px;
height:650px;

top:-200px;
left:-180px;

border-radius:50%;

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

filter:blur(90px);

}

.background::after{

content:"";

position:absolute;

width:700px;
height:700px;

bottom:-250px;
right:-180px;

border-radius:50%;

background:rgba(16,185,129,.20);

filter:blur(110px);

}


/* --------------------------
Hero
---------------------------*/

.hero{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:70px 20px;

}


/* --------------------------
Glass Card
---------------------------*/

.glass-card{

width:100%;
max-width:760px;

padding:55px;

border-radius:30px;

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

backdrop-filter:blur(22px);

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

box-shadow:

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

text-align:center;

animation:fadeUp 1s ease;

}


/* --------------------------
Logo
---------------------------*/

.logo{

width:380px;

max-width:90%;

margin-bottom:25px;

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

}

@keyframes floatLogo{

0%,100%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

}


/* --------------------------
Badge
---------------------------*/

.launch-badge{

display:inline-block;

padding:10px 24px;

border-radius:40px;

background:#10B981;

font-size:15px;

font-weight:600;

margin-bottom:30px;

box-shadow:0 12px 30px rgba(16,185,129,.30);

}


/* --------------------------
Heading
---------------------------*/

h1{

font-size:72px;

font-weight:800;

line-height:1.05;

margin-bottom:15px;

}

h1 span{

color:#44E3C1;

}

h3{

font-size:30px;

font-weight:500;

margin-bottom:15px;

color:#DFFEF7;

}

.subtitle{

font-size:22px;

margin-bottom:15px;

}

.location{

font-size:18px;

opacity:.9;

margin-bottom:40px;

}


/* --------------------------
Buttons
---------------------------*/

.button-group{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-bottom:45px;

}

.btn{

padding:16px 34px;

border-radius:50px;

text-decoration:none;

font-weight:600;

font-size:17px;

transition:.35s;

display:inline-flex;

align-items:center;

gap:10px;

}

.btn:hover{

transform:translateY(-5px);

}

.whatsapp{

background:#25D366;

color:white;

}

.whatsapp:hover{

box-shadow:0 15px 35px rgba(37,211,102,.35);

}

.call{

background:white;

color:#081B33;

}

.call:hover{

box-shadow:0 15px 35px rgba(255,255,255,.20);

}

.email{

background:#44E3C1;

color:#081B33;

}

.email:hover{

box-shadow:0 15px 35px rgba(68,227,193,.30);

}


/* --------------------------
Trust Cards
---------------------------*/

.trust-grid{

display:grid;

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

gap:18px;

margin-top:10px;

}

.trust-card{

padding:18px;

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

border-radius:18px;

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

transition:.35s;

font-size:18px;

}

.trust-card span{

display:block;

margin-top:10px;

font-weight:600;

}

.trust-card:hover{

transform:translateY(-8px);

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

}


/* --------------------------
Services
---------------------------*/

.services{

padding:100px 8%;

}

.services h2{

text-align:center;

font-size:42px;

margin-bottom:50px;

}

.service-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

}

.service-card{

padding:35px;

border-radius:22px;

text-align:center;

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

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

backdrop-filter:blur(20px);

transition:.35s;

font-size:24px;

}

.service-card span{

display:block;

margin-top:15px;

font-size:18px;

font-weight:600;

}

.service-card:hover{

transform:translateY(-10px);

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

}


/* --------------------------
Contact
---------------------------*/

.contact{

padding:80px 20px;

display:flex;

justify-content:center;

}

.contact-card{

width:100%;

max-width:700px;

padding:45px;

border-radius:25px;

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

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

text-align:center;

}

.contact-card h2{

font-size:36px;

margin-bottom:20px;

}

.contact-card p{

margin:15px 0;

font-size:18px;

}


/* --------------------------
Footer
---------------------------*/

footer{

padding:35px;

text-align:center;

font-size:15px;

opacity:.8;

}


/* --------------------------
Animations
---------------------------*/

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0px);

}

}


/* --------------------------
Responsive
---------------------------*/

@media(max-width:768px){

.glass-card{

padding:35px 25px;

}

.logo{

width:220px;

}

h1{

font-size:46px;

}

h3{

font-size:22px;

}

.subtitle{

font-size:18px;

}

.button-group{

flex-direction:column;

}

.btn{

justify-content:center;

width:100%;

}

.trust-grid{

grid-template-columns:1fr;

}

.services h2{

font-size:32px;

}

.contact-card{

padding:30px;

}

}
.service-card,
.trust-card,
.contact-card{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.show{

    opacity:1;

    transform:translateY(0);

}