body {
      font-family: 'Segoe UI', sans-serif;
      margin: 0;
      background-color: #ffffff;
      color: #000;
    }
    
     body2 {
            font-family: 'Inter', sans-serif;
            justify-content: center;
            align-items: center;
            min-height: 50vh;
            margin: 0;
            padding: 10px;
        }

        .timeline-container {
            position: relative;
            width: 100%;
            max-width: 50px;
        }

        .timeline {
                        display: flex;

            justify-content: center;
            align-items: flex-start; /* Align items to the top for consistent spacing */
            padding: 20px 0;
            position: relative;
            min-width: fit-content; /* Ensures content doesn't wrap too early */
        }

        .timeline::before {
            content: '';
            position: absolute;
            top: 50%; /* Center the line vertically */
            left: 0;
            right: 0;
            height: 4px;
            background-color: #e60000; /* Purple line */
            transform: translateY(-50%);
            z-index: 0;
        }

        .timeline-item {
            flex: 0 0 auto; /* Prevent items from growing/shrinking, allow auto width */
            width: 120px; /* Fixed width for each item */
            margin: 0 20px; /* Space between items */
            padding: 10px;
            background-color: #ffffff;
            border-radius: 12px; /* Rounded corners */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            text-align: center;
            position: relative;
            z-index: 1; /* Ensure item is above the line */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .timeline-item:hover {
            transform: translateY(-8px); /* Lift on hover */
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }

     

        .timeline-item:nth-child(even) {
            margin-top: 80px; /* Alternate items for visual separation */
        }

        .timeline-item:nth-child(odd) {
            margin-bottom: 80px; /* Alternate items for visual separation */
        }

        .timeline-date {
            font-size: 1.5em;
            font-weight: 700;
            color: #000000; /* Dark purple */
            margin-bottom: 10px;
        }

       

        .timeline-image {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin-top: 15px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .timeline-container {
                width: 100%;
                padding: 10px;
            }

            .timeline-item {
                width: 100px; /* Slightly smaller width on mobile */
                margin: 0 10px;
                padding: 20px;
            }

            .timeline-item:nth-child(even),
            .timeline-item:nth-child(odd) {
                margin-top: 60px;
                margin-bottom: 60px;
            }

            .timeline-item.left::before,
            .timeline-item.right::before {
                bottom: -20px; /* Adjust dot position for mobile */
                top: auto; /* Ensure dots are always below for simplicity on small screens */
            }
             .timeline::before {
                top: 70px; /* Adjust line position if items alternate */
            }
        }

        @media (max-width: 480px) {
            .timeline-item {
                width: 220px; /* Even smaller width on very small screens */
            }
        }

    nav {
      background-color: #111;
      position: relative;
      width: 100%;
      z-index: 1000;
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      color: #fff;
    }

    nav h1 {
      width:40px;
      height: 40px;
      align-items: center;
    }

.DFlogo {
  width: 250px;
  height: 185px;
  position: absolute;
  top: 0;
  left: 0;
}

    nav ul {
      list-style: none;
      display: flex;
    }

    nav ul li a {
      color: #fff;
      text-decoration: none;
      transition: color 0.3s;
      padding: 15px 20px;
    }

    nav ul li a:hover {
      color: #e60000;
    }

    header {
      background-image: url('../images/background.png'); /* Set background image */
    background-size: cover; /* Make image cover the entire header area */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent image from repeating */
    min-height: 400px; /* Give the header a minimum height so the background is visible */
    display: flex; /* Use flexbox to center content */
    flex-direction: column; /* Stack content vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    color: #ffffff; /* Set text color to white for better contrast */
    text-align: center; /* Ensure text is centered */
    padding: 20px; /* Add some padding around the text */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Optional: add a subtle shadow */
    }
    
     header h1 {
      font-size: 3rem;
      color: #ffffff;
      margin-bottom: 1rem;
      filter: drop-shadow(#000 1px 1px);
    }
    

    header h2 {
      font-size: 3rem;
      color: #ffffff;
      filter: drop-shadow(#000 1px 1px);
    }

    header p {
      font-size: 1.1rem;
      filter: drop-shadow(#000 1px 1px);
      font-weight: bold;
    }

    .section {
      padding: 4rem 2rem;
      max-width: 1000px;
      margin: auto;
    }
    
    .schedule {
      padding: 4rem 2rem;
      max-width: 1000px;
      margin: auto;
    }
    
    
    .giveaways {
      padding: 4rem 2rem;
      max-width: 1000px;
      margin: auto;
    }

    .section h3 {
      color: #e60000;
      margin-bottom: 1rem;
      font-size: 24px;
    }
 
   
     .schedule h3 {
      color: #e60000;
      margin-bottom: 1rem;
      font-size: 24px;
    }
    
    .giveaways h3 {
      color: #e60000;
      margin-bottom: 1rem;
      font-size: 24px;
    }
    
    .section img {
      width: 720px;
      max-height: 524px;
      border-radius: 10px;
      transition: transform 0.3s;
    }

    .section img:hover {
      transform: scale(1.03);
    }
    
    .schedule img {
      width: 300px;
      height: 447px;
      border-radius: 10px;
      transition: transform 0.3s;
    }

    .schedule img:hover {
      transform: scale(1.03);
    }

    .btn {
      display: inline-block;
      margin-top: 1.5rem;
      padding: 0.8rem 1.5rem;
      background-color: #e60000;
      color: white;
      text-decoration: none;
      font-weight: bold;
      border-radius: 5px;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #b30000;
    }
    
.product-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 30px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .product-card {
      background-color: white;
      border-radius: 20px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      text-align: center;
      padding: 30px 15px;
      transition: transform 0.2s;
    }

    .product-card:hover {
      transform: translateY(-5px);
    }

    .product-card img {
      width: 180px;
      height: 180px;
      object-fit: contain;
      margin-bottom: 15px;
    }

    .product-title {
      font-weight: bold;
      font-size: 1.1em;
      margin-bottom: 10px;
    }

    .product-desc {
      font-size: 0.85em;
      color: #555;
      margin-bottom: 15px;
      line-height: 1.4;
    }

    .product-price {
      color: #27ae60;
      font-size: 1.25em;
      font-weight: bold;
    }

    footer {
      background: #111;
      color: white;
      padding: 2rem;
      text-align: center;
    }
    
    .footer-logos {
     display: flex;
       gap: 30px;
     justify-content: center;
}

.footer-logo {
  width: 110px;
  height: 110px;
  opacity: 0.9;

}

.footer-logo1 {
  width: auto;
  height: 130px;
  opacity: 0.9;
}

.footer-logo3 {
  height: 130px;
  opacity: 0.9;
  width: auto;
  text-align: center;
}

.footer-social {
  display: flex;
    gap: 30px;
 justify-content: center;
}

.social-icon {
  width: 24px;
  height: 24px;
  opacity: 0.9;
  transition: opacity 0.3s ease;
}

.social-icon:hover {
  opacity: 1;
}

    @media (max-width: 600px) {
      nav ul {
        flex-direction: column;
      }
    }