@charset "UTF-8";

/* Nissan Brand Fonts */
@font-face {
    font-family: 'Nissan';
    src: url('../font/NissanBrand-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Nissan';
    src: url('../font/NissanBrand-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Nissan';
    src: url('../font/NissanBrand-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Global Styles */
body {
    font-family: 'Nissan', sans-serif;
    font-weight: normal;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-image: url('../img/bg.webp');  
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

/* Font Styles */
.light {
    font-family: 'Nissan', sans-serif;
    font-weight: 300;
}

.bold {
    font-family: 'Nissan', sans-serif;
    font-weight: bold;
}

.hero-section {
    position: relative;
    width: 100%;
    height: 50vh; /* Default height */
    min-height: 300px;
    background-image: url(../img/hero-cars.webp);
    background-size: cover; /* Ensure the image covers the entire section */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Optional: Adds a dark overlay for better readability */
    z-index: -1; /* Ensures the overlay stays behind the content */
}

/* Media Queries for different screen sizes */
@media (max-width: 575.98px) {
    .hero-section {
        height: 70vh;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section {
        height: 60vh;
    }
}

@media (min-width: 768px) and (max-width: 1919.98px) {
    .hero-section {
        height: 60vh;
    }
	.gradient-bar h1 {
        font-size: 1rem;
    }
}

@media (min-width: 1920px) and (max-width: 2879.98px) {
    .hero-section {
        height: 66vh;
        background-size: cover; /* Maintain aspect ratio */
        background-position: center top;
    }
}

@media (min-width: 2880px) and (min-resolution: 192dpi) {
    .hero-section {
        height: 90vh; /* Further increase height for extremely large screens */
        background-size: cover; /* Maintain aspect ratio */
        background-position: center top;
    }
	.gradient-bar h1 {
        font-size: 1rem;
    }
}



/*
@media (min-width: 1920px) {
	.hero-section {
		position: relative;
		width: 100%;
		height: 66vh; 
		background-image: url('../img/hero-cars.webp');
		background-size: cover; 
		background-position: center top;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
*/

.navbar-brand img {
	width:100px;
	height:auto;
}

/* Gradient Bar */
.gradient-bar {
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    background: linear-gradient(to bottom, #c50030, #ac022a, #890021);
    color: white;
    padding: 15px 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    z-index: 2;
}

.gradient-bar h1 {
    font-size: 2rem;
}

/* Hero Section Content */
.hero-content {
    text-align: center;
    color: white;
    z-index: 3;
}

.hero-content h1 {
    font-size: 3rem;
}

.hero-content p {
    font-size: 1.2rem;
}

/* Mobile Hero Section */
@media (max-width: 767.98px) {
    .hero-mobile {
        width: 100%;
        min-height: 47vh; /* Adjust this based on your design needs */
        background-image: url('../img/hero-cars-mobile.webp');
        background-size: cover; /* Ensures the image covers the area without distortion */
        background-position: center top; /* Centers the image */
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        color: white;
        text-align: center;
        padding: 0;
        margin: 0;
    }
}


.content-font-smaller-container {
    padding-left: 100px;
    padding-right: 100px;
}

.content-font-smaller {
    font-size: 1.5rem;
    font-family: 'Nissan', sans-serif;
    font-weight: 300;
	line-height:1.2;
}

.content-font {
    font-size: 1.5rem;
    font-family: 'Nissan', sans-serif;
    font-weight: 300;
    line-height: 1.1;
}

/* Footer */
.footer {
    background-color: #1e1e1e; /* Grey background color */
    width: 100%; /* Full width */
    color: white; /* White text color */
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar, .navbar-toggler {
    z-index: 10; /* Higher z-index */
    position: relative; /* Ensure the z-index works */
}

/* Responsive Styles */
@media (min-width: 768px) {
    .hero-mobile {
        display: none; /* Hide mobile hero on desktop */
    }

	.french-content-mobile {
		display:none;
	}
}

@media (max-width: 767px) {
    .hero-section {
        display: none; /* Hide desktop hero */
    }
	.gradient-bar {
		top:89px;
		padding-top:5px;
		padding-bottom:0px;
	}

	.gradient-bar h1 {
		font-size:1.4rem;
	}
    
	.navbar-brand img {
		width:75px;
		height:auto;
	}

	.french-content-desktop {
		display:none;
	}

	.french-content-mobile {
		display:block;
	}

    .hero-mobile {
        display: flex; /* Show mobile hero */
    }

    .gradient-bar .contest {
        display: block;
        margin-bottom: 5px;
    }

    .content-font-smaller-container {
        padding-left: 40px;
        padding-right: 40px;
    }

    
	.content-font {
		font-size: 1.5rem;
		font-family: 'Nissan', sans-serif;
		font-weight: 300;
		line-height: 1.1;
	}
	.content-font-smaller {
		font-size: 1.5rem;
		font-family: 'Nissan', sans-serif;
		font-weight: 300;
	}
}

/* Content Section */
.container {
    flex-grow: 1;
    padding: 20px;
}

/* Full Width Gradient Navigation */
.top-nav {
  width: 100%;
  background: linear-gradient(to right, #870020, #b9002c, #870020); /* Red gradient */
}

.navbar-nav .nav-link {
	color: #1e1e1e !important; /* Highlight color for active links */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.navbar-brand {
  color: white !important;
  font-weight: bold;
}

.navbar-toggler {
	border:0px;
}

.navbar-light .navbar-nav .nav-link.active {
  color: #ffffff !important; /* Highlight color for active links */
}

.navbar-toggler-icon {
	color:#ffffff;

}

.navbar-toggler-icon {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


/* Container for the additional section below the hero */
.expanded-container {
    margin: 0 auto; /* Center the container horizontally */
    padding: 20px;
}

/* Styling for the content inside the expanded container */
.expanded-content {
    font-size: 1rem; /* Adjust font size as needed */
    font-family: 'Nissan', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: white; /* Text color */
}

/* Ensure mobile responsiveness for the expanded content */
@media (max-width: 767px) {
    .expanded-container {
        width: 95%; /* Make it even wider on small screens */
    }

    .expanded-content {
        font-size: 0.9rem; /* Adjust font size for smaller screens */
    }
}

.footer-link {
    color: #ffffff;
}

.nissan-list {
    list-style-type: disc; /* Ensures solid bullet points */
}

.nissan-list li::marker {
    font-size: 1.2em; /* Adjust size if needed */
    color: black; /* Change color if desired */
}