@charset "utf-8";
/* CSS Document */
body{
	background-color:#F7EFDC;
	padding: 0px;
	margin: 0px;
    font-family:"Titan One", sans-serif;
	display:flex;
	justify-content:center;
	align-items: center;
}

html{ font-size: 100%;
box-sizing: border-box;
}

*,
*::before,
*::after{box-sizing: inherit;}

body{
	font-weight: normal;
	line-height: 1;
	word-wrap: break-word;
	text-rendering: optimizeLegibility;
	-webkit-overflowing-scrowlling: touch;
	-webkit-text-size-adjust: none;
}

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  font-size: 1.5vw;
  background-color: #7B3C1E;
  padding: 1vw 2vw;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: "Titan One"
}
.container{
width:100%;
color:#F7EFDC;
}
.container-fluid{
	height:20%;	
}
.navbar{
	height: 10%;
}
nav{
	background-color: #7B3C1E;
	width: 100%;
	position: sticky;
}
.navbar-nav{
	list-style: none;
	display:flex;
	justify-content:flex-end;
	gap:5%;
	margin-right:3%;
	font-size: 1.5vw;
	font-weight: 500;
	padding: 0px;
	
}
.collapse-navbar-collapse a:link, a:visited {
	color:#F7EFDC;
	text-decoration-line: none;
}
.collapse-navbar-collapse a:hover, a:active {
	color:#FF8B02;
	text-decoration: none;

}
.logo{
	padding-left:5px;
	padding-top:5px;
	padding-bottom: 5px;
}

.container2{
	position: relative;
	text-align: center;
	
}

.bottom-left{
	position:absolute;
	border-width: thick;
	bottom: 3vw;
	left: 5vw;
	font-size: 5vw;
	border: 2px solid #7B3C1E;
	border-radius: 5vw;
	background:#7B3C1E;
	padding: 0.5vw 5vw;
	color: #F7EFDC;
	
}



li {
	justify-content: flex-end;
	padding-left: 0.05vw;
}

.hero-section{
	justify-content: flex-start;
	margin-left: 0%;
	display: flex;
	width:100%;
	gap:3%;
	min-height:46.89vw;

}

.hero-left img{
		width:100%;
min-height:46.89vw;
}




.hero-left{
	width:120%;
	padding-left:0%;
	box-sizing: inherit;
}
.hero-right{
	width:30%;
	padding-left:0%;
	color: #D62700;
	font-size: 6.25vw;
}
h1{
    color: #D62700;
	font-size: 8.00vw;
	padding-right: 1vw;
	margin-left: 4.16vw;
	margin-top: 10.42vw;	
}


h2{	color:#FF8732;
	font-size:4.58vw;
	font-display: auto;
	margin-bottom: 1.04vw;
	text-align: center;
	margin-top:0.52vw;



}
.product {
	height: auto;
	width: 18%;
    border-radius: 0.5em;
	border: 0.20vw solid #FF8732;
	align-content: center;
	align-items: center;
	margin-right: 1.02vw;
	margin-top: 1.02vw;
	justify-content: center;
}
.image-container{
	justify-content: center;
align-content: center;
	text-align: center;
	width:100%;
	
}
.container1{
width:100%;
	height:auto;
}
.hero-left img{
	width:100%;
	height:auto;
}
.hero-right {
	width:auto;
	height:auto;
}
.scroll-container {
  background-color: #F7EFDC;
  white-space: nowrap;
 overflow-x: scroll;
  padding: 3.12vw;
}

.scroll-container img {
margin: 1.04vw;
 border-radius: 2em;
  box-shadow: 0.36vw 0.36vw 0.36vw grey;
}
.hero-section2{
	justify-content: flex-start;
	margin-left: 0%;
	display: flex;
	width:100%;
	gap:3%;
	min-height:46.89vw;

}

.hero-section2-left{
	width:40%;
	padding-right:0%;		
}
h3{
	color: #D62700;
	font-size: 6.00vw;
	margin-left: 4.27vw;
	margin-top: 10.33vw;
	padding-top: 4.27vw;
	padding-bottom: 0.5vw;
}

.hero-section2-right{
	width:60%;
	padding-right:0%;
	color: #D62700;
	font-size: 6.25vw;
	margin-bottom: 2.60vw;
}
.hero-section2-right img{
	margin-top:0.52vw;
	min-height:46.89vw;
	width:100%;
	
	
}
button{  
  background-color: #7B3C1E; 
  border: none;
  color: #F7EFDC;
  padding: 1.04vw 2.6vw;
  border-radius: 0.5em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 2.08vw;
  margin-left: 4.27vw;
  margin-top:0vw;
  text-decoration-line: none;
  transition-duration: 0.4s;
}

button:hover {
  background-color: #FF8732; 
  color:#F7EFDC;

}

.location{
	background-color:#D62700;
	padding:6.25vw;
}
h4{
	color: #F7EFDC;
	font-size:4.16vw;
	font-display: auto;
	margin-bottom: 1.04vw;
	margin-top:0.52vw;
	text-align: center;
}
.location2{
	background-color: #158741;
	padding:0.52vw;
}
.location1{
	background-color:#7B3C1E;
	padding:0.52vw;
}

input{
			display:block;
			margin: 0.52vw;
			padding: 1.04vw;
			width: 26.05vw;
	        align-items: center;
			border-color:#FF8732;
			background-color:#FFFFFF;
	        font-size: 1.04vw;
	        border-radius: 0.2vw;
            margin-left: 30vw;
	        margin-top:2.08vw;
	
}
footer {
  background-color: #7B3C1E;
  color: white;
  padding: 2.12vw 0;
	padding-top: 0.52vw;
margin-top: 2.08vw;
}

/* Layout for footer columns */
.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 58.53vw;
  padding: 0 0.5vw;
  margin-top: 0;
}

.footer-column {
  flex: 1;
  align-content: flex-start;
}

.footer-column h4 {
  font-size: 1.30vw;
  margin-top:1.56vw;
  margin-bottom: 0.52vw;
  padding-left: 1.04vw;
text-align: left;
}

.footer-column ul {
  list-style: none;
	text-align:left;
	font-family: 'Roboto';
	color:#F7EFDC;
	padding-left: 1.04vw;
	margin-top:1.56vw;
}

.footer-column li {
  margin-bottom: 0.41vw;
  text-align:match-parent;
  margin-left:0;
  font-family:'Roboto';
  color:#F7EFDC;
}

.footer-column ul li a {
  text-decoration: none;
  transition: color 0.3s ease;
  font-family:'Roboto';
  color:#F7EFDC;
}

.footer-column ul li a:hover {
  color: #FF8732;
}
footer-copyright{
	margin-left:1.56vw;
	text-align: left;
}
p
{
	margin-left:2.08vw;
	text-align: left;
	font-family:'Roboto';
	font-size: 0.78vw;
	padding-top: 1.56vw;
	opacity: 0.5;
	
}
.singleCol{
	max-width: 750px;
	margin: 0 auto;
	
}

.icons{
text-align:right;
	margin-top: 2.04vw;
}

.icons a{
	text-decoration: none;
font-size: 1.52vw;
color: white;
	opacity: 70%;
margin-right: 2.02vw;
	gap:0.5vw;
	
}
.hero-section3{
	justify-content: flex-start;
	margin-left: 0%;
	display: flex;
	width:100%;
	gap:3%;
}
.hero-section3-left{
	width:60%;
}
.hero-section3-right{
	width:40%;
}
/* Media query for responsiveness */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    align-items: center;
  }
  .footer-column {
    margin-bottom: 20px;
    text-align: center;
  }
}
@media screen and (max-width:500px){
	
	.hero-section2-right img{
		width: 100%;
		height: 50%;
	}
	.image-container{
		width:100%;
		height:auto;
	}
	.container img {
		width: 15%;
		height: auto
	}
	.scroll-container{
		width: 100%;
		height: auto;
	}
	.container1,
	.product {
		width: 100%;
		height:auto;
	}
	.navlogo{
		width:100%;
		height: auto;
	}
	.responsive{
		padding:0px 20px;	
	}
	.product{
		width:auto;
	height:auto;
	}
	.scroll-container{
		width:100%;
		height: auto;
	}
	.row,
	.banner{
		width: 100%;
		height:auto;
	}
	.navlogo{
		width:100%;
		height:auto;
}
}