/* Navbar Custom Styles */
body {
    background-color: #000000;
}

/* Black background for navbar */
.navbar.bg-light {
    background-color: #000000 !important;
}

/* White text with bold weight for brand and links */
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: #FFFFFF !important;
    font-weight: bold;  /* Makes the text thicker */
}

/* Nice red text for hover and active effects on links with a gradual transition */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link.active {
    color: #8B0000 !important;
    transition: color 0.3s;  /* Gradual color change on hover */
}

/* Light grey toggler icon */
.navbar-light .navbar-toggler-icon {
    background-color: #EDEDED !important;
}

/* Footer Custom Styles */

footer .logo-container {
    text-align: center;
    margin-bottom: 20px; /* Adjust this value for spacing below the logo */
}

/* Black background for footer with a red top border */
footer.bg-light {
    background-color: #000000 !important;
    border-top: 1px solid #8B0000;
}

/* White and bold text for footer content */
footer .container h5,
footer .container p,
footer .container a,
footer .container h6 {  /* Add the h6 tag here */
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

footer .container h5 {
    color: #125cfc;
}

/* Red color for hover effects on footer links with a smooth transition */
footer .container a:hover {
    color: #8B0000 !important;
    text-decoration: none !important;
    transition: color 0.3s ease;
}

/* Increase spacing between social media links */
footer .container a {
    margin-right: 20px !important;
}

/* Adjust footer title (h5) for better visibility if needed */
footer .container h5, footer .container h6 {  /* Adjust for h6 as well */
    padding: 5px 10px;
    margin-bottom: 15px;
}

/* Adjust footer titles (h5 and h6) for better visibility */
footer .container h5, footer .container h6 {
    padding: 5px 0;  /* Set horizontal padding to 0 */
    margin-bottom: 15px;  /* Remove margin-bottom to allow control through the content below */
}

/* Adjust space for quick links list */
footer .container ul.list-unstyled {
    margin-top: 5px;  /* Adjust this value to control the space between the title and the first list item */
}

/* Additional adjustments if needed */
footer .container ul.list-unstyled li {
    list-style-type: none; /* Removes bullet points */
    text-align: center;
}

footer .social-logos {   
    display: flex;
    align-items: center; /* vertically aligns the child element in the middle */
    justify-content: center; /* horizontally aligns the child element in the middle */
}

footer a.logo-center {
    margin-right: 0px !important;
    padding: 10px;
}

.navbar.bg-light {
    background-color: #000000 !important;
    padding: 15px 0 !important;  /* Increased vertical padding to make the navbar taller */
}

/* White text with increased size and bold weight for brand and links */
.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link {
    color: #FFFFFF !important;
    font-weight: bold; 
    font-size: 1.2rem;  /* Adjust this value to control the size of the text */
}

.navbar-light .navbar-nav .nav-link {
    margin-left: 20px !important; /* Adjust as necessary */
    margin-right: 20px !important; /* Adjust as necessary */
    /* ... other styles ... */
}



/* Contact Form Custom Styles */

/* Black background for the contact section container */
.container.mt-5 {
    background-color: #000000;
    padding: 20px 15px;
    border-radius: 10px;  /* Rounded corners */
}

/* White and bold text for headings */
.container.mt-5 h2 {
    color: #FFFFFF;
    font-weight: bold;
}

/* White and bold text for contact details */
.container.mt-5 p {
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 20px;
}

/* Style the labels with white text and increased spacing */
.container.mt-5 .form-group label {
    color: #FFFFFF;
    font-weight: bold;
    margin-bottom: 10px;
}

/* Add some spacing to form groups for better readability */
.container.mt-5 .form-group {
    margin-bottom: 20px;
}

/* Style the input fields with black background and white text */
.container.mt-5 .form-control {
    background-color: #2b2b2b;  /* Slightly lighter black to differentiate */
    color: #FFFFFF;
    border: 2px solid #FFFFFF;  /* White border for the inputs */
}

/* Change the border color when input fields are focused */
.container.mt-5 .form-control:focus {
    border-color: #8B0000;  /* Use the red from the navbar for focus */
    box-shadow: none;  /* Remove default browser outline */
}

/* Style the submit button */
.container.mt-5 .btn.btn-primary {
    background-color: #8B0000;
    border: none;
}

.container.mt-5 .btn.btn-primary:hover {
    background-color: #5a0000;  /* Darken the red a bit on hover */
}

/* Style the feedback messages */
.container.mt-5 p {
    color: #8B0000;  /* Error message in the red */
}

.container.mt-5 p.success {
    color: #00aa00;  /* Success message in green */
}

.homepage-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000000;  /* Black background for contrast */
    height: 100vh;  /* Full screen height */
}

.content {
    flex: 2;  /* This will take 2/3 of the available width */
    padding: 20px;
    color: #FFFFFF;  /* Default text color: white */
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.highlight-text {
    font-size: 3rem;  /* Adjust this size as per your requirement */
    color: #8B0000;  /* The red you've been using */
    margin-bottom: 20px;  /* Spacing between the highlight and details */
}

.details {
    font-size: 1.2rem;  /* Smaller than the highlight text */
}

.homepage-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #000;
    height: 100vh;
    color: #fff;
}

.homepage-text-content {
    flex: 2;
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    height: 100%;
    padding: 2% 5% 0% 5%;
}

.homepage-text-content h1 {
    font-size: 5rem;
    color: #FF4500;
    font-weight: bold;
    font-family: 'Carter One', cursive;
}

.homepage-text-content p {
    font-size: 1.2rem;
    font-weight: bold;
}

.homepage-image {
    height: 100%;
    flex: 2;
    background: radial-gradient(circle at center, transparent, #000),
    url('images/dirtbike.jpg') no-repeat center/cover;
    margin-right: 1%;
}
.card-img-top {
    width: 100%;
    height: auto;
}

.dynamic-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 80vh;
    font-family: Arial, sans-serif;
}

.question-input {
    width: 70%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.question-input label {
    font-size: 15px;
    color: white;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.question-input select {
    width: 100%;
    padding: 10px;
    font-size: 18px;
}

.form-navigation {
    display: flex;
    gap: 20px;
    margin-top: 15px;

}

.form-navigation button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: background-color 0.3s ease;
}

.form-navigation button:hover {
    background-color: #555;
}

/* Specific style for the Next Step button */
.form-navigation button:last-child {
    background-color: red;
    color: white;
}
  
/* styles.css or your stylesheet file */
.step-content {
    display: flex;
    flex-wrap: wrap;
    gap: 16px; /* Adjust as needed */
    justify-content: space-between;
    align-items: center;
}

.step-content > div {   /* Assuming each QuestionInput is rendered as a <div> */
    flex: 1 1 40%;  /* This gives a bit of space between columns */
    margin-bottom: 16px;  /* A bit of space between rows */
}

.step-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 16px;
    color: #125cfc;
    text-align: center;
    font-family: 'Carter One', cursive;
}

.step-wrapper {
    /* Reset or adjust styles here */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 10%;
    /* Any other styles to correct the layout */
}

.btn-home {
    align-self: center;
    width: 35%;
    background-color: #125cfc;
    color: white;
    border-radius: 7px;
    height: 3.1rem;
    display: flex;
    align-items: center;  /* Vertically aligns the content */
    justify-content: center;  /* Horizontally aligns the content */
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

.btn-home:hover {
    background-color: #0f4dd3;
}

.step-title-2 {
    font-size: 20px;
    color: #FF4500;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
}

.big-box input {
    width: 100%;
    height: 80px;
}

.form-summary {
    padding: 20px;
    border-radius: 5px;
    max-width: 100%;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
} 

.form-summary table {
    width: 100%;
}

.form-summary th, .form-summary td {
    border: 1px solid #888;
    padding: 10px;
    border-radius: 5px;
}

.form-summary th {
    color: red;
    background-color: #111; /* Darker background for the header */
    font-weight: 900;
}

.form-summary td:first-child {
    color: #125cfc;
    font-weight: bold;
    background-color: #333; /* Slightly lighter than the header */
}

.form-summary td:not(:first-child) {
    color: white;
    font-weight: bold;
    background-color: #333; /* Slightly lighter than the header */
}

.form-summary img {
    max-width: 100px;
    height: auto;
    margin-right: 10px;
    border-radius: 5px;
}

.dashed-list {
    text-indent: -1em;
    padding-left: 1.5em;  /* Adjusted to provide a bit more space for the dash */
    display: block;
}

.dashed-list::before {
    content: "-";
    margin-right: 0.5em;  /* Adds some spacing between the dash and the content */
}

td.step-divider:first-child {
    background-color: #222; /* Choose your desired background color for the step divider */
    text-align: center;
    font-weight: bold;
    color: red; /* Choose your desired text color for the step divider */
    padding: 10px 0; /* Adds some padding for visual separation */
    border-top: 2px solid #444; /* Adds a border on top for more visual separation */
}

.image-container {
    height: 100%;
    flex: 2;
    background: radial-gradient(circle at center, transparent, #000),
    url('images/dirtbike.jpg') no-repeat center/cover;
    margin-right: 1%;
}

#price-display {
    background-color: red;
    color: white;
    font-weight: bold;
    font-size: 1.1rem;
    padding: 10px;
    min-width: 100vw;
    text-align: center;
    margin-bottom: 10px;
}

.customize-header {
    font-size: 6rem !important;
}

button, input, optgroup, select, textarea {
    font-family: system-ui;
    font-weight: 500;
}

.custom-carousel {
    width: 100%; /* Carousel takes up the full width of its parent */
    overflow: hidden; /* Hide the overflowed images */
    height: 100%;
    flex: 2;
    margin-right: 5%;
    display: flex;
}

.carousel-slides {
    display: flex; /* Line up the slides in a row */
    transition: transform 0.5s ease; /* Smooth transition for sliding effect */
    will-change: transform; /* Optimizes the transition */
    max-height: 100%;
}

.slide {
    min-width: 100%; /* Each slide is as wide as the carousel */
    max-width: 100%; /* Ensure the slide doesn't exceed the container's width */
    flex: 0 0 100%; /* Prevent flex items from growing or shrinking */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide img {
    width: 100%; /* Images take up the full width of the slide */
    height: auto; /* Height is auto to maintain aspect ratio */
    display: block; /* Display block to remove bottom space under the image */
    object-fit: contain; /* Ensures the image fits within the slide without being cropped */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Example shadow, adjust as needed */
    border: 3px solid #fff; /* White border, can be changed to match your design */
    padding: 8px; /* Space around the image */
    border-radius: 10px; /* Rounded corners */
    box-sizing: border-box; /* Includes padding in the width and height of the element */
    max-height: 100%;
}

.media-placeholder {
    width: 100%;
    padding-top: 56.25%; /* Default to a 16:9 aspect ratio */
    background-color: #e0e0e0; /* Placeholder color */
    position: relative;
}

.media-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* This ensures the full media is visible */
}

/* Set a minimum height for the media card */
/* Style for the card that will contain images and videos */
.card {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    width: 100%; /* Full width for responsive design */
    /* Remove min-height if you're setting a padding-top for aspect ratio */
}

/* Style for images to cover the area of the card */
.card-img-top {
    width: 100%;
    height: auto;
    object-fit: cover; /* Cover the area, potentially cropping the content */
}

/* Style specifically for videos to maintain their aspect ratio */
.card video {
    width: 100%; /* Full width of the card */
    height: auto; /* Height set to auto to maintain aspect ratio */
    object-fit: contain; /* Ensures the full video is visible */
}

/* Aspect ratio class for videos to maintain the correct aspect ratio */
.aspect-ratio-9-16 {
    position: relative;
    width: 100%; /* Full width for responsive design */
    padding-top: 177.77%; /* Aspect ratio padding for 9:16 videos */
    overflow: hidden;
}

/* Position the video absolutely within the padded container */
.aspect-ratio-9-16 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


@media (max-width: 1200px) and (min-width: 800px) and (max-height: 1400px) and (min-height: 1000px) {
    .homepage-container {
        flex-direction: column;
    }

    .custom-carousel {
        margin: 10px 20px;
    }
}


@media (max-width: 768px) {
    .homepage-image {
        display: none; /* Hide the image container */
    }

    .homepage-text-content {
        max-width: 100vw;
    }

    .form-summary {
        padding: 0;
    }

    .step-wrapper {
        padding: 0;
    }

    .step7-container {
        max-width: 100vw;
    }

    .color-label {
        font-size: 15px;
    }

    .color-option {
        padding: 0px;
    }

    .btn-home {
        font-size: 1rem;
        margin-top: 20px;
    }

    .customize-header {
        font-size: 3.5rem !important;
    }

    .your-bike-header {
        font-size: 3rem !important;
        margin-bottom: 30px !important;
    }

    .homepage-container {
        flex-direction: column;
        gap: 20px;
    }

    .custom-carousel {
        margin-left: 5%;
    }
}