* {
  padding: 0;
  margin: 0;
  font-family: inter, sans-serif;
}

body {
  overflow-x: hidden;
}

.container {
  max-width: 1440px !important;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: hidden;
}

/* HEADER */
/* General header styles */
/* General header styles */
/* General header styles */
#header {
  position: fixed;
  top: 0;
  width: 100%;
  /* padding: 20px; */
  background-color: transparent;
  /* Initially transparent */
  transition: background-color 0.5s ease, top 0.5s ease;
  z-index: 1000;
}

#header.scrolled-up {
  background-color: rgba(0, 0, 0, 0.8);
  /* Background when scrolling up */
}

#header.hidden {
  top: -100px;
  /* Hide the header */
}

#header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header nav a {
  color: white;
  margin-left: 15px;
  text-decoration: none;
  font-size: 16px;
  font-family: "Body-Font";
}

.logo-wrapper {
  width: 100px;
  height: 100px;

  & img {
    width: 100%;
    height: 100%;
  }
}

/* MAIN */
main {




  .banner-section {
    height: 100vh;


    .banner-slider {
      position: relative;
    }

    .carousel-inner .carousel-item {
      height: 400px;
      /* Set a fixed height or adjust as needed */
    }

    .carousel-inner .carousel-item img {
      object-fit: cover;
      height: 100%;
    }

    .carousel-indicators {
      display: flex;
      justify-content: center;
      bottom: 20px;
      margin-top: 20px;
    }

    .carousel-indicators button {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      border: 2px solid #ddd;
      background-color: transparent;
      position: relative;
      margin: 0 5px;
      cursor: pointer;
    }

    .carousel-indicators .active {
      border-color: red;
    }

    .carousel-indicators .active::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 0;
      height: 100%;
      background-color: red;
      border-radius: 50%;
      animation: progress 3s linear forwards;
      /* Match the interval time */
    }

    @keyframes progress {
      0% {
        width: 0;
      }

      100% {
        width: 100%;
      }
    }









    .unique-banner-content {
      position: absolute;
      bottom: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 100%;
      line-height: 80px;

      & h2 {
        font-size: 36px;
        color: white;
      }

      & span {
        font-size: 16px;
        color: white;
      }
    }

  }


  .collection {
    .carousel-item {
      height: 100vh;
      /* Set a fixed height for videos */
      background-color: black;
      /* To give the slider a clean background */
    }

    .carousel-item video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* To center dots at the bottom */
    .carousel-indicators {
      bottom: 10px;
    }

    /* Style all carousel indicators */
    .carousel-indicators button {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: white;
      /* Default color of the dots */
      border: none;
      /* Remove default border */
      margin: 5px;
      transition: background-color 0.3s ease, transform 0.3s ease;
      /* Smooth transition */
    }

    /* Active dot (current slide) */
    .carousel-indicators .active {
      background-color: transparent;
      /* Make inside transparent */
      border: 2px solid red;
      /* Red border for active */
      width: 12px;
      /* Slightly larger */
      height: 12px;
      transform: scale(1.2);
      /* Slight scale effect */
    }

    /* video content animation */

    /* Initially hide the content-main-wrapper off-screen */

    .carousel-item video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* Ensures the video covers the entire area without distortion */
      z-index: 1;
      /* Place the video behind the content */
    }

    /* Style the content to be positioned on top of the video */
    .content-main-wrapper {
      position: relative;
      z-index: 2;
      color: white;
      /* Text color for visibility over the video */
      text-align: center;
      /* Center text for better presentation */
      padding: 20px;
      /* background-color: rgba(0, 0, 0, 0.5); */
      opacity: 2;
      transform: translateY(100px);
      transition: all 0.5s ease-in-out;
    }

    /* Show content when triggered */



    /* Keyframes for sliding the wrapper from the bottom */
    /* Keyframes for sliding the wrapper from the bottom */
    @keyframes slideUpFromBottom {
      0% {
        opacity: 0;
        transform: translateY(100%);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }





    /* Initially hide the content */
    .content-main-wrapper {
      opacity: 0;
      /* Start as hidden */
      transform: translateY(20px);
      /* Start slightly lower */
      transition: opacity 0.5s ease, transform 0.5s ease;
      /* Smooth transition */
      position: relative;
      z-index: 2;
      /* Ensure it appears above the overlay */
      top: 70%;
    }

    /* Show content with animation */
    .content-main-wrapper.show {
      opacity: 1;
      /* Fade in */
      transform: translateY(0);
      /* Move to original position */
    }

    /* Staggered animation for strong, h2, and span */
    .content-main-wrapper strong,
    .content-main-wrapper h2,
    .content-main-wrapper span {
      opacity: 0;
      /* Initially hidden */
      transition: opacity 0.5s ease, transform 0.5s ease;
      /* Transition for staggered effect */
    }

    .content-main-wrapper.show strong {
      opacity: 1;
      /* Fade in */
      transition-delay: 0s;
      /* No delay */
    }

    .content-main-wrapper.show h2 {
      opacity: 1;
      /* Fade in */
      transition-delay: 0.3s;
      /* Delayed by 0.3 seconds */
    }

    .content-main-wrapper.show span {
      opacity: 1;
      /* Fade in */
      transition-delay: 0.6s;
      /* Delayed by 0.6 seconds */
      line-height: 45px;
    }

    .carousel-item::before {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.65;
    }

    .carousel-for-video {
      & strong {
        font-size: 20px;
      }

      & h2 {
        font-size: 40px;
      }

      & span {
        font-size: 16px;
      }
    }

    .video-content-anchor {
      border: 1px solid white;
      padding: 10px 15px 10px 10px;
      border-radius: 50%;
      margin-left: 15px;
    }


  }

  .slide-images-section {
    .row {

      .col-no-1,
      .col-no-2,
      .col-no-3,
      .col-no-4,
      .col-no-5,
      .col-no-6 {
        background-position: center !important;
        background-repeat: no-repeat !important;
        height: calc(100vh - 100px);
        background-size: cover !important;

        .content-main-wrapper {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          position: absolute;
          bottom: 30px;
          width: 100%;
          left: 0;

          & strong {
            font-size: 20px;
            color: white;
          }

          & h2 {
            font-size: 40px;
            color: white;
          }

          & span {
            font-size: 16px;
            color: white;
          }

          .video-content-anchor {
            border: 1px solid white;
            padding: 10px 15px 10px 10px;
            border-radius: 50%;
            margin-left: 15px;
          }
        }
      }

      .col-no-1 {
        background-image: url('../images/carr3.jpg');
      }

      .col-no-2 {
        background-image: url('../images/ferrari_car2.jpg');
      }

      .col-no-3 {
        background-image: url('../images/carr2.jpg');
      }

      .col-no-4 {
        background-image: url('../images/carr5.jpg');
      }

      .col-no-5 {
        background-image: url('../images/ferrari_car3.jpg');
      }

      .col-no-6 {
        background-image: url('../images/car5.jpg');
      }
    }
  }

  .subscribe-button-section {
    background-color: #303030;
    padding: 100px 36px;

    .inner-wrapper {
      flex-direction: column;

      & h3 {
        font-size: 22px;
        color: white;
      }

      & strong {
        font-size: 15px;
        color: white;
      }

      & button {
        font-size: 14px;
        color: white;
        padding: 15px 100px;
        border: none;
        background: radial-gradient(ellipse at bottom, #ed786f, #da291c);

      }
    }
  }
}

footer {
  background-color: #181818;

  .container {
    max-width: 1180px !important;
    margin: 0 auto !important;

    .footer-section-1 {
      .main-inner-wrapper {
        align-items: center;
        margin: 30px 0;
        gap: 70px;

        & ul {
          flex-direction: column;
          line-height: 30px;

          /* justify-content: space-evenly; */
          & strong {
            font: 15px;
            color: white;

          }

          & li {
            font-size: 11px;
            color: white;
          }
        }
      }
    }

    .footer-section-2 {
      border-bottom: 1px solid gray;
      border-top: 1px solid gray;

      .text-wrapper {
        font-size: 10px;
      }
    }

    .footer-section-3 {
      .main-inner-wrapper {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        line-height: 13px;

        & span {
          font-size: 9px;
          color: #646464;
        }


      }
    }

  }

  .footer-section-4 {
    background-color: #303030;

    & ul {
      display: flex;
      flex-wrap: wrap;
      padding: 16px;

      & li {
        font-size: 9px;
        color: white;
        padding: 16px;
        flex-shrink: 0;
      }
    }

    .inter-div {
      flex-shrink: 0;
    }


  }

  .footer-last-line {
    padding: 10px 0 15px;

    .img-wrapper {
      width: 28px;
      height: 28px;
      /* padding: 10px 0 ; */
      margin: 0 auto;

      & img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.slide-images-section {
  .row {
    padding: 0 !important;
    margin: 0 !important;

    .col-6 {
      padding: 0 !important;
      margin: 0 !important;
    }
  }
}

/* body{
  background-color: #181818 !important;
} */
.third-section {
  .container {
    max-width: 1200px !important;
    margin: 0 auto;

    /* Custom styling for the slider */
    #autoSlider {
      height: 100vh;
      overflow: hidden;
    }

    .slider-content {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }

    .slider-image {
      max-width: 100%;
      height: auto;
    }

    /* Style for carousel control buttons */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      display: none;
    }

    .fa-chevron-left,
    .fa-chevron-right {
      font-size: 2rem;
      color: #333;
    }

    /* Custom style for indicators */
    .carousel-indicators [data-bs-target] {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background-color: #ccc;
    }

    .carousel-indicators .active {
      background-color: red;
    }

    .text-content-slide {
      .slider-heading {
        font-size: 26px;
        font-weight: bold;
        color: black;
      }

      .slider-paragraph {
        max-width: 80%;
        /* width: 100%; */
        color: black;
      }

      & i {
        padding: 7px 10px;
        margin-left: 15px;
        border: 1px solid black;
        border-radius: 50%;

      }
    }

    .third-section-img-col {
      height: 100% !important;
      max-height: 80vh !important;
      display: block !important;
      margin: auto !important;
      position: relative !important;
    }

    .main-inner-slider-row {
      padding: 32px;
    }

    .carousel-control-prev {
      left: -77px !important;
    }

    .carousel-control-next {
      right: -77PX !important;
    }

    .the-slider-wrap {
      padding: 0 0 0 30px;
    }

    .third-section-img-col {
      padding: 0 40px 0 0;
    }
  }
}

@media (max-width : 426px) {

  main {
    .banner-section {
      .unique-banner-content {
        line-height: 35px !important;

        & h2 {
          font-size: 24px !important;
        }

        .unique-bottom-line {
          & span {
            font-size: 12px !important;
          }
        }
      }
    }

    .collection {
      .carousel-for-video {
        & strong {
          font-size: 16px !important;
        }

        & h2 {
          font-size: 30px !important;
        }

        & span {
          font-size: 11px !important;
        }

        .video-content-anchor {
          /* border: 1px solid white; */
          padding: 6px 9px 6px 6px;
          border-radius: 50%;
          margin-left: 5px
        }
      }
    }




    .third-section {
      #autoSlider {
        height: 100% !important;
        overflow: hidden;
      }

      .main-inner-slider-row {
        flex-direction: column-reverse !important;
        gap: 20px;
        padding: 24px !important;
      }

      .slider-paragraph {
        max-width: 100% !important;
      }

      .unique-bottom-line {
        margin-bottom: 30px;

        & span {
          font-size: 12px !important;
        }
      }
    }
  }

  .slide-images-section {
    .row {

      .col-no-1,
      .col-no-2,
      .col-no-3,
      .col-no-4,
      .col-no-5,
      .col-no-6 {
        .content-main-wrapper {
          & strong {
            font-size: 11px !important;
            color: white;
          }
          & h2{
            font-size: 30px !important;
          }
        }
      }
    }
  }
}


@media (max-width : 977px) {
  .footer-section-1 {
    .main-inner-wrapper {
      align-items: center;
      margin: 30px 0;
      gap: 0px !important;
      flex-direction: column;
    }

    & ul {
      & li {
        display: none;
        padding: 0 25px !important;
        font-size: 14px !important;
      }

      .first-li {
        display: block;
      }
    }

  }

  .ul-li-divs {
    margin-top: 20px !important;

    & i {
      font-size: 20px;

    }

    .text-wrapper {
      font-size: 14px !important;
    }
  }

  .footer-section-2 {
    padding: 30px !important;
  }

  .footer-section-4 {
    .main-inner-wrapper {
      flex-direction: column-reverse;
      align-items: center !important;
    }

    /* .inter-div {
      text-align: center;
    } */
  }

  & ul {
    justify-content: center;

    & li {
      font-size: 11px !important;
      padding: 16px 25px !important;
    }
  }

  .subscribe-button-section {
    .inner-wrapper {
      & button {
        font-size: 14px;
        color: white;
        padding: 15px 80px !important;
        border: none;
        background: radial-gradient(ellipse at bottom, #ed786f, #da291c);
      }
    }
  }


  .third-section {
     .container {
        .main-inner-slider-row {
            padding: 32px;
            flex-direction: column-reverse;
        }
    }
}

}