/* =========================
   Base Reset & Typography
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', Arial, sans-serif;
}

:root {
    --primary: #4E0CB6;
    --white: #ffffff;
    --black: #111111;
    --text: #333333;
    --light: #f8f6ff;
    --border: #e8ddff;
    --gray: #777;
}

body {
    color: var(--text);
    background-color: var(--white);
    line-height: 1.5;
}

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

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


/* =========================
        Buttons
========================= */

.btn-dark {
    background-color: var(--primary);
    color: var(--white);
    padding: 12px 28px;
    font-size: 14px;
    text-transform: uppercase;
    margin-top: 15px;
    border-radius: 4px;
    transition: 0.3s ease;
}

.btn-dark:hover {
    background-color: #3a0789;
    transform: translateY(-2px);
}


/* =========================
        Header
========================= */

.top-header {

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

    padding: 20px 5%;

    border-bottom: 1px solid var(--border);

}


.logo {

    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    color: var(--primary);

}



.search-bar {

    display: flex;
    align-items: center;

    background: var(--light);

    padding: 10px 20px;

    border-radius: 25px;

    width: 300px;

    border:1px solid var(--border);

}


.search-bar input {

    border:none;

    background:transparent;

    margin-left:10px;

    outline:none;

    width:100%;

}



.user-actions {

    display:flex;

    gap:20px;

    font-size:14px;

}


.user-actions a:hover {

    color:var(--primary);

}



/* =========================
        Navigation
========================= */


.main-nav {

    padding:20px 0;

    border-bottom:1px solid var(--border);

}


.main-nav ul {

    display:flex;

    justify-content:center;

    gap:40px;

    list-style:none;

}


.main-nav a {

    font-size:13px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.3s;

}


.main-nav a:hover {

    color:var(--primary);

}



/* =========================
        Hero Section
========================= */


.hero-section {

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:10px;

    padding:20px 5%;

    height:600px;

}


.hero-main,
.hero-side-top,
.hero-side-bottom {

    background-size:cover;

    background-position:center;

    padding:40px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

}


.hero-main::before,
.hero-side-top::before,
.hero-side-bottom::before {

    content:"";

    position:absolute;

    inset:0;

    background:rgba(211, 185, 255, 0.25);

}


.hero-content {

    position:relative;

    z-index:2;

}


.hero-content h2 {

    font-size:36px;

    margin-bottom:10px;

}


.hero-content h3 {

    font-size:24px;

    margin-bottom:5px;

}




/* =========================
        Features Bar
========================= */


.features-bar {

    display:flex;

    justify-content:space-around;

    padding:20px 5%;

    background:var(--light);

    font-size:14px;

    border-top:1px solid var(--border);

    border-bottom:1px solid var(--border);

}


.features-bar div:hover {

    color:var(--primary);

}



/* =========================
       Products
========================= */


.product-section {

    padding:60px 5%;

}



.section-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}



.tabs button {

    background:none;

    padding:5px 15px;

    font-size:14px;

    color:#888;

}


.tabs button:hover {

    color:var(--primary);

}



.tabs button.active {

    color:var(--primary);

    font-weight:bold;

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

}



/* Product Slider */


.carousel-container {

    position:relative;

    display:flex;

    align-items:center;

}


.product-grid {

    display:flex;

    gap:20px;

    overflow-x:auto;

    scroll-behavior:smooth;

    padding-bottom:20px;

}


.product-grid::-webkit-scrollbar {

    display:none;

}



.product-card {

    min-width:250px;

    position:relative;

}



.product-card img {

    width:100%;

    height:350px;

    object-fit:cover;

    margin-bottom:15px;

    transition:.4s;

}



.product-card:hover img {

    transform:scale(1.03);

}



.badge-sale {

    position:absolute;

    top:10px;

    right:10px;

    background:var(--primary);

    color:white;

    padding:3px 8px;

    font-size:11px;

}



.product-card h4 {

    font-size:14px;

    font-weight:500;

}



.rating {

    color:#f5b041;

    font-size:12px;

}



.rating span {

    color:#888;

}



.price {

    font-weight:bold;

    color:var(--primary);

}


.old-price {

    text-decoration:line-through;

    color:#888;

}



/* =========================
     Scroll Buttons
========================= */


.scroll-btn {

    position:absolute;

    background:white;

    border:1px solid var(--border);

    border-radius:50%;

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 4px 10px rgba(78,12,182,.15);

    z-index:10;

    color:var(--primary);

}



.scroll-btn:hover {

    background:var(--primary);

    color:white;

}



.scroll-btn.left {

    left:-20px;

}


.scroll-btn.right {

    right:-20px;

}



/* =========================
       Banner
========================= */


.banner-wide {

    margin:40px 5%;

    height:300px;

    background-size:cover;

    background-position:center;

    display:flex;

    align-items:center;

    padding:0 50px;

    background-color:var(--primary);

}



/* =========================
        Footer
========================= */


footer {

    border-top:1px solid var(--border);

    padding:60px 5% 20px;

    margin-top:60px;

}



.footer-top {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:50px;

}



.subscribe-form {

    display:flex;

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

    padding:10px 0;

    width:300px;

}



.subscribe-form input {

    border:none;

    outline:none;

    flex-grow:1;

}



.subscribe-form button {

    background:none;

    color:var(--primary);

}



.socials i {

    font-size:20px;

    margin-left:15px;

    cursor:pointer;

    color:var(--primary);

}



.socials i:hover {

    transform:translateY(-3px);

}



.footer-links {

    display:flex;

    justify-content:space-between;

}



.link-column {

    display:flex;

    flex-direction:column;

    gap:10px;

}



.link-column h4 {

    margin-bottom:15px;

    color:var(--primary);

}



.link-column a {

    font-size:13px;

    color:#555;

}



.link-column a:hover {

    color:var(--primary);

}


/* =========================
        Responsive
========================= */


@media(max-width:768px){


.top-header{

    flex-direction:column;

    gap:20px;

}


.search-bar{

    width:100%;

}



.main-nav ul{

    flex-wrap:wrap;

    gap:20px;

}



.hero-section{

    grid-template-columns:1fr;

    height:auto;

}



.hero-main{

    height:400px;

}



.hero-side{

    display:none;

}



.features-bar{

    flex-direction:column;

    gap:15px;

}



.product-card{

    min-width:200px;

}



.footer-top,
.footer-links{

    flex-direction:column;

    gap:30px;

}


}