* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
--copy-colour:#233C4B; /* Blue Dianne */
--page-background:#FF7D2D; /* Bright Sun */
--page-background:#fafafa; /* Off white */
--yellow-highlight:#FAC846; /* Bright Sun */

--h1-colour:#FF7D2D; /* Crusta */
--h2-colour:#5F9B8C; /* Patina */
--h3-colour:#A0C382; /* Olivine */
--logo-colour:#FF7D2D; /* Bright Sun */
--logo-colour:#000000; /* Bright Sun */
--primary-colour: #6b5b95; /* A primary brand color */
--secondary-colour: #feb236; /* A secondary accent color */
--button-colour:#5F9B8C;
/*Text Colours*/
--text-color: #000000; /* Body text color */
--dark-text-colour:#000000;
--light-text-colour:#FFFFFF;
--link-hover-colour: #666666; /* Body text color */
/*Background Colours*/
--section-colour:#fafafa; /*Section background color */
--product-specs-colour:#FFFAF0;
--dark-background-colour:#233C4B;
}
header{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index:1;
	height: 140px;
	overflow-y: hidden;
}
header.widescreen{

}
header.narrowscreen{
	visibility:hidden;
	display:none;
}
#catalogue, #about, #experiments,#contact{
	background-color: var(--section-colour);
	padding:0 1rem;	
	border-radius: 25px;	
}
#about{padding-bottom:1rem;}
#contact{background-color:var(--dark-background-colour); padding:2rem;}

#zfwfz_logo{
	fill:var(--logo-colour);
	fill-rule:evenodd;
	clip-rule:evenodd;
	stroke-linejoin:round;
	stroke-miterlimit:2;
	  	

}
.nav_logo{
	width:228px;
	height:122px;
	xbackground-color:var(--section-colour);
	xborder-radius:50%;
	xdisplay: flex;
  	xjustify-content: center; /* Centers horizontally */
  	xalign-items: center;
  	xtop:-10px;
}
.nav_logo_wide{
	max-width: 222px;
}
delete.nav_logo img {width:100%;}

delete.logo {
	xmargin-bottom: 1.5rem;
	margin-top:-4.5rem;
	margin-left: auto; 
	margin-right: 5rem;
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index:0;
}
.logo img {width:100%;}
nav{
	padding: 0.5rem 1rem;
	background-color: var(--page-background);
	overflow-y: hidden;

}
nav ul, section#contact ul {
	list-style: none;
	display: flex;
	gap: 2rem;
}

nav a {
	text-decoration: none;
	color: var(--dark-text-colour);
	font-size: 1.05rem;
	transition: color 0.3s;
	font-weight: bold;
}

nav a:hover {
	color: var(--link-hover-colour);
}
address a{
color:#fff;
font-weight: bold;

}

address{
	line-height: 1.2rem;
	margin:1rem 0;
}
address a:hover {
	color: var(--link-hover-colour);
}
header, main {
	max-width: 1200px;
	margin: 0 auto;
}

.list--horizontal {
    flex-direction:row;
    display: flex;
    padding: 0;
    margin: 0;
    list-style:none
}
.social_icons {
    display: flex;
    grid-area: icons;
    justify-self:end;
    max-width:222px;
    xmargin-left: auto; 
	xmargin-right: 5rem;
}

.header__list {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap:24px
}

.header__list-item {
    position:relative
}

.header__list-item:hover .header__list-item:focus-within {
    display:block
}

.header__icon {
    display: block;
    color: var(--light-text-colour);
    padding-top:2px;
    xbackground-color: green;
    
}

.header__icon:hover {
    color: var(--link-hover-colour);
}

.header__icon svg {
    width: 21px;
    height: 21px;
}


.product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 3rem;
	margin-bottom: 4rem;


}

.product-card, .iframe-video{
	xborder: 1px solid #e0e0e0;
	xbackground-color: #fcfcfc;
	padding: 1.5rem;
	transition: box-shadow 0.3s;
}

.product-card:hover {
	xbox-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.iframe-video{
	position: relative;
	padding-bottom: 56.25%;
	/* 16:9 */
	padding-top: 25px;
	height: 0;
	margin-bottom:2rem;
}

.iframe-video iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.product-image {
	width: 100%;
	border: 5px solid var(--yellow-highlight);
	background-color: #f6f6f6;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #999;
	font-size: 0.9rem;
	border-radius:25px;
}
.product-image img{
	width:100%;
	border-radius:20px;
	
}

img.hover-image{
	width:100%;
	opacity:0;
}

img.hover-image:hover{
	opacity:100;
}
.product-card h2 {
	font-size: 1.3rem;
	margin-bottom: 1rem;
	font-weight: 400;
}


.product-specs {
	margin: 1.5rem 0;
	padding: 1rem 2rem;
	background-color: var(--product-specs-colour);
}

.product-specs ul {
	list-style: none;
	xpadding-left: 1rem;
	margin-bottom:1rem;
}


.product-specs li {
	xpadding: 0.3rem 0;
	color: var(--copy-colour);
}
ul.nested-list{
	list-style: none;
	xpadding-left: 1rem;
	padding-bottom:0;
	line-height:0.5rem;
	margin-top:1rem;
}

ul.nested-list li{
	xline-height:0.5rem;
}
.price {
	font-size: 1.5rem;
	font-weight: 300;
	margin: 1rem 0;
}

.btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	border:2px solid:var(--dark-background-colour);
	background-color: var(--button-colour);
	color: var(--section-colour);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.3s;
	font-size: 0.95rem;
	border-radius:10px;
	
}

.btn:hover {
	background-color: var(--link-hover-colour);
}

footer {
	padding: 2rem;
	text-align: center;
	font-size: 0.85rem;
	color: var(--link-hover-colour);
	margin-top: 4rem;
}

@media (max-width: 768px) {
	.product-grid {
		grid-template-columns: 1fr;
	}

	nav ul {
		flex-direction: column;
		gap: 1rem;

	}
	header.widescreen{
		visibility: hidden;
		display: none;
	}
	header.narrowscreen{
		visibility:visible;
		display:block;
		
	}
	.nav_logo_wide{
	margin-left: auto; 
	margin-right: 5rem;
	}
}