/* Universal box-sizing */
    *, *:before, *:after {
      box-sizing: border-box;
    }

    /* Reset margins and paddings */
    body, html {
      margin: 0;
      padding: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    
    /* Wrapper for overall layout */
    .wrapper {
      margin: 0 auto;
      width: 100%;
      max-width: 1000px;
      padding: 0 20px;
    }
    
    /* Header Section */
    header {
      background-color: #4b3d35;
      padding: 20px;
    }
    .header-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    .header-left, .header-right {
      box-sizing: border-box;
    }
    .header-left {
      flex: 1;
      min-width: 300px;
    }
    .header-left img {
      display: block;
      max-width: 288px;
      width: 20%;
      height: auto;
      margin: 0 auto;
    }
    .header-left h1,
    .header-left h2 {
      margin: 10px 0;
      text-align: center;
      color: #ffffff;
      font-family: Arial, sans-serif;
    }
    .header-left h1 { font-size: 24px; }
    .header-left h2 { font-size: 18px; }
    .gradient-line {
      border: none;
      height: 5px;
      background: linear-gradient(to right, #1f406d, #0fb2e9, #1f406d);
      box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
      margin: 10px auto;
      width: 80%;
    }
    .header-right {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      min-width: 300px;
    }
    .header-right img {
      max-width: 80%;
      height: auto;
    }
    
    /* Benefits Section */
    .benefits {
      padding: 20px 0;
    }
    .benefits h2 {
      text-align: center;
    }
    .benefits ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 15px;
      font-size: 20px;
    }
    .benefits li {
      display: flex;
      align-items: center;
    }
    .benefits li img {
      width: 30px;
      height: 23px;
      margin-right: 10px;
      flex-shrink: 0;
    }
      
      
    .header-right {
  flex: 1;
  display: flex;
  flex-direction: column; /* Stack image and buttons vertically */
  align-items: center;
  min-width: 300px;
}

.cta-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.cta-btn {
  display: inline-block;
  text-align: center;
  padding: 10px 20px;
  min-width: 120px;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(90deg, #8d909f, #d6d6e0, #8d909f);
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
}


      
      
      /* Footer Section */
footer.footer {
  background-color: #4b3d35;
  padding: 20px 0;
  color: #ffffff;
  text-align: center;
    margin-top:50px;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.footer-logo {
  max-width: 100px; /* Adjust as needed */
  width: auto;
}

footer a {
  color: #ffffff;
  text-decoration: none;
}





/* Screen Selection Section (Multiple Options) */
.screen-selection {
  background-color: #ffffff;
  padding: 20px 0;
  color: #4b3d35;
  text-align: center;
}
.screen-selection h2 {
  margin-bottom: 20px;
}
.screen-selection p span {
  font-size: 14px;
  color: grey;
}
.screen-form {
  max-width: 600px;
  margin: 0 auto;
}
.screen-form table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.screen-form th,
.screen-form td {
  padding: 10px;
  border: 1px solid #ddd;
}
.screen-form th {
  background-color: #f4f4f4;
}
.screen-form input[type="number"] {
  padding: 6px;
  width: 80px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.screen-form p {
  font-size: 1.2em;
  margin: 10px 0;
}
.screen-form form {
  margin-top: 20px;
}
.screen-form input[type="submit"].cta-btn {
  padding: 10px 20px;
  min-width: 150px;
  border-radius: 8px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  background: linear-gradient(90deg, #8d909f, #d6d6e0, #8d909f);
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: none;
  cursor: pointer;
}
.screen-form input[type="submit"].cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.4);
}







      
      
    @media (max-width: 768px) {
      .header-wrapper {
        flex-direction: column;
        text-align: center;
      }
      .header-left, .header-right { width: 100%; }
    }
    @media (max-width: 500px) {
      .benefits-container {
        text-align: center;
      }
      .benefits ul { display: inline-grid; }
    }
    
    /* Info Section (Dark Background) */
    .info {
      background-color: #4b3d35;
      padding: 40px 0;
      color: #ffffff;
        margin:30px 0;
    }
    .info-container {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .info-left {
      flex: 0 0 30%;
      transform: translateY(50px);
      opacity: 0;
      transition: transform 1s ease-out, opacity 1s ease-out;
    }
    .info-left.animate-up {
      transform: translateY(0);
      opacity: 1;
    }
    .info-left img {
      width: 100%;
      height: auto;
    }
    .info-right { flex: 1; }
    .info-right h2 { margin-top: 0; }
    @media (max-width: 768px) {
      .info-container {
        flex-direction: column;
        text-align: center;
      }
      .info-left { width: 30%; }
      .info-right { width: 100%; }
    }
    
    /* White Info Section */
    .info-white {
      background-color: #ffffff;
      padding: 20px 0;
      color: #4b3d35;
    }
    .info-white-container {
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .info-white-left { flex: 1; }
    .info-white-right {
      flex: 0 0 30%;
      transform: translateY(50px);
      opacity: 0;
      transition: transform 1s ease-out, opacity 1s ease-out;
    }
    .info-white-right.animate-up {
      transform: translateY(0);
      opacity: 1;
    }
    .info-white-right img {
      width: 100%;
      height: auto;
    }





/* Card Section */
    .screen-cards {
      background-color: #ffffff;
      padding: 40px 0;
      color: #4b3d35;
    }
.screen-cards p {
  text-align: center;
}
    .cards-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
      gap: 20px;
    }
    .card {
      background: #f7f7f7;
      border-radius: 8px;
      box-shadow: 2px 2px 6px rgba(0,0,0,0.2);
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .card img {
      width: 100%;
      height: auto;
      border-radius: 4px;
      margin-bottom: 15px;
    }
    .card h3 {
      margin: 0 0 10px 0;
      font-size: 20px;
    }
    .card ul {
      list-style: none;
      padding: 0;
      margin: 0 0 15px 0;
    }
    .card ul li {
      margin-bottom: 5px;
      position: relative;
      padding-left: 20px;
    }
    .card ul li:before {
      content: "\2022"; /* bullet symbol */
      position: absolute;
      left: 0;
      color: #8d909f;
    }

    .card a {
    text-decoration: none;
  
    }

    .card a:hover {
    color: grey;
  
    }
    .card .price {
      font-size: 18px;
      font-weight: bold;
      text-align: center;
      margin-top: auto;
    }
.card .price span {
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      margin-top: auto;
  color: darkgrey;
    }




    @media (max-width: 768px) {
      .info-white-container {
        flex-direction: column;
        text-align: center;
      }
      .info-white-right { width: 100%; }
    }