/* 🌟 General Styling */
/* body{
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
} */


/* 🌟 Default Styling (Desktop) */
.hero-section {
    position: relative;
    text-align: center;
    margin-bottom: 60px;
    padding: 150px 0;
    background: linear-gradient(45deg, rgba(13, 110, 253, 0.3), rgba(231, 187, 190, 0.3));
    background-image: url(Crausol\ Image/005.jpg);
    background-repeat: no-repeat;  /* 🔹 Image Repeat नहीं होगी */
background-size: cover;        /* 🔹 पूरे सेक्शन को कवर करेगी */
background-position: center; 

  }
  
  .hero-section .hero-bg-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
  }
  
  .hero-title h1 {
    font-size: 48px;
    color: #ffffff;
    font-weight: bold;
    /* flex-wrap: nowrap;    */
    font-family: var(--ztc-family-font1); 
  }
  
  .breadcrumb-link {
    font-size: 18px;
    color: #007bff;
    text-decoration: none;
  }
  
  /* ✅ 🌟 Responsive Design */
  
  /* 🔹 Tablet View (768px - 1024px) */
  @media (max-width: 1024px) {
    .hero-section {
      padding: 200px 0;
    }
  
    .hero-title h1 {
      font-size: 36px;
    }
  
    .breadcrumb-link {
      font-size: 16px;
    }
  }
  
  /* 🔹 Mobile View (Up to 767px) */
  @media (max-width: 767px) {
    .hero-section {
      padding: 120px 0;
    }
  
    .hero-bg-image {
      max-height: 250px;
    }
  
    .hero-title h1 {
      font-size: 28px;
    }
  
    .breadcrumb-link {
      font-size: 14px;
    }
  }