/* ===================================
   K DEALS LIQUIDATION
   STYLE.CSS
=================================== */

/* ---------- RESET ---------- */

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

html{
    scroll-behavior:smooth;
}

:root{

    --red:#b91c1c;
    --dark-red:#991b1b;

    --navy:#1e3a8a;
    --dark-navy:#172554;

    --gold:#ffd54f;

    --white:#ffffff;
    --light:#f8fafc;

    --gray:#64748b;
    --dark:#1f2937;

}

body{

    font-family:'Poppins',sans-serif;

    background:
    linear-gradient(
        to bottom,
        #ffffff,
        #f8fafc
    );

    color:var(--dark);

    line-height:1.7;

    overflow-x:hidden;
}

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

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

section{
    padding:80px 10%;
}

/* ---------- TYPOGRAPHY ---------- */

h1,h2,h3{

    font-family:'Oswald',sans-serif;
    letter-spacing:1px;

}

h2{

    font-size:2.6rem;

    color:var(--dark-red);

    margin-bottom:25px;

    position:relative;

}

h2::after{

    content:"";

    display:block;

    width:70px;
    height:4px;

    background:var(--gold);

    margin-top:10px;

    border-radius:10px;

}

/* ---------- HEADER ---------- */

header{

    position:sticky;

    top:0;

    z-index:999;

    background:
    linear-gradient(
        to right,
        #ffffff,
        #f3f4f6
    );

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

}

/* ---------- TOP BAR ---------- */

.top-bar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 10%;

}

/* ---------- LOGO ---------- */

.logo img{

    width:180px;

    height:auto;

    background:white;

    padding:8px;

    border-radius:16px;

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

    transition:.35s;

}

.logo img:hover{

    transform:scale(1.05);

    box-shadow:
    0 15px 35px rgba(0,0,0,.18),
    0 0 40px rgba(185,28,28,.25);

}

/* ---------- CONTACT INFO ---------- */

.contact-info{

    text-align:right;

}

.contact-info p{

    margin:6px 0;

    font-weight:500;

    color:var(--dark);

}

/* ---------- NAV ---------- */

nav{

    background:
    linear-gradient(
        90deg,
        var(--dark-red),
        var(--red),
        #dc2626
    );

    border-top:3px solid var(--gold);

    border-bottom:3px solid var(--gold);

}

nav ul{

    display:flex;

    justify-content:center;

}

nav li{

    margin:0 15px;

}

nav a{

    display:block;

    color:white;

    padding:18px 20px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:1px;

    transition:.3s;

}

nav a:hover,
nav a.active{

    background:white;

    color:var(--red);

}

/* ---------- HERO ---------- */

.hero{

    height:700px;

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url("../images/hero.jpg");

    background-size:cover;

    background-position:center;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

}

/* ---------- HERO BOX ---------- */

.hero-text{

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

    backdrop-filter:blur(10px);

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

    padding:60px;

    border-radius:20px;

    color:white;

    max-width:800px;

}

.hero h1{

    font-size:5rem;

    margin-bottom:10px;

}

.hero h2{

    color:var(--gold);

    font-size:3rem;

}

.hero h2::after{

    display:none;

}

.hero p{

    font-size:1.2rem;

    margin:25px 0;

}

/* ---------- BUTTONS ---------- */

.btn{

    display:inline-block;

    padding:16px 40px;

    border-radius:50px;

    font-weight:700;

    background:
    linear-gradient(
        90deg,
        var(--dark-red),
        var(--red)
    );

    color:white;

    box-shadow:
    0 10px 25px rgba(185,28,28,.3);

    transition:.3s;

}

.btn:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 35px rgba(185,28,28,.4);

}
/* ===========================
   FEATURES
=========================== */

.features{
    background:linear-gradient(to bottom,#ffffff,#f7f9fc);
    text-align:center;
}

.features h2{
    font-family:'Oswald',sans-serif;
    font-size:42px;
    color:#991b1b;
    margin-bottom:15px;
}

.features h2::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    background:#ffd54f;
    margin:15px auto;
    border-radius:10px;
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:30px;
    margin-top:50px;
}

.feature-card{
    background:white;
    padding:35px;
    border-radius:15px;
    border-top:6px solid #b91c1c;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.35s;
}

.feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(185,28,28,.20);
}

.feature-card h3{
    color:#1e3a8a;
    margin-bottom:15px;
    font-size:24px;
}

.feature-card p{
    color:#555;
}

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

.categories{
    background:#eef3f8;
    text-align:center;
}

.categories h2{
    font-family:'Oswald',sans-serif;
    font-size:44px;
    color:#991b1b;
    margin-bottom:15px;
}

.categories h2::after{
    content:"";
    display:block;
    width:90px;
    height:4px;
    background:#ffd54f;
    margin:15px auto;
    border-radius:10px;
}

.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:30px;
    margin-top:50px;
}

.category-card{
    background:white;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(0,0,0,.10);
    transition:.35s;
    color:#333;
}

.category-card:hover{
    transform:translateY(-12px);
    box-shadow:0 20px 45px rgba(185,28,28,.22);
}

.category-card img{
    width:100%;
    height:230px;
    object-fit:cover;
    transition:.4s;
}

.category-card:hover img{
    transform:scale(1.08);
}

.category-card h3{
    padding:22px;
    font-size:24px;
    color:#1e3a8a;
}

/* ===========================
   ABOUT SECTION
=========================== */

.about-preview,
.about-section{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(350px,1fr));
    gap:50px;
    align-items:center;
    background:white;
}

.about-text h2{
    font-family:'Oswald',sans-serif;
    font-size:42px;
    color:#991b1b;
    margin-bottom:20px;
}

.about-text h2::after{
    content:"";
    display:block;
    width:80px;
    height:4px;
    background:#ffd54f;
    margin-top:12px;
    border-radius:10px;
}

.about-text p{
    margin:18px 0;
    color:#555;
    font-size:17px;
}

.about-text ul{
    margin-top:20px;
    margin-left:20px;
}

.about-text li{
    margin-bottom:12px;
    font-size:17px;
}

.about-image img{
    border-radius:18px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    transition:.35s;
}

.about-image img:hover{
    transform:scale(1.03);
}

/* ===========================
   SECTION DIVIDER
=========================== */

section{
    position:relative;
}

section:not(:last-of-type)::after{
    content:"";
    display:block;
    width:100px;
    height:3px;
    background:#ffd54f;
    margin:70px auto 0;
    border-radius:20px;
}
/* ===========================
   PAGE HERO
=========================== */

.page-hero{
    background:
        linear-gradient(rgba(10,25,50,.80),rgba(10,25,50,.80)),
        url("../images/hero.jpg");
    background-size:cover;
    background-position:center;
    color:white;
    text-align:center;
    padding:90px 20px;
}

.page-hero h1{
    font-family:'Oswald',sans-serif;
    font-size:60px;
    letter-spacing:2px;
    margin-bottom:15px;
    text-shadow:2px 2px 8px rgba(0,0,0,.4);
}

.page-hero p{
    max-width:700px;
    margin:auto;
    font-size:20px;
    color:#f5f5f5;
}

/* ===========================
   PRODUCT SECTIONS
=========================== */

.product-section{

    display:grid;
    grid-template-columns:350px 1fr;
    gap:45px;

    background:white;

    padding:40px;

    margin:40px auto;

    border-radius:18px;

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

    transition:.3s;

}

.product-section:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(185,28,28,.18);

}

.product-section img{

    width:100%;
    height:270px;

    object-fit:cover;

    border-radius:15px;

}

.product-section h2{

    color:#991b1b;

    font-size:36px;

    margin-bottom:15px;

}

.product-section h3{

    color:#1e3a8a;

    margin-top:20px;

    margin-bottom:10px;

}

.product-section p{

    color:#555;

    line-height:1.8;

}

.product-section ul{

    margin-left:20px;

}

.product-section li{

    margin:10px 0;

    color:#444;

}

/* ===========================
   GALLERY
=========================== */

.gallery-section{

    background:#eef3f8;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-grid img{

    width:100%;

    height:260px;

    object-fit:cover;

    border-radius:18px;

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

    cursor:pointer;

    transition:.35s;

}

.gallery-grid img:hover{

    transform:scale(1.05);

    box-shadow:0 18px 40px rgba(185,28,28,.25);

}

/* ===========================
   CALL TO ACTION
=========================== */

.cta{

    background:
        linear-gradient(
            135deg,
            #991b1b,
            #dc2626
        );

    color:white;

    text-align:center;

    border-top:5px solid #ffd54f;

    border-bottom:5px solid #ffd54f;

}

.cta h2{

    font-family:'Oswald',sans-serif;

    font-size:48px;

    color:white;

    margin-bottom:20px;

}

.cta p{

    font-size:18px;

    max-width:750px;

    margin:auto;

    margin-bottom:35px;

}

.cta .btn{

    background:white;

    color:#991b1b;

}

.cta .btn:hover{

    background:#ffd54f;

    color:#111;

}

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

footer{

    background:
        linear-gradient(
            to bottom,
            #111827,
            #1f2937
        );

    color:white;

    text-align:center;

    padding:60px 20px;

    border-top:5px solid #ffd54f;

}

footer img{

    width:160px;

    margin:0 auto 25px;

    background:white;

    padding:12px;

    border-radius:15px;

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

}

footer p{

    margin:10px 0;

    color:#ddd;

}

footer strong{

    color:#ffd54f;

    font-size:22px;

}

footer a{

    color:#ffd54f;

    transition:.3s;

}

footer a:hover{

    color:white;

}
/* ===========================
   SMOOTH ANIMATIONS
=========================== */

@keyframes fadeUp{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.hero-text,
.feature-card,
.category-card,
.about-section,
.about-preview,
.product-section,
.gallery-grid img{

    animation:fadeUp .8s ease forwards;

}

/* ===========================
   SCROLLBAR
=========================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ececec;
}

::-webkit-scrollbar-thumb{
    background:#b91c1c;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#991b1b;
}

/* ===========================
   SELECTION COLOR
=========================== */

::selection{
    background:#ffd54f;
    color:#111;
}

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

img{
    transition:.35s;
}

img:hover{
    filter:brightness(1.05);
}

/* ===========================
   LINK ANIMATION
=========================== */

a{
    transition:.3s;
}

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

@media(max-width:1000px){

.top-bar{

    flex-direction:column;
    text-align:center;
    gap:20px;

}

.contact-info{

    text-align:center;

}

.hero{

    height:500px;

}

.hero h1{

    font-size:56px;

}

.hero h2{

    font-size:32px;

}

.product-section{

    grid-template-columns:1fr;

}

.about-preview,
.about-section{

    grid-template-columns:1fr;

}

}

/* ===========================
   PHONE
=========================== */

@media(max-width:768px){

section{

    padding:60px 7%;

}

.logo img{

    width:130px;

}

nav ul{

    flex-wrap:wrap;
    justify-content:center;

}

nav li{

    margin:5px 10px;

}

nav a{

    padding:14px 10px;
    font-size:15px;

}

.hero{

    height:450px;

}

.hero-text{

    width:95%;
    padding:35px 20px;

}

.hero h1{

    font-size:42px;

}

.hero h2{

    font-size:25px;

}

.hero p{

    font-size:17px;

}

.page-hero h1{

    font-size:42px;

}

.page-hero p{

    font-size:17px;

}

.features h2,
.categories h2,
.about-text h2,
.cta h2{

    font-size:34px;

}

.feature-grid,
.category-grid,
.gallery-grid{

    grid-template-columns:1fr;

}

.category-card img{

    height:220px;

}

.product-section{

    padding:25px;

}

.product-section img{

    height:220px;

}

footer img{

    width:130px;

}

}

/* ===========================
   SMALL PHONES
=========================== */

@media(max-width:480px){

.hero{

    height:380px;

}

.hero h1{

    font-size:34px;

}

.hero h2{

    font-size:22px;

}

.hero p{

    font-size:15px;

}

.btn{

    padding:13px 28px;
    font-size:15px;

}

.contact-info p{

    font-size:14px;

}

}

/* ===========================
   NICE HOVER EFFECTS
=========================== */

.feature-card:hover h3,
.category-card:hover h3,
.product-section:hover h2{

    color:#dc2626;

}

.gallery-grid img:hover{

    transform:scale(1.05) rotate(.5deg);

}

.btn:hover{

    transform:translateY(-4px);

}

.logo img:hover{

    transform:scale(1.05) rotate(-2deg);

}

nav a{

    position:relative;

}



/* ===========================
   FINISHING TOUCHES
=========================== */

body{

    overflow-x:hidden;

}

h1,h2,h3{

    letter-spacing:1px;

}

p{

    line-height:1.8;

}

section{

    scroll-margin-top:120px;

}

html{

    scroll-behavior:smooth;

}