@charset "utf-8";
/* CSS Document */
html {
	scroll-behavior: smooth;
	overflow-x: hidden; 
}

* {
	padding: 0;
	margin: 0;
}

a {
	text-decoration: none;
}

#active {
	border-bottom: solid #781c29 2px;
	width: 30px;
}

/*
Colour Them
Red: #781C29
Orange: #DD723C
*/

.footer {
	width: 100%;
	height: 500px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#footer {
	position:relative;
	background-image: url("/IMG/FOOTER IMG/footer_bg.jpg");
	background-position: bottom;
	background-size: cover;
	border-top-left-radius: 27px;
	border-top-right-radius: 27px;
	box-shadow: 0 -1px 10px 0 rgba(61, 61, 61, 0.3);
}

.topfooter {
	width: 95%;
	height: 25%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.midfooter {
	width: 95%;
	height: 60%;
	border-top: solid #781C29 thin;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.botfooter {
	width: 60%;
	height: 15%;
	border-top: solid #781C29 thin;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	text-align: center;
}


.footlogo {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width:18%;
	height: 60px;
	border-right: solid #DD723C thin;
}

.vlogo {
	width: 50px;
	transition: all 0.4s ease;
}

.vlogo:hover {
	transform: scale(1.15);
	transition: all 0.4s ease;
}

.newsletter {
	width: 77%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding-left: 50px;
	gap: 30px;
}


h4 {
	font-family: Quattrocento Sans;
	font-size: 16px;
	font-weight: normal;
	color: #3d3d3d;
}

h3 {
	font-family: Quattrocento;
	font-size: 36px;
	font-weight: normal;
	color: #3d3d3d;
}

h2 {
	font-family: Quattrocento;
	font-size: 20px;
	font-weight: bold;
	color: #3d3d3d;
}

p {
	font-family: Quattrocento Sans;
	font-size: 20px;
	font-weight: normal;
	color: #3d3d3d;
}

.nform {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 20px;
}

.nlinput {
	padding: 15px;
	width: 100%;
	border-radius: 10px;
	border:none;
	background-color: rgba(61, 61, 61, 0.1);
	backdrop-filter: blur(4px);
	font-size: 18px;
	font-family: Quattrocento Sans;
	transition: all 0.4s ease;
}

.nlinput:focus{
	outline: none;
	background-color: rgba(61, 61, 61, 0.3);
	color: #000;
	transition: all 0.4s ease;
}


.nlsubmit {
	padding: 15px;
	width: 200px;
	border:none;
	border-radius: 10px;
	background-color: rgba(61, 61, 61, 1);
	color: #FFF;
	font-family: Quattrocento Sans;
	font-size: 18px;
	transition: all 0.4s ease;
}

.nlsubmit:hover {
	background-color:#781C29;
	transition: all 0.4s ease;
}

.linksbrands {
	display: flex;
	flex-direction: row;
	width: 60%;
}

.quicklinks {
	width: 30%;
	height: 80%;
	border-right: solid #DD723C thin;
	display: flex;
	flex-direction: column;
	gap: 15px;
	margin-left: 100px;
}

.quicklinks a, .quickbrands a {
	font-family: Quattrocento Sans;
	font-size: 20px;
	font-weight: normal;
	color: #3d3d3d;
	transition: all 0.4s ease;
}

.quicklinks a:hover, .quickbrands a:hover{
	color: #DD723C;
	transition: all 0.4s ease;
}

.quickbrands {
	width: 70%;
	height: 80%;
	border-right: solid #DD723C thin;
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}


.brandscont {
	display: flex;
	flex-direction: row;
}

.brandsrow1, .brandsrow2 {
	display: flex;
	flex-direction: column;
	width: 50%;
	gap: 15px;
}

.quickcontacts {
	width: 40%;
	height: 80%;
	border-right: solid #DD723C thin;
	padding-left: 40px;
	padding-right: 40px;
	padding-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.quicksocials {
	width: 10%;
	height: 100%;
	padding-left: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 30px;
}

.quicksocials img{
	width: 50px;
}

a.w {
	position: absolute;
	z-index: 1000;
	transition: all 0.4s ease;
}

a.w:hover {
	opacity: 0;
	transition: all 0.4s ease;
}

a.whover {
	position: relative;
}

a.f {
	position: absolute;
	z-index: 1000;
	transition: all 0.4s ease;
}

a.f:hover {
	opacity: 0;
	transition: all 0.4s ease;
}

a.fhover {
	position: relative;
}

a.i {
	position: absolute;
	z-index: 1000;
	transition: all 0.4s ease;
}

a.i:hover {
	opacity: 0;
	transition: all 0.4s ease;
}

a.ihover {
	position: relative;
}

.footborder {
	border-top: solid #781C29 thin;
	width: 50px;
}

/* Newsletter Feedback Overlay ---------------------------------------------------------------*/

    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      display: none;
      z-index: 2000;
    }
    .overlay.open { display: block; }

    .modal {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      padding: 1.5rem;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      max-width: 90%;
      width: 300px;
      display: none;
      z-index: 3000;
    }
    .modal.open { display: block; }

    .modal .close {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      font-size: 1.2rem;
      cursor: pointer;
    }

    .modal p { 
		margin: 0;
		font-family: Quattrocento Sans;
		font-size: 1rem; 
		text-align: center;
		color: rgba(61,61,61,1); 
	}


/* Media Mobile------------------------------------------------------------------------------*/

@media (max-width: 1290px) {
	.footer {
		height: auto;
	}
	
	.footlogo {
		border-right: none;
		border-bottom: solid thin #DD723C;
		width: 80%;
		padding-bottom: 30px;
		margin: 30px;
	}
	
	.topfooter {
		display: flex;
		flex-direction: column;
	}
	
	
	.newsletter {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 10px;
		width: 90%;
		padding: 0;
	}
	
	.nltitle {
		text-align: center;
	}
	
	.nform {
		padding-bottom: 30px;
	}
	
	.midfooter {
		width: 80%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.linksbrands {
		width: 100%;
		margin: 30px 0;
		display: flex;
		justify-content: space-around;
		align-items: flex-start;
		padding: 0;
	}
	
	.quicklinks {
		width: 40%;
		border-right: none;
		display: flex;
		flex-direction: column;
		gap: 15px;
		margin: 0;
	}

	.quickbrands {
		width: 40%;
		padding-left: 40px;
		padding-bottom: 0;
		display: flex;
		flex-direction: column;
		gap: 15px;
		border-left: solid #DD723C thin;
		border-right: none;
	}

	.brandscont {
		display: flex;
		flex-direction: column;
	}

	.brandsrow1, .brandsrow2 {
		width: 100%;
	}	
	
	.brandsrow2 {
		margin-top: 15px;
	}
	
	.quickcontacts {
		width: 100%;
		border-top: solid #781C29 thin;
		border-right: none;
		display: flex;
		flex-direction: column;
		gap: 15px;
		padding: 30px 0 50px;
	}

	.quicksocials {
		width: 90%;
		display: flex;
		padding: 0;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 40px;
	}

	.quicksocials img {
		width: 60px;
		padding: 0;
	}
	
	
	.botfooter {
		width: 80%;
		border-top: solid #781C29 thin;
		margin-top: 30px;
		padding: 40px 0 40px 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
}