/* Strikon Sports v1.0 - Foundation CSS */
:root{
--primary:#c1121f;
--dark:#111;
--light:#fff;
--gray:#f5f5f5;
--text:#444;
--radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:'Poppins',sans-serif;
background:#fff;
color:var(--text);
line-height:1.7;
}
img{max-width:100%;display:block}
a{text-decoration:none}
.container{width:min(1200px,92%);margin:auto}
.header{
position:sticky;top:0;z-index:1000;
background:#fff;
box-shadow:0 2px 12px rgba(0,0,0,.08);
}
.header .container{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 0;
}
.logo img{height:64px}
.navbar ul{display:flex;list-style:none;gap:28px}
.navbar a{color:#111;font-weight:600}
.navbar a:hover,.navbar .active{color:var(--primary)}
.quote-btn,.primary-btn{
background:var(--primary);
color:#fff;
padding:14px 24px;
border-radius:999px;
font-weight:600;
display:inline-block;
transition:.3s;
}
.quote-btn:hover,.primary-btn:hover{
transform:translateY(-2px);
background:#a40f1a;
}
.secondary-btn{
border:2px solid var(--primary);
color:var(--primary);
padding:12px 24px;
border-radius:999px;
display:inline-block;
margin-left:12px;
transition:.3s;
}
.secondary-btn:hover{background:var(--primary);color:#fff}
.menu-toggle{display:none;font-size:28px;cursor:pointer}
/* ===========================
   HERO SECTION
=========================== */

.hero{
    padding:90px 0;
    background:#fff;
}

.hero-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    align-items:center;
    gap:70px;
}

.hero-content h1{
    font-size:4rem;
    line-height:1.1;
    font-weight:800;
    margin-bottom:25px;
}

.hero-content p{
    font-size:1.2rem;
    line-height:1.9;
    color:#555;
    margin-bottom:35px;
    max-width:700px;
}

.hero-buttons{
    display:flex;
    gap:20px;
    margin-bottom:45px;
}

.hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    width:100%;
    max-width:760px;
    border-radius:24px;
    box-shadow:0 30px 70px rgba(0,0,0,.18);
    transition:.4s;
}

.hero-image img:hover{
    transform:translateY(-8px);
}
.section-title{text-align:center;margin-bottom:50px}
.section-title span{
color:var(--primary);
font-weight:700;
letter-spacing:1px;
}
.section-title h2{
font-size:40px;
color:#111;
margin:10px 0;
}
.highlights .container,
.why-grid,
.category-grid,
.services-grid,
.process-grid,
.footer-grid{
display:grid;
gap:24px;
}
.highlights .container{grid-template-columns:repeat(4,1fr);padding:70px 0}
.why-grid,.category-grid,.services-grid{grid-template-columns:repeat(3,1fr)}
.process-grid{grid-template-columns:repeat(6,1fr)}
.highlight-box,.why-card,.service-card,.category-card,.step{
background:#fff;
padding:28px;
border-radius:var(--radius);
box-shadow:0 8px 25px rgba(0,0,0,.08);
transition:.3s;
}
.highlight-box:hover,.why-card:hover,.service-card:hover,.category-card:hover,.step:hover{
transform:translateY(-6px);
}
.highlight-box i,.why-card i,.service-card i{
font-size:34px;
color:var(--primary);
margin-bottom:15px;
}
.categories,.why-us,.services,.process,.about-preview,.cta{padding:90px 0}
.category-content{padding-top:18px}
.card-btn{color:var(--primary);font-weight:600}
.about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
}
.about-content span{color:var(--primary);font-weight:700}
.about-content h2{font-size:42px;color:#111;margin:12px 0 20px}
.cta{
text-align:center;
background:#111;
color:#fff;
}
.footer{
background:#111;
color:#ddd;
padding-top:70px;
}
.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}
.footer h3{color:#fff;margin-bottom:16px}
.footer ul{list-style:none}
.footer li{margin-bottom:10px}
.footer a{color:#ddd}
.footer a:hover{color:#fff}
.footer-logo{height:70px;margin-bottom:18px}
.social-links a{font-size:22px;margin-right:12px}
.footer-bottom{
border-top:1px solid #333;
margin-top:40px;
padding:20px;
text-align:center;
}
@media(max-width:992px){
.hero-grid,.about-grid,
.highlights .container,
.why-grid,.category-grid,.services-grid,.process-grid,.footer-grid{
grid-template-columns:1fr 1fr;
}
.hero h1{font-size:42px}
}
@media(max-width:768px){
.navbar{display:none}
.menu-toggle{display:block}
.hero-grid,.about-grid,
.highlights .container,
.why-grid,.category-grid,.services-grid,.process-grid,.footer-grid{
grid-template-columns:1fr;
}
.hero{padding:60px 0}
.hero h1{font-size:34px}
.secondary-btn{margin-left:0;margin-top:12px}
}

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

.top-bar{
    background:#0d0d0d;
    color:#ffffff;
    font-size:14px;
    padding:8px 0;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.top-bar-content{
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:15px;
}

.top-right{
    display:flex;
    gap:20px;
}

.top-right a{
    color:#ffffff;
    text-decoration:none;
    transition:.3s;
}

.top-right a:hover{
    color:#e30613;
}

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

.header{
    position:sticky;
    top:0;
    z-index:1000;
    background:rgba(0,0,0,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 25px rgba(0,0,0,.25);
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:82px;
}

.logo img{
    height:60px;
    transition:.3s;
}

.logo img:hover{
    transform:scale(1.05);
}

.nav-links{
    display:flex;
    align-items:center;
    list-style:none;
    gap:28px;
}

.nav-links li{
    position:relative;
}

.nav-links a{
    color:#ffffff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.nav-links a:hover{
    color:#e30613;
}

/* ==========================================
   DROPDOWN
========================================== */

.dropdown-menu{
    position:absolute;
    top:100%;
    left:0;
    min-width:260px;
    background:#111;
    display:none;
    list-style:none;
    padding:12px 0;
    border-radius:10px;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.dropdown-menu li{
    width:100%;
}

.dropdown-menu li a{
    display:block;
    padding:12px 20px;
    color:#fff;
}

.dropdown-menu li a:hover{
    background:#e30613;
    color:#fff;
}

.dropdown:hover .dropdown-menu{
    display:block;
}

/* ==========================================
   REQUEST QUOTE BUTTON
========================================== */

.quote-btn{
    background:#e30613;
    padding:12px 24px;
    border-radius:6px;
    color:#fff !important;
    transition:.3s;
}

.quote-btn:hover{
    background:#b6000f;
}

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

.menu-toggle{
    display:none;
    font-size:28px;
    background:none;
    border:none;
    color:#fff;
    cursor:pointer;
}

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

@media(max-width:992px){

.top-bar-content{
flex-direction:column;
text-align:center;
}

.menu-toggle{
display:block;
}

.nav-links{
display:none;
flex-direction:column;
position:absolute;
top:82px;
left:0;
width:100%;
background:#111;
padding:25px;
}

.nav-links.active{
display:flex;
}

.dropdown-menu{
position:static;
display:none;
background:#1b1b1b;
box-shadow:none;
margin-top:10px;
}

.dropdown:hover .dropdown-menu{
display:block;
}

}

/* ===========================================================
   PRODUCT PAGES
=========================================================== */

.breadcrumb{
background:#f8f8f8;
padding:18px 0;
font-size:14px;
}

.breadcrumb a{
color:#555;
}

.breadcrumb span{
margin:0 10px;
color:#999;
}

.breadcrumb strong{
color:#c1121f;
}

.product-hero{
padding:80px 0;
background:#fff;
}

.product-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
align-items:center;
}

.product-image img{
width:100%;
border-radius:20px;
box-shadow:0 20px 60px rgba(0,0,0,.12);
transition:.4s;
}

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

.product-tag{
display:inline-block;
background:#c1121f;
color:#fff;
padding:8px 18px;
border-radius:50px;
font-size:14px;
font-weight:600;
margin-bottom:18px;
}

.product-content h1{
font-size:48px;
line-height:1.15;
margin-bottom:20px;
color:#111;
}

.product-content p{
font-size:18px;
line-height:1.9;
margin-bottom:35px;
color:#555;
}

.section{
padding:90px 0;
}

.light-bg{
background:#f7f7f7;
}

.specification-table{
margin-top:40px;
overflow:auto;
}

.specification-table table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.specification-table th{
background:#111;
color:#fff;
padding:18px;
text-align:left;
width:35%;
}

.specification-table td{
padding:18px;
border-bottom:1px solid #ececec;
}

.specification-table tr:last-child td{
border-bottom:none;
}