/* ==========================================================
   SIVI BEAUTY FASHION
   Premium UI CSS v6.0
   PART 1
   Reset + Variables + Base + Navbar
========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Cormorant+Garamond:wght@400;500;600;700&display=swap');

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Inter',sans-serif;
    background:#fafafa;
    color:#222;
    overflow-x:hidden;
    line-height:1.6;
}

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

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

ul{
    list-style:none;
}

button{
    border:none;
    cursor:pointer;
    font-family:inherit;
}

input{
    font-family:inherit;
}

.container{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 18px;
}


/* ==========================
   COLORS
========================== */

:root{

--primary:#e91e63;
--primary-dark:#c2185b;

--secondary:#111827;

--bg:#ffffff;

--light:#f5f5f7;

--border:#ececec;

--text:#212121;

--gray:#777;

--success:#10b981;

--danger:#ef4444;

--radius:16px;

--shadow:
0 8px 25px rgba(0,0,0,.08);

--transition:.35s;

}


/* ==========================
   TOP BAR
========================== */

.topbar{

background:#111827;

color:#fff;

font-size:14px;

padding:10px 0;

}

.topbar .container{

display:flex;

justify-content:center;

align-items:center;

gap:30px;

flex-wrap:wrap;

}

.topbar span{

display:flex;

align-items:center;

gap:8px;

}


/* ==========================
   NAVBAR
========================== */

.navbar{

position:sticky;

top:0;

z-index:9999;

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

backdrop-filter:blur(18px);

box-shadow:0 5px 25px rgba(0,0,0,.05);

}

.navbar-container{

height:82px;

display:flex;

align-items:center;

justify-content:space-between;

}


/* ==========================
   LOGO
========================== */

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo img{

height:60px;

width:auto;

}

.logo-text{

font-size:32px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

}

.logo-text span{

color:var(--primary);

}


/* ==========================
   MENU
========================== */

.nav-menu{

display:flex;

align-items:center;

gap:34px;

}

.nav-menu a{

font-size:15px;

font-weight:600;

position:relative;

transition:.3s;

}

.nav-menu a:hover{

color:var(--primary);

}

.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:var(--primary);

transition:.3s;

}

.nav-menu a:hover::after{

width:100%;

}


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

.search-box{

width:360px;

height:48px;

background:#f5f5f5;

border-radius:50px;

display:flex;

align-items:center;

padding:0 18px;

}

.search-box input{

flex:1;

background:none;

border:none;

outline:none;

font-size:14px;

}

.search-box button{

background:none;

font-size:18px;

color:#777;

}


/* ==========================
   NAV ICONS
========================== */

.nav-icons{

display:flex;

align-items:center;

gap:24px;

}

.nav-icons a{

position:relative;

font-size:22px;

color:#333;

transition:.3s;

}

.nav-icons a:hover{

color:var(--primary);

transform:translateY(-2px);

}

.count{

position:absolute;

top:-8px;

right:-10px;

width:20px;

height:20px;

border-radius:50%;

background:var(--primary);

color:#fff;

font-size:11px;

display:flex;

justify-content:center;

align-items:center;

font-weight:700;

}


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

.mobile-toggle{

display:none;

font-size:24px;

background:none;

}


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

@media(max-width:991px){

.search-box{

display:none;

}

.nav-menu{

display:none;

}

.mobile-toggle{

display:block;

}

.logo img{

height:48px;

}

.logo-text{

font-size:24px;

}

.navbar-container{

height:72px;

}

.nav-icons{

gap:18px;

}

.nav-icons a{

font-size:20px;

}

}


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

.hero{

padding:70px 0;

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

overflow:hidden;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:60px;

}

.hero-subtitle{

display:inline-block;

padding:8px 18px;

background:#fde7f1;

color:var(--primary);

border-radius:40px;

font-size:14px;

font-weight:700;

margin-bottom:20px;

}

.hero-title{

font-size:58px;

font-weight:800;

line-height:1.1;

margin-bottom:20px;

color:#111827;

}

.hero-title span{

color:var(--primary);

font-family:'Cormorant Garamond',serif;

}

.hero-text{

font-size:17px;

color:#666;

margin-bottom:35px;

max-width:520px;

}

.hero-btns{

display:flex;

gap:16px;

flex-wrap:wrap;

margin-bottom:40px;

}

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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:14px 30px;

border-radius:50px;

font-size:15px;

font-weight:700;

transition:.35s;

}

.btn-primary{

background:var(--primary);

color:#fff;

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

}

.btn-primary:hover{

background:var(--primary-dark);

transform:translateY(-3px);

}

.btn-outline{

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

color:var(--primary);

background:#fff;

}

.btn-outline:hover{

background:var(--primary);

color:#fff;

}

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

.hero-stats{

display:flex;

gap:45px;

margin-top:10px;

}

.hero-stat h2{

font-size:34px;

font-weight:800;

color:var(--primary);

}

.hero-stat p{

font-size:14px;

color:#777;

}

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

.hero-image{

position:relative;

}

.hero-image img{

width:100%;

border-radius:28px;

box-shadow:0 25px 70px rgba(0,0,0,.10);

}

.hero-badge{

position:absolute;

background:#fff;

padding:14px 22px;

border-radius:16px;

font-size:14px;

font-weight:700;

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

animation:float 3s ease infinite;

}

.hero-badge.top{

top:20px;

right:-20px;

}

.hero-badge.bottom{

bottom:25px;

left:-25px;

}

/* =====================
SLIDER
===================== */

.slider{

position:relative;

overflow:hidden;

background:#fff;

}

.slider-wrapper{

display:flex;

transition:.6s;

}

.slide{

min-width:100%;

}

.slide img{

width:100%;

height:520px;

object-fit:cover;

}

.slider-btn{

position:absolute;

top:50%;

transform:translateY(-50%);

width:48px;

height:48px;

border-radius:50%;

background:#fff;

box-shadow:0 8px 25px rgba(0,0,0,.12);

display:flex;

justify-content:center;

align-items:center;

font-size:18px;

z-index:10;

transition:.3s;

}

.slider-btn:hover{

background:var(--primary);

color:#fff;

}

.slider-prev{

left:25px;

}

.slider-next{

right:25px;

}

/* =====================
SLIDER DOTS
===================== */

.slider-dots{

position:absolute;

bottom:20px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:10px;

}

.slider-dots span{

width:12px;

height:12px;

border-radius:50%;

background:#fff;

opacity:.5;

cursor:pointer;

transition:.3s;

}

.slider-dots span.active{

opacity:1;

background:var(--primary);

transform:scale(1.2);

}

/* =====================
PROMO BANNER
===================== */

.promo{

padding:35px 0;

background:#fff;

}

.promo-grid{

display:grid;

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

gap:25px;

}

.promo-box{

background:#fff;

border:1px solid #eee;

border-radius:18px;

padding:22px;

display:flex;

align-items:center;

gap:18px;

transition:.35s;

}

.promo-box:hover{

transform:translateY(-6px);

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

}

.promo-icon{

width:60px;

height:60px;

border-radius:50%;

background:#fde7f1;

display:flex;

align-items:center;

justify-content:center;

font-size:24px;

color:var(--primary);

}

.promo-title{

font-size:16px;

font-weight:700;

margin-bottom:5px;

}

.promo-text{

font-size:13px;

color:#777;

}

/* =====================
FLOAT ANIMATION
===================== */

@keyframes float{

0%{transform:translateY(0);}

50%{transform:translateY(-10px);}

100%{transform:translateY(0);}

}

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

@media(max-width:991px){

.hero{

padding:45px 0;

}

.hero-grid{

grid-template-columns:1fr;

gap:35px;

text-align:center;

}

.hero-title{

font-size:38px;

}

.hero-text{

margin:auto auto 25px;

}

.hero-btns{

justify-content:center;

}

.hero-stats{

justify-content:center;

flex-wrap:wrap;

}

.hero-badge{

display:none;

}

.slide img{

height:260px;

}

.slider-btn{

width:40px;

height:40px;

}

.promo-grid{

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

}

}

@media(max-width:576px){

.hero-title{

font-size:30px;

}

.promo-grid{

grid-template-columns:1fr;

}

.hero-stat h2{

font-size:28px;

}

}




/* ==========================================================
   PART 3
   CATEGORIES + PRODUCT TYPES + SECTION TITLE
==========================================================*/

section{
    position:relative;
}

.section-padding{
    padding:80px 0;
}

.section-header{
    text-align:center;
    margin-bottom:55px;
}

.section-subtitle{

display:inline-block;

padding:8px 18px;

background:#fde7f1;

color:var(--primary);

border-radius:30px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

margin-bottom:18px;

}

.section-title{

font-size:44px;

font-weight:800;

color:#111827;

margin-bottom:12px;

}

.section-title span{

color:var(--primary);

font-family:'Cormorant Garamond',serif;

}

.section-description{

max-width:650px;

margin:auto;

font-size:16px;

color:#777;

line-height:1.8;

}


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

.category-grid{

display:grid;

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

gap:25px;

}

.category-card{

background:#fff;

border-radius:22px;

padding:25px 15px;

text-align:center;

transition:.35s;

border:1px solid #eee;

position:relative;

overflow:hidden;

}

.category-card::before{

content:"";

position:absolute;

width:100%;

height:0;

left:0;

bottom:0;

background:linear-gradient(135deg,#ec4899,#db2777);

transition:.35s;

z-index:0;

}

.category-card:hover::before{

height:100%;

}

.category-card>*{

position:relative;

z-index:2;

}

.category-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 50px rgba(0,0,0,.10);

}

.category-card:hover h4,

.category-card:hover p,

.category-card:hover i{

color:#fff;

}

.category-icon{

width:90px;

height:90px;

border-radius:50%;

margin:auto;

background:#fff0f7;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:var(--primary);

margin-bottom:18px;

transition:.35s;

}

.category-card:hover .category-icon{

background:#fff;

transform:rotate(8deg) scale(1.08);

}

.category-card h4{

font-size:18px;

font-weight:700;

margin-bottom:6px;

color:#222;

transition:.35s;

}

.category-card p{

font-size:14px;

color:#777;

transition:.35s;

}


/*==================================================
PRODUCT TYPE GRID
==================================================*/

.type-grid{

display:grid;

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

gap:30px;

}

.type-card{

position:relative;

overflow:hidden;

border-radius:24px;

height:320px;

cursor:pointer;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.type-card img{

width:100%;

height:100%;

object-fit:cover;

transition:.5s;

}

.type-card:hover img{

transform:scale(1.12);

}

.type-overlay{

position:absolute;

inset:0;

background:linear-gradient(to top,

rgba(0,0,0,.75),

rgba(0,0,0,.05));

display:flex;

flex-direction:column;

justify-content:flex-end;

padding:30px;

}

.type-overlay h3{

color:#fff;

font-size:28px;

font-weight:700;

margin-bottom:8px;

}

.type-overlay span{

display:inline-flex;

align-items:center;

gap:8px;

color:#fff;

font-size:14px;

font-weight:600;

transition:.3s;

}

.type-card:hover span{

padding-left:8px;

}


/*==================================================
FEATURE BANNER
==================================================*/

.feature-banner{

margin-top:70px;

background:linear-gradient(135deg,#111827,#1f2937);

border-radius:28px;

overflow:hidden;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

}

.feature-content{

padding:60px;

}

.feature-content h2{

font-size:46px;

font-weight:800;

color:#fff;

line-height:1.2;

margin-bottom:18px;

}

.feature-content p{

color:#d1d5db;

font-size:16px;

line-height:1.8;

margin-bottom:30px;

}

.feature-image img{

width:100%;

height:100%;

object-fit:cover;

}


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

@media(max-width:1200px){

.category-grid{

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

}

.type-grid{

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

}

}

@media(max-width:768px){

.section-padding{

padding:60px 0;

}

.section-title{

font-size:32px;

}

.category-grid{

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

gap:16px;

}

.category-card{

padding:18px 10px;

}

.category-icon{

width:65px;

height:65px;

font-size:26px;

}

.category-card h4{

font-size:15px;

}

.category-card p{

font-size:12px;

}

.type-grid{

grid-template-columns:1fr;

gap:18px;

}

.type-card{

height:240px;

}

.feature-banner{

grid-template-columns:1fr;

}

.feature-content{

padding:35px 25px;

text-align:center;

}

.feature-content h2{

font-size:30px;

}

}

/* ==========================================================
   PART 4
   PREMIUM PRODUCT CARDS
==========================================================*/

.products-section{
    padding:90px 0;
    background:#fafafa;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

/* =======================
PRODUCT CARD
======================= */

.product-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    position:relative;

    transition:.35s;

    border:1px solid #ececec;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.product-card:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/* =======================
IMAGE
======================= */

.product-image{

    position:relative;

    overflow:hidden;

    background:#f7f7f7;

    aspect-ratio:1/1.2;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

/* =======================
BADGES
======================= */

.product-badge{

    position:absolute;

    top:14px;

    left:14px;

    background:#ec4899;

    color:#fff;

    padding:6px 12px;

    font-size:12px;

    font-weight:700;

    border-radius:30px;

    z-index:5;

}

.product-badge.sale{

    background:#ef4444;

}

.product-badge.new{

    background:#10b981;

}

.product-badge.hot{

    background:#111827;

}

/* =======================
WISHLIST
======================= */

.wishlist-btn{

    position:absolute;

    top:14px;

    right:14px;

    width:42px;

    height:42px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 25px rgba(0,0,0,.12);

    transition:.35s;

    z-index:5;

}

.wishlist-btn:hover{

    background:#ec4899;

    color:#fff;

}

/* =======================
QUICK ACTIONS
======================= */

.product-actions{

    position:absolute;

    bottom:-70px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    gap:12px;

    transition:.35s;

}

.product-card:hover .product-actions{

    bottom:16px;

}

.action-btn{

    width:46px;

    height:46px;

    border-radius:50%;

    background:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 10px 20px rgba(0,0,0,.12);

    transition:.35s;

}

.action-btn:hover{

    background:#ec4899;

    color:#fff;

}

/* =======================
BODY
======================= */

.product-body{

    padding:20px;

}

.product-category{

    color:#999;

    font-size:13px;

    text-transform:uppercase;

    margin-bottom:6px;

}

.product-title{

    font-size:17px;

    font-weight:700;

    color:#222;

    line-height:1.4;

    height:48px;

    overflow:hidden;

    margin-bottom:12px;

}

.product-title:hover{

    color:#ec4899;

}

/* =======================
RATING
======================= */

.product-rating{

    display:flex;

    align-items:center;

    gap:6px;

    margin-bottom:12px;

}

.product-rating i{

    color:#ffc107;

    font-size:13px;

}

.product-rating span{

    font-size:13px;

    color:#666;

}

/* =======================
PRICE
======================= */

.price-box{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

}

.price{

    font-size:22px;

    font-weight:800;

    color:#ec4899;

}

.old-price{

    font-size:15px;

    color:#999;

    text-decoration:line-through;

}

.discount{

    font-size:13px;

    color:#10b981;

    font-weight:700;

}

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

.add-cart{

    width:100%;

    height:48px;

    border-radius:12px;

    background:#111827;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.add-cart:hover{

    background:#ec4899;

}

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

@media(max-width:1200px){

.products-grid{

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

}

}

@media(max-width:768px){

.products-grid{

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

gap:16px;

}

.product-title{

font-size:15px;

height:42px;

}

.price{

font-size:18px;

}

.old-price{

font-size:13px;

}

.add-cart{

height:42px;

font-size:13px;

}

.action-btn{

width:40px;

height:40px;

}

}

@media(max-width:480px){

.products-grid{

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

}

.product-body{

padding:14px;

}

.product-title{

font-size:14px;

}

.price{

font-size:17px;

}

}
/* ==========================================================
   PART 5
   FEATURED • TRENDING • NEW ARRIVAL • BEST SELLER
==========================================================*/

.featured-section,
.trending-section,
.new-arrival-section,
.best-seller-section{

    padding:90px 0;

    background:#fff;

}

.section-head{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:45px;

    flex-wrap:wrap;

    gap:20px;

}

.section-head h2{

    font-size:40px;

    font-weight:800;

    color:#111827;

}

.section-head h2 span{

    color:#ec4899;

}

.section-head p{

    color:#777;

    margin-top:8px;

}

.view-all-btn{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:13px 28px;

    border-radius:40px;

    background:#111827;

    color:#fff;

    font-weight:700;

    transition:.35s;

}

.view-all-btn:hover{

    background:#ec4899;

}


/* ==========================================
FEATURED GRID
========================================== */

.featured-grid{

    display:grid;

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

    gap:25px;

}

.featured-large{

    position:relative;

    border-radius:22px;

    overflow:hidden;

    min-height:520px;

}

.featured-small{

    position:relative;

    border-radius:22px;

    overflow:hidden;

    min-height:245px;

}

.featured-large img,
.featured-small img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.45s;

}

.featured-large:hover img,
.featured-small:hover img{

    transform:scale(1.08);

}

.featured-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(to top,

        rgba(0,0,0,.75),

        rgba(0,0,0,.08));

    display:flex;

    align-items:flex-end;

    padding:30px;

}

.featured-overlay h3{

    color:#fff;

    font-size:30px;

    margin-bottom:10px;

}

.featured-overlay p{

    color:#f1f1f1;

    margin-bottom:18px;

}

.featured-overlay a{

    display:inline-block;

    padding:12px 24px;

    border-radius:30px;

    background:#ec4899;

    color:#fff;

    font-weight:700;

}


/* ==========================================
TRENDING
========================================== */

.trending-slider{

    display:grid;

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

    gap:25px;

}


/* ==========================================
NEW ARRIVAL
========================================== */

.arrival-grid{

    display:grid;

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

    gap:25px;

}


/* ==========================================
BEST SELLER
========================================== */

.best-grid{

    display:grid;

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

    gap:25px;

}


/* ==========================================
HOVER EFFECT
========================================== */

.trending-slider .product-card:hover,

.arrival-grid .product-card:hover,

.best-grid .product-card:hover{

    transform:translateY(-12px);

}


/* ==========================================
LOAD MORE BUTTON
========================================== */

.load-more{

    text-align:center;

    margin-top:50px;

}

.load-more button{

    padding:16px 42px;

    border-radius:40px;

    background:#ec4899;

    color:#fff;

    font-size:16px;

    font-weight:700;

    transition:.35s;

}

.load-more button:hover{

    background:#111827;

}


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

@media(max-width:1200px){

.featured-grid{

grid-template-columns:1fr 1fr;

}

.featured-large{

grid-column:1/3;

min-height:420px;

}

.trending-slider,

.arrival-grid,

.best-grid{

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

}

}

@media(max-width:768px){

.section-head{

flex-direction:column;

align-items:flex-start;

}

.section-head h2{

font-size:30px;

}

.featured-grid{

grid-template-columns:1fr;

}

.featured-large{

grid-column:auto;

min-height:300px;

}

.featured-small{

min-height:220px;

}

.trending-slider,

.arrival-grid,

.best-grid{

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

gap:16px;

}

}

@media(max-width:480px){

.section-head h2{

font-size:26px;

}

.trending-slider,

.arrival-grid,

.best-grid{

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

gap:12px;

}

}


/* ==========================================================
   PART 6
   NEWSLETTER • FOOTER • SCROLL TOP • ANIMATIONS
==========================================================*/

/* ==========================
NEWSLETTER
==========================*/

.newsletter{

padding:90px 0;

background:linear-gradient(135deg,#111827,#1f2937);

color:#fff;

}

.newsletter-box{

max-width:900px;

margin:auto;

text-align:center;

}

.newsletter h2{

font-size:42px;

font-weight:800;

margin-bottom:15px;

}

.newsletter p{

font-size:16px;

color:#d1d5db;

margin-bottom:35px;

}

.newsletter-form{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.newsletter-form input{

width:450px;

max-width:100%;

height:60px;

padding:0 22px;

border:none;

border-radius:50px;

font-size:16px;

outline:none;

}

.newsletter-form button{

height:60px;

padding:0 35px;

border:none;

border-radius:50px;

background:#ec4899;

color:#fff;

font-size:16px;

font-weight:700;

transition:.35s;

}

.newsletter-form button:hover{

background:#db2777;

transform:translateY(-3px);

}

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

.footer{

background:#0f172a;

color:#cbd5e1;

padding:80px 0 30px;

}

.footer-grid{

display:grid;

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

gap:40px;

}

.footer-logo{

font-size:36px;

font-family:'Cormorant Garamond',serif;

font-weight:700;

color:#fff;

margin-bottom:20px;

}

.footer-logo span{

color:#ec4899;

}

.footer-about{

line-height:1.9;

margin-bottom:25px;

}

.footer-social{

display:flex;

gap:14px;

}

.footer-social a{

width:44px;

height:44px;

border-radius:50%;

background:#1e293b;

display:flex;

align-items:center;

justify-content:center;

transition:.35s;

}

.footer-social a:hover{

background:#ec4899;

transform:translateY(-5px);

}

.footer-title{

font-size:18px;

font-weight:700;

color:#fff;

margin-bottom:20px;

}

.footer-links{

display:flex;

flex-direction:column;

gap:14px;

}

.footer-links a{

transition:.3s;

}

.footer-links a:hover{

color:#ec4899;

padding-left:6px;

}

.footer-contact li{

display:flex;

gap:12px;

margin-bottom:15px;

align-items:flex-start;

}

.footer-contact i{

color:#ec4899;

margin-top:4px;

}

.footer-bottom{

margin-top:60px;

padding-top:25px;

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

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

}

.footer-bottom p{

font-size:14px;

color:#94a3b8;

}

/* ==========================
PAYMENT ICONS
==========================*/

.payment-icons{

display:flex;

gap:10px;

}

.payment-icons img{

height:32px;

background:#fff;

padding:5px;

border-radius:6px;

}

/* ==========================
SCROLL TOP
==========================*/

.scroll-top{

position:fixed;

right:25px;

bottom:25px;

width:52px;

height:52px;

border-radius:50%;

background:#ec4899;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

cursor:pointer;

box-shadow:0 15px 35px rgba(236,72,153,.35);

opacity:0;

visibility:hidden;

transition:.35s;

z-index:999;

}

.scroll-top.show{

opacity:1;

visibility:visible;

}

.scroll-top:hover{

transform:translateY(-5px);

background:#111827;

}

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

.fade-up{

animation:fadeUp .8s ease both;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.zoom{

animation:zoom .6s ease;

}

@keyframes zoom{

0%{

transform:scale(.9);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

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

@media(max-width:991px){

.footer-grid{

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

}

.newsletter h2{

font-size:32px;

}

}

@media(max-width:768px){

.footer-grid{

grid-template-columns:1fr;

gap:35px;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.newsletter{

padding:70px 0;

}

.newsletter h2{

font-size:28px;

}

.newsletter-form{

flex-direction:column;

}

.newsletter-form input{

width:100%;

}

.newsletter-form button{

width:100%;

}

.scroll-top{

width:46px;

height:46px;

font-size:18px;

}

}