/* =========================
GENERAL
========================= */

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

html{
scroll-behavior:smooth;
}

body{
background:#f4f8fb;
color:#333;
line-height:1.6;
}

/* =========================
NAVIGATION
========================= */

header{
position:sticky;
top:0;
z-index:999;
}

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

padding:15px 8%;

background:#ffffff;

box-shadow:0 3px 12px rgba(0,0,0,.08);
}

.logo img{
width:170px;
}

.nav-links{
display:flex;
list-style:none;
gap:30px;
}

.nav-links a{
text-decoration:none;
color:#4e1a2f;
font-weight:bold;
transition:.3s;
}

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

/* =========================
HERO
========================= */

.catalogue-hero{
background:linear-gradient(rgba(78,26,47,.88), rgba(78,26,47,.92)),
url(imagesabd/medicalbackground.jpg);

background-size:cover;
background-position:center;

color:white;

text-align:center;

padding:90px 20px;
}

.catalogue-hero h1{
font-size:46px;
margin-bottom:20px;
}

.catalogue-hero p{
max-width:800px;
margin:auto;
font-size:18px;
}

/* =========================
CATEGORY NAVIGATION
========================= */

.catalogue-nav{
display:flex;
justify-content:center;
flex-wrap:wrap;

gap:18px;

padding:35px 20px;

background:white;
}

.catalogue-nav a{
text-decoration:none;

background:#4e1a2f;
color:#ffffff;

padding:12px 24px;

border-radius:30px;

font-weight:bold;

transition:.3s;
}

.catalogue-nav a:hover{
background:#f4e389;
color:#4e1a2f;
transform:translateY(-3px);
}

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

.catalogue-section{
padding:70px 8%;
scroll-margin-top:100px;
}

.catalogue-section h2{
text-align:center;

font-size:34px;

color:#4e1a2f;

margin-bottom:50px;

position:relative;
}

.catalogue-section h2::after{
content:"";

display:block;

width:80px;
height:4px;

background:#f4e389;

margin:15px auto 0;

border-radius:20px;
}

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

.product-grid{
display:grid;

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

gap:35px;
}

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

.product-card{
background:white;

border-radius:15px;

overflow:hidden;

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

transition:.35s;

display:flex;
flex-direction:column;
}

.product-card:hover{
transform:translateY(-8px);

box-shadow:0 12px 28px rgba(0,0,0,.12);
}

.product-card img{
width:100%;
height:250px;
object-fit:cover;
}

.product-card h3{
color:#4e1a2f;

font-size:22px;

margin:20px 20px 10px;
}

.product-card p{
margin:0 20px 25px;

color:#666;

flex-grow:1;
}

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

.product-card a{
display:block;

text-align:center;

margin:0 20px 20px;

padding:13px;

text-decoration:none;

background:#4e1a2f;
color:#ffffff;

border-radius:8px;

font-weight:bold;

transition:.3s;
}

.product-card a:hover{
background:#f4e389;
color:#4e1a2f;
}

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

@media(max-width:900px){

.navbar{
flex-direction:column;

gap:20px;
}

.nav-links{
flex-wrap:wrap;
justify-content:center;
}

.catalogue-hero h1{
font-size:36px;
}

.catalogue-section{
padding:60px 5%;
}

}

@media(max-width:600px){

.catalogue-hero{
padding:70px 20px;
}

.catalogue-hero h1{
font-size:30px;
}

.catalogue-hero p{
font-size:16px;
}

.product-card img{
height:220px;
}

.catalogue-nav{
gap:12px;
}

.catalogue-nav a{
width:100%;
text-align:center;
}

}

/* ==================================
MOBILE SWIPEABLE PRODUCT CATALOGUE
================================== */

@media (max-width:768px){

.catalogue-section{
padding:45px 0;
}

.catalogue-section h2{
padding:0 20px;
font-size:26px;
margin-bottom:30px;
}

.product-grid{
display:grid;

/* Places products horizontally */
grid-auto-flow:column;

/* Each card uses about 78% of the phone screen */
grid-auto-columns:78%;

/* Removes the desktop column layout on mobile */
grid-template-columns:none;

gap:18px;
overflow-x:auto;

padding:5px 20px 25px;

/* Makes the cards snap into position while swiping */
scroll-snap-type:x mandatory;

/* Hides the scrollbar */
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}

.product-grid::-webkit-scrollbar{
display:none;
}

.product-card{
scroll-snap-align:start;
}

.product-card img{
height:230px;
}

}