/* =====================================================================
   CHELSEA CONCRETE — STYLESHEET
   Organized section-wise to match the Blade template (home page).
   Rule: All values, classes & IDs are UNCHANGED — only reordered
   and commented for clarity. All @media queries are combined into
   ONE single Media Query zone at the very end of this file.
   ===================================================================== */


/* =====================================================================
   SECTION 0: LEGACY / COMMENTED-OUT BANNER SLIDER
   (Corresponds to the old <section class="banner-section-two"> block
   that is currently commented out in the Blade file. Kept as-is,
   not deleted, since markup may be re-enabled later.)
   ===================================================================== */


/* =====================================================================          HOME PAGE CSS START                        ===================================================================== */

.banner-container {
  position: relative;
  overflow: hidden;
  height: 640px;
  padding-top: 118px;
}

.banner-slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 2s ease-in-out, transform 3s ease-in-out;
  background-size: cover;
  background-position: center;
  transform: scale(1);
}

.banner-slide.active {
  opacity: 1;
  transform: scale(1.3); /* Zoom effect */
}

.banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: black;
  opacity: 0.1;
}

.banner-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: end;
  height: 100%;
  color: white;
  text-align: start;
  padding: 40px 0;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.banner-content h4 {
  color: #fff;
  font-size: 1rem;
  margin-top: 0;
  font-family: 'Times New Roman';
}

.banner-content h1 {
  color: #fff;
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
}

.banner-content p {
  font-size: 50px;
  font-weight: 700;
  margin-top: 0;
  text-transform: uppercase;
  color: #fff;
}

.banner-content a {
  margin-top: 0;
  padding: 0.5rem 0.75rem;
  color: white;
  font-weight: 600;
  border-radius: 0.25rem;
  text-align: center;
  width: 100%;
  max-width: 150px;
  background-color: #6d0d0f;
  text-decoration: none;
}


/* =====================================================================
   SECTION 1: VIDEO HERO
   (<section class="cc-video-hero"> — full-screen background video
   with heading + paragraph + CTA buttons)
   ===================================================================== */

.cc-video-hero {
  position: relative;
  top: -68px;
  margin-bottom: -68px;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: #000;
}

.cc-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .75;
  filter: saturate(150%) contrast(120%) brightness(110%);
}

.cc-video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 1;
}

.cc-video-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  color: #fff;
  max-width: 860px;
  margin: 0 auto;
}

.cc-video-content span {
  display: block;
  font-size: 44px;
  font-weight: 600;
  font-variant: small-caps;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0,0,0,.6);
  margin-bottom: 18px;
}

.cc-video-content p {
  font-size: 16px;
  color: #ddd;
  margin-bottom: 28px;
  line-height: 1.7;
  max-width: 700px;
}


/* =====================================================================
   SECTION 2: IMAGE SLIDER
   (<section class="cc-slider-section"> — full-screen swipeable
   product image slides with caption, arrows & dots)
   ===================================================================== */

.cc-slider-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 500px;
  overflow: hidden;
  background: #000;
}

.cc-slider-wrap {
  display: flex;
  height: 100%;
  transition: transform .6s ease-in-out;
}

.cc-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.cc-slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .55;
}

.cc-slide-caption {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  color: #fff;
}

.cc-slide-caption span {
  display: block;
  font-size: 44px;
  font-weight: 500;
  font-variant: small-caps;
  line-height: 1.2;
  text-shadow: 2px 2px 8px rgba(0,0,0,.7);
  margin-bottom: 14px;
}

.cc-slide-caption p {
  font-size: 16px;
  color: #ddd;
  margin-bottom: 22px;
  line-height: 1.6;
  max-width: 600px;
}


/* =====================================================================
   SECTION 2a: SHARED CTA BUTTONS
   (.cc-btn-group / .cc-btn-primary / .cc-btn-secondary — reused
   inside both the Video Hero section and the Image Slider section)
   ===================================================================== */

.cc-btn-group {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.cc-btn-primary {
  border-radius: 50px;
  display: inline-block;
  background: #fff;
  color: #000;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  line-height: 1;
  transition: opacity .2s;
}

.cc-btn-primary:hover {
  opacity: .85;
  color: #000;
}

.cc-btn-secondary {
  display: inline-block;
  background: transparent;
  color: #fff;
  border: 1px solid #fff;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  line-height: 1;
  border-radius: 50px;
  transition: background .2s;
}

.cc-btn-secondary:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}


/* =====================================================================
   SECTION 2b: IMAGE SLIDER — NAV ARROWS
   (#ccPrev / #ccNext prev-next controls inside .cc-slider-section)
   ===================================================================== */

.cc-arrow {
  position: absolute;
  top: 55%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(255, 255, 255);
  border: 1px solid rgba(255,255,255,.4);
  color: #0000000;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s;
}

.cc-arrow:hover {
  background: rgba(255, 255, 255, .38);
}

.cc-arrow-left  { left: 24px; }
.cc-arrow-right { right: 24px; }


/* =====================================================================
   SECTION 2c: IMAGE SLIDER — DOTS
   (#ccDots pagination dots inside .cc-slider-section)
   ===================================================================== */

.cc-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

.cc-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background .25s, transform .2s;
}

.cc-dot.active {
  background: #fff;
  transform: scale(1.25);
}


/* =====================================================================
   SECTION 3: "A LITTLE ABOUT US" / OUR STORY
   (<section class="normal-section"> containing two
   .Our-story-Container blocks with text + image)
   ===================================================================== */

.normal-section {
  margin: 0px;
  position: relative;
  z-index: 10; /* make sure it shows above fixed slider */
  background: #000;
  padding: 40px 0px 30px 0px;
  text-align: center;
}

.Our-story-Container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px 15px 50px 15px;
}

.content-section {
  display: flex;
  gap: 70px;
}

.text-content {
  color:#fff;
  max-width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
}

.img-content {
  border-radius: 10px;
  background-image: url("frontend/assets/images/background/6.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 600px; /* Corrected 'PX' to 'px' */
  max-width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* Needed for pseudo-element overlay */
  background-color: #000; /* Fallback background color */
  padding: 70px;
}

/* Add dark overlay using ::before pseudo-element */
.img-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Dark overlay with 50% opacity */
  border-radius: 10px; /* Match border-radius of parent */
  z-index: 1; /* Place overlay behind content */
}

/* Ensure content stays above the overlay */
.img-content > * {
  position: relative;
  z-index: 2; /* Content appears above the overlay */
}

.img-content img {
  max-width: 70%;
  height: auto;
  z-index:99;
}

.text-content h4 {
  color: #fff;
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: left;
}

.text-content h1 {
  font-variant: small-caps;
  font-weight: 700;
  color: #fff;
  font-size: 2.5em;
  margin-bottom: 20px;
  text-align: left;
}

.text-content p {
  font-size: 1em;
  line-height: 1.5;
  margin-bottom: 20px;
  text-align: left;
}

.text-content ul {
  list-style-type: disc;
  padding-left: 20px;
  margin-bottom: 20px;
}

.text-content ul li {
  margin-bottom: 10px;
  text-align: left;
}

.text-content button {
  text-align: center;
  background-color: #6d0d0f;
  border: none;
  border-radius: 50px;
  max-width: 150PX;
  padding: 0.75rem 1.875rem;
}

.text-content button a {
  color: #fff;
  text-decoration: none;
  font-size: 1em;
}

.text-content button:hover {
  background-color: #6d0d0f;
}


/* =====================================================================
   SECTION 4: GENERIC CONTAINER (1st definition)
   (Used as the wrapping .container for the Marquee / Brand Logos
   section directly below in the markup)
   ===================================================================== */

.container {
  max-width: 1280px;
  margin: 0 auto;
  overflow: hidden;
  padding: 20px 0;
}


/* =====================================================================
   SECTION 5: BRAND LOGOS MARQUEE
   (<div class="container"><div class="marquee"> — auto-scrolling
   collaboration/brand logos strip)
   ===================================================================== */

.marquee {
  display: flex;
  animation: scrollLeft 30s linear infinite;
  width: max-content;
}

.brand-logos {
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  margin: 0 10px;
}

.brand-logos img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.brand-logos:hover img {
  transform: scale(1.1);
}

@keyframes scrollLeft {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


/* =====================================================================
   SECTION 6: GENERIC CONTAINER (2nd definition) + "OUR PRODUCTS" HEADING
   (Note: this redefines .container with different padding than
   SECTION 4 above — kept exactly as in the original file, since
   values must not be changed. It wraps the "OUR PRODUCTS" heading
   and the products slider below.)
   ===================================================================== */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
}

.heading {
  text-align: center;
  margin-bottom: 40px;
}

.heading h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #111827;
}

.heading p {
  font-size: 1.125rem;
  color: #4b5563;
  margin-top: 8px;
}


/* =====================================================================
   SECTION 7: "OUR PRODUCTS" SLIDER
   (#slider .slider-track .product-card — horizontally sliding
   product cards with overlay text + nav-btn arrows)
   ===================================================================== */

.slider-container {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1),
              0 8px 10px -6px rgb(0 0 0 / 0.1);
  overflow: hidden;
}

.slider-track {
  display: flex;
  gap: 20px;
  transition: transform 0.6s ease-in-out;
}

.product-card {
  width: 262px;           /* Fixed width as requested */
  height: 393px;          /* Fixed height as requested */
  flex-shrink: 0;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  transition: all 0.4s ease;
}

.product-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.15);
}

.product-card img {
  width: 100%;
  height: 320px;          /* Image height adjusted to fit card */
  object-fit: cover;
  display: block;
}

.overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
  color: white;
  padding: 20px 16px 16px;
  text-align: center;
  font-weight: 600;
  font-size: 1.1rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* Navigation Arrows */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: white;
  padding: 4px 10px;
  border-radius: 50%;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  color: #374151;
  border: none;
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
}

.nav-btn:hover {
  background-color: #fff;
}

.nav-left  { left: 16px; }
.nav-right { right: 16px; }


/* =====================================================================
   SECTION 8: "JOIN THE JOURNEY" HERO BANNER
   (<div class="hero-container"><section class="hero-banner-box"> —
   bottom-of-page video banner with subtitle, title & CTA button)
   ===================================================================== */

/* Base Container & Boundaries */
.hero-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background-color: #000000;
}

/* Core Layout Window */
.hero-banner-box {
  position: relative;
  width: 100%;
  height: 550px; /* Solid default height for desktop views */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Full Screen Background Video formatting */
.hero-video-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.45; /* Darkens the video background automatically */
  z-index: 1;
}

/* Content Text Wrapper Overlay */
.hero-text-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 850px;
  padding: 20px;
  text-align: center;
}

/* Small Tagline Text */
.hero-subtitle {
  color: #ffffff;
  font-size: 22px;
  font-weight: 300;
  margin-bottom: 15px;
  letter-spacing: 1px;
}

/* Main Headline Text */
.hero-main-title {
  color: #ffffff;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.4;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 30px;
}

/* Button Center Alignment */
.hero-button-wrapper {
  display: flex;
  justify-content: center;
}

/* Call To Action Button Layout */
.hero-cta-button {
  background-color: #ffffff;
  border: none;
  border-radius: 50px !Important;
  padding: 12px 30px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.hero-cta-button:hover {
  background-color: #e5e5e5;
}

.hero-cta-button a {
  color: #000000;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
}


/* =====================================================================
   SECTION 9: GLOBAL BUTTON OVERRIDE
   (Applies to Bootstrap's generic .btn-primary used e.g. on the
   contact "Submit Now" form button)
   ===================================================================== */

.btn-primary {
  border-radius: 50px !important;
}


/* =====================================================================
   =====================================================================
   RESPONSIVE / MEDIA QUERIES  —  ALL BREAKPOINTS COMBINED HERE
   Grouped by breakpoint (768px → 600px → 480px), sequence-wise in
   the same order the sections appear above. Nothing here changes
   any value — only relocated + commented for readability.
   =====================================================================
   ===================================================================== */

/* ---------------------------------------------------------------------
   BREAKPOINT: max-width: 768px
   --------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* SECTION 1 & 2: Video Hero + Image Slider — captions & arrows */
  .cc-video-content span,
  .cc-slide-caption span {
    font-size: 28px;
  }

  .cc-video-content p,
  .cc-slide-caption p {
    font-size: 14px;
  }

  .cc-arrow {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .cc-slider-section {
    position: relative;
    width: 100%;
    height: 700px;
  }

  .cc-arrow-left  { left: 12px; }
  .cc-arrow-right { right: 12px; }

  /* SECTION 7: Our Products Slider — product cards & heading */
  .product-card {
    width: 240px;
    height: 360px;
  }
  .product-card img {
    height: 290px;
  }
  .heading h1 {
    font-size: 2rem;
  }

  /* SECTION 8: Join the Journey Hero Banner */
  .hero-banner-box {
    height: 680px; /* Gives text more vertical breathing room on narrow viewports */
  }

  .hero-text-content {
    padding: 10px;
  }

  .hero-subtitle {
    font-size: 40px;
    margin-bottom: 10px;
  }

  .hero-main-title {
    font-size: 36px; /* Prevents text from extending off-screen or clipping edges */
    line-height: 1.3;
    margin-bottom: 20px;
  }

  .hero-cta-button {
    padding: 10px 20px;
  }
}


/* ---------------------------------------------------------------------
   BREAKPOINT: only screen and (max-width: 600px)
   --------------------------------------------------------------------- */
@media only screen and (max-width: 600px) {

  /* SECTION 3: Our Story — content-section layout stack */
  .content-section {
    display: grid;
    gap: 45px;
    margin-top: 40px;
  }

  .text-content {
    max-width: 100%;
    padding: 2px;
  }

  .img-content {
    margin-top:20px;
    max-width: 100%;
  }

  /* SECTION 5: Brand Logos Marquee */
  .Video-Contain {
    padding: 10px 20px !important;
  }
}


/* ---------------------------------------------------------------------
   BREAKPOINT: max-width: 480px
   --------------------------------------------------------------------- */
@media (max-width: 480px) {

  /* SECTION 1 & 2: Video Hero + Image Slider — captions, buttons, arrows */
  .cc-video-content span,
  .cc-slide-caption span {
    font-size: 22px;
  }

  .cc-video-content p,
  .cc-slide-caption p {
    font-size: 13px;
    margin-bottom: 16px;
  }

  .cc-btn-primary,
  .cc-btn-secondary {
    padding: 8px 16px;
    font-size: 13px;
  }

  .cc-arrow {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  /* SECTION 7: Our Products Slider — product card */
  .product-card {
    width: 100%;
    max-width: 262px;
    margin: 0 auto;
  }
}


/* =====================================================================          HOME PAGE CSS END HERE                        ===================================================================== */