/* Ensure the page takes full height */
body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  .customer-service-container {
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh; /* Full viewport height */
    width: 100vw;
    display: flex;
    align-items: center; /* Center content vertically */
    justify-content: start; /* Center content horizontally */
    padding: 10px; /* Add padding */
    box-sizing: border-box; 
   
  }
  
  .content {
    text-align: center;
    max-width: 600px; /* Limit max width */
    width: 100%; /* Full width up to max */
    padding: 20px; /* Padding around content */
    /* background-color: rgba(255, 255, 255, 0.9); Slightly opaque background for readability */
    /* border-radius: 8px; Rounded corners */
    margin-left: 5rem;
    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); Subtle shadow */
    
  }
  
  h3, h2, p {
    margin: 15px 0;
    color: black; /* Text color */
    
    .tick {
      color: green; /* Change tick color to green */
      margin-right: 5px; /* Optional: space between tick and text */
  }
  
  }
  h2{
    font-size: 0.7rem;
  }
  p{
    font-size: 0.8rem;
    
  }
  .ph{
    font-size:1rem;
  }
  
  
  .yellow-line {
    width: 50px;
    height: 5px;
    background-color: #f4c842; /* Yellow line */
    margin: 10px auto; /* Center the line */
  }
  
  .chat-now-btn {
    background-color: #f4c842;
    color: black;
    border: none;
    padding: 10px 20px;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 4px; /* Rounded button */
    transition: background-color 0.3s; /* Smooth transition */
  }
  
  .chat-now-btn:hover {
    background-color: #e3b234;
  }
  
  .steps {
    margin-top: 20px;
  }
  
  .steps p {
    margin: 5px 0;
    color: black;
  }
  .mc{
    font-size: 0.5rem;
  }
  /* Responsive Design */
  @media (max-width: 768px) {
    .customer-service-container {
      padding: 10px;
       
    }
  
    .content {
      width: 90%; /* Allow more width on smaller screens */
      padding: 0px; /* Adjust padding */
      margin: 0;
    }
  
    .chat-now-btn {
      /* width: 100%;  */
      padding: 15px; /* Larger padding for easier clicking */
    }
  
    h2, h3 {
      font-size: 1.5rem; /* Adjust font size for headings */
    }
  
    p {
      font-size: 1rem; /* Adjust font size for paragraphs */
    }
  }
  
  @media (max-width: 563px) {
    .customer-service-container {
      padding: 5px; /* Reduce padding on smaller screens */
      
    }
  
    .content {
      width: 90%; /* Allow more width on smaller screens */
      padding: 7.5px; /* Adjust padding */
      margin: 0;
    }
  
    .chat-now-btn {
      /* width: 100%; */
      padding: 7.5px; /* Larger padding for easier clicking */
    }
  
    h2, h3 {
      font-size: 1rem; /* Adjust font size for headings */
    }
  
    p {
      font-size: 0.5rem; /* Adjust font size for paragraphs */
    }
  }
  
  @media (max-height: 780px) {
    .customer-service-container {
      padding: 5px; /* Reduce padding on smaller screens */
    }
  
    .content {
      width: 90%; /* Allow more width on smaller screens */
      padding: 7.5px; /* Adjust padding */
      
    }
  
    .chat-now-btn {
      /* width: 100%;  */
      padding: 7.5px; /* Larger padding for easier clicking */
    }
  
    h2, h3 {
      font-size: 1rem; /* Adjust font size for headings */
    }
  
    p {
      font-size: 0.75rem; /* Adjust font size for paragraphs */
    }
    }
  
    @media (max-height:655px) {
      /* .mc{
        display: none;
      } */
  
    }
  
    @media (max-width:727px) {
      .customer-service-container{
        justify-content: center;
      }
      
      
  
      .content{
        margin-left: 0;
        
      }
    }