/* custom-theme.css */

/* Override Bootstrap’s default colors with our chosen palette */
:root {
    --bs-primary:    #f58b97;  /* Light Pink */
    --bs-secondary:  #02c3bc;  /* Light Pink */
    --bs-info:       #FFD8D1;  /* Soft Peach (optional) */
    --bs-light:      #F8F9FA;  /* Keep default light or adjust as needed */
    --bs-dark:       #212529;  /* Keep default dark or adjust as needed */
  
    /* You can override additional variables if you want:
       --bs-success, --bs-warning, --bs-danger, etc. */
  }
  
  /* Example custom body styling */
  body {
    background-color: #04c9c0; /* A light gray/white background */
    color: #333;               /* Dark text for contrast */
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 10px;
  }
  
  html,
  body, main {
    height: 100%;
  }

  /* Optionally style buttons or other elements specifically */
  .btn-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
  }
  
  .btn-secondary {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
  }

  .btn-info {
    background-color: var(--bs-info);
    border-color: var(--bs-info);
  }
  
  h2 {
    color: var(--bs-primary);
    font-size: 1.5rem;
    font-variant-caps: all-small-caps;
  }

/* Container that holds the video and the overlay content */
.video-bg-container {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden;
}

/* Fullscreen video styling */
.video-bg-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Crop/cover the entire area */
  z-index: -1;        /* Place behind overlay content */
}

/* Overlay content on top of the video */
.overlay-content {
  position: relative;
  z-index: 1;
  color: #fff;               /* White text for contrast */
  text-align: center;        /* Center the text */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2rem;
}

.product {
  color: #e6818f;
  font-weight: bold;
  text-decoration:none;
}