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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:"Helvetica Neue",Arial,sans-serif;
    color:#111;
    background:#f7f5f0;
overflow-x:hidden;
}

img{
    width:100%;
    display:block;
}

a{
    text-decoration:none;
    color:inherit;
}


:root{
    --black:#111;
    --cream:#f7f5f0;
    --pink:#ff1493;
    --gray:#777;
    --white:#fff;
}



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

.header{

    position:fixed;
    top:0;
    left:0;

    width:100%;
    height:90px;

    padding:0 7%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    z-index:999;

    background:var(--cream);

}


.logo{

    display:flex;
    align-items:center;
    gap:10px;

    font-size:28px;
    letter-spacing:4px;
    font-weight:700;

}


.logo img{

    width:70px;
    height:70px;

    object-fit:contain;

}


.header nav{
    display:flex;          /* ✅ MUST */
    gap:35px;
    align-items:center;
}


.header nav a{

    font-size:14px;
    letter-spacing:1px;

}


.header button{

    background:#111;
    color:white;

    border:0;

    padding:13px 30px;

    cursor:pointer;

    transition:.3s;

}


.header button:hover{

    background:#ff1493;
    color:white;

}

.menu{

    display:none;
    font-size:28px;

}



.sidebar{

width:260px;
background:#111;
height:100vh;
position:fixed;
color:white;

}



.logo-area{

text-align:center;
padding:20px;

}


.logo-img{

width:120px;

}



.pink-line{

height:3px;
background:#ff4da6;
margin-top:15px;

}



.menu{

padding:20px;

}



.cat-btn{

width:100%;
background:none;
border:none;
color:white;
text-align:left;
padding:12px;

font-size:17px;

cursor:pointer;

}



.dropdown{

display:none;
padding-left:20px;

}



.dropdown a{

display:block;
color:#ddd;
padding:8px;
text-decoration:none;

}



.dropdown a:hover{

color:#ff4da6;

}



.show{

display:block;

}

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


.hero{

    height:100vh;
    

}


.heroSwiper{

    width:100%;
    height:100%;

}


.hero-slide{

    height:100%;

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;

    align-items:center;
    justify-content:flex-end;

    padding-right:8%;

}


.heroSwiper .swiper-pagination{

    bottom:40px!important;

}


.heroSwiper .swiper-pagination-bullet{

    background:#ff69b4!important;
    opacity:.6;

}


.heroSwiper .swiper-pagination-bullet-active{

    background:#ff1493!important;
    opacity:1;

}



/* =========================
 GLOBAL SECTION
========================= */


.section{

    padding:120px 8%;

}



/* =========================
 CATEGORY
========================= */


.category{

    display:grid;

    grid-template-columns:55% 45%;

    align-items:center;

    gap:50px;

}


.category-text{

    padding-left:50px;

}


.category-text span{

    letter-spacing:3px;
    color:#888;

}


.category h2{

    font-size:45px;

    line-height:1.1;

    margin:25px 0;

}


.category p{

    color:#666;

    line-height:1.8;

}



/* =========================
 BRANDS
========================= */


.brands{

    margin-top:-150px;
    text-align:center;

}


.brands h2{

    font-size:40px;

    margin-bottom:60px;

}


.brand{

    height:100px;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:25px;

    color:#777;

    letter-spacing:2px;

}

.brands .brandSwiper{
    margin-bottom: 25px; /* rows de vich gap */
}

.brands .brandSwiper:last-child{
    margin-bottom: 0;
}


/* =========================
 DARK CTA
========================= */


.dark{

    background:#000;

    color:#fff;

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

    padding:50px;

}


.img-box{

    position:absolute;
    

}


.img-box img{

    width:100%;
    height:100%;

    object-fit:cover;

}


.img1{

    width:245px;
    height:275px;

    left:50px;
    top:95px;

}


.img2{

    width:245px;
    height:275px;

    left:160px;
    bottom:80px;

}


.img3{

    width:390px;
    height:290px;
	right:50px;
    bottom:150px;

}


.dark-content{

    text-align:center;

    max-width:700px;

}


.dark-content h1{

    font-size:20px;

    line-height:1.4;

    font-weight:200;

}


.dark-content strong{

    font-weight:500;

}


.signup-btn{

    display:inline-block;

    margin-top:35px;

    padding:16px 45px;

    background:#111;

    color:white;

    font-size:18px;

    letter-spacing:3px;

    border:1px solid #333;

    transition:.3s;

}


.signup-btn:hover{

    background:#ff1493;
    color:white;

    border-color:#ff1493;

    transform:translateY(-3px);

}
/* =========================
 STEPS
========================= */


.steps-section{

    padding:100px 5%;

    background:#fff;

    text-align:center;

overflow:visible;

}


.steps-section h2{

    font-size:42px;

    letter-spacing:3px;

    margin-bottom:70px;

}



.steps-container{

    display:grid;

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

    gap:35px;

}



.step{

    opacity:0;

    transform:translateY(50px);

    transition:.8s ease;

}


.step.show{

    opacity:1;

    transform:translateY(0);

}



.icon{

    font-size:30px;

    height:45px;

    margin-bottom:20px;

}



.step span{

    font-size:13px;

    letter-spacing:2px;

    font-weight:600;

}



.step h3{

    margin:15px 0;

    font-size:15px;

    letter-spacing:1px;

}



.step p{

    color:#555;

    line-height:1.8;

    font-size:12px;

}



.step:hover{

    transform:translateY(-10px);

}


/* =========================
 CONTACT US PAGE
========================= */

/* Forgot Password Link */

.forgot-password{
    display:block;
    text-align:center;
    margin-top:15px;
    margin-bottom:10px;

    color:#ff1493;
    font-size:14px;
    font-weight:600;
    text-decoration:none;
    transition:0.3s ease;
}


.forgot-password:hover{

    color:#000;
    text-decoration:underline;

}

/* =========================
 PREMIUM ACCOUNT PAGE
========================= */


.account-section{

    min-height:100vh;

    padding:150px 8% 80px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    gap:50px;

    background:
    linear-gradient(
    135deg,
    #f7f5f0,
    #ffffff
    );

}




.account-box{

    background:#fff;

    width:450px;

    padding:45px;

    border-radius:25px;

    border:1px solid #eee;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);

    animation:fadeUp .5s ease;

}




@keyframes fadeUp{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}




.account-box h2{

    text-align:center;

    font-size:38px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:35px;

}



.account-box h2::after{

    content:"";

    display:block;

    width:60px;

    height:3px;

    background:#ff1493;

    margin:15px auto;

}





.account-box form{

    display:flex;

    flex-direction:column;

}




.account-box label{


    font-size:13px;

    letter-spacing:1px;

    font-weight:600;

    margin-top:18px;

    color:#222;


}





.account-box input,
.account-box textarea,
.account-box select{


    width:100%;


    padding:15px 18px;


    margin-top:8px;


    background:#fafafa;


    border:1px solid #ddd;


    border-radius:12px;


    font-size:14px;


    outline:none;


    transition:.3s;


}





.account-box input:focus,
.account-box textarea:focus,
.account-box select:focus{


    border-color:#ff1493;


    background:white;


    box-shadow:
    0 0 0 3px rgba(255,20,147,.1);


}





.account-box textarea{


height:120px;

resize:none;

}




.account-box p{


font-size:13px;

color:#777;

line-height:1.7;

margin-top:15px;

}




.account-box button{


margin-top:30px;


padding:16px;


border:0;


background:#111;


color:white;


font-size:15px;


letter-spacing:2px;


border-radius:40px;


cursor:pointer;


transition:.4s;



}




.account-box button:hover{


background:#ff1493;


transform:translateY(-3px);


}




.remember{


display:flex;

align-items:center;

gap:10px;

margin-top:20px;


}




.remember input{


width:auto;


}




.switch{


text-align:center;

margin-top:25px!important;

}



.switch a{


color:#ff1493;


font-weight:600;


cursor:pointer;


}



.switch a:hover{


text-decoration:underline;


}




.privacy{


font-size:12px!important;

color:#888!important;

margin-top:25px!important;


}




/* REGISTER FORM LONG */

#registerBox{

width:520px;

}



/* =========================
 FORGOT PASSWORD PAGE
========================= */


.forgot-section{

    min-height:100vh;

    padding:150px 20px 80px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    background:
    linear-gradient(
    135deg,
    #f7f5f0,
    #ffffff
    );

}



.forgot-box{


    background:#fff;

    width:450px;

    padding:45px;

    border-radius:25px;

    border:1px solid #eee;

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);

    animation:fadeUp .5s ease;


}




.forgot-box h2{


    text-align:center;

    font-size:38px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:35px;


}



.forgot-box h2::after{


    content:"";

    display:block;

    width:60px;

    height:3px;

    background:#ff1493;

    margin:15px auto;


}




.forgot-box p{


    text-align:center;

    color:#777;

    font-size:14px;

    line-height:1.7;

    margin-bottom:25px;


}



.forgot-box form{


    display:flex;

    flex-direction:column;


}



.forgot-box input{


    width:100%;


    padding:15px 18px;


    background:#fafafa;


    border:1px solid #ddd;


    border-radius:12px;


    font-size:14px;


    outline:none;


    transition:.3s;


}




.forgot-box input:focus{


    border-color:#ff1493;


    background:white;


    box-shadow:
    0 0 0 3px rgba(255,20,147,.1);


}




.forgot-box button{


    margin-top:25px;


    padding:16px;


    border:0;


    background:#111;


    color:white;


    font-size:15px;


    letter-spacing:2px;


    border-radius:40px;


    cursor:pointer;


    transition:.4s;


}



.forgot-box button:hover{


    background:#ff1493;


    transform:translateY(-3px);


}




.back-login{


    display:block;

    text-align:center;

    margin-top:25px;

    color:#ff1493;

    font-weight:600;

}



.back-login:hover{

    text-decoration:underline;

}



/* MOBILE */

@media(max-width:600px){


.forgot-box{

    width:100%;

    padding:30px;

}


.forgot-box h2{

    font-size:30px;

}



}


/* =========================
 RESET PASSWORD PAGE
========================= */


.reset-section{

    min-height:100vh;

    padding:150px 20px 80px;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    background:
    linear-gradient(
    135deg,
    #f7f5f0,
    #ffffff
    );

}



.reset-box{


    background:#fff;

    width:450px;

    padding:45px;

    border-radius:25px;

    border:1px solid #eee;


    box-shadow:
    0 20px 60px rgba(0,0,0,.08);


    animation:fadeUp .5s ease;


}





.reset-box h2{


    text-align:center;

    font-size:38px;

    letter-spacing:3px;

    font-weight:700;

    margin-bottom:35px;


}




.reset-box h2::after{


    content:"";

    display:block;

    width:60px;

    height:3px;

    background:#ff1493;

    margin:15px auto;


}





.reset-box p{


    text-align:center;

    color:#777;

    font-size:14px;

    line-height:1.7;

    margin-bottom:25px;


}





.reset-box form{


    display:flex;

    flex-direction:column;


}





.reset-box input{


    width:100%;


    padding:15px 18px;


    margin-top:10px;


    background:#fafafa;


    border:1px solid #ddd;


    border-radius:12px;


    font-size:14px;


    outline:none;


    transition:.3s;


}





.reset-box input:focus{


    border-color:#ff1493;


    background:white;


    box-shadow:
    0 0 0 3px rgba(255,20,147,.1);


}






.reset-box button{


    margin-top:25px;


    padding:16px;


    border:0;


    background:#111;


    color:white;


    font-size:15px;


    letter-spacing:2px;


    border-radius:40px;


    cursor:pointer;


    transition:.4s;


}





.reset-box button:hover{


    background:#ff1493;


    transform:translateY(-3px);


}





.back-account{


    display:block;

    text-align:center;

    margin-top:25px;

    color:#ff1493;

    font-weight:600;


}



.back-account:hover{

    text-decoration:underline;

}





@media(max-width:600px){


.reset-box{

    width:100%;

    padding:30px;

}



.reset-box h2{

    font-size:30px;

}


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


@media(max-width:900px){


.account-section{


padding:120px 20px 60px;


flex-direction:column;


align-items:center;


}



.account-box,
#registerBox{


width:100%;


max-width:500px;


}

    .header nav{
        display:none;
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:var(--cream);
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        z-index:999;
    }

    .header nav.active{
        display:flex;
    }

.menu{
    display:block;
    cursor:pointer;
}


}

@media(max-width:500px){
.header nav{
    top:80px;
}
}

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

.contact-section {
    min-height: 80vh;
    background: #f8f8f8;
    padding: 100px 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-box {
    max-width: 800px;
    width: 100%;
}

.contact-box h1 {
    font-size: 3rem;
    color: #111;
    margin-bottom: 20px;
}

.contact-box h2 {
    font-size: 1.5rem;
    color: #ff1493;
    margin-bottom: 20px;
}

.contact-box p {
    color: #555;
    line-height: 1.8;
    font-size: 1rem;
}

.contact-info {
    margin-top: 30px;
}

.contact-info p {
    margin: 12px 0;
    font-size: 1.1rem;
}

.contact-info strong {
    color: #111;
}

@media (max-width: 768px) {
    .contact-box h1 {
        font-size: 2rem;
    }

    .contact-box h2 {
        font-size: 1.2rem;
    }
}


.success-msg{
    background: #e8fff0;
    color: #198754;
    border: 1px solid #b7e4c7;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}

.error-msg{
    background: #ffe5e5;
    color: #d10000;
    border: 1px solid #ffb3b3;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 600;
}


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


footer{

    background:#050505;

    color:white;

    padding:70px 8% 25px;

    border-top:2px solid #ff1493;

}



.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1.3fr;

    gap:50px;

}



.footer-brand img{

    width:100px;

    height:100px;

    object-fit:contain;

    background:white;

    border-radius:50%;

    padding:12px;

    margin-bottom:18px;

}



footer h3{

    font-size:28px;

    letter-spacing:4px;

    margin-bottom:15px;

}



footer h3::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    background:#ff1493;

    margin-top:12px;

}



footer h4{

    color:#ff1493;

    font-size:14px;

    letter-spacing:3px;

    margin-bottom:25px;

}



footer p{

    color:#aaa;

    line-height:2;

    font-size:14px;

    transition:.3s;

}



footer p:hover{

    color:#ff69b4;

    transform:translateX(5px);

}



.footer-link{

    display:block;

    color:#aaa;

    line-height:2;

    font-size:14px;

    transition:.3s;

}



.footer-link:hover{

    color:#ff69b4;

    transform:translateX(5px);

}



/* SOCIAL */


.social-icons{

    display:flex;

    gap:15px;

    margin-top:25px;

}



.social-icons a{

    width:42px;

    height:42px;

    display:flex;

    justify-content:center;

    align-items:center;


    background:#111;

    color:#ff1493;


    border:1px solid #ff1493;

    border-radius:50%;


    font-size:18px;

    transition:.3s;

}



.social-icons a:hover{

    background:#ff1493;

    color:#000;

    transform:translateY(-5px);

}



.copyright{

    margin-top:50px;

    padding-top:25px;

    border-top:1px solid #333;

    text-align:center;

    color:#888;

    font-size:13px;

    letter-spacing:1px;

}





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


@media(max-width:1000px){


.hero-slide{

    justify-content:center;

    padding:20px;

}



.category{

    grid-template-columns:1fr;

}



.category-text{

    padding-left:0;

}



.steps-container{

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

}



.footer-grid{

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

}



.img-box{

    position:static;

    margin:15px auto;

}



.dark{

    flex-direction:column;

}



.img1,
.img2,
.img3{

    width:75%;

    max-width:350px;

    height:auto;

    transform:none;

}

.brands{

    margin-top:-100px;
    text-align:center;

}

}




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


@media(max-width:700px){



.header{

    padding:20px;

}



.logo{

    font-size:20px;

}



    .header nav{
        display:none;
        position:absolute;
        top:90px;
        left:0;
        width:100%;
        background:var(--cream);
        flex-direction:column;
        align-items:center;
        gap:25px;
        padding:30px 0;
        z-index:999;
    }

    .header nav.active{
        display:flex;
    }

.menu{
    display:block;
    cursor:pointer;
}


.section{

    padding:70px 20px;

}



.category h2{

    font-size:32px;

}



.brands{

    margin-top:-100px;
    text-align:center;
    font-size:18px;

}



.steps-container{

    grid-template-columns:1fr;

}



.footer-grid{

    grid-template-columns:1fr;

}



.social-icons{

    justify-content:center;

}



.dark-content h1{

    font-size:28px;

}



}