/*==========================================
    OMKAR PACKERS GULATI
    PREMIUM CATALOGUE
===========================================*/

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

body{

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

background:#f6f7fb;

color:#222;

line-height:1.6;

overflow-x:hidden;

}

/*==========================================
Container
==========================================*/

.container{

width:92%;

max-width:1450px;

margin:auto;

}

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

.catalogHero{

background:
linear-gradient(rgba(170,0,0,.85),
rgba(210,0,0,.82)),
url("../images/banner.jpg");

background-size:cover;

background-position:center;

padding:110px 0 20px;

text-align:center;

color:White;

}

.catalogHero h1{

font-size:58px;

font-weight:800;

margin-bottom:18px;

letter-spacing:.5px;

}

.catalogHero p{

font-size:21px;
color:#FFFFFF;

opacity:.95;

margin-bottom:45px;

}

/*==========================================
Search Box
==========================================*/

#searchBox{

width:720px;

max-width:92%;

padding:18px 28px;

border:none;

outline:none;

border-radius:60px;

font-size:18px;

background:white;

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

transition:.35s;

}

#searchBox:focus{

transform:translateY(-4px);

box-shadow:
0 20px 60px rgba(0,0,0,.22);

}

/*==========================================
GST BAR
==========================================*/

.gstBar{

background:#ffffff;

padding:18px;

font-size:17px;

font-weight:600;

text-align:center;

box-shadow:

0 3px 18px rgba(0,0,0,.08);

color:#b00000;

}

/*==========================================
Heading
==========================================*/

.seriesSection{

padding:90px 0;

}

.seriesSection h2{

text-align:center;

font-size:42px;

margin-bottom:65px;

font-weight:800;

position:relative;

}

.seriesSection h2::after{

content:"";

width:120px;

height:5px;

background:#d40000;

display:block;

margin:18px auto;

border-radius:20px;

}

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

.seriesGrid{

display:grid;

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

gap:38px;

align-items:stretch;

}

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

.seriesCard{

background:#fff;

border-radius:22px;

overflow:hidden;

box-shadow:

0 10px 35px rgba(0,0,0,.08);

transition:.35s;

display:flex;

flex-direction:column;

position:relative;

height:100%;

text-decoration:none;

}

.seriesCard:hover{

transform:translateY(-12px);

box-shadow:

0 30px 70px rgba(0,0,0,.16);

}

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

.seriesCard img{

width:100%;

height:280px;

object-fit:cover;

background:#fff;

transition:.45s;

padding:18px;

}

.seriesCard:hover img{

transform:scale(1.05);

}

/*==========================================
CONTENT
==========================================*/

.seriesContent{

padding:28px;

display:flex;

flex-direction:column;

flex-grow:1;

}

.seriesContent h3{

font-size:28px;

font-weight:700;

margin:18px 0 15px;

color:#202020;

}

.seriesContent p{

font-size:15px;

color:#666;

line-height:1.8;

margin-bottom:24px;

flex-grow:1;

}

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

.badge{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:

linear-gradient(135deg,#d40000,#ff3c3c);

color:white;

font-size:13px;

font-weight:600;

letter-spacing:.5px;

box-shadow:

0 6px 18px rgba(212,0,0,.35);

}

/*==========================================
PRODUCT INFO
==========================================*/

.seriesInfo{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:28px;

font-size:14px;

font-weight:600;

color:#555;

flex-wrap:wrap;

gap:12px;

}

.seriesInfo span{

display:flex;

align-items:center;

gap:8px;

}

.seriesInfo i{

color:#d40000;

}

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

.seriesBtn{

display:block;

width:100%;

text-align:center;

padding:15px;

border-radius:12px;

background:

linear-gradient(135deg,#c70000,#ff2d2d);

color:white;

font-weight:700;

font-size:16px;

text-decoration:none;

transition:.35s;

letter-spacing:.5px;

}

.seriesBtn:hover{

background:

linear-gradient(135deg,#ff2d2d,#c70000);

transform:translateY(-3px);

box-shadow:

0 12px 30px rgba(212,0,0,.35);

}

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

.seriesCard::before{

content:"";

position:absolute;

top:0;

left:-120%;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.55),
transparent);

transition:.8s;

pointer-events:none;

}

.seriesCard:hover::before{

left:150%;

}

/*==========================================
CTA SECTION
==========================================*/

.catalogCTA{

padding:90px 20px;

background:linear-gradient(135deg,#b50000,#e60000);

text-align:center;

color:white;

margin-top:80px;

}

.catalogCTA h2{

font-size:46px;

font-weight:800;

margin-bottom:20px;

}

.catalogCTA p{

max-width:850px;

margin:0 auto 40px;

font-size:18px;

line-height:1.9;

opacity:.95;

}

.ctaButtons{

display:flex;

justify-content:center;

gap:20px;

flex-wrap:wrap;

}

.primaryBtn,
.secondaryBtn{

padding:16px 36px;

border-radius:60px;

font-size:17px;

font-weight:700;

text-decoration:none;

transition:.35s;

display:inline-flex;

align-items:center;

gap:10px;

}

.primaryBtn{

background:white;

color:#c50000;

}

.primaryBtn:hover{

transform:translateY(-5px);

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

}

.secondaryBtn{

border:2px solid white;

color:white;

background:transparent;

}

.secondaryBtn:hover{

background:white;

color:#c50000;

transform:translateY(-5px);

}

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

footer{

background:#181818;

color:#eee;

padding:50px 20px;

text-align:center;

}

footer p{

margin:10px 0;

font-size:15px;

color:#cfcfcf;

}

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

#searchBox::placeholder{

color:#999;

transition:.3s;

}

#searchBox:focus::placeholder{

opacity:.4;

padding-left:10px;

}

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

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#c70000;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#990000;

}

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

@media(max-width:1200px){

.seriesGrid{

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

}

}

@media(max-width:992px){

.catalogHero{

padding:90px 20px;

}

.catalogHero h1{

font-size:46px;

}

.seriesGrid{

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

}

.seriesSection h2{

font-size:36px;

}

.catalogCTA h2{

font-size:38px;

}

}

@media(max-width:768px){

.seriesGrid{

grid-template-columns:1fr;

}

.catalogHero h1{

font-size:34px;

}

.catalogHero p{

font-size:18px;

}

#searchBox{

font-size:16px;

padding:16px 22px;

}

.seriesCard img{

height:240px;

}

.seriesContent{

padding:22px;

}

.seriesContent h3{

font-size:24px;

}

.ctaButtons{

flex-direction:column;

align-items:center;

}

.primaryBtn,
.secondaryBtn{

width:280px;

justify-content:center;

}

}

@media(max-width:480px){

.catalogHero{

padding:70px 15px;

}

.catalogHero h1{

font-size:28px;

}

.seriesSection{

padding:60px 15px;

}

.seriesSection h2{

font-size:28px;

}

.gstBar{

font-size:14px;

line-height:1.8;

}

.seriesCard{

border-radius:18px;

}

.seriesCard img{

height:220px;

}

}