@charset "utf-8";
/* CSS Document */
body {
	font-size: 1em;
	line-height: 1.3em;
}

html,body {
	max-width: 100%;
	overflow-x: hidden;
	margin-left: -4px;
	font-family: Arial;
}

body {
	background-color: #E94D40;
}
/* classes */
.burntred {
	color: #E94D40;
}
.navyblue {
	color: #0C243C;
}

.floatleft {
    float: left;
}
.floatright {
    float: right;
}
.clearboth {
    clear: both;
}

/* the banner */

.bannerimg {
   position: relative;
   z-index: 1;
   display: block;
   margin: 0 auto;
   max-height: 100%;
   background-color: white;
   
  
}

.logobannerbackground {
	position:absolute ;
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: white;
}

.photobanner {
	height: 233px;
	width: 3550px;
	margin-top: 92px;
	margin-bottom: -33px;
	animation: scroll 50s linear infinite;
	display: flex;
	flex-wrap: nowrap;
 }

/* animations 😭 */

@keyframes scroll {
	to {
		transform: translateX(-100%);
	}
}

/*navigation bar*/

.navigationbar ul {
	list-style: none;
	background-color: white;
	padding: 0px;
	margin: 0px;
	margin-top: -25px;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	display: flex;
    font-weight: bold;
	margin-top: 0px;
}

.navigationbar a {
	padding: 15px;
	display: block;
	text-align: center;
	color: #E94D40;
	margin: 0 10px;
	text-decoration: wavy;
}

.navigationbar a:hover {
	background-color: gray;

}

/*navbar done*/


/* main content*/

.container1 {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 20px;
}

.content {
	flex: 2;
	background: #fff;
	padding: 20px;
	border-radius: 8px;
}

.homeheading1 {
	text-align: center;
	border-left: #E94D40;
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px;
	color: #E94D40;

}

.homeheading2 {
	border-left: #E94D40;
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px;
	color: #E94D40;
	text-align: center;
	margin-left: 100px;
	margin-right: 100px;

}

.homecontent {
 text-align: center;
font-size: large;
}
.homecontent2 {
	text-align: center;
}
.homecontent3 {
	text-align: center;
	font-size: large;
}

.homeheading3 {
	border-left: #E94D40;
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px;
	color: #E94D40;
    text-align: center;
	margin-right: 20%;
	margin-left: 20%;
}

/* infoboxes */
.infosection {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	margin-top: 30px;
}

.infobox {
	flex: 1;
	background: #fff;
	padding: 15px 20px;
	border-radius: 8px;
}

.infobox h3{
	color: #E94D40;
	margin-top: 0;
}



/* fancy feature boxes */

.features {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.feature-box.hover-reveal {
    position: relative;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    border: 2px solid #b24c3b;
    text-decoration: none;
    color: inherit;
}

.feature-box.hover-reveal img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
    transition: 0.3s ease;
}

.feature-box.hover-reveal .hover-text {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    text-align: center;
    padding: 12px 10px;
    font-weight: bold;
    font-size: 1.05rem;
    opacity: 0;
    transition: 0.3s ease;
}

.feature-box.hover-reveal:hover img{
    opacity: 0.7;
}

.feature-box.hover-reveal:hover .hover-text {
    opacity: 1;
}

.right-column .feature-box {
    margin-bottom: 20px;
}

.right-column .hover-reveal {
    margin-bottom: 20px;
}

/* CONTACT FORM */ 

.contactform {
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-top: 20px;
}

.contactform input, .contactform textarea {
	width: 100%;
	padding: 10px;
	border-radius: 6px;
	border: 1p solid #ccc;
}

.contactform button {
	background: #E94D40;
	padding: 12px;
	border-radius: 6px;
	font-weight: bold;
	cursor: pointer;
	width:120px;
}

.contactform button:hover {
	background: #0C243C;
}

/* sale page stuff */

/* product grid thing */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.products img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.products figcaption {
  text-align: center;
  margin-top: 8px;
  font-weight: bold;
}
/* PRODUCT GRID DONE*/
/* pricetable */
.pricetable {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.pricetable th,
.pricetable td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
}

.pricetable th {
  background: #f9dfe6;
  color: #0C243C;
}

/*PRICE TABLE DONE*/

/* order form css */
.orderform {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.orderform input,
.orderform button {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.orderform button {
  background: #E94D40;
  color: white;
  font-weight: bold;
  cursor: pointer;
}

.orderform button:hover {
  background: #0C243C;
}
/* ORDER FORM DONE*/

.subheadingaboutus {
	border-left: #E94D40;
	margin-bottom: 30px;
	padding: 20px;
	border-radius: 8px;
	box-shadow: 0 2px 8px;
	color: #E94D40;
	text-align: center;
	margin-left: 600px;
	margin-right: 100px;
	margin-top: -330px;

}

.aboutustable {
	margin-left:570px ;
	border: 1px solid #E94D40;
	border-collapse: collapse;
}

.aboutustable th, .aboutustable td {
	border: 1px solid #E94D40;
	padding: 8px;
}
footer {
	text-align: center;
	background-color: #0C243C;
	color: white;
}