/* Reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Header */

    nav ul {
      display: flex;
      list-style: none;
      gap: 1.5rem;
    }
    nav a {
      text-decoration: none;
      color: #333;
      font-size: 0.95rem;
    }
    nav a:hover {
      color: #000;
      font-weight: 600;
    }
      
    /* Hero */
    .hero {
      display: flex;
      flex-wrap: wrap;
      min-height: 50vh;
      align-items: center;
      background: #f2f2f2;
    }
    .hero-text {
      flex: 1;
      padding: 2rem 5%;
    }
    .hero-text h1 {
      font-size: 2.8rem;
      margin-bottom: 1rem;
      font-weight: 700;
      color: #c5132bff;
    }
    .hero-text p {
      margin-bottom: 1.5rem;
      color: #555;
    }
    .hero-text button {
      background: #333;
      color: #fff;
      border: none;
      padding: 0.9rem 1.6rem;
      cursor: pointer;
      font-size: 1rem;
      border-radius: 4px;
    
    }
    .hero-text button:hover {
      background: #000;
    }
    .hero-image {
      flex: 1;
      min-height: 300px;
      background: 
        center/cover no-repeat;
    }
      .buttonlgn{
          background-color: #c5132bff !important;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
          color:white;
      }
      .lightimage{
        padding-bottom: 10%; padding-left: 10%; padding-top: 1%;
      }
      img{
      height: 300px;
      width: 450px;
          
      }

    /* Reasons section */
    .reasons {
      text-align: center;
      padding: 3rem 8%;
      
    }
    .reasons h2 {
      max-width: 700px;
      margin: 0 auto 3rem;
      font-size: 1.4rem;
      color: #444;
      font-weight: normal;
    }
    .reason-cards,.row-two {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      justify-content: center;
    }
    .row-flex{
      flex: 1;
      min-width: 260px;
     text-align: left;
     min-height: 20vh;
      }
      .summary{ 
        padding-left:10%;
        padding-top: 10%;
      }
    .reason {
      flex: 1;
      min-width: 200px;
      background: #fff;
      border: 1px solid #ddd;
      padding: 1.5rem;
      text-align: left;
      border-radius: 6px;
      transition: box-shadow 0.3s ease;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    }
    .reason:hover {
      box-shadow: 0 6px 18px rgba(0,0,0,0.1);
    }
    .reason span {
      display: block;
      font-size: 0.9rem;
      color: #777;
      margin-bottom: 0.5rem;
    }
    .reason p {
      font-size: 1rem;
      color: #333;
    }
    
    .card-title{
        min-height: 4vh;
        color:white;
        text-align: center;
      }
    .card-title-black{
        min-height: 4vh;
        background-color: black;
       
      }
    .card-title-red{
        min-height: 4vh;
        background-color: #c5132bff;
        
      }
      .card-title-blue{
        min-height: 4vh;
        background-color: rgb(169,169,169);
       
      }
    /* Responsive */
    @media (max-width: 768px) {
      .hero {
        flex-direction: column;
      }
      .hero-text h1 {
        font-size: 2rem;
      }
    }