/*
Theme Name: GoCar
Theme URL: https://templatesjungle.com/
Author: TemplatesJungle
Description: GoCar is a Free Bootstrap Website Template for Car Rental by TemplatesJungle.
Version: 1.0
*/

/*------------------------------------*\
    Table of Contents
\*------------------------------------*/
/*
1. Base Styles and Variables
2. Typography
3. Bootstrap Overrides
4. Navigation
5. Hero Section
6. Rental Section
7. Contact Form
8. Services Section
9. Testimonial Carousel
10. Footer
11. Announcements (Marquee)
12. Media Queries
*/

/*------------------------------------*\
    1. Base Styles and Variables
\*------------------------------------*/
:root {
  --accent-color: #D4A017;
  --dark-color: #2E1A46;
  --white-color: #FFFFFF;
  --body-text-color: #414141;
  --light-text-color: #686868;
  --link-color: #94CA21;
  --background-color: #141414;
  --body-font: 'Raleway', sans-serif;
  --heading-font: 'Kalam', Georgia, serif;
  --sub-heading-font: 'Raleway', sans-serif;
}

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

html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  color: var(--light-text-color);
}

/*------------------------------------*\
    2. Typography
\*------------------------------------*/
h1, .h1, h2, .h2, h3 {
  font-family: var(--heading-font);
  font-weight: 900;
  color: var(--dark-color);
}

h4, .h4, h5, .h5, h6, .h6 {
  font-family: var(--sub-heading-font);
  font-weight: 700;
  color: var(--body-text-color);
}

h1, .h1 {
  font-size: 2.5rem;
  text-transform: uppercase;
  margin: 0 0 15px;
}

h2, .h2 {
  font-size: 2rem;
  text-transform: uppercase;
}

h3, .h3 {
  font-size: 1.25rem;
  text-transform: capitalize;
}

p {
  font-family: var(--body-font);
  color: var(--light-text-color);
}

a {
  font-family: var(--body-font);
  color: var(--dark-color);
  text-decoration: none;
  transition: all 0.3s ease-out;
}

a:hover {
  color: var(--accent-color);
}

.text-primary {
  color: var(--accent-color) !important;
}

/*------------------------------------*\
    3. Bootstrap Overrides
\*------------------------------------*/
.btn-primary {
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--body-font);
  padding: 0.75rem 1.5rem;
  color: var(--white-color);
  background-color: var(--dark-color);
  border-color: var(--dark-color);
}

.btn-primary:hover,
.btn-primary:active {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

.btn-outline-primary {
  border: 2px solid #D4A017;
  color: var(--body-text-color);
}

.btn-outline-primary:hover,
.btn-outline-primary:active {
  color: #FFFFFF;
  background-color: #D4A017;
  border-color: #D4A017;
}

.btn-close {
  --bs-btn-close-focus-shadow: none;
}

/*------------------------------------*\
    4. Navigation
\*------------------------------------*/
nav.navbar {
  background: #300b42;
  z-index: 1000;
  position: fixed;
  top: 0;
  width: 100%;
  height: 120px;
}

.btn-outline-gold{
    color:#f1f1f1 ;
    border-color: #D4A017;
}
.btn-outline-gold:hover{
    color:#f1f1f1;
    background-color:#D4A017 ;
}

.btn-yellow:hover{
    color: #f1f1f1;
    background-color: #d49e178f;
}

.navbar-toggler {
    background-color: rgba(255,255,255,0.15);
}

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

.offcanvas.offcanvas-start {
  background-color: var(--dark-color);
  transform: translateX(-100%);
  transition: transform 0.4s ease-in-out;
}

.offcanvas.show.offcanvas-start {
  transform: translateX(0);
}

a.nav-link {
  color: var(--white-color);
  font-size: 1rem;
  font-family: var(--body-font);
  text-transform: capitalize;
}

a.nav-link::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width 0.3s;
}

a.nav-link.active::after,
a.nav-link:hover::after {
  width: 100%;
}

.sa-notif-bell {
    font-size: 1.4rem;
    text-decoration: none;
}
.sa-notif-bell:hover {
    opacity: 0.8;
}

/*------------------------------------*\
    5. Hero Section
\*------------------------------------*/
section#hero {
  background: var(--accent-color);
  padding: 120px 0 60px;
  position: relative;
  overflow: hidden;
}

.hero-content, .hero-contents {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}

.hero-content h1, .hero-contents h1 {
  color: var(--white-color);
  font-size: 2.5rem;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 20px;
}

.hero-content h1 span, .hero-contents h1 span {
  color: var(--dark-color);
  display: block;
}

.hero-paragraph, .hero-paragraphs {
  color: var(--white-color);
  font-family: var(--heading-font);
  font-size: 1.25rem;
  text-align: center;
  max-width: 800px;
  margin: 0 auto 30px;
}

/*.car-image {
  background: no-repeat center/contain;
  width: 100%;
  max-width: 600px;
  height: 400px;
  margin: 20px auto 0;
}*/

.pattern-overlay {
  display: none;
}

.main-banner {
    position: relative;
    padding: 50px 0;
    background-color: #f5f5f5;
    text-align: center;
}

.main-banner .container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.main-banner .text-white {
    background-color: #3b0642;
    color: #fff;
    padding: 10px 0;
}



.main-banner .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.main-banner .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 15px;
}

.main-banner h2 {
    font-size: 2.5rem;
    color: #fff;
    text-align: left;
    margin: 0;
    line-height: 1.2;
}

.main-banner .car-image {
    background: no-repeat center/contain;
    width: 100%;
    max-width: 600px;
    height: 400px;
}

.main-banner .btn-primary {
    background-color: #3b0642;
    color: #fff;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
}

/*------------------------------------*\
    6. Rental Section
\*------------------------------------*/
#rental {
  padding: 40px 0;
}

#rental .container {
  padding: 0 15px;
}

#rental h2 {
  margin-bottom: 20px;
}

.card {
  background-color: #F5F5F0;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  margin: 15px; /* Espacement uniforme */
  padding: 10px;

}

.card:hover {
  transform: scale(1.05);
}

.card-img-top {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  max-height: 250px;
  border-radius: 10px;
  padding: 10px;
  background-color: #F5F5F0;
}

.card-body {
  padding: 15px;
}

.card-title {
  color: var(--dark-color);
  font-size: 1.375rem;
  margin-bottom: 10px;
}

.rental-list {
  color: var(--light-text-color);
  font-size: 0.875rem;
}

.rental-price {
  font-size: 1rem;
  color: var(--light-text-color);
}

.card-price-container {
  max-width: 60%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*------------------------------------*\
    7. Contact Form
\*------------------------------------*/

.forme-group {
  margin: 15px;
}

.forme-group label {
  font-weight: bold;
  color: var(--dark-color);
   margin-left: 25%;
}

.forme-group input,
.forme-group textarea {
  width: 50%;
  margin-left: 25%;
  padding: 8px;
  border: 1px solid #11100d;
  border-radius: 5px;
  font-size: 0.875rem;
  background-color: var(--white-color);
}

.forme-group textarea {
  resize: vertical;
}

.bn {
  background-color: var(--accent-color);
  color: var(--dark-color);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  width: 50%;
   margin-left: 25%;
}

.bn:hover {
  background-color: #B8860B;
}

/*------------------------------------*\
    8. Services Section
\*------------------------------------*/
.service-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 30px;
  background-color: #F5F5F0;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.service-container h2 {
  text-align: center;
  color: var(--accent-color);
  font-size: 1.75rem;
  text-transform: uppercase;
}

.service-description {
  color: var(--dark-color);
  font-size: 1rem;
  text-align: justify;
}

.offer-section {
  background-color: var(--white-color);
  padding: 20px;
  border-left: 5px solid var(--accent-color);
  border-radius: 10px;
}

.offer-section h3 {
  color: var(--dark-color);
  font-size: 1.25rem;
}

.offer-list {
  list-style-type: none;
  padding-left: 0;
}

.offer-list li {
  color: var(--dark-color);
  font-size: 0.9375rem;
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.offer-list li:before {
  content: "✓";
  color: var(--accent-color);
  position: absolute;
  left: 0;
  font-weight: bold;
}

/*------------------------------------*\
    9. Testimonial Carousel
\*------------------------------------*/
#testimonialCarousel {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.blockquote {
  font-size: 1.25rem;
  color: var(--dark-color);
}

.blockquote-footer {
  color: var(--light-text-color);
  font-size: 1rem;
}

.carousel-control-prev,
.carousel-control-next {
  width: 5%;
  background: none;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--dark-color);
  border-radius: 50%;
  padding: 10px;
}

/*------------------------------------*\
    10. Footer
\*------------------------------------*/
#footer {
  background: #2E1A46;
  color: var(--white-color);
  padding: 40px 0;
}

.footer-container {
  width: 1200px;
  margin: 0 auto;
}

.footer-container p {
  color: var(--white-color);
  font-size: 0.9375rem;
}

.social-link-icon {
  font-size: 1.5rem;
  color: var(--white-color);
  margin-right: 15px;
}

.social-link-icon:hover {
  color: var(--accent-color);
}

.website-link {
  color: var(--accent-color);
  font-weight: bold;
}

/*------------------------------------*\
    11. Announcements (Marquee)
\*------------------------------------*/
.marquee-text {
    color: var(--white-color);
    margin-top: 30px;              /* éviter les marges verticales bizarres */
    padding: 8px 0;
    background-color: black;
    font-size: 0.95rem;     /* un peu plus fin sur mobile si tu veux */
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    padding-left: 100%;
    animation: marquee-scroll 15s linear infinite;
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}


/* Optionnel : arrêter au survol */
.marquee-text:hover .marquee-content {
    animation-play-state: paused;
}

/*------------------------------------*\
    12. Media Queries
\*------------------------------------*/
@media (max-width: 992px) {
  .hero-content h1, .hero-contents h1 {
    font-size: 2rem;
  }
  .hero-paragraph, .hero-paragraphs {
    font-size: 1.125rem;
  }
  nav.navbar {
    height: 120px;
  }
  section#hero {
    padding-top: 100px;
  }
  .card {
    margin: 10px;
  }
}

@media (max-width: 768px) {
  .hero-content h1, .hero-contents h1 {
    font-size: 1.75rem;
  }
  .hero-paragraph, .hero-paragraphs {
    font-size: 1rem;
  }
  nav.navbar {
    height: 120px;
  }
  section#hero {
    padding-top: 90px;
  }

  .card {
    margin: 10px;
    padding: 8px;
  }
  .card-img-top {
    max-height: 200px;
    padding: 5px;
  }
  .card-title {
    font-size: 1.125rem;
  }
  .rental-list {
    font-size: 0.75rem;
  }
  .service-container {
    margin: 20px;
    padding: 15px;
  }
  .service-container h2 {
    font-size: 1.5rem;
  }
  .service-description {
    font-size: 0.875rem;
  }

}

@media (max-width: 480px) {
  .hero-content h1, .hero-contents h1 {
    font-size: 1.5rem;
  }
  .hero-paragraph, .hero-paragraphs {
    font-size: 0.875rem;
  }
  nav.navbar {
    height: 100px;
  }
  section#hero {
    padding-top: 80px;
  }
  .card-img-top {
    max-height: 180px;
    padding: 2px;
  }
  .card-title {
    font-size: 1rem;
  }
  .btn-primary {
    font-size: 0.875rem;
    padding: 8px 15px;
  }
  .footer-container{
    background: #B8860B;
  }
}

@media (max-width: 768px) {
   .main-banner .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        text-align: center; /* Centre le texte pour une meilleure apparence */
    }

    /* Masquer la colonne contenant l'image sur tablette et téléphone */
    .main-banner .col-md-6:nth-child(2) {
        display: none; /* Masque la deuxième colonne .col-md-6 qui contient .car-image */
    }

    .main-banner h2 {
        font-size: 1.8rem;
        text-align: center; /* Centre le texte sur tablette */
    }

    .main-banner .btn-primary {
        font-size: 0.9rem; /* Réduit légèrement la taille du bouton */
        padding: 8px 16px;
    }
}

@media (max-width: 480px) {
   .main-banner h2 {
        font-size: 1.5rem;
        text-align: center;
    }

    .main-banner .btn-primary {
        font-size: 0.8rem; /* Bouton plus petit pour téléphone */
        padding: 6px 12px;
    }

  
}

/*Footer-new*/
.icon {
      font-size: 20px;
      color: #D4A017; }
        .footer-dark {
  padding:50px 0;
  color:#f0f9ff;
  background-color:#300b42;
}

.footer-dark h3 {
  margin-top:0;
  margin-bottom:12px;
  font-weight:bold;
  font-size:16px;
}

.footer-dark ul {
  padding:0;
  list-style:none;
  line-height:1.6;
  font-size:14px;
  margin-bottom:0;
}

.footer-dark ul a {
  color:inherit;
  text-decoration:none;
  opacity:0.6;
}

.footer-dark ul a:hover {
  opacity:0.8;
}

@media (max-width:767px) {
  .footer-dark .item:not(.social) {
    text-align:center;
    padding-bottom:20px;
  }
}

.footer-dark .item.text {
  margin-bottom:36px;
}

@media (max-width:767px) {
  .footer-dark .item.text {
    margin-bottom:0;
  }
}

.footer-dark .item.text p {
  opacity:0.6;
  margin-bottom:0;
}

.footer-dark .item.social {
  text-align:center;
}

@media (max-width:991px) {
  .footer-dark .item.social {
    text-align:center;
    margin-top:20px;
  }
}

.footer-dark .item.social > a {
  font-size:20px;
  width:36px;
  height:36px;
  line-height:36px;
  display:inline-block;
  text-align:center;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(255,255,255,0.4);
  margin:0 8px;
  color:#fff;
  opacity:0.75;
}

.footer-dark .item.social > a:hover {
  opacity:0.9;
}

.footer-dark .copyright {
  text-align:center;
  padding-top:24px;
  opacity:0.3;
  font-size:13px;
  margin-bottom:0;
}

/* Ajuster la taille du logo pour une meilleure réactivité */
.navbar-brand img {
  width: 80px;
  /*max-width: 100%;*/
  height: auto;
}

/* Augmenter la taille de la police pour les champs de formulaire */
.forme-group input,
.forme-group textarea {
  width: 50%;
  margin-left: 25%;
  padding: 10px; /* Padding accru pour une meilleure zone de clic */
  border: 1px solid #11100d;
  border-radius: 5px;
  font-size: 1rem; /* Augmenté depuis 0.875rem */
  background-color: var(--white-color);
}

  .forme-group input,
  .forme-group textarea {
    width: 70%; /* Plus large sur petits écrans */
    margin-left: 15%; /* Ajustement pour centrer */
    font-size: 0.9rem; /* Toujours lisible mais réduit */
  }
  .bn {
    width: 70%;
    margin-left: 15%;
    font-size: 0.9rem;
  }