#logo img{


top:5px;
left:1px;
height:60px;
}

#footerLogo img{



width:230px;
height:auto;
}

h2 {
	color: #e30000;
	
}

h1 {
	color: #e30000;
	
}

p {
	color: #ffdd56;
	
}

li{
	color: #e30000;
}

@media (min-width: 1080px){
	nav ul{
display:flex;
gap:50px;
list-style:none;
}

nav a{
	
text-decoration:none;
font-size:25px;
font-weight:500;
}
	
}

#menuToggle{
	
	position:absolute;
	right:5px;
}



        
        .gradient-text {
            background: linear-gradient(90deg, #ffcc00 0%, #e30000 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            position: relative;
        }
        
        .gradient-text::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, #ffcc00 0%, #e30000 100%);
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.3s ease;
        }
        
        .gradient-text:hover::after {
            transform: scaleX(1);
        }
        
        
        
        .btn-glow {
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }
      
        .btn-glow::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(45deg, #ff5e5e, #ffcc00, #e30000);
            border-radius: inherit;
            z-index: -1;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .btn-glow:hover::before {
            opacity: 1;
            animation: glow 1.5s ease-in-out infinite alternate;
        }
        
        .btn-glow:hover {
            transform: translateY(-2px);
        }
        
      
      
        
        @media (max-width: 768px) {
            .mobile-fade {
                animation: fadeIn 0.5s ease-out;
            }
        }
		


header{
	
border-bottom:2px solid #e30000;

}

footer{
	
border-top:2px solid #e30000;

}

@media screen (min-width: 736px){
	
.service-item img{
	width: 40%;
	align-content: center;	
}

.service-item {
	display: flex;
	margin: 2%;
}

nav a{

text-decoration:none;
font-size:20px;

}
	
}

@media screen and (max-width: 680px){

nav a{

text-decoration:none;
font-size:20px;

}


	
}

	
nav ul{
display:flex;
gap:2px;
list-style:none;
}

nav a{
color:#e30000;
text-decoration:none;

font-weight:500;
}

.call-button{
background:#c40000;
color:red;
padding:8px 14px;
border-radius:4px;
font-weight:bold;
}

.hero-bg{
background-image: url("../images/hero.jpeg");
    
	background-size: cover;
    max-width:100%;
    background-repeat: no-repeat;
	/*overflow: hidden;*/
    /* This ensures the hero has enough height to show the image */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.service-bg{
background-image: url("../images/hero.jpeg");
    
	background-size: cover;
    /*overflow: hidden;*/
    background-repeat: no-repeat;
    /* This ensures the hero has enough height to show the image */
    
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.header-footer-bg{
background-image: url("../images/carbon fibre.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* This ensures the hero has enough height to show the image */
 
    display: flex;
    flex-direction: column;
    
}




.town-item img{
	width: 40%;
	align-content: center;	
}

#footerList ul {
	
}

#footerList li {
	display: inline;
	margin-right: 10px;
}

@media (max-width: 780px){
	

	
#footerList li {
	display: block;
	margin-right: 2px;
}
}

@media (max-width: 736px){
	

.item-wrapper {
	width: 100%;
	align-content: center;	
}

.service-item img{
	width: 90%;
	align-content: center;	
}

}