:root {
            --orange: #ab00ff;
            --secondary: #33007b;
            --bg-light: #f9f9f9;
            --text-main: #111;
            --text-muted: #666;
        }

       body {
            margin: 0;
            font-variant: normal;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-color: var(--bg-orange);

            color: var(--text-main);
            /* CHANGE THIS: allows vertical scrolling */
            overflow-x: hidden; 
            overflow-y: auto;
            padding: 0px;
           
        }
        
        h2 {
            font-size: 32px;
        }
        

        .site-container{
max-width:1300px;
margin:0 auto;
padding:0 20px;
box-sizing:border-box;
}


.container{
max-width:1200px;
margin:auto;
padding:0 20px;
}

/* header */

.header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 40px;
background:white;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

nav a{
margin-left:20px;
text-decoration:none;
color:#333;
font-weight:500;
}


/* gradient word */


/* slider dots */

/* categories */

.categories{
padding:80px 0;
}

.category-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:25px;
}

.category{

text-align:center;
transition:.3s;

}

.category img{
width:100%;
border-radius:8px;
}

.category:hover{
transform:translateY(-6px);

}

/* promo */

.promo{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
padding:60px 0;
}

.promo-card{
border-radius:14px;
padding:40px;
color:white;
font-size:22px;
font-weight:600;
}

.pink{
background:linear-gradient(135deg,#ff5d7c,#ff9aa9);
}

.green{
background:linear-gradient(135deg,#2ecc71,#6beaa7);
}

/* products */

.products{
padding:80px 0;
text-align:center;
}

.product-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:25px;
margin-top:40px;
}

.product{
background:white;
padding:15px;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
transition:.3s;
}

.product img{
width:100%;
border-radius:8px;
}

.product:hover{
transform:translateY(-5px);
box-shadow:0 10px 30px rgba(0,0,0,0.1);
}

/* features */

.features{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
padding:70px 0;
text-align:center;
}

/* testimonial */

.testimonial{
padding:60px;
text-align:center;
font-style:italic;
background:white;
}

/* brands */

.brands{
display:flex;
justify-content:center;
gap:50px;
padding:40px;
}

/* footer */

footer{
background:#111;
color:white;
text-align:center;
padding:25px;
}













.promo-section{

margin:80px auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
padding:0 20px;
}

/* cards */

.promo-card{
border-radius:20px;
padding:60px;
min-height:280px;
display:flex;
align-items:center;
background-size:cover;
background-position:right center;
position:relative;
overflow:hidden;
}

/* left banner */

.promo-left{
background:
url("https://ap-aprin.myshopify.com/cdn/shop/files/Mask_group_-_2024-05-04T165747.587.png?v=1714816684") right center / cover no-repeat,
#000000;
}

/* right banner */

.promo-right{
background:
url("https://ap-aprin.myshopify.com/cdn/shop/files/Mask_group_-_2024-05-04T165752.711.png?v=1714816705") right center / cover no-repeat,
#000000;
}

/* content */

.promo-content{
max-width:300px;
z-index:2;
}

.tag{
font-size:12px;
letter-spacing:2px;
color:#777;
}

.promo-card h2{
font-size:30px;
margin:10px 0;
}

.promo-card h3{
font-size:30px;
margin-bottom:20px;
}

.green{
color:#3ac27c;
}

.btn{
display:inline-block;
padding:12px 25px;
border-radius:40px;
border:1px solid #000;
text-decoration:none;
color:#000;
font-weight:600;
background:white;
box-shadow: 0px 3px 5px 0px rgba(138, 43, 226, 0.5);
}

.btn:hover{
transform:translateY(-2px);
}










.hot-products{
padding:10px 0;
background:#f6f6f6;
text-align:center;
}

.container{
max-width:1300px;
margin:auto;
padding:0 20px;
}

.hot-products h2{
font-size:36px;
margin-bottom:10px;
}

.subtitle{
color:#777;
margin-bottom:50px;
}

/* grid */

.product-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:30px;
}

/* card */

.product-card{
background:white;
padding: 5px;
border-radius:14px;
position:relative;
transition:.25s;
box-shadow:0 4px 20px rgba(0,0,0,0.05);
}

.product-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,0.12);
}

.product-card img{
width:100%;
border-radius:10px;
margin-bottom:15px;
}

/* title */

.product-card h4{
font-size:15px;
margin-bottom:10px;
}

/* rating */

.rating{
color:#ffb400;
font-size:14px;
margin-bottom:10px;
}

.rating span{
color:#888;
}

/* price */

.price{
font-weight:600;
font-size:16px;
}

.price .old{
text-decoration:line-through;
color:#888;
margin-left:6px;
}

.price .new{
color:#2da6d7;
}

/* badges */

.badge{
position:absolute;
top:15px;
left:15px;
padding:6px 10px;
font-size:12px;
border-radius:4px;
color:white;
}

.sold{
background:#6c6f9b;
}

.discount{
background:#ff4c4c;
}

/* responsive */

@media(max-width:1100px){

.product-grid{
grid-template-columns:repeat(3,1fr);
gap: 10px;
}

}

@media(max-width:700px){

.product-grid{
grid-template-columns:repeat(2,1fr);
}




.grid {
        grid-template-columns: repeat(2, 1fr) !important;
}

}








.category-section{
padding:120px 0;
}

.category-wrapper{
max-width:1300px;
margin:auto;
display:flex;
gap:60px;
align-items:center;
}

/* LEFT TEXT */

.category-text{
width:360px;
}

.label{
font-size:12px;
letter-spacing:2px;
color:#7a8a8a;
}

.category-text h2{
font-size:48px;
margin:15px 0;
}

.category-text p{
color:#777;
margin-bottom:25px;
}

.more-btn{
border:1px solid #fff;
padding:12px 22px;
background:none;
cursor:pointer;
background-color: var(--orange);
border-radius: 40px;
color: white;
}

.more-btn:hover{
background-color: #4c00a4;
color: white;  
stroke-width: 40px;
border: 1px solid var(#33007b);
}

/* SLIDER */

.category-slider{
flex:1;
overflow:hidden;
position:relative;
}

.slider-track{
display:flex;
gap:25px;
transition:transform .4s ease;
}

/* CARD */

.cat-card{
min-width:240px;
height:340px;
border-radius:10px;
overflow:hidden;
position:relative;
}

.cat-card img{
width:100%;
height:100%;
object-fit:cover;
}

.cat-card span{
position:absolute;
bottom:18px;
left:18px;
color:white;
font-size:18px;
font-weight:600;
}

/* ARROWS */

.slider-arrows{
margin-top:20px;
display:flex;
gap:10px;
}

.slider-arrows button{
width:40px;
height:40px;
border:none;
background:var(--orange);
color:white;
cursor:pointer;
}















.features-section{
background:#f6f6f6;
padding:100px 20px;
}

.features-container{
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:80px;
text-align:center;
}

.feature-box h3{
margin-top:25px;
font-size:22px;
color:#333;
}

.feature-box p{
margin-top:15px;
color:#666;
line-height:1.6;
font-size:16px;
}

/* icon circle */

.icon-circle{
width:130px;
height:130px;
margin:auto;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

.icon-circle img{
width:60px;
}

/* colors */

.purple{
background:#d9d3ef;
}

.blue{
background:#cfe2f3;
}

.beige{
background:#f4e1c6;
}










 
.offer-banner{
max-width:1200px;
margin:80px auto;
height:220px;

background-image:url("https://demo2.themelexus.com/flicko/wp-content/uploads/2023/12/H5-png-3.png");
background-repeat:no-repeat;
background-position:right   center;
background-size:contain;
border-radius: 15px;
display:flex;
align-items:center;
padding-left:80px;

color:white;
background-color:#1f403d;
}

.offer-banner p{
font-size:14px;
opacity:.8;
margin-bottom:10px;
}

.offer-banner h2{
font-size:48px;
font-weight:600;
}


@media(max-width:900px){ 
    .offer-banner {
        padding: 10px 10px;
    }
}







.gift-features-section{
padding:90px 20px;
background:#f6f6f6;
}

.gift-features-wrapper{
max-width:1200px;
margin:auto;

display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
}

.gift-feature-card{
background:#fff;
border:1px solid #e8e8e8;
border-radius:16px;

height:210px;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;

padding:30px;
}

.gift-feature-icon{
font-size:40px;
color:#5da4d6;
margin-bottom:18px;
}

.gift-feature-card h3{
font-size:18px;
font-weight:700;
letter-spacing:1px;
margin-bottom:8px;
}

.gift-feature-card p{
font-size:16px;
color:#777;
}







































.gx-home-categories{
padding:40px 60px;
background:#f7f7f7;
}

/* banners */

.gx-banner-row{
display:grid;
grid-template-columns:2fr 2fr 1fr;
gap:20px;
margin-bottom:30px;
}

.gx-banner{
position:relative;
border-radius:18px;
overflow:hidden;
height:260px;
}

.gx-banner img{
width:100%;
height:100%;
object-fit:cover;
}

.gx-banner-content{
position:absolute;
left:30px;
top:30px;
color:#111;
}

.gx-banner-content h3{
font-size:30px;
margin-bottom:10px;
}

.gx-banner-content a{
display:inline-block;
margin-top:10px;
padding:8px 18px;
background:#6a8b3f;
color:#fff;
border-radius:20px;
font-size:13px;
text-decoration:none;
}

/* categories */

.gx-category-row{
display:flex;
gap:20px;
overflow-x:auto;
padding-bottom:10px;
}

.gx-category-card{
min-width:120px;
background:#f1ede4;
border-radius:20px;
padding:20px 10px;
text-align:center;
transition:0.3s;
}

.gx-category-card img{
width:70px;
height:70px;
object-fit:contain;
margin-bottom:10px;
}

.gx-category-card span{
display:block;
font-size:14px;
}

.gx-category-card:hover{
transform:translateY(-5px);
}

/* luxe card */

.gx-highlight{
background:#000;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:22px;
font-weight:600;
}







/*.igpmenu-nav{*/
/*background-color: #bdbdbd64;*/
/*padding:12px 0;*/

/*}*/



 

/* CENTER CONTAINER */

.igpmenu-container{
max-width:1200px;
margin:auto;
}

/* MENU */

.igpmenu-list{
display:flex;
justify-content:center;
align-items:center;
gap:12px;
list-style:none;
margin:0;
padding:0;
flex-wrap:wrap;
}

.igpmenu-list li a{
text-decoration:none;
font-size:15px;
color:#222;
display:flex;
align-items:center;
gap:6px;
transition:.2s;
}


.igpmenu-list li a span{
font-size:12px;

}

.igpmenu-list li a:hover{
color:var(--secondary);
 text-decoration: underline;
}









.igphead-search-box input::placeholder{
transition:.3s;
}

.igphead-search-box input:focus::placeholder{
opacity:.4;
transform:translateX(4px);
}