@charset "UTF-8";
/* CSS Document */

/* --- RESPONSIVE 100% CARD SLIDER STYLES --- */
    .slider-container {
      position: relative;
      width: 100%; 
      padding: 0 10px;
        
    }

    .slider-wrapper {
      overflow: hidden; 
      border-radius: 12px;
      /* background-image: url("images/lines.png"); background-size: 50% auto; */
      width: 100%;
        padding-top: 30px;
    }

    .slides-track {
      display: flex;
      transition: transform 0.5s ease-in-out;
      width: 100%;
    }

    .card-slide {
      min-width: 100%; 
      max-width: 100%;
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      text-align: left; 
        
    }

    .card-image-container {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; 
      overflow: hidden;
      position: relative;
    }

    .card-slide-img {
      width: 100%;
      max-width: 100%;
      height: 100%;
      object-fit: cover;       
      object-position: center;  
      display: block;
    }

    .card-content {
      padding: 24px; 
      width: 100%;
      overflow-wrap: break-word;
      word-wrap: break-word;
        background-image: url("images/background.jpg"); background-size: 30% auto ;
    }

    .card-content h3 {
      font-size: 1.4rem; 
      color: #2c3e50;
      margin-bottom: 8px;
    }

    .card-content p {
      font-size: 1rem; 
      color: #555;
      line-height: 1.4;
    }

    /* Navigation Arrows */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background-color: rgba(0, 0, 0, 0.50);
      color: #fff;
      border: none;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      font-size: 1.1rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      z-index: 20;
      transition: background-color 0.2s, color 0.2s;
    }

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

    .prev-btn { left: 20px; }
    .next-btn { right: 20px; }

    /* Media query for mobile layouts */
    @media (max-width: 768px) {
      .content {
        width: 100%;
        left: 0;
        margin-right: 0;
        padding: 20px;
      }
    }


.progress-bar-container {
      width: 100%;
      height: 10px; 
      position: absolute;
      left: 0;
      overflow: hidden;
      top: -12px; 
      background-image: radial-gradient(rgba(255, 255, 255, 0.25) 2px, transparent 2.5px);
      background-size: 12px 100%;
      background-repeat: repeat-x;
    }

    .progress-bar {
      height: 100%;
      width: 100%;
      transform-origin: left center;
      background-image: radial-gradient(#d6262b 2px, transparent 2.5px);
      background-size: 12px 100%;
      background-repeat: repeat-x;
    }


/* --- New: Evenly Spaced Image Links --- */
    .thumbnail-nav {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      
      margin-bottom: 20px;
      padding: 0;
    }

    .thumb-btn {
      flex: 1;
      background: rgba(255, 255, 255, 0.1);
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      overflow: hidden;
      padding: 0;
      aspect-ratio: 16 / 10; 
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      opacity: 0.5;
    }

    .thumb-btn img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .thumb-btn:hover {
      opacity: 0.8;
    }

    .thumb-btn.active-thumb {
      border-color: #d6262b;
      opacity: 1;
      transform: scale(1.03);
    }